CSS, Web Design / Posted 2 years ago / 60 Komentar
featured

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 &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.

Tags

cara convert psd ke html,membuat web dengan jquery,cara membuat website menggunakan css,convert psd ke html,belajar div,slicing,web yang sudah jadi,how to convert psd to html,cara konversi psd ke html,belajar web design dengan notepad,cara mengkonversi psd ke html,desain web dengan notepad,tutorial web design dengan notepad,membuat kotak dengan css,belajar desain web dengan notepad,cara menambahkan css,photoshop to html tutorial,cara psd to html,photoshop to html,cara buat website dari photoshop ke html Tags: , , , , , , , , , ,
cToko Toko Online

Web Designer and Developer from Jakarta, Indonesia

http://izulcybercafe.com


59 Comments

  1. reber
    Posted December 17, 2011 at 4:25 pm | Permalink

    Nih yang ditunggu tunggu ilmunya

  2. Posted December 19, 2011 at 5:58 pm | Permalink

    mantaaaap …. thanks berat bang :)

  3. Posted December 20, 2011 at 1:40 pm | Permalink

    ada materi parralax gak gan????????????

  4. Posted December 20, 2011 at 5:44 pm | Permalink

    Makasih mas izul atas share tutor slicing psd to html nya :)

  5. Posted December 21, 2011 at 5:40 am | Permalink

    Tidak semudah yang saya bayangkan. Mendingan langsung tulis kode HTML & CSSnya langsung deh

  6. Radi Husein
    Posted January 5, 2012 at 8:05 pm | Permalink

    ni templatenya bisa di pake buat WordPress ga?

    • Posted January 10, 2012 at 12:42 am | Permalink

      Saat ini belum dibuat untuk versi wordpress? emang mau make?

      • Posted July 27, 2012 at 10:51 am | Permalink

        mas apa template itu bisa di bwat pada wordpress ga ya?

  7. Posted January 8, 2012 at 10:50 am | Permalink

    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.

    • Posted January 10, 2012 at 12:44 am | Permalink

      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.

  8. Posted February 1, 2012 at 4:10 pm | Permalink

    Sayang slicingnya tidak bisa berlaku jika ingin spritenya transparent yah :’( (eh atau bisa?)

    • Izulcybercafe
      Posted February 9, 2012 at 10:10 pm | Permalink

      Maksudnya gimana ya?

    • Posted July 16, 2012 at 12:20 am | Permalink

      Kayaknya untuk desain ini ga ada kbutuhan pake sprite deh, dan gw liat jg penulis ngga pake sprite kok :)

  9. Posted February 9, 2012 at 6:45 pm | Permalink

    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 :)

    • Posted February 11, 2012 at 7:00 pm | Permalink

      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 :)

  10. Posted March 2, 2012 at 7:46 am | Permalink

    wah makasih mas tutorialnya..btw ne gk pake 960gs ya??
    ada tutorial dari slice ampe html yg 960gs gk?? lgi belajar 960gs…

    • Posted July 16, 2012 at 12:29 am | Permalink

      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 :)

  11. Posted March 6, 2012 at 10:43 pm | Permalink

    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 :)

  12. Posted March 9, 2012 at 12:30 am | Permalink

    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 :)

  13. Posted March 9, 2012 at 11:39 pm | Permalink

    Slm knal mas..tutor ini sngat membantu…term ksh share ilmunya…

  14. evo
    Posted March 30, 2012 at 10:17 pm | Permalink

    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..

    • Posted April 5, 2012 at 12:15 pm | Permalink

      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.

  15. Posted April 1, 2012 at 11:55 pm | Permalink

    mau tanya donk, kalo buat header full ky body apa yaa codenya ?? mohon bantuannya …

  16. Posted April 3, 2012 at 10:46 pm | Permalink

    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-

  17. Posted April 16, 2012 at 3:48 am | Permalink

    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

    • Posted April 19, 2012 at 11:41 am | Permalink

      WOw keren masbro designnya,
      Ajarin donk gimana cara bikinnya :D
      kalo dah slice kan tinggal di save for web, waktu save nya pilih html + image :D
      jadi deh htmlnya, tapi masih dalam format gambar semua,
      boleh donk di kasih file psdnya wkkwk

      • Posted June 6, 2012 at 4:36 pm | Permalink

        boleh ..
        inbox aja k fb ane gan … tar ane kasih

    • Posted April 19, 2012 at 12:15 pm | Permalink

      Liat videonya saja mas, siapa tau membantu.
      Kasusnya sama kok dengan tutorial ini. Dari PSD menjadi HTML dan CSS

      • Posted June 6, 2012 at 4:39 pm | Permalink

        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)..

    • Posted July 16, 2012 at 12:47 am | Permalink

      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

  18. tjahyo
    Posted May 7, 2012 at 11:39 pm | Permalink

    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.

  19. Posted May 15, 2012 at 1:07 am | Permalink

    “Cara penggunaannya sisipkan script berikut di antara dan …”
    disisipin sebelah mana master…?

    • Posted May 20, 2012 at 9:38 pm | Permalink

      Mohon maaf atas kekurangan pada tulisan diatas, untuk lebih jelas, Silahkan download HTML nya, dan anda bisa melihat script itu diletakkan dimana.
      Semoga membantu :)

  20. Posted May 20, 2012 at 7:30 am | Permalink

    Tutorialnya lengkap sekali. Sedikit ide, foto ownernya sepertinya lebih bagus menggunakan CSS transform. Jadi tinggal menggunakan foto asli.

    • Posted May 20, 2012 at 9:50 pm | Permalink

      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 :)

  21. Raniah Nur Sahar
    Posted May 26, 2012 at 5:08 pm | Permalink

    makasih ya ilmunya :) alhamdulillah bermanfaat :)

  22. Nurul Jannah
    Posted June 6, 2012 at 9:57 am | Permalink

    wah makasih nih udah share ilmunya mas..cocok untuk saya yg masih newbie butuh banyak info..

  23. ahmad
    Posted June 8, 2012 at 2:59 pm | Permalink

    good tut..

  24. ihsan senjaya
    Posted June 8, 2012 at 3:58 pm | Permalink

    makasih banget ni..
    bermanfaat banget..
    diperbanyak lagi ya tutorialnya..
    hehe

  25. ram
    Posted July 4, 2012 at 7:56 am | Permalink

    ini dia tutorial yang cocok buat pemula,,, hatur thanks you

  26. Posted July 27, 2012 at 10:57 am | Permalink

    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\

    • Posted August 9, 2012 at 5:07 pm | Permalink

      :) Banyak cara agar gambar itu bisa tampil di halaman website,
      Coba liat code HTML atau di code CSS nya. Semuanya ada disitu. Tinggal mengatur penempatannya saja.

  27. Posted August 8, 2012 at 11:52 am | Permalink

    makasih mas tutorialnya, buat newbi berguna bgt..izin sedot neh

  28. Posted December 7, 2012 at 8:16 pm | Permalink

    bermanfaat bgt ilmunya saya akan gunakan termimakasih :)

  29. opah
    Posted January 21, 2013 at 5:13 am | Permalink

    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 ..

    • Posted January 22, 2013 at 11:44 am | Permalink

      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.

  30. Posted January 22, 2013 at 11:43 am | Permalink

    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.

  31. Posted February 23, 2013 at 4:59 pm | Permalink

    Wah mantaf…nih :) telimikiciw sudah berbagi soal ini.Mempelajari dlu deh :)

  32. Tri
    Posted April 28, 2013 at 2:20 pm | Permalink

    Langsung CTRL+D dulu, makasih ilmunya,, sedang dipraktekkan..

  33. rangga
    Posted May 8, 2013 at 8:05 pm | Permalink

    keren! keren hasil karya ente bro! ijin download psd, html dan css nya ya bro. :)

  34. henri
    Posted July 5, 2013 at 11:42 pm | Permalink

    bang izzul numpang tanya,,
    website saya udah jadi pake Illustrator, udh di slicing jg & sdh disimpan ke html & images. Skrg masalah yg saya temui adalah diwaktu mau nerapkan kode css. saya pengen letak layout itu adanya ditengah browser, sy udh coba pake wrapper tapi koq malah berantakan ya?? padahal kondisi awal udh beres tapi maunya di sebelah kiri terus. Gak mau ke tengah layout nya. Mohon pencerahannya,,

    • Posted July 7, 2013 at 11:49 am | Permalink

      Kalau untuk layout berada di tengah cukup dengan css aja

      .contoh{
      margin: 0 auto;
      }

One Trackback

  1. By Photoshop atau Fireworks? « Bookmark Desain Web on February 16, 2012 at 1:04 pm

    [...] Tutorial Konversi PSD ke HTML & CSS [...]

Post a Comment

Your email is never published nor shared. 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>

webdesign