2. Langkah Kedua

Ok, kita ketemu lagi di Langkah Kedua, sekarang saya akan memulai mengenalkan Adobe Photoshop terlebih dahulu.  Kita sebagai seorang designer terkadang merasa penting dengan halnya fungsi program sebenarnya. Misal Adobe photoshop, untuk apa sih sebenernya program ini? Ya.. namanya aja udah Photo-Shop.. see..? semua pasti mengerti.
Tapi kita harus acungkan jempol pada program ini, banyak designer yang memaksakan untuk mendesign dan melayout bahkan membuat lukisan dengan program ini. Kita tidak perlu melihat kesalahan penggunaan, artinya kesuksesan dalam pembuatan program ini sangatlah fleksibel dalam penggunaan.  Mampu di pahami oleh orang yang bukan professional menjadi seorang professional. Popular program ini menjadi pilihan saya dalam tulisan ini.

Why ? (kenapa ?)

Karena masih banyak designer yang memang tidak pernah belajar design sebelumnya, masih banyak designer yang berasal dari kalangan bawah, atau designer yang sangat ngeFans dengan program ini dibadingkan dengan Adobe Ilustrator (Fans program ini juga banyak). Oleh karena itu kita mulai dari ADOBE PHOTOSHOP.

Membuat Mockup.

Kalau kamu memang designer ? pasti tidak perlu saya ajarkan bagaimana mendesign template website di Photoshop (mockup),  karena itu sangatlah rumit untuk dijelaskan, tapi klo kamu bukan designer dan tidak bisa membuat template, belajarlah memulai dari template gratis yang bisa di download menggunakan Google Search Engine, ok.. ? karena sayapun akan melakukan yang sama dalam pembuatan website percontohan ini. Gampangkan ?

Ok, klo masih bingung juga dalam pencarian template kamu bisa cari di sini www.freewebsitetemplates.com , kamu pasti sudah mendapatkan Source codenya juga. Hahaha.. *seneng .. simpanlah sourcodenya untuk kamu pelajari nanti dan bongkar pasang setelah kamu memahami alur dan cara kerja website.. nanti kamu dengan sendirinya bisa membuat sebuah website, walaupun belum tentu dengan standart web master. yang penting bisa bangun website dulu.. itu belakangan. hehehe..
  

Ok, tapi kan kita niatnya Belajar dan bisa mengaplikasikan design kita sendiri bukan, template gratis tentunya sangat banyak di pake oleh orang. Kadang di pake buat nipu orang dalam menjual website. Seolah-olah itu buatan dia. (* jangan pernah lakukan itu, it’s not cool..)

Saya memulai dengan template ini download .

Apabila sudah kamu download, kamu bisa buka dan apa saja isinya ? jangan kaget kalo melihat ada banyak file disana. Tenang saya akan jelaskan nantinya, jadi jangan di pikirkan dulu.

File yang kita perlukan cukup yang zerotype.psd.  ini tidak ada hubunganya dengan pemrograman , dia memberikan file mentahnya dari designernya agar kita bisa rubah-rubah sendiri.

ok, singkatnya saya akan menjelaskan bagaimana cara motong-motong tuh gambar, ini bukan trik tapi memang sudah disediakan oleh Photoshop begitu juga illustrator. Kamu punya tools SLICE  untuk  pemotongan gambar yang sulit diterjemahkan di coding CSS seperti logo dan gambar lainya.

' tools SLICE'

Mungkin gambar di atas bisa membantu kamu dari penjelasan saya. Apa bila sudah kamu lakukan slicenya maka kamu lakukan ‘Save for web’ . Cara Save for web kamu menuju  menu atas di photoshop lalu pilih FILE  -> Save for web & Devices.. atau  Ctrl + Shift + Alt + S .

Kamu atur saja di atas, mau PNG , JEPG, gif, yang pasti warna terbanyak akan lebih berat filenya, warna terbanyak bisa memakai PNG. Tapi klo kamu ingin mencari yang ringan , coba dulu dgn gif, kalau gambarnya kurang bagus, naikkan ke JEPG.. lalu ke PNG. antara Gif dan PNG sama-sama bisa membuat background menjadi transparant, tapi gambar paling bersih adalah *.PNG.
Setelah kamu buka hasil save-nya dia automatis membuat Folder dengan nama ' Images ' di directory yang kamu tujukan pada saat nge'Save for web'. Di sana kamu akan menemukan pecahan gambar. buang yang tidak kamu perlukan dan Rename gambar sesuka hati kamu agar mudah dipanggil saat nanti pada saat membangun code website.
contoh : logo.png, gambar01.jpg, footer.jpg, dll.
nanti folder images itu tidak usah di rubah namanya, biarkan namanya "images". nanti kita bundel dengan koding HTML, dan CSS.

Untuk langkah kedua sampai disini dulu ya.. klo ada pertanyaan mungkin saya hanya bisa menjawab orang yang terdaftar saja dari pengumuman.

Sampai ketemu lagi di Langkah Ketiga ..