membuat desain web di photoshop

Web Desain tak pernah lepas dari seni. Dan banyak orang yang jago membuat sketch design tapi masih belum mengerti mengenai desain web di photoshop. Dalam web design, software paling mum untuk membuat desain web yaitu photoshop.

Bagi para master boleh ikut nyimak sekaligus memberi masukan-masukan dalam tutorial ini.
Dan langkah ini adalah experience saya dalam membuat web desain "Yearbook Online" yang bertujuan membuat buku kenangan SD/SMP/SMA secara online. Langsung saja kita mulai :

Apa saja yang harus dilakukan ?

1. sketch

Dalam sketch ini tumpahkan semua inspirasi yang akan menjadi bayangan website yang akan dibuat. Tanpa batas dan sekreatif mungkin. Sebelum masuk ke tahap photoshop.

2. Penerapan desain di photoshop

Buka photoshop kalian dan mulai buat ukuran yang di inginkan, disini kita akan membuat dalam ukuran maksimal 1900 x 1080 Pixel.

Garis biru adalah guide kita untuk menentukan posisi agar simetris. Dan hal yang tak kalah penting adalah membuat GROUP di layer kita.

GROUPS LAYER

Gambar diatas menunjukan bagian bagian penting dalam komponen desain web kita.

• Navbar
• Wellcome (home)
• Class (pemilihan kelas)
• Content (isi konten)

Pada folder navbar biatkan pada posisi visible karena sebagai header web.

Dan langkkah pertama kita membuat homepagenya, sebagai wellcome page harus terlihat menarik dan simple.

 Di homepage kita membuat 3 gambar yang di gunakan untuk slide. Dalam mendesain web tampilan slider juga harus diperliatkan gambar apa saja yang akan dimunculkan. Bagaimana caranya ? baca next step ya. 

Oke, selanjutnya kita mendesain bagian class.

image normal 1.1

Di bagian Class ini kita harus membuat desain yang interaktif pada layer photoshop agar orang yang akan membuat coding mengerti maksud ketika gambar di hover ataupun di klik. Ataupun membuat slider, cara yang digunakan hampir sama dengan bagian ini, mudah kok begini contaohnya.

<< Layer ketika tampilan default.


Layer ketika on hover pada gambar >>

image hover 1.2

 Perhatikan image 1.1 dan 1.2 diatas. Terlihat perbedaaan ketika normal dan hover. Begitu juga dengan image lainya diberikan efek yang sama. Cara ini menggunakan visible dan disable di samping layer photoshop. dengan klik icon mata tsb maka kita bisa mengatur gambar mana yang terlihat dan gambar mana yang tidak terlihat. tinggal diatr saja posisi gambarnya dan tinggal klik icon mata tsb untuk mengubah tampilan efeknya.

Selanjutna memasuki step content, 

Kembali ke cara yang sama dengan step sebelumnya. Di page ini kita memberikan efek lightbox pada image gallery nya. ketika di klik pada gambar maka akan muncul tampilan lightboxnya seperti image 2.2.

Berikut penyusunan layer untuk clipping mask thumbnail.

<< Ketika gambar muncul

Ketika gambar kosong >>

Dan gambar diatas menunjukan ketika layer di on-off kan.

image 2.1

 Image thumbnail juga harus didesain dengan interaktif. Dengan menggunakan teknik clipping mask. 

 memunculkan lighbox menggunakan folder baru bernama hover-image. jika lightbox off maka tinggal klik icon mata disamping layer folder tsb.

image 2.2

Gambar 2.2 hasil lightbox dari image thumbnail 1

untuk thumbnail 2,3,4... dan selanjutnya bisa menerapkan hal yang sama.

Dan oke itu tadi sedikit tutorial untuk membuat desain web di photoshop yang baik dan modern. Mendesain sebuah UI/UX Website itu tidak sembarang desain. Kita juga harus tahu seberapa komposisi jika web ini ditampilkan di layar. Maka dari itu perlu belajar antara desain dan coding meskipun tak mahir coding, tapi setidaknya mengerti dasarnya.

Contoh Penggunaan for dalam PHPPHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuahsitus web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994. Pada awalnya PHP adalah singkatan dari "Personal Home Page Tools". Selanjutnya diganti menjadi FI ("Forms Interpreter"). Sejak versi 3.0, nama bahasa ini diubah menjadi "PHP: Hypertext Prepocessor" dengan singkatannya "PHP". PHP versi terbaru adalah versi ke-5. Berdasarkan survey Netcraft pada bulan Desember 1999, lebih dari sejuta site menggunakan PHP, di antaranya adalah NASA, Mitsubishi, dan RedHat.

penggunaan for dalam php

<?php

/* contoh1 */

for ($i = 1990; $i <= 2000; $i++) {

echo “$i”;

}

echo “<br><br>”;

/* contoh2 */

for ($i= 1990; ; $i++) {

if ($i> 2000) {

break;

}

echo “$i”;

}

echo “<br><br>”;

/* contoh3 */

$i= 1990;

for (; ; ) {

if ($i> 2000) {

break;

}

echo “$i”;

$i++;

} echo “<br><br>”;

/* contoh4 */

for ($i = 1990; $i <= 2000; print “$i “, $i++);

?>

membuat animasi dengan obyek mobil

Cara Pembuatan Animasi Mobil Berjalan Pada Macromedia Flash MX Professional 2004

Banyak orang sangat ingin tahu bagaimana membuat suatu animasi menggunakan komputer.

Berikut saya jelaskan bagaimana membuat animasi singkat sebagai tahap awal bagi para pemula yang ingin belajar membuat animasi.

Cara membuat animasi mobil berjalan :

1. Sebelum membuat desain mobil keseluruhan, terlebih dahulu kita harus membuat desain gambar ban untuk mobil       tersebut.

Kenapa ban nya terlebih dahulu harus kita desain???

Itu karena pada mobil yang paling nampak bergerak untuk dijadikan animasi adalah bagian ban

2. Setelah di desain ban nya, blok gambar ban nya,

Tekan F8 lalu ketikkan ” ban ” Lalu Klik OK

Setelah itu double klik gambar ban tersebut sampai tertera tulisan Scene 1    ban pada bagian atas dibawah menu bar seperti gambar di bawah ini :

3.   Pilih di frame mana akan kita letakkan frame kedua lalu Klik kanan pada frame tersebut pilih Insert Keyframe

4. Klik kanan pada frame kedua tadi lalu pilih Create Motion Tween pada frame kedua

5. Klik kanan pada frame pertama tadi lalu pilih Create Motion Tween pada frame pertama juga

6. Pada Properties, Pilih Kotak Rotate, Lalu pilih CW atau CCW

7. Setelah itu Klik Scene 1

8. Blok & Copy objek ban Lalu desain lah bodi mobil nya. Lalu Klik kanan pada frame ke-2, Insert Keyframe

9. Lalu klik kanan pada Frame Ke-2, pilih & klik Create Motion Tween

10. Begitu juga pada Frame pertama, pilih & klik Create Motion Tween, sehingga akan muncul tanda panah pada frame seperti gambar dibawah ini :

11. Klik kanan pada Layer, pilih Add Motion Guide

12. Pada Layer Guide, Gambarkan garis jalur menggunakan pencil

13. Klik Frame pertama, Lalu letakkan object pada ujung posisi awal

14. Klik Frame kedua, Lalu letakkan object pada ujung posisi akhir

15. Lalu Jalankan Menggunakan CTRL + ENTER

Selamat mencoba…

membuat jam analog di flash

Cara membuat jam analog dengan macromedia flash (adobe flash)

cara membuat jam analog pada macromedia flash (adobe flash)

pada kali ini saya akan menjelaskan bagaimana cara membuat jam analog                                           pada macromedia flash (adobe flash) mungkin jam analog sudah tak asing                                         lagi di mata kalian tapi dalam penjelasan kali ini saya akan menjelaskan                                       langkah demi langkah dengan detail untuk anda yg ingin membuatnya,                                                 style jam bisa di ubah dengan menggunakan foto kalian yg sedang bergaya                                       hehe, dan nantinya hasil file swf bisa dijadikan sebagai walpaper handphone                                       yg mendukung file swf, seperti nokia

mari langsung saja ketahapannya

1. langkah awal seperti biasa buat project flash baru

2. lalu buat 5 layer ( insert layer) dan beri nama cover, jam , menit detik,                                               dan baground jam, letakan secara berurutan dari atas ke bawah, lihat                                                 gambar 2.0

gambar 2.0

3. lalu buatlah 3 buah jarum menggunakan rectangle

tool pertama jarum jam, jarum menit dan jarum detik

seperti pada gambar 3.0.

gambar 3.0

gambar 3.1

• pertama buat jarum jam di layer jam setelah itu                                                             convert to symbol (F8), pilih type Movie clip pada titik                                                registration pilih paling bawah tengah (b2), lalu berinama                                                  jarum jam pada instance name,seperti pada gambar 3.1
• seperti pada langkah sebelumnya buat jarum menit                                                            di layer menit setelah itu convert to symbol (F8),                                                                pilih type Movie clip pada titik registration pilih paling                                                        bawah tengah (b2),lalu beri nama jarum menit pada instance                                               name seperti pada gambar 3.1
• selanjutnya buat jarum detik di layer detik setelah                                                             itu convert to symbol (F8), pilih type Movie clip pada                                                             titik registration pilih paling bawah tengah (b2), lalu beri                                                   nama jarum detik pada instance name seperti pada gambar 3.1

4. selanjutnya letakan ketiga jarum tersebut secara sejajar

5. kemudian buat lingkaran menggunakan oval tool pada layer cover                                                          lihat gambar 5.0

gambar 5.0

6. setelah itu buat kotak atau bebas ( bisa juga gambar atau foto)                                                           pada layer baground jam ,di sini saya membuatnya sederhana                                                              menggunakan rectangle tool, lalu buat nomer 1 sampai 12                                                                    menggunakan static text dan taruh ke 12 nomer tersebut                                                                    secara beraturan seperti layaknya jam dinding di rumah anda

7. setelah semua langkah telah di kerjakan lalu seleksi seluruh objek                                                  atau layer dan convert to symbol dengan type movie clip lihat gambar 7.0

gambar 7.0

8. selanjutnya buka panel action pada movie clip 

yg tadi di buat lalu masukan scrip berikut ini

onClipEvent (enterFrame) {

MyDate = new Date();

hour = MyDate.getHours();

minute = MyDate.getMinutes();

second = MyDate.getSeconds();

rotasijam=hour*12;

rotasimenit=minute*6;

rotasidetik=second*6;

if (hour > 11) {

hour = hour-12;

}

this.jarumjam._rotation=rotasijam;

this.jarummenit._rotation=rotasimenit;

this.jarumdetik._rotation=rotasidetik;

}

setelah semuanya telah selesai dilakukan lalu tekan Ctrl + Enter                                                           untuk melihat hasilnya

selamat mecoba :) 

Membuat Desain Website Berbasis HTML Dengan Notepad++

Membuat Desain Website Berbasis HTML Dengan Notepad++

 Pengenalan Tag Pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan <x> dan ditutup dengan </x> dimana x adalah perintah dari apa yang kita inginkan.

·         Daftar Tag Pada HTML

ELEMEN DASAR
Jenis Dokumen	<HTML></HTML>	(terdapat pada awal dan akhir dari file HTML)
Judul	<TITLE></TITLE>	(harus selalu terdapat pada mukadimah)
Mukadimah (Header)	<HEAD></HEAD>	(keterangan umum, seperti judul dsb.)
Batang Tubuh	<BODY></BODY>	(isi dari halaman HTML)

FORMAT TAMPILAN
Huruf Tebal	<B></B>	(Bold)
Huruf Miring	<I></I>	(Italic)
Garis Bawah	<U></U>	(Underline - jarang digunakan)
Rata Tengah	<CENTER></CENTER>	(Center - berlaku untuk teks maupun gambar)
Huruf Kedip	<BLINK></BLINK>	(Blinking - tag terlucu sampai kini)
Ukuran Huruf	<FONT SIZE=?></FONT>	(Font Size - boleh diisi dari 1 sampai 7)
Warna Huruf	<FONT COLOR="#$$$$$$"></FONT>
Pilih Jenis Huruf	<FONT FACE="***"></FONT>

PEMISAH
Paragraf	<P></P>	(tag penutup seringkali tak diperlukan)
Align Text	<P ALIGN=LEFT|CENTER|RIGHT></P>
Pndah Baris	<BR>	(pindah ke baris berikut)
Garis Datar	<HR>	(Horizontal Rule)
Penataan Letak Garis	<HR ALIGN=LEFT|RIGHT|CENTER>
Tebal Garis	<HR SIZE=?>	(dalam satuan pixel)
Lebar Garis	<HR WIDTH=?>	(dalam satuan pixel)
Lebar Garis Persentasi	<HR WIDTH="%">	(dalam persentasi terhadap lebar halaman)

LATAR BELAKANG DAN WARNA
Latar Belakang Gambar	<BODY BACKGROUND="URL">	(Tiled Background)
Warna Latar Belakang	<BODY BGCOLOR="#$$$$$$"	(Background Color - urutan: merah/hijau/biru)
Warna Huruf Teks	<BODY TEXT="#$$$$$$">

TABEL
Rancangan Tabel	<TABLE></TABLE>
Garis Batas Tabel	<TABLE BORDER=?></TABLE>
Lebar Tabel	<TABLE WIDTH=?>	(dalam satuan pixel)
Lebar Tabel Persentasi	<TABLE WIDTH="%">	(dalam satuan persen terhadap lebar halaman)
Baris dalam Tabel	<TR></TR>
Penataan Letak Baris	<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM  VALIGN=TOP|BOTTOM|MIDDLE>
Sel dalam Tabel	<TD></TD>	(harus ada dalam setiap baris tabel)
Penataan Letak Sel	<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM  VALIGN=TOP|BOTTOM|MIDDLE>
Kepala Tabel	<TH></TH>	(Table Header - seperti data dengan Bold dan Center)
Penataan Letak Kepala Tabel	<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM  VALIGN=TOP|BOTTOM|MIDDLE>
Warna Kepala Tabel	<TH BGCOLOR="#$$$$$$">

A.    Dasar dasar HTML

1.      Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:

<html>

<head>

  <title> My First HTML Project </title>

</head>

  <body BGCOLOR=“Green” TEXT=“Red”>

     WELCOME TO MY WEBSITE

</body>

<body bgcolor=”#00ff00”>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:

 

Gambar 1.  Judul Tab Halaman

2.      Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:

<html>

<head>

 <title> Tag P, Br dan Hr </title>

</head>

<body>

 <p>Ini adalah paragraf pertama, yang berisi 3 baris.  Baris satu, dua dan tiga. <br><br></p>

 <p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>

<hr> Ini adalah garis horizontal.

</body>

<body bgcolor=”#00ff00”>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:

 

Gambar 2. Mengatur Paragraf

3.      Mengatur ukuran huruf, buka notepad++,  kemudian ketikan code dibawah ini:

<html>

<head>

<title> Tag Heading </title>

</head>

<body>

<h1> Heading 1 </h1>

<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

</body>

<body bgcolor=”#00ff00”>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:

 

Gambar 3.  Ukuran Huruf

4.      Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

<title>format tulisan</titele>

</head>

<body>

teks normal <br>

<small> teks small </small><br>

<big> teks big</big><br>

<b> teks tebal </b><br>

<i> teks miring </i><br>

<u> teks bergaris bawah </u><br>

Contoh superscript : x ²<br>

Contoh subscript : H₂O<br>

<strike> Ini teks tercoret </strike><br>

<font size = 5 face = verdana>

menggunakan tag font

</font>

</body>

<body BGCOLOR ="#00FF00">

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:

 

Gambar 4. Format tulisan

5.      Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

      <title> From komentar </title>

</head>

<body>

<table>

<tr>

<tdcolspan="3">&nbsp;</td></tr><tr>
  <td colspan="3"><h3>Silahkan Berkomentar : </h3></td>

</tr>

<tr>

<td>Nama</td>

<td>:</td>

<td><input type=text name="nama"></td>

</tr>

<tr>

<td>Email</td>

<td>:</td>

<td><input type=text name="email"></td>

</tr>

<tr>

<td valign=top>Komentar</td>

<td valign=top>:</td>

<td><textarea name="komentar" rows=6 width=200></textarea></td>

</tr>

<tr>

<td colspan="3"><input type=submit name="submit"

value=submit></td>

</tr>
</table>

</body>

<body BGCOLOR ="#00FF00">

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:

 

Gambar 5. From komentar

6.      Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:

<html>

<head>

<title>warna-warna</title>

</head>

<body>

<table width="300" border="1">

<tr>

    <td colspan="3" align="center">warna-warna </td>

</tr>

<tr>

    <td bgcolor="#00FF00">Hijau</td>

    <td bgcolor="#FFFF00">Kuning</td>

    <td bgcolor="#FF0000">Merah </td>

</tr>

<tr>

    <td bgcolor="#999999">Abu-abu</td>

    <td bgcolor="#0000FF">Biru</td>

    <td bgcolor="#FF9900">Orange</td>

</tr>

<tr>

    <td bgcolor="#663300">Cokelat</td>

    <td bgcolor="#3399CC">Biru muda</td>

    <td bgcolor="#FF00FF">Merah muda</td>

</tr>

</table>

</body>

<body BGCOLOR ="#00FF00">

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:

 

Gambar 6. Tabel