Responsive Ads Here

Thursday, June 28, 2012

Langkah I membuat template website dengan Photoshop

sore-sore gini uda gak tau mau apa, belajar SEO jadi pening, mending iseng-iseng buat template website sederhana yang berbasis .Php atau .html
yang mana aja sama Sob, tapi kita mulau dari photoshop ya design nya sudah pada tau kan apa itu photoshop ?
nah kalau belum tau guna software yang satu ini gak papa deh,
photoshop adalah software dari perusahaan adobe yang guna nya untuk mendesign gambar, banner, dan lai-lain (fungsi nya adalah mendisain gambar), saya kira sudah jelas deh seberapa penting software photoshop untuk mendesign template website kita kali ini,.. :D
ok langsung saja buka photoshop kamu, kalau belum ada wah kelewatan banget tu, masak software yang banyak beredar secara geratis (bajakan) masa lo gak punya ??? kalau belum punya download dulu sana di Google :)


setelah kamu buka software photoshop kamu, nah kamu buat sebuah halaman baru dengan car tekan di keyboard crtl + N atau klik menu file lalu pilih NEW. ok untuk ukuran biasa website ada yang ukuran 640 x 480 px sampai max he he he kira-kira sampai 1600 x 1200 px. nah tapi kita gunakan ukuran 1024 x 768 ya,...
ok deh maka kamu mulai mendesign bentuk template website nya. di dalam template secara umum ada 4 bagian yang harus kita buat, yaitu
1. bagian Header (kepala template biasa nya di isi dengan judul website, dan lain-lain)
2. bagian Menu (biasa nya di bawah header)
3. bagian body (badan atau biasa nya ini adalah tempat di mana kita membuat artikel website kita)
4. terakhir adalah bagian footer (adalah bagian bawah template, biasa nya di isi dengan copyright, dan lain-lain

nah setelah kita mengetahui dasar/tahap - tahap untuk membuat template website maka kita sudah mudah untuk merancang nya, akan saya kenalkan tool-tools yang bisa anda gunakan di dalam photoshop untuk membuat kerangka template nya lihat gambar di bawah ini

Nah tools yang saya gunakan hanya yang saya beri tanda panah cuma sedikit kan,.. :)
Ok deh saya akan jelas kan apa fungsi dari tools ini yang mengarah ke 

panah biru

adalah move tool guna nya ya sesuai nama nya alat pemindah, ya guna nya juga untuk memindahkan sesuatu ke tempat yang di ingin kan...

Panah Merah

adalah marquee tool yang berfungsi memfokus kan sebuah titik (misal kamu ingin membuat warna hanya  pada daerah tertentu (yang berbentuk persegi atau persegi panjang,oval maka kamu bisa gunakan tool ini dengan di bantu tool brush, atau tools warna lain nya)

Panah Orange

adalah  lasso tool yang fungsi nya sama dengan marquee tool, hanya saja tool ini di lakukan secara manual (kita bisa membentuk sebuah gambar atau pola , sedangkan marquee tool hanya dapat membuat pola persegi,persegi panjang,oval sedangkan lasso tool bisa membentuk pola yang sesuai ada ingin kan, tentu nya dengan kreatifitas anda sendiri :)

Panah Kuning


ini adalah tool yang fungsi nya sama dengan marquee dan lasso namun tool ini bisa langsung men selection warna yang sama dengan yang kamu selection, sebagai contoh misal dalam poto kamu ada 2 warna, nah kamu klik dalam warna misal saya katakan merah, maka warna merah yang ada di sekitar kamu mengklik akan ter selection, dengan begitu, kamu bisa mengganti warna atau menghapus nya

Panah Hitam

 nah ini adalah tool yang bernama Crop tool, nah dari nama nya juga pasti kamu tau apa kegunaan nya ia kan ?? :) nah tools ini guna nya untuk mengcrop sebuah gambar, atau yang lain nya pada tool ini klik kanan dan kita juga membutuhkan tools Slice, tool ini berfungsi untuk memotong bagian-bagian agar bagian-bagian itu kita sisipkan di Dream weaver

Panah Biru Mudah



Nah ini adalah tool yang berfungsi sebagai pendeteksi warna, terkadang kamu ragu apa kah warna ini sama warna itu sama, nah tapi kamu harus membuat warna nya sama, maka kamu bisa mengarahkan menggunakan tools ini untuk memastikan warna dengan bantuan  tools pemilih warna pada Panah Hijau


Panah Putih

Tool ini nama nya adalah brush tool yang berfungsi memberi efek warna pada sebuah gambar

Panah hitaman agak ke abu-abu an



adalah eraser tools, tool ini berfungsi untuk menghapus

Panah Merah Hijau



ini adalah gradien tools ini untuk mewarnai layers

Panah Biru Putih



kita gunakan bukan pen tool tapi add anchor ponint tool yang berfungsi untuk mengubah titik-titik shape yang kita buat

Panah Biru Merah


adalah text tools yang berfungsi untuk menambah text atau tulisan

Panah Biru Kuning

adalah tools costum shape tool untuk membuat share atau gambar yang berbentuk garis

panah Hijau

 adalah colour tool yang berfungsi untuk memilih warna


nah setelah kurang lebih 1 setengah jam dengan menggunakan tools di atas hasil design nya menadi gambar di bawah ini



Klik gambar jangan lupa tekan ctrl + klik agar gambar di lihat di New tab agar lebih jelas gambar nya

Berhubung sudah hampir malam, dan saya belum mandi, jadi kita STOP dulu sampai di sini tunggu update an  artikel ini kita sambung memakai Dreamweaver
OK sob,... coba dulu edit memakai photoshop kalau menurut kamu sudah cocok lalu baca tutor selanjut nya dengan memakai Dream weaver :)
Lihat DISINI untuk Tutorial SELANJUT NYA