Part #1 : Konversi PSD Tumblr to XHTML/CSS + Responsive

Post kali ini saya akan membahas step by step cara konversi mockup PSD to xhtml/css plus responsive

Salah saat mencoba yang baik, adalah lebih mulia, daripada salah karena tak melakukan apa pun. Beranikanlah dirimu. MTQ

Post kali ini saya akan membahas step by step cara konversi mockup PSD to xhtml/css plus responsive

Last Modif at February 25th, 2012

Masih ingat postingan lawas saya yang berjudul “TUMBLR STATIC TEMPLATE + WORDPRESS THEME BETA“? Jika ya, di bagian bawah artikel saya membuat pernyataan bahwa “tutorialnya akan menyusul dibelakang”. Ok, sekarang saya akan menepati janji itu.

Sebenarnya tutorial ini saya tulis sejak ramadhan 2011 kemarin dan sudah selesai pada bulan itu juga, sayangnya ada beberapa hal yang menunda pem-publish-an tutorial ini, dan syukur alhamdullah Allah memberikan saya kesehatan dan tenaga sehingga dapat merampungkan(Editing) sebagian tutorial ini, Thanks ya Allah. Karena tutorial ini sangat panjang, saya akan membaginya menjadi beberapa part.

Ok, tutorial ini akan membahas cara mengkonversi file PSD to XHTML/CSS, dan file PSD yang akan kita gunakan adalah Tumblr by desaindigital dot com. Dan nantinya, jika ada waktu + sehat saya akan membahas sampai cara konversi ke wordpress theme + theme options. Ok lagi, sebelum memulai siapkan tools dan bahan yang akan kita gunakan, berikut;

Tools dan Bahan

Setelah semua bahan dan tools sudah siap, asumsikan Anda sudah sedikit paham ini

  • Dasar HTML
  • Dasar CSS
  • Cara membuat file html/css/js
  • Cara membuat folder
  • Cara menggunakan google
  • Web statis

Catatan Penulis

Tutorial ditulis menggunakan win xp OS, Photoshop CS3, Notepad ++

Jika gambar pada tutorial terlalu kecil, silakan perbesar screen browser anda(tekan Ctrl + +)

Detail tutorial

  • Tingkat : 100% pemula
  • Teknik yang dipelajari : Dasar slicing, HTML/CSS, embled font, Dasar Jquery
  • Waktu pengerjaan : Tergantung Mood

Pemahaman

Untuk mengkonversi file PSD > HTML/CSS, selain wajib memahami XHTML/CSS, kita juga harus tahu ‘apa yang akan kita buat’. Ok, sekarang Anda sudah tahu bahwa Anda akan mengkonversi mockup PSD to HTML. Lalu dengan pemahaman anda tentang XHTML dan CSS, mulailah men-slicing PSD itu. Pada proses slicing Anda harus memperhatikan dengan jelas bentuk, struktur, dan tampilan PSD-nya, setelah memahami PSD tadi, barulah Anda memotong atau slice bagian-bagian PSD kemudian membuat tag-tag html lalu menambahkan css untuk mengatur susunan dan layouts sehingga menjadi sebuah file HTML dengan PSD tadi sebagai acuan, next

Slicing

Slicing adalah salah satu bagian terpenting dalam mengkonversi PSD > XHTML/CSS, lalu apa itu slicing? Slicing adalah teknik pemotongan gambar menjadi beberapa bagian, dimana bagian-bagian tadi akan tata/rangkai kembali menggunakan HTML/CSS, contoh

Download file: (contoh-slicing.zip)

File(folder) kedua pada archive yang didownload tadi adalah contoh hasil slicing, Ouput kedua contoh tadi mempunyai tampilan yang sama, perbedaanya pada file pertama kita tidak melakukan slice sama sekali atau gambar dibiarkan begitu saja, sedangkan file kedua kita memotong gambar menjadi dua bagian lalu menggunakan css untuk menyusun dan menyatukanya.

Kenapa harus di slicing

Bisa dilihat size kedua file tadi, file pertama ‘tidak di slicing’ sebesar (393Kb + 205b) sedangkan yang di slice hanya 2kb. Disini kita bisa mengambil kesimpulan bahwa teknik slicing ini dapat menghemat size dan bandwidth. Didunia web desain, kita harus memperhatikan betapa pentinggnya accessiblity ‘dalam hal ini kecepatan pemuatan’ semakin besar file size yang di unduh maka semakin lama pula waktu pemuatan(asumsi: hosting sama), sebaliknya jika file yang di unduh relatif kecil maka semakin cepat pula waktu pemuatan, Itulah sebab kenapa harus di slicing.

Tools yang digunkan

Dilingkungan Photoshop, ada dua tool yang dapat Anda gunakan yaitu ‘crop tool’ dan ‘slice tool’. Saya sendiri lebih suka menggunakan ‘slice tool’ karena kita bisa menyeleksi beberapa bagian/objek sekalius sehingga lebih menghemat waktu. Dan jika menggunakan Crop tool, akan sangat lengket/lama jika komputer yang digunakan berkemampuan standard. Silakan plih tool yang ingin digunakan, selagi suka dengan yang itu ‘ya pakai yang itu’.

Bagaimana dengan program lain?

Sejatinya, untuk meng-conversi-file gambar to XHTML/CSS kita ngga harus selalu menggunakan photoshop. Banyak program lain yang dan kita gunakan. Ini relatif, mana yang ingin anda gunakan–itu terserah Anda. Toh, yang penting hasil akhirnya. Dan kenapa saya pakai photoshop, karena awalnya memang sudah pakai photoshop dan tutorialnya banyak

Apakah ini wajib?

Tergantung kebutuhan. Saya pernah membuat website untuk client saya yang templatenya sama sekali ngga memakai gambar(kecuali headernya). Desain itu hanya menggunakan CSS saja, dan client sayapun ngga complain. Karena itu ngga memakai gambar, jadi proses slicing ini sama sekali ngga diperlukan.

Responsive web

Apa itu responsive web? Menurut saya, responsive web adalah hasil desain yang ukuranya dapat menyesuaikan dengan pelbagai resolusi layar. Lebih jauh tentang teory responsive, silakan googling.

Percentage

Khusus PSD Tumblr ini, kita akan menggunakan %(percentage) ‘fleksible’ untuk mengatur lebar elemen-nya. Lebar keseluruhan Tumblr sebesar “1208px”, tampilanya akan bermasalah jika dibuka menggunakan perangkat beresolusi dibawah ‘1208px’, yah tahu sendirikan di Indonesia atau di belahan dunia ini masih banyak yang menggunakan desktop ‘tabung'(Tell me istilanya) :) karena alasan itulah lebar Tumblr ini akan kita buat fleksible. Trus, Kenapa tidak diperkecil saja resolusinya, misal ke 1024px? Nice Question! Awalnya, saya menurunkan resolusinya ke 1024px ‘tapi tidak tahu kenapa’ imagenya jadi sedikit kabur dan saya tidak suka itu, masalah lain ialah “akan terlihat buruk jika layar browser diperkecil(zoom out) “CRTL + (-)”. Seperti yang Anda ketahui, jika mengatur lebar elemen menggunakan satuan fixed ‘dalam hal ini pixel’ element akan mempertahankan lebar, sehingga ketika layar browser diperkecil bagian di sisi kiri-dan kanan ‘akan terlihat kosong.

Jika Anda sering surfing, tentu pernah menemukan desain web yang disisi kiri dan kanan terlihat kosong, umumnya adalah web-web yang mengunakan gambar untuk desain layoutsnya. Dan rancunya lagi, ketika layar browser diperbesar (zoom in)”CTRL + (+)” atau dibuka menggunakan perangkat yang beresolusi dibawah lebar keseluruhan, di sisi kanan-bawah akan muncul “scroll to right”. Seperti blog ini :D

Dari berbagai pertimbangan tadi, akhirnya saya memutuskan menggunakan percentage untuk mengatur lebar elemen.
Sampai disini, ‘Anda pasti bertanya’, emang bisa background image dibuat fleksible?’ jika Anda mengikuti perkembangan web design, pasti sudah tahu jawabanya ‘hanya saja “mungkin belum bisa mengimplementasikan” atau belum berani ‘karena tidak compatible di browser lawas’.

Untuk itu, Buat pemahaman “Jika saya tidak mencoba yang baru ‘maka saya akan tertinggal dari yang lain’ dan konsep baru itu akan diterapkan dimasa depan, sedangkan konsep lama akan ditinggalkan”. Dari pemahaman tadi, secara tidak langsung, kita dituntut untuk mengikuti sebuah perkembangan, dan jika itu adalah bidang anda, maka ‘untuk berkembang’ anda harus mengikutinya, lain hal jika bukan bidang anda.

CSS3 ‘background-size’

Background-size adalah property CSS3 dimana fungsinya ialah mengatur ukuran(“width”, “height”) background-image. Jadi dengan Background-size ini, kita tidak perlu lagi merubah ukuran gambar jika ingin dijadikan background image. Contoh lawas, misal ada sebuah gambar berukukuran 200px x 200px yang ingin dijadikan background-image pada sebuah elemen yang berukuran 300px x 300px, dulunya ‘kita harus menyesuaikan/menyamakan ukuran gambar dan elemen agar background-image pada elemen memenuhi keseleuruhan elemen tadi.
Dan jika bisa direpeat, minimal kita harus menyamakan lebar atau tingginya.
Nah, dengan CSS3 background-size ini, kita tidak perlu lagi merubah ukuran gambar untuk menyesuaikan dengan elemen tadi, dan yang perlu kita lakukan hanya mengatur value/nilai background-size-nya. Uniknya, nilai pada background-size bisa kita setting ke %(percent) jadi gambar latar bisa menyesuaikan dengan layar, bingung?

Untuk contoh, silakan download file berikut background-size.zip

Extract lalau jalankan, style pada “background-size.htm” disitu kita menggunakan property background-size dan valuenya adalah “100% auto”, yang berarti lebar background-image yang awalnya ‘800px’ akan menjadi ‘100%’, dimana 100% ini sama dengan lebar layar browser sehingga tampilan ‘bakground-mage’ akan memenuhi keseluruhan layar. Dan value auto, berarti kita akan mempertahankan/menyesuaikan tinggi gambar.
Untuk lebih mamahaminya, coba hapus “background-size:100% auto”, save lalu reload browser kemudian Zoom In/Out

Problem: penggunaan “background-size” ini juga memiliki masalah, yaitu pada kualitas gambar. Sama jika anda membesarkan atau mengecilkan gambar pada halaman web dengan tag img, gambarnya akan buram. Jadi berharaplah developer pramban dapat mengatasi masalah ini.

CSS3 ‘media query’

Dengan CSS3 media query, kita dapat mengatur pe-rendering-an style yang kita buat. Misal style1.css untuk resolusi diatas 1024px, lalu style2.css untuk resolusi dibawah 1024px etc.

Memulai konversi

Pada proses konversi PSD > XHTML/CSS sendiri, setidaknya kita memiliki dua opsi, yaitu;

  • Slicing PSD dulu kemudian Buat HTML/CSS, atau
  • Buat file HTML/CSS dulu lalu Slicing PSD.

Untuk Saya, sebenarnya lebih suka slicing PSD dulu lalu membuat HTML/CSS-nya. Dan khusus tutorial ini, saya akan bahas Opsi Kedua, kerana teknik yang saya gunakan terbilang rumit. Ok, ikuti langkah berikut;

Persiapan folder dan file

Masuk ke di Directory Komputer Anda, lalu buat folder baru dengan nama tumblr. Buka folder tumblr lalu buat file html dengan nama index.html, setelah itu buat dua file css dengan nama style.css dan default.css. Masih didalam folder tumblr, buat lagi folder baru dengan nama font, lalu masukan font lobster yang sudah didownload tadi kedalam folder font. Masih disalam folder font, buat file css dengan nama font.css, seperti pada gambar berikut gambar berikut;

Tampilan folder tumblr

folder tumblr

Tampilan isi folder tumblr

isi folder tumblr

Tampilan isi folder font

isi folder font

Note

Penting! File HTML yang Anda buat harus berformat html, ekstensi file html adalah [dot]htm atau dot[html] dan bukan [dot]txt. Sama juga untuk file CSS, ekstensinya harus [dot]css.

Menambahkan markup Dasar

Edit index.html(pakai notepad++ :saran). Untuk caranya, klik kanan pada index.html > edit with notepad ++.

eit dengan notepad

Setelah itu tambakan markup berikut;


<!-- line 1 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><!-- line 2 -->
<head>
<title>Tumblr By Desaindigital.com</title>
<meta name='autor' content='Indam; url="http://www.indaam.net"' />
<meta name='PSD by' content='M Jeprie; url="http://desaindigital.com"' />
<meta name='keywords' content='keyword1, keyword2, keyword3, keyword4, keywordlain, keywordlain,' />
<meta name='description' content='Konversi mockup PSD tumblr to XHTML/CSS' />
<link rel='stylesheet' media='all' type='text/css' href='style.css'/>
</head><!-- line 10 -->
<body>
<div id='wrap-sidebar'>
<!-- #logo -->
<!-- #searchform -->
<!-- #about -->
<!-- #category -->
<!-- #page -->
<!-- #follow me -->
</div><!-- End #wrap-sidebar -->
<div id='wrap-content'>
<!-- .content 1 -->
<!-- .entry -->
<!-- .entrydescription -->
<!-- .content 2 -->
<!-- .entry -->
<!-- .entrydescription -->
</div><!-- End #wrap-content -->
</body>
</html>

Keterangan Markup;

Line 1 atau markup pada baris 1/pertama adalah doctype markup HTML, disini kita memilih XHTML 1.0 Strict. doctype ini saya pilih karena sudah terbiasa dan saya bisa menjamin validasinya, bagaimana dengan HTML5? Sampai pada saat ini saya masih pelajari dan belum 100% paham dengan HTML5, lain hal jika hanya menggunakan tag-tag-nya saja. Alternatif, ya itu “XHTML 1.0 Strict”. Untuk pengertian lebih jauh tentang DTD doctype ini silakan berkunjung ke http://www.w3.org.

Pada tag <head> kita menambahkan tag <title>, <meta>, dan <link>. Tag <title> digunakan untuk memberi judul pada dokumen html, dan tag <meta> dengan atribut name, dan content digunakan untuk menambahkan metadata pada dokumen html(Baca keterangan lebih lanjut di http://www.w3.org). Sedangkan tag <link> dengan atrribut rel='stylesheet' digunakan untuk memanggil eksternal style CSS, atribut media dengan value all agar style CSS di rendering/dibaca semua media dan value pada atribut href adalah lokasi file css, adapun atribut type digunakan untuk menjelaskan jenis file css, Next

Sedangkan didalam tag body, kita menambahkan dua tag yaitu tag div dengan atribut id wrap-sidebar dan wrap-content, kedua tag itu adalah elemen utama dan komentar didalam kedua tag itu adalah susunan elemen yang akan kita tambahkan, next

Klik save(Ctrl + S), lalu jalankan index.html dengan cara klik ganda atau klik kanan > Open > plih firefox jika ada. Untuk setting default, hasilnya masih putih polos dan pada tab tertera judul “Tumblr By Desaindigital.com”, seperti pada gambar berikut;

tampilan default pada firefox

Reset CSS3

Tadi kita membuat file default.css, file ini akan kita tambahkan beberapa baris style CSS yang fungsinya untuk mereset style default tag HTML. You know? beberapa tag html sudah memiliki style default, contoh sederhana adalah tag <a dengan atribut href akan menghasilkan cursor dengan nilai pointer dan text-decoration underline ketika hover. Ada pun tag lain, sepeti body, heading, table, input, paragraf, yang sudah memiliki nilai untuk margin. Untuk itu kita perlu mereset tag-tag tadi agar nantinya kita dimudahkan untuk menata elemen-elemen tumblr ini, silakan edit default.css lalu tambahkan baris style css berikut;


*{/*line 1 */
background:transparent;
border:none;
margin:0;
padding:0;
list-style:none;
text-decoration:none;
color:inherit;
text-align:left;
outline:none;
}
.clear{
clear:both;
}
.clear:after{
content:'';
display:block;
clear:both;
}

Keterangan;

Selector *(bintang) ini ditujukan untuk semua elemen/tag html.
Dan style yang kita tambahkan adalah yang ada didalam blok { dan }.

Emled font

Secara default, browser tidak mengenal font lobster, jadi kita perlu meng-embled terlebih dahulu agar font ini dapat digunakan. Dan untuk proses embled sendiri, kita harus menyediakan font yang akan di-embled. Tadi kita sudah menaruh file Lobster.ttf di folder font, itu berarti syarat pertama sudah beres karena lobster.ttf ini adalah font yang akan kita embled, selanjutnya kita perlu menambahkan beberapa baris style CSS. Edit font.css lalu tambahkan style CSS berikut;


@font-face{
font-family:Lobster;
src:url('Lobster.ttf');
}

Keterangan;

Value pada font-family adalah nama font dan value pada src adalah lokasi file font.
Jangan lupa save;

Catatan;

Anda tidak harus mendownload dan menaruh Lobster.ttf didalam folder font, karena Lobster.ttf ada di goole web font. Tapi, disini saya memikirkan kondisi jika Anda tidak memiliki koneksi Internet.

Import style CSS

default.css dan font.css yang kita buat tadi belum dibaca oleh browser, karena didalam index.html tidak ada perintah untuk me-request kedua file css tadi, untuk itu kita perlu manambahkan baris kode style CSS agar kedua file tadi tadi dapat render oleh browser, disini kita memiliki dua opsi, yang pertama adalah dengan menambhakan tag <link kedalam index.html dan yang kedua adalah dengan metode import file. Disini kita akan memilih opsi kedua, yaitu import file. Edit style.css lalu tambahkan kode berikut;


/* line 1*/
@import url(default.css);
@import url(font/font.css);
/* line 4 */

Keterangan;

Fungsi kode diatas adalah untuk mengimport default.css dan font.css(pada folder font) kedalam style.css atau dengan kata lain, style CSS yang ada di default.css dan font.css akan ditambahkan kedalam style.css. Jika kita memilih opsi pertama, maka markup yang kita gunakan seperti berikut;


<link rel='stylesheet' media='screen' type='text/css' href='default.css'/>
<link rel='stylesheet' media='screen' type='text/css' href='font/font.css'/>

Dan penempatan kodenya dibawah tag <head>

.

Untuk kasus-kasus tertentu, langkah-langkah diatas bisa saja berubah haluan

Memulai Slicing

Setelah persiapan dasar sudah selesai, selanjutnya kita akan mulai mengkonversi PSD tumblr tadi, next

Menambahkan latar/background

Pada langkah ini kita akan menambahkan latar, jalankan program Photoshop lalu buka tumblr.psd yang sudah di download tadi;

Jalankan program Photoshop di PC anda, jika belum ada silakan download

Tampilan Thumblr di photoshop

tampilan awal thumlr

Setelah terbuka, sembunyikan Guides dengan menekan “Ctrl+;”, lalu pada panel layer, sembunyikan semua layer selain layer background;

panel layer background

Tanya : Kenapa layer lain disemunyikan?

Sebenarnya ini hanya Optional saja, selagi layer lain tidak mengganggu objek yang akan kita ambil/slice, layer ini tidak harus disembunyikan. Namun untuk memudahkan dalam penulisan tutorial, saya membuatnya seperti itu :D, Next

Tekan (Ctrl + R) untuk menampilkan rulers, klik kanan pada rulers lalu ubah satuan ke Pixels, next

setting ruler ke pixel

Aktifkan Slice Tool(K);

slice tools

Kemudian, perbesar area kerja lalu seleksi bagian latar, kemudian klik kanan pada area yang di seleksi. Edit Slice Options lalu ubah input pada label name manjadi latar. Value pada label name latar ini nantinya akan menjadi nama file. klik Ok atau tekan Enter.

slice latar

Catatan;Perhatikan ukuran area yang diseleksi, lebar dan tingginya masing-masing sebesar 60px. Untuk menghindari kesalahan, samakan value W: H: field Dimensions pada box dialog Slice Options; Setelah itu klik File > Save for Web & Devices(Alt+Shift+Ctrl+s);

save for web & devices

Save dengan format PNG-24;

save dengan format PNG-24

Pada Save Optimezed As, Save in: pilih folder tumblr yang sudah dibuat tadi, untuk Save as type: pilih Images Only(*.PNG). Settings: pilih Default settings, sedangkan untuk Slices: pilih Selected Slices.

save optimized as

Keterangan pada Save Optimezed As

  • Save in: tumblr, adalah target folder penyimpanan hasil slicing
  • Save as type: Image 0nly/hanya gambar, opsi ini dipilih agar Photoshop hanya menyimpan file gambar saja dan tidak membuat file index.html
  • Settings: Default Settings
  • Slices: Selected Slices, Opsi ini dipilih agar Photoshop hanya meyimpan file yang sedang diseleksi saja, dalam hal ini Photoshop hanya akan meyimpan gambar latar saja.

Klik Save, hasilnya didalam folder tumblr, secara otomatis Photoshop akan membuat folder images dan didalam folder images terdapat sebuah file gambar dengan nama latar.png.

Next, kita akan menggunakan gambar hasil slice tadi sebagai latar tumblr kita. Dan pada tahap ini, kita akan mengetahui bagaimana CSS merubah halaman web. Edit style.css lalu tambahkan style berikut;


html{
background:#f0f0f0 url('images/latar.png') repeat fixed center
}

Keterangan style CSS;

html disini adalah selector, yang berarti kita memilih tag html kemudian ditambahkan style sesuai dengan yang ada didalam block { dan }. Sedangkan style yang kita tambahkan didalam block { dan } adalah;

background:

  • #f0f0f0; value untuk background-color, fungsinya untuk mewarnai latar belakang,
  • url(‘images/latar.png’); value untuk background-image; berfungsi untuk manambahkan gambar latar, dimana gambar yang digunakan adalah latar.png yang ada di folder images.
  • repeat; value untuk background-repeat; berfungsi untuk mengulang gambar, hingga memenuhi halaman web.
  • fixed; value untuk background-attachment; berfungsi agar posisi gambar tetap, ketika scroll di geser kebawah-atas-kiri-kanan.
  • center: value untuk background-position; berfungsi agar, posisi awal gambar berada di tengah;

Style diatas ditulis dengan teknik shorthand, ini penting untuk penghematan dan peningkatan pengunduhan. Dan jika style ditulis dengan metode standar, sama dengan seperti ini;


html{
background-color:#f0f0f0;
background-image:url('images/latar.png');
background-repeat:repeat;
background-attachment:fixed;
background-position:center;
}

Tips;

Didalam penulisan style CSS, kita mengengal istilah ‘shorthand’, teknik ini digunakan untuk menhemat source yang kita tulis, perbandingan style diatas dengan dan tanpa teknik shorthand adalah 76 banding 173bytes. Tidak terlalu besar memang, namun bagaimana jika anda menulis style CSS sampai ribuan baris? Jadi, teknik ini sangat direkomendasikan. Perlu diketahui, tidak semua properti CSS dapat menggunakan teknik ini.

Save, lalu reload index.html, berikut adalah hasil kerja kita sejauh ini;

preview firefox latar

Basic layout

Langkah selanjutnya kita akan manambahkan latar basic layout, kembali ke program photoshop, delete slice latar. Lalu sembunyikan layer background kemudian tampilkan layer basic layout. Dengan Slice Tool — seleksi bagian basic layout, kemudian klik kanan pada area yang diseleksi, edit slice options lalu sesuaikan dengan gambar berikut;

slice basic layout

Keterangan Slice Options;

Value pada label name, nantinya akan menjadi nama file hasil slice, disini kita memasukkan “basic-layout”, yang berarti nantinya nama file akan menjadi basic-layout[dot]ekstensi

Pada fied Dimensions terdapat 4 inputan dengan label; X:, Y:, W:, dan H: berikut keteranganya;

  • Value pada label X: adalah titik seleksi(koordinat) dari kiri, disini valuenya adalah 0, berarti titik awal seleksi dari ujung kiri kanvas sesebar 0, atau dengan kata lain rapat dengan ujung kiri kanvas.
  • Value pada label Y: adalah titik seleksi dari atas, disini valuenya adalah 19, berarti titik awal seleksi dari ujung atas kanvas sebesar 19px.
  • Value pada label W: dan H: adalah lebar dan tinggi seleksi, W: untuk width/labar, H: untuk height/tinggi.

Setelah itu klik File > Save for Web & Devices(Alt+Shift+Ctrl+s), save dengan format PNG-24 di folder tumblr;

Periksa folder images yang ada didalam folder tumblr, sekarang terdapat dua file gambar yaitu latar.png dan basic-layout.png, seperti pada gambar berikut;

gambar latar dan basic layout

Next, kita perlu menambahkan style css untuk menata basic layout. Edit style.css lalu tambahkan style berikut;


body{
background:transparent url('images/basic-layout.png') repeat-y fixed top left;
min-height:1000px;
color:#898484;
}

Save lalu reload index.html hasilnya seperti pada gambar berikut;

Testing responsive;

Hai, coba zoom out/in “CRTL + (-+)” browser Anda apakah responsive? Tidak kan? untuk itu kita perlu mengatur lebar background-image basic-layout dengan satuan %(percent) agar itu responsive. Ingat teori property background-size pada teory diatas? Mari kita terapkan untuk menata basic layout ini;

Mencari nilai percent basic layout;

Lebar PSD tumblr tadi sebesar 1280px dan lebar basic layout sebesar 472px, kita bisa mendapatkan nilai %(percent) dari basic layout ini dengan menggunakan rumus perbandingan, pelajaran Math pas SMP, berikut;

Asumsi, 1280 sama dengan 100% dan 472 sama dengan x; berapa nilai x? Hasil dari nilai ini x adalah lebar percent dari basic layout;

nilai percent

Dari perhitungan sederhana diatas, didapat nilai x adalah 36.875 dan jika dibulatkan sama dengan 37%;

Jika Anda lagi malas menghitung, Anda dapat menggunakan photoshop untuk mendapat nilai percent ini, klik kanan pada rulers lalu pilih percent;

ubah nilai penggaris ke percent

nilai percent

Setelah mendapat nalai percent dari basic layout, sekarang kita perlu mengatur background-size dengan percent agar lebarnya menyesuaikan dengan lebar layar. Silakan edit style.css lalu tambahkan style berikut dibawah color:#898484;


background-size:37% auto;

Sehingga style untuk tag body menjadi sperti ini;


body{
background:transparent url('images/basic-layout.png') repeat-y fixed top left;
min-height:1000px;
color:#898484;
background-size:37% auto;
}

Save, lalu reload index.html dan silakan testting responsivitasnya.

Keterangan style CSS;

body adalah selector, yang berarti tag body ini akan dipilih lalu ditambahkan style sesuai dengan yang ada didalam block { dan }, dan style untuk tag/elemen body adalah;


background:#d8d8d8 url('images/basic-layout.png') repeat-y fixed top left;
min-height:1000px;
color:#898484;
background-size:37% auto;

background dan valuenya berfungsi untuk menata latar, gambar latar yang digunakan adalah basic-layout.png yang ada di folder images, dan gambar akan diulang secara vertikal(repeat-y). Posisi gambar tetap posisinya ketika scroll digeser(fixed) dan posisi awal gambar dimulai dari kiri atas(top left);

min-height dan valuenya berfungsi untuk menggatur tinggi minimal tag body, 1000px;

color dan valuenya berfungsi untuk mewarnai elemen yang ada di dalam tag body(property color ini mendukung inherit)

background-size dan valuenya berfungsi untuk mengatur ukuran gambar latar pada tag body, dalam hal ini gambar yang akan diatur ukuranya adalah basic-layout.png. Valuenya adalah 37% auto yang berarti lebar gambar latar sebesar 37% dan auto untuk mempertahankan tinggi gambar.

Teknik lain Basic layout

Perlu dipahami, pada proses konversi PSD to XHTML/CSS Anda tidak harus terpaku dengan apa yang anda baca, misal seperti implementasi basic layout diatas. Karena pada intinya, konversi ialah membuat versi html/css dari mockup PSD itu. Terserah mau pake cara apa, yang penting hasil coding Anda sama dengan yang ada di mockup PSD. Sebagai contoh, mari kita ke contoh(cara) lain dalam penataan basic layout;

Step 1

Edit style CSS lalu temukan style untuk basic layout kemudain ganti dengan style berikut;


body{
/* background:transparent url('images/basic-layout.png') repeat-y fixed top left; */
min-height:1000px;
color:#898484;
/* background-size:37% auto; */
}

Keterangan;

Pada style diatas, kita menambahkan komentar pada property background dan background-size, jadi property yang ditambahkan komentar itu tidak akan dijalankan oleh browser. Save lalu reload index.html, hasilnya terlihat hanya latar saja.

Step 2

Kembali ke Program photoshop, pebesar area kerja(sebesar-besarnya) kemudian seleksi bagain basic layout. Edit slice options lalu sesuaikan dengan gambar berikut;

slice basic layout dua

Penting;Samakan value inputan pada box dialog Slice Options, klik Ok atau tekan enter;

Setelah itu klik File > Save for Web & Devices(Alt+Shift+Ctrl+s), save dengan format PNG-24 di folder tumblr;

Periksa folder images yang ada didalam folder tumblr, sekarang terdapat dua file gambar yaitu latar.png, basic-layout.png, dan basic-layout.png seperti pada gambar berikut;

isi folder images 3

Setelah itu edit style.css kemudian tambahkan style berikut;


body:before{
content:'';
width:37%;
height:110%;
position:fixed;
top:-5%;
left:0;
background:#d8d8d8 url('images/basic-layout2.png') repeat fixed top left;
background-size:0.4% auto;
-moz-box-shadow:
inset -3px 0 4px rgba(0, 0, 0, 0.3),
1px 0 0 rgba(0, 0, 0, 0.5),
2px 0 0 rgba(255, 255, 255, 0.6);
-webkit-box-shadow:
inset -3px 0 4px rgba(0, 0, 0, 0.3),
1px 0 0 rgba(0, 0, 0, 0.5),
2px 0 0 rgba(255, 255, 255, 0.6);
box-shadow:
inset -3px 0 4px rgba(0, 0, 0, 0.3),
1px 0 0 rgba(0, 0, 0, 0.5),
2px 0 0 rgba(255, 255, 255, 0.6);
}

Save lalu reload index.html, lihat hasilnya, sama kan?

Catatan; Yeap, Pada proses konversi mockup PSD to HTML itu banyak teknik dan cara yang dapat digunakan. Dan sekali lagi, pada intinya adalah hasil konversi sama dengan mockup PSD, next.

Keterangan style css;

  • body:before ini adalah selector pseudo-element, fungsinya untuk memilih tag/elemen sebelum body(bukan tag body) dan style yang kita tambahkan adalah;
  • content: Digunakan untuk menampilkan elemen body:before;
  • width: Digunakan untuk mengatur lebar sebesar 37%;
  • height: untuk mengatur tinggi sebesar 110%;
  • position:dengan value fixed agar posisi elemen tetap pada posisi ketika di scroll.
  • top:-5%; untuk mengatur batas elemen dari atas, dan nilai negatif berarti elemen akan overlap ketas.
  • left: untuk mengatur batas elemen dari kiri
  • background:dan valuenya untuk mengatur latar belakang;.
  • box-shadow untuk membuat efek inner shadow dan line 1px.

Sidebar

Selanjutnya kita akan menata eleman sidebar, sebelum itu kembalikan style awal basic layout.
Bersambung…. :D

Hasil

Untuk hasil slice desktop version, silakan download file hasil konversi dibawah. Sedangkan untuk mobile version, berikut adalah hasil untuk device dangan lebar screen dibawah 350px. Kami juga membuatnya responsive sampai resolusi dibawah 101px

preview mobile version

Download file
Catatan

Semoga tutorial singkat ini sedikit berguna…

Seharusnya jika anda sudah paham xhtml/CSS, Anda dapat melanjutkan Conversi PSD thumbr ini. Kan gambarnya hanya di potong-potong lalu menata elemen kemudian menambahkan gambar :)

Ohya, jika ada pertanyaan silakan sampaikan di kolom komentar dan jangan melalui email maupun FB. Ini agar tidak terjadi pengulangan pertanyaan. Dan jika balasnya telat, tolong dimaafkan coz-hidup ini bukan hanya untuk ngeblog, ngedesain, nulis, dsb…

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

15 thoughts on “Part #1 : Konversi PSD Tumblr to XHTML/CSS + Responsive”

  1. fauzan says:

    Bang, izin copy ya tuk belajar dirumahh coz pengen banget bisa de.. berguna banget niih..
    tq

  2. shine says:

    keren banget thank’s tutornya

  3. hanip says:

    wahhh mantapppp cocok untuk ane yang newbie

  4. aji says:

    mantaph mas..
    ijin menyimak..

  5. salam kenal.
    kayaknya rumit banget yah???
    tapi ane mau coba belajar. ijin copas ke computer ya.

  6. Ochy says:

    Penjelasannya lumayan rijit bung.
    Thanks.. Membantu banget..
    Kalau caranya buat kolom “Leave a Reply” ini ada g yah? :)

  7. altizoff says:

    mantap gan ….makasih tutorialnya…semoga barokah..izin kopas

  8. keren sob,,
    thanks ya sob ats ilmunya…

  9. These backpacks usually come in various styles, colors, sizes and price tags.
    In that case you’ll probably pack your bag with lunch and various handy necessities.
    Tent camping is great for families with younger children because it’s fun, inexpensive,
    and the right combination of being outdoors without
    being too far from those modern conveniences.

  10. mariyam says:

    masih bingung buat dropdown menu yang layout navigasi dibuat dengan psd. Penjelasannya please, thx b4. :)

  11. Pingback: ikeirmawati96
  12. Pingback: dewisrtk20

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-