Membuat Layout Web

Detail Tutorial
• Program : Photoshop CS3
• Tingkat Kesulitan : Menengah
• Perkiraan Waktu Penyelesaian : 60 Menit
Langkah 1
Kita mulai dengan membuat sebuah dokumen baru.

Langkah 2
Download gambar tekstur kayu di bawah ini.

Buka “wood-texture2.jpg” di photoshop kita, kemudian pilih Edit > Define Pattern. Pilih nama untuk pattern baru ini trus klik OK.

Langkah 3
Gandakan layer Background dengan menekan Ctrl+J, beri nama BG Copy. Pada layer BG Copy klik kanan kemudian pilih Blending Option. Pilih opsi Pattern Overlay dan gunakan pattern dari tekstur kayu yang telah kita buat sebelumnya.

Langkah 4
Buat layer baru di atas layer BG Copy, beri nama Corak. Kemudian sapukan brush jenis Splat brushes di atasnya. Agar menarik, gunakan warna yang berbeda. Hasilnya kurang lebih seperti ini.

Langkah 5
Naah..selanjutnya kita buat layer baru di atas layer Corak, beri nama Yellow pada layer baru tersebut . Buat seleksi dengan menggunakan Rectangle Marquee Tool dan warnai dengan warna kuning #fce78e.

Lakukan hal yang sama tetapi dengan warna yang berbeda. Red #f83c5f, Green #6bc349 dan Blue #6ed0f5. Masing-masing warna berada pada layer yang berbeda.. inget yaaa, jangan digambar pada layer yang sama.

Langkah 6
Kembali ke layer Yellow, klik kanan kemudian pilih Blending Options. Pilih opsi Drop Shadow kemudian lakukan pengaturan sebagai berikut.

Langkah 7
Download gambar Grunge tekstur di bawah ini kemudian buka dalam lembar kerja photoshop kita.

Langkah 8
Drag gambar “Grunge-texture” ke dalam dokumen yang kita buat sebelumnya. Beri nama Grunge pada layer ini.

Langkah 9
Lakukan pengaturan Blending Option pada layer Grung

Langkah 10
Buat layer baru di atas layer Grunge, beri nama Note. Dengan menggunakan Rectangular Marquee Tool, buat seleksi berbentuk persegi panjang. Set warna pada Foreground Color dengan kode warna #f4f5cb lalu tekan Alt+Backspace. Hasilnya.. Tarraaaaa….

Langkah 11
Masih pada layer Note, buat seleksi dengan menggunakan Elliptical Marquee Tool

Langkah 12
Kemudian aktifkan Rectangular Marquee Tool, kita akan membuat seleksi baru dan menyatukaannya dengan seleksi berbentuk lingkaran yang telah kita buat sebelumnya. Caranya, kita tekan M+Shift sambil membuat seleksinya. Inget yawph..tekan M dulu baru Shift, biar hasil seleksinya maksimal. Hasilnya kurang lebih seperti ini.

Langkah 13
Setelah kita membuat seleksi pada langkah sebelumnya, tekan Delete. Lalu tekan Shift+ sampai 7 kali kemudian tekan Delete. Ulangi langkah tersebut sampai kita mendapatkan hasil seperti ini. Hilangkan seleksi dengan menekan Ctrl+D.

Langkah 14
Masih nihh yaa…masiiihh tetep pada layer Note, kita klik kanan dan pilih Blending Option. Lakukan pengaturan pada Drop Shadow seperti berikut ini.

Langkah 15
Naahh…sekarang kita beralih ke layer Grunge. Buat seleksi dengan menggunakan Rectangular Marquee Tool, lalu tekan Ctrl+J untuk menggandakannya. Drag layer hasil copy-an tersebut dan beri nama Tittle pada layer tersebut agar memudahkan kita pada langkah selanjutnya.

Pindahkan layer Tittle ke sudut kiri atas.

Langkah 16
Buat layer baru di atas layer Tittle, Beri nama Paper. Gunakan brush jenis Paper_brushes_by_Ursylla untuk member efek kertas kusut pada layer Tittle. Set Foreground Color menjadi #000000. Sapukan brush pada layer Paper.

Kemudian klik kanan > Create Clipping Mask. Atur opacity-nya menjadi 30%.

Langkah 17
Buat layer baru di atas layer Paper. Beri nama layer Main. Buat seleksi dengan menggunakan Rectangular Marquee Tool dan isi dengan warna #f5d7bb. Buat lagi di sebelahnya dan isi dengan warna #f2e6aa.

Langkah 18
Sekarang kita buat layer baru di atas layer Main. Beri nama Menu pada layer tersebut. Lalu kita buat seleksi dengan perpaduan Rectangular dan Elliptical Marquee Tool seperti pada langkah 10 dan 11, hanya bentuknya saja yang sedikit berbeda.

Langkah 19
Set Foreground Color dengan warna #f95671 kemudian tekan Alt+Backspace. Setelah itu kita geser seleksinya ke bawah dan beri warna #aceb9d, ulangi langkah ini sampai 6 kali dan tentu saja dengan warna-warna yang berbeda.

Langkah 20
Lakukan pengaturan Blending Option pada layer Menu.

Langkah 21
Buat layer baru di atas layer Menu, beri nama Flower. Aktifkan brush tool dan set foreground color menjadi warna merah #f44458

Langkah 22
Sekarang kita buat layer di atas layer Flower, namai dengan Note2. Buat seleksi di bagian kanan dan warnai dengan putih #ffffff. Lihat di bawah ini.

Langkah 23
Buat lubang di bagian atas layer Note2 untuk mendapatkan hasil yang realistis menyerupai selembar kertas. Gunakan Rectangular Marquee Tool + Delete, dan geser seleksi dengan menekan Ctrl+ sebanyak 3 kali. Hasilnya…


Langkah 24
Buat layer baru di atas layer Note2, beri nama Lines. Gunakan Line Tool untuk membuat garis dengan warna #779ec6. Duplikat garis tersebut dengan menekan Ctrl+J. hasilnya kurang lebih seperti ini.

Langkah 25
Satukan semua layer Lines menjadi satu dengan menekan Ctrl+E. Klik kanan > Create Clipping Mask.

Langkah 26
Lakukan pengaturan Blending Option untuk layer Note2.

Langkah 27
Agar menarik, berikan efek kertas kusut pada layer Note2 seperti pada langkah 16.

Langkah 28
Terakhir…. Tambahkan beberapa teks agar layout web ini terlihat seperti aslinya. Semoga bermanfaat yaa… Selamat mencoba :D