Tutorial Konversi PSD ke HTML & CSS
Kemaren malam saya iseng-iseng membuat design website dengan Photoshop dan langsung di convert dari PSD ke HTML, tadinya mau bikin desain untuk web pribadi yang kebetulan tidak terawat, tapi di tengah pembuatan malah jadi pengen bikin web bertema lain. Jadi campur aduk :p
Dan begini lah hasil nya, lumayan lah, tidak terlalu bagus, dan tidak terlalu jelek juga, silahkan download PSD nya, Anda juga bisa download HTML dan Video tutorial nya.
Kita bisa menggunakan template ini untuk website kecil-kecilan yang tidak membutuhkan banyak variasi bentuk halaman.
Download PSD
Download HTML&CSS
Video Slicing PSD
Demo
Proses Desain
Dalam tulisan ini saya tidak akan menjelaskan bagaimana membuat desain nya step by step, tapi sebenernya tidak terlalu sulit membuat desain seperti itu, karena desain seperti itu hanya bagaimana kita menempatkan Layer. Tidak ada bagian layer yang komplek dan detail. Dengan melihat susunan layer di PSD nya saya rasa anda bisa membuat jauh lebih baik dari yang saya buat.
Proses Slicing
Untuk slicing sudah saya buat struktur elemen2 apa saja yang akan kita slice, untuk melihat bagian apa saja yang saya slice, tinggal buka file PSD dan klik Slice Tool atau tekan tombol K pada keyboard.
Jika anda melihat Nomor dan garis yang ditandai dengan warna biru, itulah bagian yang saya slice, selain warna biru berarti itu otomatis dibuat oleh Photoshop.
Selanjutnya Pilih menu File – Save For Web & Devices (Alt + Shift + Ctrl + S)
Tentukan lokasi penyimpanan, setelah di save otomatis photoshop akan menaruh seluruh file kedalam satu folder bernama images.
Anda dapat menghapus file-file yang tidak diinginkan, sisakan file-file yang tadi di slice, yang tadi kita ditandai dengan warna biru. Lalu Rename setiap file sehingga akan terlihat hasil sebagai berikut.
Video Slicing
Jika bingung bagaimana cara slicing nya, berikut ini ada video yang telah saya rekam saat melakukan Slicing dan Pembuatan Struktur HTML dan CSS
Mohon maaf jika video nya tidak terlalu bagus, maklum dibuat buru2 disela-sela istirahat Real Madrid VS Barcelona
Proses Coding
Struktur HTML
Sekarang kita masuk ke proses pengkodean website, buat sebuat file dengan nama index.html
lalu buat struktur HTML seperti ini, untuk menulis kode saya menggunakan Notepad++ (Editor yang sangat – sangat ringan).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Izul Cyber Cafe</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"> </div> <!-- End Header -->
<div id="content"> </div> <!-- End Content -->
<div id="footer"> </div> <!-- End Footer -->
</div> <!-- End Container -->
</body>
</html>
Code bagian Header
Setelah selesai membuat struktur kita buat isi dari setiap DIV, pertama kita akan membuat isi dari Header yang terdiri dari Nama Website dan Deskripsi singkat tentang web.
<div id="header"> <div id="menu"> <ul> <li><a href="#" class="current"><span>Home</span></a></li> <li><a href="#">About</a></li> <li><a href="#">Menus</a></li> <li><a href="#">Contact</a></li> </ul> </div> <a href="#"><h1>Izul Cyber Cafe</h1></a> <p>The most comfortable coffee shop in the world</p> </div> <!-- End Header -->
Code bagian Content
Setelah selesai dengan bagian header, sekarang kita akan menulis kode untuk bagian Header. Bagian header terdiri dari Sidebar(kiri) dan Main(Halaman utama di sebelah kanan)
<div id="content"> <div id="sidebar" class="column"> <h2>The Menyyyuu</h2> <div class="product"> <img src="images/product1.jpg" /> <p class="product-title"> <a href="#">Capuchino</a> </p> </div> <div class="product"> <img src="images/product2.jpg" /> <p class="product-title"> <a href="#">Coffe Mate</a> </p> </div> <div class="product"> <img src="images/java.jpg" /> <p class="product-title"> <a href="#">Java Coffe</a> </p> </div> </div> <!-- End Sidebar --> <div id="main" class="column"> <div id="welcome"> <h2>Halaa Welcome</h2> <div> <img src="images/owner.png" /> <p>Hallow...Selamat datang di warung kopi terbaik, ternyaman dan terlengkap didunia</p> <p>Kami akan menyuguhkan secangkir kopi untuk anda, kami yakin anda akan menambah</p> <p align="right">owner - <b>Izul Chaniago</b></p> </div> </div> <!-- End Welcome --> <div id="recent-news"> <h2>Latest News (Demo)</h2> <div class="post"> <h2><a href="#">Felis at pharetra accumsan</a></h2> <p class="meta">Written by Izul Chaniago | 10 December 2011</p> <img src="images/big.png" /> <p>Quisque ultricies, felis at pharetra accumsan, nunc nisl ullamcorper dolor, rhoncus suscipit nibh massa ac purus. Quisque convallis, purus a blandit adipiscing, metus erat vulputate ipsum... <span class="more"><a href="#">Read more</a></span></p> </div> <div class="post"> <h2><a href="#">Felis at pharetra accumsan</a></h2> <p class="meta">Written by Izul Chaniago | 10 December 2011</p> <img src="images/post1.jpg" /> <p>Nunc nisl ullamcorper dolor Quisque ultricies, felis at pharetra accumsan, nunc nisl ullamcorper dolor, rhoncus suscipit nibh massa ac purus. Quisque convallis, purus a blandit adipiscing, metus erat vulputate ipsum... <span class="more"><a href="#">Read more</a></span></p> </div> <p class="product-title"><a href="#">View All</a></p> </div> <!-- End Recent News --> </div> <!-- End Main --> </div> <!-- End Content -->
Jquery Equal Height Column (sidebar & main)
Di bagian Kontent, kita memiliki 2 kolom, kiri dan kanan, kolom kiri dan kanan memiliki konten yang tidak sama, hal ini bisa menyebabkan bagian kiri dan
kanan tidak sama tinggi, kadang kiri lebih tinggi, terkadang kanan lebih tinggi, untuk menyamakan maka sisipkan Jquery dan Script untuk menyamakan tinggi div.
Div sidebar dan Main kita kasih Class=”column”. Dengan script ini, div yang memiliki nama class ‘column’ akan
dibuat otomatis memiliki tinggi yang sama.
Cara penggunaannya sisipkan script berikut di antara dan
// Jquery Equal Height Column
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
}); // End Jquery Equal Height Column
Di Bagian content tambahkan class=”column” di Sidebar dan Main, sehingga terlihat seperti berikut
<div id="sidebar" class="column">
<div id="main" class="column">
Code bagian Footer
Bagian akhir yaitu footer, difooter kita memiliki Menu dan Copyright, code nya adalah sebagai berikut.
<div id="footer"> <div id="footer-menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Menus</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul> </div> <!-- End Footer Menu --> <div id="copyright"> Copyright © 2011 | Designed by <span><a href="http://izulcybercafe.com">Izul Cyber Cafe</a></span> </div> <!-- End Copyright --> </div> <!-- End Footer -->
CSS
style.css
Setelah selesai membuat code HTML dari Header sampai dengan Footer, kini saatnya kita mempercantik website dengan CSS
Berikut adalah code CSS yang kita gunakan
body{
font-family: verdana, arial;
margin:0;
padding:0;
background:url('images/bg-grid.jpg') right top;
color:#847a52;
line-height:1.5em;
letter-spacing:0.7px;
}
h2{margin:0; padding:10px 0 0 0;color:#9c9062;border-bottom:1px dotted #ece3c8; font-size:18px;font-family: 'Electrolize', sans-serif;}
a{text-decoration:none; color:#9c9062; font-weight:bold}
h2 a{color:#9c9062}
a:hover{color:#000}
ul, ul li {margin:0}
#container{
width:800px;
padding:0 5px;
margin:0 auto;
background:url('images/bg_wrapper-how.png');
}
#header{
height:315px;
background:transparent url('images/header.jpg') top center no-repeat;
}
#header #menu{
height:120px;
position: relative;
top:20px;
left:20px;
}
#header #menu ul{
list-style-type:none;
margin:0;
padding:0;
}
#header #menu ul li{
display:inline;
margin:0;
}
#header #menu ul li a{
font-weight:bold;
color:#000;
display:inline-block;
padding:42px 37px;
background:transparent url('images/circle.png') center no-repeat;
}
#header #menu ul li a:hover,
#header #menu ul li a.current{
background:transparent url('images/circle-hover.png') center no-repeat;
}
#header h1{
color:#9d211c;
width:415px;
height:51px;
margin:20px 20px 0px 65px;
font-size:50px;
text-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #d8ba59;
background:url('images/izulcybercafe.png') top left no-repeat; /* Delete jika ingin menggunakan Teks */
}
#header p{
width:425px;
text-align:right;
margin-left:95px;
margin-top:0;
}
#content{
overflow:hidden;
border-top:1px solid #fbf0d0;
margin:0px; padding:0px;
background:url('images/bg.jpg');
}
#content #sidebar{
float:left;
width:224px;
padding:0 25px;
background:url('images/sidebar.jpg') left repeat-y;
}
.product{margin:10px 0;}
.product img{padding:3px; background:#f4f4f4; box-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #f0e3be;}
.product img:hover{box-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #d8ba59;}
.product-title{text-align:right}
#main{
float:right;
width:500px;
padding:0 10px;
}
#main #welcome{
overflow:hidden;
}
#main #welcome div{
font-style:italic;
}
#main #welcome img{
float:right;
}
#main .post{
border-bottom:1px solid #ece3c8;
margin:10px 0;
}
#main p.meta{font-size:small}
#main .post img{
float:left;
background:#f7f7f7;
padding:5px;
margin:0 10px 10px 0;
box-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #f0e3be;
}
#main .post img:hover{box-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #d8ba59;}
#main .comment-post{
margin:5px;
display:block;
border-bottom:1px dotted #9c9062;
min-height:130px;
}
#main .comment-post img{
background:#f7f7f7;
float:left;
padding:5px;
margin:0 10px 10px 0;
}
#footer{
clear:both;
font-size:small;
height:37px;
padding:2px 0 18px 0;
text-align:center;
color:#f5df9f;
background:url('images/footer.jpg') repeat-x;
}
#footer a{color:#eddeb2}
#footer #footer-menu ul{
list-style:none;
}
#footer #footer-menu ul li,
#footer #footer-menu ul li a {display:inline;color:#f5df9f; padding:0 5px}
Oke sekian tutorial ini, Jika ada yang mau merubahnya menjadi template wordpress silahkan
Maju terus web design Indonesia.
Tags
membuat web dengan jquery,cara convert psd ke html,cara membuat website menggunakan css,belajar div,convert psd ke html,web yang sudah jadi,membuat kotak dengan css,how to convert psd to html,cara mengkonversi psd ke html,tutorial web design dengan notepad,belajar web design dengan notepad,cara menambahkan css,slicing,cara konversi psd ke html,photoshop to html tutorial,photoshop to html,cara psd to html,belajar desain web dengan notepad,cara convert PSD ke css,cara convert psd to wordpress Tags: css, css tutorial, HTML, jquery, PSD, psd tutorial, Slice, slicing, Slicing PSD to HTML & CSS, webdesign, XHTML
Web Designer and Developer from Jakarta, Indonesia
56 Comments
Nih yang ditunggu tunggu ilmunya
mantaaaap …. thanks berat bang
ada materi parralax gak gan????????????
Kalau ada waktu nanti saya tulis tentang Parallax
Makasih mas izul atas share tutor slicing psd to html nya
Ia sama2 master
Tidak semudah yang saya bayangkan. Mendingan langsung tulis kode HTML & CSSnya langsung deh
ni templatenya bisa di pake buat WordPress ga?
Saat ini belum dibuat untuk versi wordpress? emang mau make?
mas apa template itu bisa di bwat pada wordpress ga ya?
klaw ngga mau repot ngerenamex jangan pas udah di “save as for web”, ngasi nama filex bisa pada saat SLICING debgan cara pake tools slicenya, klik dua kali pada object yang di slice, ataw klik kanan pada object lalu pilih properti…nah disi tu tersedia field buat ngasi nama pada saat udah di export.
Yup betul sekali, sebenernya sama aja repotnya, karena kita capek menamai di awal, sedangkan dengan merename kita capek menamai di akhir
silahkan pilih sesuai keinginan.
Sayang slicingnya tidak bisa berlaku jika ingin spritenya transparent yah :’( (eh atau bisa?)
Maksudnya gimana ya?
Kayaknya untuk desain ini ga ada kbutuhan pake sprite deh, dan gw liat jg penulis ngga pake sprite kok
Thanks berat Om, tapi ini kurang lengkap tutorialnya. masalah pengkodeannya itu llo kok bisa istilah jawanya ujug” dapet kode” kayak gitu
mungkin bsa di jelasin masalah tahapan convertnya ke html kalo di beri langsung kayak gitu susah untuk di pahami step by stepnya karena kita di beri bukan di ajari , sekali lagi thanks Om
Mungkin kamu harus liat video nya, ada cara slicing dan tahap awal pengkodeannya disitu. Setelah itu video nya memang dipotong pada tahap pengkodean, karena code nya sama dengan yang ada di tutorial ini. Kalau direkam semua file video nya jadi sangat besar
Terima kasih juga telah membaca
wah makasih mas tutorialnya..btw ne gk pake 960gs ya??
ada tutorial dari slice ampe html yg 960gs gk?? lgi belajar 960gs…
Salam,
Untuk pake 960gs gampang kok, donlod aja css-nya (silakan googling), trus copas di folder css km, jgn lupa dipanggil pake tag .
cara pake juga gampang kok, misal :
class grid_3 itu punya-nya si 960, kita tinggal pake aja. silakan baca2 css-nya untuk tau lebih detail
Kebetulan untuk tulisan ini tidak menggunakan 960gs, dan tidak punya tutorial untuk itu. Tapi kalau anda ingin menggunakan 960gs, itu bagus sekali, di 960gs juga ada file .psd yang bisa digunakan untuk membantu mendesain. Kurang lebih sama saja proses nya
Tutorialnya baguus, udah runtut banget, thanks
Mau komentar, kayaknya kurang jelas kalo dibaca sm orang yg masih awam banget soal web, kurang ada penjelasan step by step gimana kok bisa pake kode2 kyk tersebut, kok cssnya seperti itu, Saran aja
Slm knal mas..tutor ini sngat membantu…term ksh share ilmunya…
mas izul, sy newbie di photoshop..hehe kalo cara ngeklik objek menu yang bulat di header.. ko malah pindah dengan background yang dibelakangnya y? di video tutorialnya pas mau bikin circle.png sama circle-hover.png..
makasih..
Coba ceklis Auto Select (layer/group) di kiri atas photoshopnya.
Atau kalau masih bingung, klik sub folder dari layer ‘menu’ yang diinginkan pada kolom layar dikanan bawah. trus gunakan keyboard kiri/kanan untuk memindahkan.
mau tanya donk, kalo buat header full ky body apa yaa codenya ?? mohon bantuannya …
Sudah pernah ditulis tuh, coba cari
heii,izul.. saya mau tanya,, coding yg meletakkan gambar owner kamu itu,, aku udah coba,, tapi nama owner yg dibawahnya,, itu knapa gak bisa dibawahnya pas gambar owner sebelah kanan yaa?? tolong referensi nya..,
trims,
-issa-
Heii isa
Mungkin teksnya terlalu pendek atau terlalu panjang. Bisa disesuaikan dengan memberi space dengan paragraph.
Sebenarnya ada banyak cara yang lebih baik untuk membuat caption pada gambar.
coba link dibawah ini, tp tidak semua bisa langsung digunakan di desain pada artikel ini, harus disesuaikan lg css nya.
- http://html5doctor.com/the-figure-figcaption-elements/
- http://www.labnol.org/internet/design/add-text-captions-align-images-html-css/2309/
- http://www.w3.org/Style/Examples/007/figures.en.html
- http://css-tricks.com/slide-in-image-captions/
iyaa… saya sudah coba ulang,, sudah bisa koq.. terima kasih mas i… , ^__^
it works!
oiaa, sbelumnya maaf… gak pake’ “mas”… :p
hehehee,,
mendingan design blog deh ..
gw udah design web corporate pake photoshop ..
ehh udah jadii ..bingung gimana cara masukin k dreamweaver nya …
convert k html susah ya ..
padahal di format PSD nya udah di slice smua ………….
nih design nya ..
http://a5.sphotos.ak.fbcdn.net/hphotos-ak-ash3/530341_2597820004005_1809928656_1496178_1465019384_n.jpg
WOw keren masbro designnya,
Ajarin donk gimana cara bikinnya
kalo dah slice kan tinggal di save for web, waktu save nya pilih html + image
jadi deh htmlnya, tapi masih dalam format gambar semua,
boleh donk di kasih file psdnya wkkwk
boleh ..
inbox aja k fb ane gan … tar ane kasih
Liat videonya saja mas, siapa tau membantu.
Kasusnya sama kok dengan tutorial ini. Dari PSD menjadi HTML dan CSS
udah mas ..
tapi kebingungan uyy ..
di slice udah beres ..
ampe ratusan image ..huft
udah di edit di DW ..
tapi bingung juga juga juga ..
tampilan di localhost nya ko beda ..
padahal di edit d DW nya udah mirip (menurut ane)..
Salam,
Gw udah cek bro desainnya. Untuk Top Navigation, itu ntar pengennya gambarnya cm statis ato mau dikasih efek pas hover? kalo statis, gampangnya, langsung slice aja headernya 780×202. Untuk Logo, di psd, hide smua layer selain si logo, trus save as png dgn bg transparant. ntar kita kasih div khusus buat nempatin si logo
Nah, terus ini kan konsepnya 3 kolom? brarti kita bikin container dimana didalamnya terdapat 3 div untuk masing2 kolom
Untuk “product”,”partner”,”about us”, mending kita bikin class sendiri. Krn di box itu ada backgroundnya brarti kita ga bisa nge-repeat, mending langsung slice aja bulet2 200 x 86 piksel.
Trus kita harus bikin class juga untuk tombol more info. Nah untuk yg ini kita bisa bikin sprite soalnya tombolnya simpel. hmm tapi ada shadow-nya ya dibawah button, agak ribet dikit sih, coba pake css3 box shadow.
Untuk latest news juga bisa bikin class sendiri. krn gradiennya dari atas kebawah brarti ntar stelah slicing pake repeat-y. butuh beberapa div biar tampilannya pas sperti yg kita mau
terimakasih mas tutorialnya, sangat bermanfaat sekali mas, buat saya yang masih baru dalam dunia website.
mas kalok bisa ditambah mas gimana caranya mengubah file psd(photosop) ke joomla.
terimakasih.
Terima kasih juga sudah membaca
Sebagai gambaran, intinya PSD dikonversi dulu jadi HTML seperti ditutorial ini. Setelah itu baru dikonversi menjadi template joomla, ada banyak fungsi2 joomla yang harus anda pelajari. Silahkan baca disini untuk memulai : http://docs.joomla.org/Creating_a_basic_Joomla!_template
“Cara penggunaannya sisipkan script berikut di antara dan …”
disisipin sebelah mana master…?
Mohon maaf atas kekurangan pada tulisan diatas, untuk lebih jelas, Silahkan download HTML nya, dan anda bisa melihat script itu diletakkan dimana.
Semoga membantu
Tutorialnya lengkap sekali. Sedikit ide, foto ownernya sepertinya lebih bagus menggunakan CSS transform. Jadi tinggal menggunakan foto asli.
Terima kasih sarannya:)
Sebaiknya memang menggunakan css transform, tapi inti dari tutorial ini sebenarnya hanya ingin sedikit menjelaskan langkah2 konversi dari PSD ke HTML
Untuk selanjutnya silahkan dikembangkan sesuai kebutuhan
makasih ya ilmunya
alhamdulillah bermanfaat 
wah makasih nih udah share ilmunya mas..cocok untuk saya yg masih newbie butuh banyak info..
good tut..
makasih banget ni..
bermanfaat banget..
diperbanyak lagi ya tutorialnya..
hehe
ini dia tutorial yang cocok buat pemula,,, hatur thanks you
zul, ane masi blum paham setelah tahap slicing itu selesai trus hasil slicing itu gimana caranya agar bisa tampil web?
apa mesti di panggil satu per satu pada kode htmlnya???
so far , makasih atas tutorialnya Zul\
Coba liat code HTML atau di code CSS nya. Semuanya ada disitu. Tinggal mengatur penempatannya saja.
makasih mas tutorialnya, buat newbi berguna bgt..izin sedot neh
bermanfaat bgt ilmunya saya akan gunakan termimakasih
bang izulllll, moga saya blm telat hehee..
kalo buat umumnya kita design nya dg ukuran brp x brp ?
2. trs nanti pas ngoding body nya di tentuin lagi ga width & heightnya ?
klo udah pas kan, pas ngegambar saya bisa sediain gambar yg resolusi tinggi biar ga pecah..
makasih bang zul ..
Umumnya ukuran lebar website yang banyak dipakai itu 960px.
Pas ngoding tentunya kita akan menentukan width nya berapa, bukan body karena body biasanya dibiarkan 100% (selebar layar devicenya), tapi biasanya disebut “Wrapper”, sesuai dengan lebar yang ditentukan (960px).
Biasanya untuk website resulusinya tidak perlu tinggi2, karena akan memberatkan loading.
Umumnya ukuran lebar website yang banyak dipakai itu 960px.
Pas ngoding tentunya kita akan menentukan width nya berapa, bukan body karena body biasanya dibiarkan 100% (selebar layar devicenya), tapi biasanya disebut “Wrapper”, sesuai dengan lebar yang ditentukan (960px).
Biasanya untuk website resulusinya tidak perlu tinggi2, karena akan memberatkan loading.
Wah mantaf…nih
telimikiciw sudah berbagi soal ini.Mempelajari dlu deh 
Langsung CTRL+D dulu, makasih ilmunya,, sedang dipraktekkan..
One Trackback
[...] Tutorial Konversi PSD ke HTML & CSS [...]