Konversi PSD Clean Corporate Website menjadi HTML

03 Jul 2011 Design 10 Comments

Kalau dalam posting kemarin saya berbagi template Clean Corporate Site, kali ini saya akan menuliskan tutorial pembuatannya. Dalam tutorial ini kita akan sedikit belajar tentang animasi jQuery Slider.

Preview

Inilah hasil akhir dari template yang akan kita buat. Klik gambar untuk melihat live demo-nya.

Persiapan

Sebelum memulai, pastikan anda telah mengunduh Mockup PSD website yang akan kita buat. Jika belum, silakan unduh di PSD Freemium. Langkah pertama yang kita lakukan adalah mempersiapkan file-file dan folder. Buat folder baru dengan nama “Clean-Corporate”. Di dalam folder ini, buat/masukkan file-file berikut:

index.html
style.css
reset.css, bisa diunduh di http://meyerweb.com/eric/tools/css/reset/
jQuery, unduh di http://jquery.com/
jQuery Tools (script untuk membuat efek slider), unduh dari http://flowplayer.org/tools/documentation/index.html
modernizr (script yang berfungsi untuk mengoptimalkan markah HTML5 di IE), unduh di http://modernizr.com/
folder baru dengan nama “img” untuk menyimpan gambar hasil slicing

tutorial clean corporate website

Langkah 1 – Membuat Markah Dasar HTML

Buka index.html di teks editor favorit anda (saya menggunakan Notepad++), masukkan kode HTML berikut:

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta name="author" content="Aris FM" />
<meta charset="UTF-8" />
<title></title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css"/>
<!--[if IE]>
<script src="modernizr-1.7.min.js"></script>
<![endif]-->
</head>
 
<body>
 
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.tools.min.js" type="text/javascript"></script>
</body>
</html>

Langkah 2 – Membuat Struktur Layout

Sebelumnya kita perlu memahami struktur HTML yang akan kita buat dari mockup PSD. Berikut ini adalah struktur halaman yang akan kita buat:

tutorial clean corporate website

Struktur HTML terdiri dari 5 bagian, yaitu #top (header), #slides (deskripsi produk dengan efek jQuery slider), #quote, #info-wrapper (info produk) dan footer. Masukkan kode HTML berikut diantara kode <body> dan <script src="jquery-1.6.1.min.js" type="text/javascript"></script>

<div id="top">
</div><!--End top-->
 
<div id="slides">
</div><!--End slides-->
 
<aside id="quote">
</aside>
 
<div id="info-wrapper">
</div><!--End info wrapper-->
 
<footer>
</footer>

Langkah 3 – Membuat Header Website

Buka file PSD dan buat seleksi pada background header dengan crop tool. Agar hasil seleksi akurat, perbesar area kerja sampai tekstur background terlihat jelas. Simpan untuk web (Ctrl+Alt+Shift+S) dengan nama “orange-bg.jpg”.

tutorial clean corporate website

Langkah selanjutnya adalah memotong logo. Pilih semua layer di dalam layer group “logo” dan gabungkan dengan menekan tombol Ctrl+E. Buat guide di sekitar layer dan seleksi dengan crop tool sesuai guide. Sembunyikan layer-layer background agar latar logo menjadi transparan. Simpan untuk web dengan format PNG-24 transparan dengan nama “logo.png”

tutorial clean corporate website

Selanjutnya masukkan kode HTML berikut diantara kode <div id="top"> dan </div>

<div>
<header>
<h1><a href="#">web+design</a></h1>
</header>

Buka style.css, masukkan kode CSS berikut.

@import url(reset.css);
body{
	color:#fff;
	font:14px helvetica,sans-serif;
	font-weight:medium;
	margin:0;
	padding:0;
}
 
/* Top */
#top{
	background:transparent url(img/orange-bg.jpg);
	overflow:hidden;
	height:87px;
	width:100%;
}
#top div{
	margin:0 auto;
	padding:0 10px;
	position:relative;
	width:940px;
}
header{
	float:left;
	width:390px;
}
header h1 a{
	background:transparent url(img/logo.png);
	float:left;
	text-indent:-9999px;
	margin-top:22px;
	height:43px;
	width:157px;
}

Sekarang buka index.html di peramban web. Dan inilah hasil yang kita dapat sejauh ini.

tutorial clean corporate website

Langkah 4 – Membuat Navigasi Menu

Buat guide pada masing-masing menu item. Seleksi dengan tool crop sesuai guide pada tiap menu. Sembunyikan layer-layer background agar latar menu menjadi transparan. Simpan masing-masing menu dengan “menu-portfolio.png”, “menu-blog.png”, “menu-pricing.png” dan “menu-contact.png”

tutorial clean corporate website

Selanjutnya pilih layer separator dan buat guide di sekitar layer. Seleksi dengan tool crop sesuai guide. Sembunyikan layer-layer background agar latar separator transparan. Simpan dengan nama “menu-line.png”.

tutorial clean corporate website

Background menu tidak kita buat dengan gambar tetapi dengan properti CSS background transparency. Oleh karena itu kita tidak perlu memotongnya di PSD

Masukkan kode HTML berikut diantara kode </header> dan </div>

<nav>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

Atur tampilan menu dengan CSS.

#top nav{
	background:rgba(0,0,0,.3);
	float:right;
	position:absolute;
	left:400px;
	height:87px;
	width:9999px;
}
#top nav ul{
	height:100%;
	padding-left:20px;
	width:530px;
}
#top nav li{
	background:transparent url(img/menu-line.png) no-repeat right;
	display:inline-block;
	height:100%;
	padding:0 20px;
}
#top nav li:last-child{
	background:none;
	padding-right:0;
}
#top nav a{
	display:block;
	height:42px;
	margin-top:22px;
	text-indent:-9999px;
}
a.port{
	background:transparent url(img/menu-portfolio.png);
	width:90px;
}
a.blog{
	background:transparent url(img/menu-blog.png);
	width:73px;
}
a.pricing{
	background:transparent url(img/menu-pricing.png);
	width:82px;
}
a.contact{
	background:transparent url(img/menu-contact.png);
	width:102px;
}

Langkah 5 – Slider untuk Informasi Produk

Perbesar area kerja sampai maksimal dengan menekan tombol Ctrl+= agar tekstur background terlihat jelas. Buat seleksi dengan tool crop pada background slider dengan ukuran 6 x 6px. Simpan dengan nama “green-bg.jpg”.

tutorial clean corporate website

Selanjutnya kita akan membuat gambar anak panah untuk slider. Pilih layer arrow di dalam layer group slider dan ubah menjadi smart object (klik kanan > convert to smart object). Buat guide di sekitar panah bagian kiri dan seleksi dengan tool crop sesuai guide. Sembunyikan layer-layer background agar latar gambar transparan. Simpan dengan nama “arrow-l.png”. Ulangi langkah ini untuk panah bagian kanan dan simpan dengan nama “arrow-r.png”.

tutorial clean corporate website

Selanjutnya kita buat gambar produk. Buat guide di sekitar layer gambar produk dan seleksi dengan tool crop sesuai guide. Sembunyikan layer-layer background agar latar gambar transparan. Simpan dengan nama “slider-img.png”.

tutorial clean corporate website

Masukkan kode HTML berikut diantara kode <div id="slides"> dan </div>.

<article>
<div>
<div>
<h2>Our Product Descriptions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis. Sed id nibh id magna facilisis tincidunt. Fusce suscipit vestibulum metus, sed pellentesque ligula dictum quis. Cras accumsan posuere leo a varius. Vivamus odio metus, imperdiet sed rhoncus nec, commodo vel massa. In vitae lorem convallis tellus fringilla ultricies.</p>
<p>Maecenas quis enim viverra neque adipiscing vestibulum. Aenean a orci eros, eget adipiscing enim. Cras bibendum tristique diam, aliquet imperdiet urna malesuada id. Vestibulum in nibh ac massa adipiscing lacinia sed nec elit.</p>
<img alt="Product Picture" src="img/slider-img.png"/>
</div>
<div>
<h2>Our Product Descriptions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis. Sed id nibh id magna facilisis tincidunt. Fusce suscipit vestibulum metus, sed pellentesque ligula dictum quis. Cras accumsan posuere leo a varius. Vivamus odio metus, imperdiet sed rhoncus nec, commodo vel massa. In vitae lorem convallis tellus fringilla ultricies.</p>
<p>Maecenas quis enim viverra neque adipiscing vestibulum. Aenean a orci eros, eget adipiscing enim. Cras bibendum tristique diam, aliquet imperdiet urna malesuada id. Vestibulum in nibh ac massa adipiscing lacinia sed nec elit.</p>
<img alt="Product Picture" src="img/slider-img.png"/>
</div>
<div>
<h2>Our Product Descriptions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis. Sed id nibh id magna facilisis tincidunt. Fusce suscipit vestibulum metus, sed pellentesque ligula dictum quis. Cras accumsan posuere leo a varius. Vivamus odio metus, imperdiet sed rhoncus nec, commodo vel massa. In vitae lorem convallis tellus fringilla ultricies.</p>
<p>Maecenas quis enim viverra neque adipiscing vestibulum. Aenean a orci eros, eget adipiscing enim. Cras bibendum tristique diam, aliquet imperdiet urna malesuada id. Vestibulum in nibh ac massa adipiscing lacinia sed nec elit.</p>
<img alt="Product Picture" src="img/slider-img.png"/>
</div>
</div><!-- End Items -->
</article>
<div>
<a>prev</a>
<a>next</a>
</div>

Masukkan kode CSS berikut untuk mengatur tampilan slider.

/* Slider */
#slides{
	background:transparent url(img/green-bg.jpg);
	display:block;
	height:367px;
	padding:35px 0 0;
	position:relative;
	overflow:hidden;
	text-shadow:1px 0 1px #373737;
 
	box-shadow:0 0 5px #a76c39;
	border-top:1px solid #51b778;
	border-bottom:1px solid #51b778;
}
#slides article{
	display:block;
	margin:0 auto;
	overflow:hidden;
	padding:0;
	position:relative;
	min-height:368px;
	height:auto;
	width:1065px;
}
#slides article .items{
	width:20000em;
	position:absolute;
	clear:both;
}
.items div{
	float:left;
	position:relative;
	margin-left:63px;
	width:1002px;
}
#slides h2{
	clear:both;
	float:left;
	font:24px Georgia,Serif;
	margin-bottom:20px;
}
#slides p{
	clear:both;
	float:left;
	line-height:1.5;
	width:460px;
	margin-bottom:10px;
}
#slides img{
	position:absolute;
	right:0;
}
.slider-navi{
	margin:0 auto;
	position:relative;
	top:-243px;
	width:1065px;
}
a.browse{
	cursor:pointer;
	display:block;
	height:38px;
	width:33px;
	position:relative;
	text-indent:-9999px;
}
a.left{
	background:transparent url(img/arrow-l.png);
	float:left;
}
a.right{
	background:transparent url(img/arrow-r.png);
	float:right;
}

Selanjutnya kita buat animasi slider-nya dengan memasukkan kode jQuery berikut sebelum tag </body>.

<script type="text/javascript">
$(function() {
$(".slider").scrollable({speed: 700, circular: true});
});
</script>

Refresh peramban anda untuk melihat hasil yang sudah kita peroleh.

tutorial clean corporate website

Langkah 6 – Quote Area

Pilih layer paragraf teks di dalam layer group get a quote dan ubah menjadi smart object. Buat guide di sekitar layer dan seleksi dengan tool crop. Sembunyikan layer-layer background. Simpan dengan nama “quote-text.png”.

tutorial clean corporate website

Selanjutnya pilih layer shape button dan text button. Gabungkan dengan menekan Ctrl+E. Buat guide sesuai layer dan seleksi dengan tool crop. Sembunyikan layer-layer background dan simpan dengan nama “quote-button.png”.

tutorial clean corporate website

Sekarang masukkan kode HTML berikut diantara kode <aside id="quote"> dan </aside>.

<p>Sed nunc risus, ultrices nec tristique non, ultrices sed risus.
<a href="#">get a quote</a></p>

Atur tampilannnya dengan CSS.

/* Quotes */
#quote{
	background:transparent url(img/orange-bg.jpg);
	border-bottom:1px solid rgba(255,255,255,.1);
	height:80px;
	width:100%;
}
#quote p{
	background:transparent url(img/quote-text.png) no-repeat 0 26px;
	display:block;
	margin:0 auto;
	padding:18px 0;
	height:44px;
	width:960px;
	text-indent:-9999px;
}
#quote a{
	background:transparent url(img/quote-button.png);
	float:right;
	height:44px;
	width:162px;
	text-indent:-9999px;
}

Langkah 7 – Informasi Produk

Buat seleksi dengan tool crop pada background informasi produk. Simpan dengan nama “noise-bg.jpg”.

tutorial clean corporate website

Pilih layer gambar produk dan buat guide di sekitar layer. Seleksi dengan tool crop sesuai guide. Sembunyikan layer-layer background. Simpan gambar dengan nama “info1.png”. Ulangi langkah ini untuk gambar-gambar info produk lainnya dan simpan masing-masing gambar dengan nama “info2.png”, “info3.png”, “info4.png”, “info5.png” dan “info6.png”.

tutorial clean corporate website

Sekarang tambahkan kode HTML berikut diantara kode <div id="info-wrapper"> dan </div>.

<div id="info">
<article>
<h2>Vivamus tempor urna arcu</h2>
<img alt="Product info" src="img/info1.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
</article>
<article>
<h2>Vivamus tempor urna arcu</h2>
<img alt="Product info" src="img/info2.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
</article>
<article>
<h2>Vivamus tempor urna arcu</h2>
<img alt="Product info" src="img/info3.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
</article>
<article>
<h2>Vivamus tempor urna arcu</h2>
<img alt="Product info" src="img/info4.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
</article>
<article>
<h2>Vivamus tempor urna arcu</h2>
<img alt="Product info" src="img/info5.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
</article>
<article>
<h2>Vivamus tempor urna arcu</h2>
<img alt="Product info" src="img/info6.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum interdum convallis.</p>
</article>
</div><!--End info-->

Atur tampilannya dengan CSS.

/* Info */
#info-wrapper{
	background:transparent url(img/noise-bg.jpg);
	border-top:1px solid rgba(255,255,255,.1);
	border-bottom:1px solid #e5a975;
	overflow:hidden;
	text-shadow:1px 0 1px #ffbd84;
}
#info{
	margin:0 auto;
	padding:40px 0 20px;
	overflow:hidden;
	width:960px;
}
#info article{
	float:left;
	margin:0 10px 20px;
	width:300px;
}
#info h2{
	color:#814e22;
	font:24px Georgia,Serif;
	margin-bottom:20px;
}
#info p{
	color:#794f2a;
	float:right;
	line-height:1.5;
	margin-bottom:10px;
	width:210px;
}
#info img{float:left;}

Langkah 8 – Footer

Buat seleksi dengan tool crop pada background footer. Simpan dengan nama “footer-bg.jpg”.

tutorial clean corporate website

Tambahkan kode berikut diantara kode <footer> dan </footer>.

<nav>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
<a href="#">Pricing</a>
<a href="#">Contact</a>
</nav>

Atur tampilan footer dengan CSS.

/* Footer */
footer{
	background:transparent url(img/footer-bg.jpg);
	height:44px;
	width:100%;
}
footer nav{
	font:12px georgia,serif;
	line-height:44px;
	margin:0 auto;
	text-transform:uppercase;
	width:960px;
}
footer a{
	border-left:1px solid #f3c59c;
	color:#f3c59c;
	padding:0 15px;
	text-decoration:none;
}
footer a:first-child{
	border-left:none;
	padding-left:10px;
}

Hasil Akhir

Inilah hasil akhir yang kita dapatkan, klik gambar untuk melihat live-demo.

Download File Tutorial

Klik tombol di bawah ini untuk mengunduh file hasil tutorial.

DOWNLOAD

10 Comments

by Andre Noore on 3 July 2011 at 6:53 pm. # | Reply
Menunggu seri berikutnya “PSD to WP” :D
by Padly on 13 July 2011 at 7:23 am. # | Reply
Izin download Bro, Mau minta bg-nya :D
- by Aris FM on 14 July 2011 at 4:27 am. # | Reply
  monggo mase :D
by ifliandry on 7 October 2011 at 5:49 pm. # | Reply
Mau tanya mas mengenai “modernizr-1.7.min.js”, itu digunakan karena memang pada saat ini HTML5 belum bisa maksimal di tampilkan di IE atau bagaimana ya ?
Maksudnya, apakah ada kemungkinan nanti IE tidak memerlukan “modernizr-1.7.min.js” agar bisa tampil maksimal, seperti halnya browser yang lain ?
Penggunaan javascript pada IE biasanya ‘kan memunculkan comment dibrowsernya, diijinkan digunakan atau tidak, bagi yg mengerti tidak masalah, tapi bagi yang tidak mengerti akan jadi masalah, apalagi kalo itu klien, mereka biasanya akan langsung kaget melihat halaman web yg berantakan.
Apa ada solusi lain selain menggunakan “modernizr-1.7.min.js”
- by Aris FM on 7 October 2011 at 9:41 pm. # | Reply
  HTML5 itu standar bahasa HTML terbaru, sementara itu IE8 ke bawah belum support HTML5. Jadi kode-kode spesifik HTML5 tidak bisa terbaca di IE. Untuk itu diperlukan semacam hack buat IE. Nah hack-nya itu pake javascript, saya belum nemu cara yang lain selain make javascript.
  - by ifliandry on 8 October 2011 at 8:01 am. # | Reply
    IE memang merepotkan ya : )
    Mungkin lebih aman menggunakan versi HTML sebelumnya. tapi jadi ketinggalan teknologi.
    Tutorialnya Ok banget, apa bener mas Aris baru belajar web design sejak 2009 secara otodidak ? (saya baca di profil penulis, buku hasil kolaborasi dengan mas Jeprie).
    Bagi bagi langkah belajarnya mas ? .. apa mulai dari css dulu html atau belajar gambar dulu .. satu hari belajarnya berapa lama ? ..
    kalo di NLP ada yg namanya Modeling, maksudnya meniru apa yang dikerjakan oleh orang yang sudah berhasil, sehingga proses belajar lebih cepat (maaf ya muter2 ke NLP (neuro linguistik programming) segala .. maaf .. maaf)
    Terima kasih atas informasi, tutorial dan responnya : )
    - by Aris FM on 8 October 2011 at 8:12 am. # | Reply
      Hehehe iya, makanya mending jangan pake IE.
      Iya, saya memang kenal ama web desain dan tetek bengeknya tahun 2009. Dulu kan saya jaga warnet, daripada bengong mending belajar ngoding deh :D. Langkah belajarnya gimana ya? yang pasti cuma sering buka W3Schools sih dulu :D
by Yoghy Hananto on 6 November 2011 at 1:57 am. # | Reply
Mas Bro.. element div di dalam .items mungkin lebih baik di kasih nama juga(IMHO). BTW,, Superb Tutorial,, keep writing mas bro
- by Aris FM on 6 November 2011 at 12:09 pm. # | Reply
  sebenarnya sih bisa aja dikasih class, cuma karena tidak dikasih class pun kita sudah bisa styling jadi saya pikir tidak perlu lah dikasih class. BTW thanks atas apresiasinya
by Sujatmiko on 18 March 2012 at 10:28 pm. # | Reply
wah manteb Mas, iso belajar otodidak, aku juga lagi pingin belajar (nyontek boleh ya)