Cara Mengkonversi Personal Website Sederhana dari PSD ke HTML5
Meskipun HTML5 masih menjadi draft di W3C, namun tidak ada salahnya untuk mulai menggunakan pada proyek web Anda atau klien. Berbagai tutorial tentang HTML5 bisa dengan mudah kita dapatkan begitu juga dengan tools untuk memastikan web dengan HTML5 ini bisa diakses bahkan oleh browser versi lama sekalipun.
Dalam tutorial kali ini akan membantu memulai penggunaan HTML5 pada website, dengan beberapa tag HTML5 yang akan sering kita jumpai nantinya, seperti header, footer, nav, section, dan article.
Berikut ini adalah design yang akan kita konversi ke HTML5:
Non-transparent Images
Langkah pertama adalah men-slicing bagian-bagian design yang tidak mengandung transparent image seperti body background atau banner yang akan digunakan sebagai guide nantinya.
Buka Photoshop, dan pilih Slice Tool:
Kemudian mulai slice non transparent images. Setelah selesai, pilih Slice Select Tool untuk mengedit slicing kita dengan memberi nama (slice name). Bisa juga dengan cara klik kanan slice → Edit Slice Options:
Kemudian pilih Menu File → Save For Web dan atur image quality menjadi High.
Pilih folder dimana file akan disimpan, kemudian klik file. Secara otomatis akan muncul folder baru bernama images yang berisi gambar-gambar hasil slicing kita sebelumnya.
Transparent Images
Selanjutnya kita mulai menslicing bagian-bagian yang mengandung transparent images yang meliputi background untuk navigasi utama, icon pencarian, banner controller, shadow pada banner dan sub-content, icon comment, icon-icon social media, recent news controller, dan header text untuk footer.
Kemudian kita sembunyikan layer-layer yang mengandung solid background, agargambar-gambar terslicing secara transparent.
Setelah selesai maka tampilan akan menjadi seperti gambar di bawah ini:
Pilih File → Save For Web dan pilih preset PNG24 untuk hasil maksimal dan klik Save, akan muncul pesan Replace Files karena sebelumnya kita telah membuat slicing untunon transparent images. Hilangkan tanda centang pada non-transparent images yang kita buat sebelumnya seperti body-bg.jpg dan biarkan pilihan-pilihan berawalan index_*** seperti adanya.
Setelah itu kita bisa merapikan file-file pada folder images kita dengan membuang file-file yang tidak diperlukan (berawalan index_***) dan bisa juga kita buat sprites untuk image yang sejenis atau satu grup seperti banner controller dan social media icons:
Nah, untuk tahap slicing image sudah selesai. Bagian kedua (konversi ke HTML5 & CSS) bisa dibaca di sini.
Web designer dan front-end developer muda yang belum terlalu jelas dari spesies mana dia berasal. Pada sebuah eksperimen, dia mampu bertahan di dalam air selama 323,007645 detik, dan bisa melayang di udara dengan ketinggian mencapai 15,23 meter. Karena sering berpindah habitat, kini ia memutuskan untuk berada di darat dan menekuni dunia Web Design, HTML5, CSS, dan jQuery.
yah… si juki…
kirain udah lngsung sma tutor convert ke HTML5….
sedihnya htiku hrs mnunggu lgi tutor convertnya :p
menunggu juga
ayo juki
ditungguin yang selanjutnya
Bikin penasaran, btw, kok Juki??!
Itu nama tetangga saya, Mas
Insyallah minggu depan dipublish untuk tutorial mark-upnya
ini Adobe photoshop berapa?
Semoga saja aplikasi Adobe Photoshop yang digunakan untuk melakukan desain benar-benar legal, bukan bajakan (curian).
Dan saya mengucapkan terima kasih atas panduan konversi moch-up desain web ke dalam sintak html.
Salam
Saya memakai Adobe Photoshop CS3, dan kebetulan saya dapet software asli Adobe PS CS3 dari perusahaan
Semoga bermanfaat
Iya mas,saya menunggu diconvert ke html5 nya hehe, sekalian lengkap sama CSS aja sekalian. But thanks for share
Maaf juga, kayaknya kalo dari demo kta tinggal view source kan udah ada semua
Makasih mas yah
yap, di view source sudah ada juga. kalau mau lihat step-step ala penulisnya bisa juga kok dicek part kedua di : http://rumahdot.com/web-programming/menkonversi-personal-website-sederhana-dari-psd-ke-html5-bagian-2/
hehe.:)