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

Baca Juga:  30+ Humor CSS yang Akan Membuatmu Ngakak!

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 &gt; 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 &copy; 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.

Komentar

comments

Izul Chaniago

Web Designer and Developer from Jakarta, Indonesia

grain storage instagram türk takipçi satın al