Archive for March 2014

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.


Apabila anda menginginkan source .PSD bisa menghubungi by email ya. 
atau disini juga bisa, FREE!




Tetap berkarya dan tetap original.




Tuesday, March 4, 2014
Posted by Jody Baharizki

Psang Iklan?

Psang Iklan?
Klik gambar diatas

Like Us!

Youtube

\
\

Labels

Powered by Blogger.

Total Pageviews

- Copyright © 2016 Jody Baharizki -@jodybaharizki- Powered by Blogger -