Belajar belajar belajar… praktek praktek praktek praktek praktek… ayo kita belajar buat design website lagi…

Sebelumnya aku mohon maaf lahir dan batin dulu yaaaa , baru sekarang ini aku sempet bikin episode lanjutan dari Membuat Design Website dengan Adobe Photoshop(1)

Langsung aja yaaaa… aku anggap semua udah selesai utak atik template photoshop, jadi sekarang tinggal gimana caranya supaya website template yang masih berformat adobe photoshop document (*.psd) itu bisa diubah jadi html

1. Potong-potong templatenya

Gunakan slice tool, lalu kita potong template nya jadi beberapa bagian

Yang harus “dipotong” itu adalah bagian-bagian yang nantinya akan jadi button/menu navigasi. Kalo bagian yang lain sih tinggal disesuaikan saja dengan kebutuhan kita, misal untuk bagian content ya sebaiknya jadi 1 potongan saja, biar gampang nanti utak-atik di HTML nya. Memang sih, dulu waktu awal-awal juga aku berapa kali ubrak abrik potongannya, tapi ya memang harus begitu kayaknya, harus banyak coba-coba sendiri karena berbeda untuk tiap design. Kalau sudah sering coba, nanti juga tau sendiri gimana “pola potongan” yang efektif, efisien dan optimal

2. Ubah template photoshop jadi file HTML

Pilih menu File > Save for Web, lalu save dengan nama file yang kita inginkan

sehingga nantinya akan ada 2 file baru:

Dan website template pun siap untuk digunakan

PERHATIAN!!!
Uraian di atas adalah berdasarkan pengalaman pribadi dan dari hasil belajar secara otodidak. Kalau teman-teman ingin panduan membuat website yang lebih detail, saya sarankan teman-teman untuk download modul panduan membuat website disini, GRATIS TIS TIS dan langsung dari ahlinya