Design Tempelate web dengan Adobe photoshop

Halo sahabat muda pecinta computer , sekian lama saya tidak bercerita pada sahabat semua ternyata saya jadi kangen juga ya , Oke dech awal jumpa di bulan ini saya akan coba membahas membuat , desain web , namun kali ini saya akan memulai dari membuat desaign tempelate halaman website dengan menggunakan adhop Photosop , tentunya tutorial ini akan berkelanjutan sampai pada akhirnya kita dapat membuat website sederhana .

Oke untuk memulai kita buka saja aplikasi potoshopnya tentunya caranya enggak perlu saya kasih tahu, kalau emang udah kebuka ayo kita buat halam web dengan width= 900pxl , height terserah.

Otak atik aja sesuai tema web yang kita ambil sebagai sempel saya coba membuat web tempelate bloger  nih gambarnya.

Nampak gambar diatas saya kasih garis –garis guna mempermudah dalam membuat layoutnya, untuk memunculkan garis cukup memilih menu –View-Rules , terus clik dari kiri sambil mouse ditahan kemudian geser pada bagian yang hendak kita beri garis maka akan muncul garis tersebut.

Setelah kita membuat garis-garis tersebut langkah selanjutnya kita , akan melakukan pemotongan dengan tool slice –

Dan lakukan pengkotakan-pengkotakan , pada bagian yang akan dibuat layout sesuai kebutuhan  sampai muncul seperti gambar berikut,

Disini kita mesti hati-hati , agar hasil yang kita dapatkan sesuai dengan keinginan kita . kali ini saya coba potong semuanya , padahala tidak semestinya saya potong misalnya pada bagian yang memiliki latar background yang sama kiat bisa memberi perintah background/file-gambar.gif,

Mungkin sahabat kurang mudeng dengan maksud saya, dari pada pusing mendingan ikutin dulu aja seperti gambar diatas.

Kalau udah dikasih slice , kita simpan kedalam bentuk file HTMl, caranya mudah aja cukup plih menu File-Save For Web

Maka akan muncul seperti gamabar berikut:

Kita dapat merubah ukuran lebarnya(width) missal kali ini saya kasih 900px, tinggi terserah saja. Kalau udah ditentukan tentunya kita akan menyimpanya – clik Save

Pada bagian svae type as , jangan lupa pilih tpe file html, buat folder, dan simpan file tersebut di dalam folder yang anda buat ,

Maka secara default kita bisa melihat folder Images dan satu file namafile yang  kita buat , msl: index8.html,

Untuk melihat hasilnya anda buka dengan browser yang ada dikomputer kita maka Jreng………:

Cukup mudah bukan ?, sekarang kita lihat script Htmlnya , dari sini tentunya kita bisa melakukan pengeditan atau penghapusan gambar yang tidak kita perlukan, buka file index8.html dengan text editor (notepad atau wordpad), tapi saya lebih suka pake wordpad, dan perhatikan scripnya:

Jika kita paham code HTML, tentu tidak sulit untuk memilah bagian mana yang tidak diperlukan, utnuk lebih memepercantik anda bisa memoles dengan menambakan link Code CSS, Wow…bisa lebih keren loh . tapi untuk kali ini saya hanya kasih tau sampai sini dulu next time kita sambung lagi.

2 responses to “Design Tempelate web dengan Adobe photoshop

  1. irvan April 30, 2010 pukul 7:14 pm

    wahh kayak nya agak rumit.
    aku sendiri juga kurang ngerti.
    jangan marah ya mas….

  2. bed bug bites April 14, 2013 pukul 12:49 am

    Way cool! Some very valid points! I appreciate you penning this article and also the rest of the site is very good.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: