Headlines News
Home » , » Membuat Design Template Pakai Pakai Photoshop

Membuat Design Template Pakai Pakai 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 scriptnya:


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.

Selamat Mencoba.....................
Sobat sedang membaca artikel Aplikasi Online tentang Membuat Design Template Pakai Pakai Photoshop dan Sobat bisa menemukan artikel Membuat Design Template Pakai Pakai Photoshop ini dengan url Sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Design Template Pakai Pakai Photoshop ini sangat bermanfaat bagi teman-teman, namun jangan lupa untuk meletakkan link Membuat Design Template Pakai Pakai Photoshop sumbernya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Free Aplikasi Full Version - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger