Photoshop Tutorial: Membuat layout web 2.0

photoshop tutorial

Di photoshop tutorial ini, anda akan belajar tentang cara membuat layout web 2.0 website yang ciamik di Adobe Photoshop menggunakan keahlian pemula. Kalau anda ada pertanyaan, jangan ragu untuk bertanya di bagian komen.

Inilah layout web 2.0  yang akan anda buat di tutorial ini:

[TUTORIAL] Membuat layout web 2.0 di Photoshop

1. Buat dokumen baru dengan ukuran 1280*1024 pixel. Isi background dengan warna putih (#FFFFFF)

2.  Ambil tool marquee persegi panjang dan gambarlah persegi panjang dengan tinggi 455 pixels. Inilah yang akan jadi isi fitur layout web.   Isilah persegi panjang ini dengan biru muda (#B3DDFB). Setelah selesai, gambar persegi panjang baru dari bagian atas dokumen untuk menjadi header website. Contohnya, persegi panjang Sibby tingginya 89 pixel dan warnanya #3399CC. Bagian terakhir adalah membuat footer. Gambarlah persegi panjang di bawah dokumen dan isi dengan warna abu-abu. #7E8081

Hasilnya akan seperti ini:

3. Sebuah website tidak akan tampak bagus tanpa navigasi yang bagus. Jadi, mari kita gambar tab navigasi yang keren satu ini        untuk layout web yang baru kita. Buat set layer baru dan namakan navigasi. Ambil tool persegi panjang berujung bulat, set radiusnya ke  10px, dan gambar persegi panjang berujung bulat menjadi tab menu. Warna background harus berwarna sama dengan isi fitur website (#B3DDFB). Di window layers, klik kanan pada layer yang baru dibuat dan pilih “Rasterize layer” pada menu.

Copy layer tiga kali untuk menghasilkan 4 tab. Geser set layer navigasi hingga 30 pixel dari margin kanan dokumen, seperti yang terlihat di screenshow di bawah ini.

4. Sekarang mari kita buat gaya berbeda untuk tab yang aktif. Dengan menggunakan tool persegi panjang berujung bulat, buatlah persegi panjang berujung bulat seperti sebelumnya, tapi kali ini, isi dengan warna putih (#FFFFFF)

5. untuk warna backgroundnya.                                          

        

6.Begitu layer tab aktif dibuat, klik kanan pada layer tersebut di window layer, lalu pilih “Blending options” dari menu dropdown. Tambah gradient dengan parameter berikut ini.Navigasimu akan terlihat seperti ini.

 

7.Berikutnya, tambahkan text pada tab. Sibby memilih “Arial rounded” berukuran 24pt dengan warna #3399CC.


                                                                       Menu kita sudah selesai                                                                           

 

8. Langkah selanjutnya, buatlah 3 langkah untuk menjelaskan kekerenan produk yang difitur website ini. Buat set layer dan namakan “Angka”

9. Sekarang, ambil tool Elipse dan buatlah lingkaran ber-background putih (#FFFFFF). Setelah selesai, pilih tool text, dan tulis dua baris text. Di PSD file, Sibby menggunakan font Arial rounded berwarna #3399CC dengan ukuran 24pt.

10. Biarkan font dalam tipe Arial Rounded, tapi ubah ukurannya menjadi 60pts, tipe “1” di seluruh bidang lingkaran.

11. Ulangi langkah 8, 9, dan 10 sampai anda punya 3 langkah. Sampai sini, hasilnya akan seperti ini.                                                                                                                                                                        

12. Saatnya untuk menambahkan video presentasi produk. Sibby hanya mengambil screenshot dari video video dan sesuaikan ukuran hingga 401*289 pixel.

13. Setelah selesai dengan bagian atas dari desain kita, sekarang penuhi bagian utama desain kita yang nantinya akan diisi dengan tulisan presentasi produk. Buat layer set baru dan namakan “Paragraf 1”

14. Pick up tool text dan tulislah judul paragraf. Sibby memilih font Arial Rounded, ukuran 24 pt, berwarna #7E8081

15. Ambil tool garis dan tarik garis di bawah judul paragraf. Atur warna sehingga warnanya menjadi sama dengan judul #7E8081.

16. Ayo kita tulis paragrafnya: Ambil tool text dan gambarlah kotak untuk ditulisi nantinya. Lebar kotak harus sama dengan lebar garis yang kita buat tadi.

Setelah anda ketik tulisan paragrafnya, pilih dan blok seluruh tulisannya, lalu buka Character and Paragraph palette. Klik tab “Paragraph” di palet dan klik tombol “Justify All”           

17. Untuk dua paragraf yang tersisa, copy set layer bernama “Paragraph 1”, atau ulang 4 langkah sebelumnya. Begitu selesai dengan langkah ini, paragraf-paragrafnya akan terlihat seperti ini.

18. Desain layout web kita sekarang mulai terlihat bagus. Tapi, dua bagian pentingnya masih belum ada, footer dan logo. Ayo sekarang kita mulai dengan logo. Taruh kursor di header dan ketik nama app web 2.0 mu. Sibby memilih “WidgetCreator”. Kedengarannya norak sih, tapi anda tentu bisa memilih nama yang lebih bagus. Untuk tulisan, Sibby memilih warna putih (#FFFFFF), font Arial Rounded, dengan ukuran 30pt tanpa efek, untuk menjaga kesederhanaan dan ke-minimalis-an desain logonya.

Untuk icon logo, Sibby memilih gambar ini.

  

19. Langkah terakhir untuk tutorial layout web ini adalah membuat footer. Pilihlah warna putih (#FFFFFF), font Arial ukuran 18pt, dan ketik tulisanmu. Pastikan untuk menempatkan tulisan ke bagian tengah halaman.Footer yang bagus juga biasanya dilengkapi dengan logo sponsor. Anda bebas bereksperimen!

Inilah hasil terakhirnya!


Nah, tutorial tadi cukup membuktikan kalau anda juga bisa membuat desain cantik hanya dengan keahlian pemula di Photoshop, kan?  Untuk tingkat selanjutnya kalian bisa belajar mengenai desain website dan logo. Semoga tutorial layout web ini dapat berguna untuk anda.
Dikutip dari PSDVibe.com

Salam,

Ryan Gondokusumo

Founder Sribu.com

email
  • agung

    Request : tutorial coding website dengan HTML dan CSS dong!untuk pemula

    • http://www.sribu.com Ryan Gondokusumo

      Sip nanti kita masukin dalam wishlist!

  • aziz

    txh ya berguna banget

  • http://bekasigaul.com/ azhar

    Tutorialnya bagus, apalagi all about design, i like it. thanks sribu

    • http://www.sribu.com Ryan Gondokusumo

      Jangan lupa bisa subscribe ke blog kita ya via http://www.blog.sribu.com, lalu di sebelah kanan ada box subscribe.

  • http://www.dutakreatif.com dutakreatif

    Terimakasih gan, artikelnya sangat berguna..

    • http://www.sribu.com Ryan Gondokusumo

      Sama-sama Duta :)

  • tirta

    mantap gan… trims….

    • http://www.sribu.com/ Ryan Gondokusumo

      Sama-sama. Semoga bisa bermanfaat :)

  • Arrangga Gemilang

    Terimakasih Mas Ryan. Artikelnya Dahsyat dan Menginspirasi. Semoga kedepan kita bisa bekerjasama khususnya pembuatan Design Website saya. Trims.

    • http://www.sribu.com/ Ryan Gondokusumo

      Sama-sama, mas Arrangga. Wah, tentu senang sekali kalau kedepannya bisa bekerja sama. Ditunggu :D