Part #3 : Konversi PSD Tumblr to XHTML/CSS + Responsive — Merancang header

Pada tutorial ini, saya akan melanjutkan artikel-tutorial berseri "Cara koneversi mockup PSD to XHTML/CSS. Dan pada seri ke tiga ini--kita akan merancang elemen header

Always positive thinking! Unknown

Pada tutorial ini, saya akan melanjutkan artikel-tutorial berseri "Cara koneversi mockup PSD to XHTML/CSS. Dan pada seri ke tiga ini--kita akan merancang elemen header

Last Modif at October 27th, 2014

Sebelum membaca tutorial ini, pastikan Anda membaca seri sebelumnya–dimari:

Pada tutorial ini, saya akan melanjutkan artikel-tutorial berseri “Cara koneversi mockup PSD to XHTML/CSS. Dan pada seri ke tiga ini–kita akan merancang elemen header;
Sebelum memulai download terlebih dahulu–hasil kerja sejauh ini dimari: basic-layout.zip

Letakkan file download di folder yang mudah diingat, lalu extract. Setelah di extract, didalamnya akan muncul penampakan seperti ini;

Konversi PSD to html/css: tampilan folder

Perubahan pada File PSD;

Untuk memudahkan dalam penulisan totorial; Kami juga merubah susunan layer, yang awalnya seperti ini;

Konversi PSD to html/css: layer lama

menjadi seperti ini;

Konversi PSD to html/css: layer baru

Catatan: Yang kami ubah–hanya susunan layer group; ini untuk menyamakan dengan susunan markup HTML; Dan kami juga menghilangkan elemen video. Jadi, silakan download terlebih dahulu file PSD yang kami edit, dimari: tumblr.edit.psd.zip. Sedangkan untuk file originalnya silakan download di PSDfreemium.com; Next

Merancang elemen header

Jalankan index.html yang baru didownlod tadi menggunakan browser favorit Anda, berikut adalah tampilan pada firefox;

Konversi PSD to html/css: tampilan di firefox
Klik gambar untuk perbesar

Jalankan juga program photoshop, setelah itu buka file PSD yang baru didownload tadi;

Berikut adalah tampilan di komputer saya, yang menggunakan winXP dan PS CS3;

Konversi PSD to html/css: tampilan PSD di photoshop
Klik gambar untuk perbesar

Pemahaman sebelum merancang elemen header

Sebelum merancang elemen header, mari kita telaah terlebih dahulu struktur pada elemen header; Pada fie PSD, didalam elemen header terdapat dua elemen lagi yaitu; logo dan search;

Konversi PSD to html/css: elemen header

Sehingga untuk menyesuaikan; Pada markup HTMLnya, kami membuatnya seperti ini;


<div id='wrap-header'>
<div class='header'>
<h1 id='logo'><!-- #logo -->
<a href="#">
<img src="images/logo.png" width="225" height="225" alt="Tumblr By Desaindigital" />
</a>
</h1><!-- End #logo -->
<div class="find">
<form method="get" class="searchform" action="#">

<div>
<label class="screen-reader-text" for="s">Find:</label>
<input value="" name="s" class="s" type="text"/>
<input class="searchsubmit" value="Search" type="submit"/>
</div>
</form>
</div><!-- End .find -->
</div><!-- End .header -->
</div><!-- End #wrap-header -->

Copy Markup diatas, lalu edit index.html yang dijalankan tadi, setelah itu temukan markup berikut;


<div id='wrap-header'><!-- On line/pada baris 19 -->
<!-- .heder -->
<!-- #logo -->
<!-- .find -->
</div><!-- End #wrap-header -->

Lalu gantikan dengan kode yang baru dicopy tadi/diatas;

Save lalu jalanakan index.html, berikut adalah tampilanya;

Konversi PSD to html/css: Tampilan di firefox--header
Klik gambar untuk perbesar

Parah bukan? Ya, jalas saja–scara belum diberi bumbu CSS, selain itu logonya juga belum muncul.

Menampilkan logo

Untuk menampilkan logo, kita memerlukan sebuah gambar yang akan digunakan sebagai logo. Pada langkah ini kita akan menggambil logo–kembali ke program photoshop, sembunyikan semua layer group selain header dengan cara mencentang icon[mata]

Konversi PSD to html/css: hide layer

Perbesar area kerja hingga tampilan logo terlihat jelas;

Konversi PSD to html/css: tampilan logo di photoshop

Aktifkan slice tools, lalu seleksi bagian logo, setelah itu klik kanan pada area yang diseleksi. Pilih Edit Slice Options kemudian sesuaikan nilai input dengan gambar berikut;

Konversi PSD to html/css: slice logo

PentingPastikan nilai pada Slice options sama persis!

Kambali ke panel layer, pada layer group “search” sembunyikan icon “luv” dan text dengan cara mencentang icon[mata];

Konversi PSD to html/css: tampilan layer header--search

Masih dengan slice tools, seleksi bagian search, lalu klik kanan pada area yang diseleksi, kemudian pilih Edit Slice Options lalu sesuaikan dengan gambar berikut;

Konversi PSD to html/css: slice search

Untuk proses save, baca pada tutorial part 1(PNG-24). Lalu pada Save Optimized As, sesuaikan dengan gambar berikut;

Konversi PSD to html/css: Save Optimized As

Ketarangan; Pada ave Optimized As sebelumnya, Opsi slices: kita memilih “Selected slices” lalu pada setting diatas, kita memilih “All User Slices”. Kita memilih “All User Slices” karena kita menyeleksi lebih dari 1 objek. Dan jika kita memilih “Selected slices”, maka photoshop hanya akan menyimpan satu Objek/gambar saja. Jadi dengan memilih “All User Slices”: Berfungsi untuk menyimpan semua obejek/gambar yg di seleksi. Lebih hemat waktu bukan? Coba banyangkan jika kita menyeleksinya satu-persatu trus savenya juga satu persatu. Pasti lebih lemot toh?

Tips; Untuk saya, sebenarnya lebih suka menyeleksi semua objek terlebih dahulu lalu membuat HTML kemudian CSSnya. Jadi tidak perlu lagi kembali ke photoshop > Text editor > browser. Namun karena ini tutortial; Saya memikirkan kondisi termudahnya; Next…

Pastikan gambar hasil seleksi tadi berada/ditaruh didalam folder “images”; sehingga pada saat ini, didalam folder images terdapat; 5 objek gambar yaitu; background.png, basic-layout.png, basic-layout2.png, bg-searchform.png dan logo.png;

Konversi PSD to html/css: tampilan isi folder images

Reload index.html, hasilnya seperti gambar berikut;

Konversi PSD to html/css: tampilan folder
Klik gambar untuk perbesar

Menambahkan style CSS untuk elemen header dan Logo

Preview diatas masih cukup berantakan, sekarang–kita akan menambahkan style CSS untuk menata tampilan header; Masuk ke folder CSS, temukan template.css setelah ketemu, edit lalu tambahkan style CSS berikut;


#wrap-header .header{
margin:0 15% 0 20%;
min-height:20px
}

#wrap-header .header h1,
#wrap-header .header h2,
#wrap-header .header h3{
margin:0;
padding:0;
text-align:center
}

#wrap-header .header h1#logo img{
border:0;
margin:0;
padding:0;
background:transparent;
min-width:80%;
max-width:90%;
height:auto
}

Jangan lupa save, lalu lihat hasilnya;

Mengatur tampilan seacrh dengan CSS

Sekerang, kita akan mengatur tampilan elemen search; Masuk ke folder CSS lalu edit class.css, kemudian tambahkan style CSS berikut;


/* search */
.searchform{
margin:30px auto 25px auto;
display:block;
max-width:300px;
height:44px;
background: url('../images/bg-searchform.png') no-repeat center;
background-size:100% 42px
}

.searchform *:focus,
.searchform *{
line-height:0;
outline:none;
border:0
}

.searchform label{
display:none
}

.searchform input[type='text']{
font:italic bold 15px/0px georgia, serif;
width:69%;
margin:11px 0 0 0;
padding:0 0 0 16px;
background:transparent;
color:#777
}

.searchform input[type='submit']{
width:13%;
cursor:pointer;
min-height:30px;
margin-right:3%;
margin-top:2%;
float:right;
text-indent:-666em;
background: url('../images/button-search.png') no-repeat center
}
/* End search */

Save, dan hasilnya seperti pada gambar berikut;

Konversi PSD to html/css: tampilan di firefox header--logo dan search

Keterangan dan tugas

Pada tampilan search diatas; tombol searchnya tidak terlihat; Tugas Anda sekarang adalah silakan buat sendiri tombol searchnya. Cluenya seperti ini; Pada file PSD, tombol searchnya sudah ada, Anda hanya perlu menslice lalu menyimpanya di folder images; Perlu diperhtikan, latar tombol search “transparent(baca: transparan atau tembus pandang)” lebar dan tingginya masing-masing 40px. Sedangkan nama tombol searchnya adalah “button-search.png”. Selamat belajar…

Download file

Next Part tutorial

  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Merancangn content
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Merancangn sidebar
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Merancangn footer
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Debugger IE
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Hack responsive
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Set responsive to max-width-device 800px
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Set responsive to max-width-device 650px
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Set responsive to max-width-device 450px
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Set responsive to max-width-device 250px
Catatan Untuk Copaster

Saya tidak melarang Anda untuk mengcopy-paste apapun di blog ini. Itulah kenapa saya menggunakan Picasa Web Album untuk menyimpan file gambar dan file-file lainya; Ini agar bandwidth di hosting saya tidak terkuras. Dan karena menggunakan pica web album sebagai image hosting itu ribet–saya memutuskan untuk menyimpan file gambarnya di hosting sendiri. Jadi, jika Anda ingin mengcopy Artikel ini–Silakan Download gambarnya terlebih dahulu–lalu upload ulang di hosting sendiri, JANGAN MALAS!

Untuk sementara File hotlink tidak saya aktifkan, namun jika suatu hari membebani hosting saya. Dengan sedikit keterpakasaan, fasilitas itu akan saya aktifkan. So, mohon kerja samanya

Maaf jika artikel ini sedikit sukar untuk dimengerti–saya menulisnya dalam kondisi terburu-buru

Indam

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

2 thoughts on “Part #3 : Konversi PSD Tumblr to XHTML/CSS + Responsive — Merancang header”

  1. Opencart says:

    Hi,awesome posting,
    Thanks for sharing,i can’t understanding of Indonesia language, but your code that post make me solved my problem.

    Thanks again,

    Opencart

  2. mujie eboxz says:

    tutorial yang sangat lengkap mas… mas kalau bikin theme seperti yang di home pagenya indaam site itu pake css apa y ?

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

+
-