Creating a Simple Photo Site — From PSD to HTML/CSS (Part 2)

Creating a Simple Photo Site — From PSD to HTML/CSS (Part 2)
  • 3 February 2011
  • Web Design
  • This post was written exclusively for PV.M Garage by Mohammad Jeprie
  • Comments (26)»

Hello, welcome to the second part of tutorial creating simple photo site. Before following this tutorial, make sure to read the first part, designing process in Photoshop. In this tutorial we will take the design form Photoshop and code into a working webpage.

I wrote this tutorial with a help from Satrya, a web designer and wordpress developer. Make sure to check his site to see more of his tutorial.

Before attempting this tutorial, first you should choose the code editor. I highly suggest you to use Dreamweaver or Notepad ++.

Preview

This is the final design that we will create. Click here or click on the image to see the demo.
Preview photofocus final

Step 1 – CSS Reset

Before creating layout you must add css reset to maintain browser consistency. You can download the css reset from Eric Meyer. Copy the file to your code editor and save as reset.css. You can read more informations about css reset from Perishablepress article.

Step 2 – Create Template Directory

The first thing you need to do is create your template directory. Just create a folder on your desktop and name it Photofocus, within this folder you need another folder called images, a blank HTML document, a blank CSS document, and of course the CSS reset.
Folder Structure

Step 3 – Begin The Layout

Before we started the coding, you need to read a few things to note from the PSD mockup :

  1. The header wrap the logo and navigation.
  2. Before the content, we need to create a featured text.
  3. The gallery content should have enough space for 3 horizontal images.
  4. Don’t forget the content navigation.
  5. Our mockup have a simple sidebar.

So here’s our HTML layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHOTOfocus</title>
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

    	<div id="container"><!-- Container -->

        	<div id="header"><!-- Header -->

            	Logo / Navigation

            </div><!-- End Header -->

            <div id="content"><!-- Content -->

            <div id="intro"><!-- Intro -->

            	Featured Text

            </div><!-- End Intro -->

            	Content

            </div><!-- End Content -->

			<div id="sidebar"><!-- Sidebar -->

				Sidebar

			</div><!-- End Sidebar -->

        </div><!-- End Container -->

    <div id="footer"><!-- Footer -->

        	Footer

    </div><!-- End Footer -->

</body>
</html>

Copy the code above to your blank HTML document. As you can see from the code above, #main area which will be centered the layout(header, content and footer).

Remember to add this code below between your HEAD tags. Without it, your CSS style sheet will be useless.

<link href="style.css" rel="stylesheet" type="text/css" />

The first thing to do is setting up the background image. In the first part of the tutorial, on Step 65 we have saved the background file. Make sure to save it as a PNG file and name it bg_body.png.

Now open up your styles.css and add following CSS style

body {
	font-family:Georgia,"Times New Roman",Times,serif;
	font-size: 14px;
	color: #BAC3C3;
	line-height:1.5em;
	background-image:url(images/bg_body.png);
	background-repeat:repeat;
}

a{
	color: #BAC3C3;
	text-decoration:none;
}

a:hover {
	border-bottom:1px dotted #ccc;
	font-weight:bold;
}

#container {
	width:950px;
	margin: 0 auto;
}

The #main area has a width of 950px and are centered using margin: auto.

Step 4 – Header Area

As we know, header area are wrapping the logo and navigation. First, we need to create the logo element. Return to photoshop, hide all layers except the logo. Select the slice tool again and create this selection.

Slicing Logo

Hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save it as PNG-24, and name it logo.png.

Next, add the logo and the navigation to the HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHOTOfocus</title>
	<link href="reset.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

    	<div id="container"><!-- Container -->

        	<div id="header"><!-- Header -->

				<div id="logo"><!-- Logo -->
					<a href="index.html"><img src="images/logo.png" alt="Photofocus" /></a>
				</div><!-- End Logo -->

				<ul id="navigation"><!-- Navigation -->
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">Blog</a></li>
				</ul><!-- End Navigation -->

            </div><!-- End Header -->

            <div id="content"><!-- Content -->

            <div id="intro"><!-- Intro -->

				Featured Text

            </div><!-- End Intro -->

				Content

            </div><!-- End Content -->

			<div id="sidebar"><!-- Sidebar -->

				Sidebar

			</div><!-- End Sidebar -->

        </div><!-- End Container -->

    <div id="footer"><!-- Footer -->

		Footer

    </div><!-- End Footer -->

</body>
</html>

Add following css style:

#header {
    border-bottom: 4px double #C3BFC4;
    overflow: hidden;
    padding: 20px 0 10px;
}

#logo {
	width:300px;
	height:80px;
	float:left;
}

#logo a:hover {
	border:none;
	text-decoration:none;
}

You should see the logo appears.

Logo Screenshot

Our next step is fixing the logo transparency in IE 6. Here’s the logo screenshot in IE6.

Screenshot in IE6

My favorite tool to fix the transparency is DD_belatedPNG, DD_belatedPNG is a “Javascript library that sandwiches PNG image support into IE6 without much fuss“. This tool is very easy to use, first you need download the javascript file (DD_belatedPNG_0.0.8a.js), then put it in your template directory. After that, add the code below before closing HEAD tags.

<!--[if IE]>
	<script type="text/javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<![endif]-->

Now open DD_belatedPNG_0.0.8a.js then add the code below in the last line

/* ADD YOUR CLASSES HERE e.g. #logo, #header .rss, .icon, .etc */

DD_belatedPNG.fix('#logo');

If you have many PNGs, you can add more CLASS or ID there to fix the transparency of all your PNGs file. Now refresh your IE6, here’s a screenshot of what we get in IE6 when transparency is working.

Transparency IE6 Fixed

Step 5 – Navigation Area

Our next step is styling the navigation area, add this css to your CSS document :

ul#navigation {
    margin-top:23px;
    padding:0px;
    float:right;
}

ul#navigation li {
	display:inline;
	margin:0 20px 0 0;
}

ul#navigation li a{
	text-decoration:none;
	color:#929292;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
	padding: 4px 13px;
}

ul#navigation li.active  a, ul#navigation li a:hover{
	background-color:#d9d7d7;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	color:#FFF;
    border:none;
}

Some things to note:

  1. By setting the display property to inline for the <li> elements, the list changes to a horizontal set of elements.
  2. We play with a few CSS3 style, we use border-radius for creating rounded corner when the navigation active or being on hover.

Here’s what we have now.
Navigation Area

Step 5 – Intro Area

Next step is adding the intro text. Before we proceed the coding process, you shoud slice the separator. Go to the PSD file again, select the slice tool and create this selection.

Slicing Intro

After that, click File > Save for Web and Devices. Save as intro.png. Add this CSS code:

#content {
	width:700px;
	margin:5px 10px 20px 0;
	float:left;
}

#intro {
    background-image: url("images/intro.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 20px 0 45px;
    text-align: center;
    width: 700px;
    margin-bottom:30px;
}

#intro p {
    font-size: 26px;
    line-height: 1.2em;
    text-shadow: 1px 2px #FFFFFF;
    color:#B1B1B1;
}

Replace your HTML document with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHOTOfocus</title>
	<link href="reset.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
	<!--[if IE]>
	<script type="text/javascript" src="DD_belatedPNG_0.0.8a.js"></script>
	<![endif]-->
</head>

<body>

    	<div id="container"><!-- Container -->

        	<div id="header"><!-- Header -->

				<div id="logo"><!-- Logo -->
					<a href="index.html"><img src="images/logo.png" alt="Photofocus" /></a>
				</div><!-- End Logo -->

				<ul id="navigation"><!-- Navigation -->
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">Blog</a></li>
				</ul><!-- End Navigation -->

            </div><!-- End Header -->

            <div id="content"><!-- Content -->

              <div id="intro"><!-- Intro -->

				<p>Hi! Welcome to my personal photo site. This is just a place for me to share my photos. I hope you’ll enjoy it.</p>

            </div><!-- End Intro -->

			Content

            </div><!-- End Content -->

			<div id="sidebar"><!-- Sidebar -->

			Sidebar

			</div><!-- End Sidebar -->

        </div><!-- End Container -->

    <div id="footer"><!-- Footer -->

	Footer

    </div><!-- End Footer -->

</body>
</html>

Separator

Step 6 – Gallery Area

Our next step is creating the gallery area. First, slice our content box, to do this you need to hide all your layers in your PSD file and leave the content box, then save it as content_box.png

Slice Content Box

Add the code below after closing #intro in your HTML document.

<div class="content_box"><!-- Content Box -->

<div class="thumb"><!-- Image Thumb -->
<a href="#"><img src="images/thumbnail.jpg" alt="Image Gallery" /></a>
</div><!-- End Image Thumb -->

<div class="text_box"><!-- Text/Title Image -->
<p><a href="#">Photo 1</a></p>
</div><!-- Text/Title Image -->

</div><!-- End Content Box -->

<div class="content_box"><!-- Content Box -->

<div class="thumb"><!-- Image Thumb -->
<a href="#"><img src="images/thumbnail2.jpg" alt="Image Gallery" /></a>
</div><!-- End Image Thumb -->

<div class="text_box"><!-- Text/Title Image -->
<p><a href="#">Photo 2</a></p>
</div><!-- Text/Title Image -->

</div><!-- End Content Box -->

<div class="content_box"><!-- Content Box -->

<div class="thumb"><!-- Image Thumb -->
<a href="#"><img src="images/thumbnail3.jpg" alt="Image Gallery" /></a>
</div><!-- End Image Thumb -->

<div class="text_box"><!-- Text/Title Image -->
<p><a href="#">Photo 3</a></p>
</div><!-- Text/Title Image -->

</div><!-- End Content Box -->

<div class="content_box"><!-- Content Box -->

<div class="thumb"><!-- Image Thumb -->
<a href="#"><img src="images/thumbnail3.jpg" alt="Image Gallery" /></a>
</div><!-- End Image Thumb -->

<div class="text_box"><!-- Text/Title Image -->
<p><a href="#">Photo 4</a></p>
</div><!-- Text/Title Image -->

</div><!-- End Content Box -->

<div class="content_box"><!-- Content Box -->

<div class="thumb"><!-- Image Thumb -->
<a href="#"><img src="images/thumbnail.jpg" alt="Image Gallery" /></a>
</div><!-- End Image Thumb -->

<div class="text_box"><!-- Text/Title Image -->
<p><a href="#">Photo 5</a></p>
</div><!-- Text/Title Image -->

</div><!-- End Content Box -->

<div class="content_box"><!-- Content Box -->

<div class="thumb"><!-- Image Thumb -->
<a href="#"><img src="images/thumbnail2.jpg" alt="Image Gallery" /></a>
</div><!-- End Image Thumb -->

<div class="text_box"><!-- Text/Title Image -->
<p><a href="#">Photo 6</a></p>
</div><!-- Text/Title Image -->

</div><!-- End Content Box -->

Add some image with size 185 x 170 px and place it in folder images.

The CSS styling for the code above looks like this.

.content_box {
	background-image:url(images/content_box.png);
	background-repeat:no-repeat;
	margin:0 12px 25px 0;
	width:220px;
	text-align:center;
	height:233px;
	float:left;
}

.thumb {
	padding:20px 20px 0;
}

.thumb a:hover {
	border:none;
}

.text_box {
	height:25px;
}

.text_box a {
	text-decoration:none;
	font-weight:bold;
}

.text_box a:hover {
	text-decoration:underline;
	border:none;
}

We have Div Class Content_box which wraps the image thumbnail and the image title, .content_box use content_box.png which we have previously sliced from the PSD file. You can see from the code above that we have set the image thumbnail padding, its purpose is to centered the image thumbnail position.

So this is our current layout:
Layout with photo

If you wanted to create another box just copy and paste everything in the content class.

Step 7 – Content Navigation

Put the code below before Closing Div ID Content:

<div class="content_navigation"><!-- Content Navigation -->
		 <div class="previous"><a href="#">Previous Photos</a></div>
		 <div class="next"><a href="#">Next Photos</a></div>
</div><!-- End Content Navigation -->

Return to our mockup, hide all layer except for the navigation icon. Select slice tool and create this selection.

Content Navigation

You should slice the “previous” and the “next” icon. After that, add this css code :

.content_navigation {
	margin:10px 0 30px;
	clear:both;
	overflow:hidden;
}

.content_navigation a{
	text-decoration:none;
	color:#BAC3C3;
}

.content_navigation .previous a{
    background-image: url(images/previous.png);
    background-repeat: no-repeat;
    float: left;
    height: 21px;
    padding-left: 25px;
}

.content_navigation .next a{
    background-image: url(images/next.png);
    background-position: right center;
    background-repeat: no-repeat;
    float: right;
    height: 21px;
    padding-right: 25px;
}

.content_navigation a:hover {
	border:none;
}

In your browser, you should have everything placed nicely.

Step 8 – Sidebar Area

Next is creating the sidebar area. In this area, we have 5 element such as “about me”, “connect”, “search”, “category” and “from the blog”. The HTML code for the sidebar area looks like this.

<div id="sidebar"><!-- Sidebar -->

				<div class="widget">
					<h3>About Me</h3>
						<img class="author" src="images/photo.png" alt="author" />
						<p>Mohammad Jeprie is an author and a graphic designer wanna be.
Currently running two design blogs, PSDfreemium.com and DesainDigital.com.</p>
				</div>

				<div class="widget">
					<h3>Connect</h3>
					<ul class="social">
						<li><a href="#"><img src="images/globe.jpg" alt="Globe" /></a></li>
						<li><a href="#"><img src="images/email.jpg" alt="Email" /></a></li>
						<li><a href="#"><img src="images/facebook.jpg" alt="Facebook" /></a></li>
						<li><a href="#"><img src="images/flickr.jpg" alt="Flickr" /></a></li>
						<li><a href="#"><img src="images/linkedin.jpg" alt="Linkedin" /></a></li>
						<li><a href="#"><img src="images/twitter.png" alt="Twitter" /></a></li>
					</ul>
				</div>

				<div class="widget">
					<h3>Search</h3>
				<form id="searchform" action="#">
				<input type="text" class="field" name="s" id="searchh"  value="Enter search keyword" onfocus="if (this.value == 'Enter search keyword') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter search keyword';}" />
				</form>
				</div>

				<div class="widget">
					<h3>Categories</h3>
					<ul>
						<li><a href="#">Family</a></li>
						<li><a href="#">Home</a></li>
						<li><a href="#">Children</a></li>
						<li><a href="#">Vacations</a></li>
					</ul>
				</div>

				<div class="widget">
					<h3>From The Blog</h3>
					<ul>
						<li><a href="#">Post #1</a></li>
						<li><a href="#">Post #2</a></li>
						<li><a href="#">Post #3</a></li>
						<li><a href="#">Post #4</a></li>
					</ul>
				</div>

			</div><!-- End Sidebar -->

For the “about me” and “connect” you should slice the “about me” photo and “connect” icon. After that, add this css code :

#sidebar {
    float: right;
    width: 225px;
	margin-top:20px;
}

.widget {
	width:225px;
	font-size:12px;
	color:#cbcbcb;
	margin-bottom:20px;
	overflow:hidden;
}

.widget h3 {
    border-bottom: 1px solid #C3BFC4;
    color: #999999;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 2px;
    text-align: center;
	text-transform:uppercase
}

.widget ul {
	list-style:disc;
}

.widget ul li{
	margin-left:16px;
}

.widget ul li a{
	color:#CBCBCB;
	text-decoration:none;
}

img.author {
	float:left;
	margin:5px 15px 0 0;
}

ul.social li {
	float:left;
	margin-left:16px;
	list-style:none;
}

ul.social li:first-child {
	margin-left:0;
}

ul.social li a{
	border:none;
}

#searchform  input {
    background-image: url(images/search.png);
    background-repeat: no-repeat;
    border: medium none;
    color: #BEBEBE;
    font-size: 12px;
    font-style: italic;
    padding: 7px 0;
    text-align: center;
    width: 220px;
}

Here’s our layout with the sidebar:
Layout with Slider

Step 9 – Footer Area

This is our last step, add our footer styles.

#footer {
	clear:both;
	background-image:url(images/footer.png);
	background-repeat:repeat-x;
	height:15px;
}

.footer_inside {
	width:950px;
	margin:0 auto;
}

.footer_inside p {
    font-size: 11px;
    line-height: 1em;
    padding: 2px 0 0;
    text-align: center;
}

.footer_inside a{
	color:#BAC3C3;
	text-decoration:none;
        font-weight:normal;
}

The footer background image will refer to the footer slice. All you need to do is creating a selection about 4 pixels wide. The image will then be repeated in CSS. Then add the code below between Div ID footer and Closing Div ID footer

<div class="footer_inside">

		<p>&copy; 2010 <a href="http://desaindigital.com">Muhammad Jeprie</a></p>

</div>

Below is our current layout.

Step 10 – Fixing Bugs on IE6

There are two bugs in IE6. There is border in the header and the social network icons is misplaced.

Bug in IE6

To fix them, after this line

<script type="text/javascript" src="DD_belatedPNG_0.0.8a.js"></script>

add the code below

<link href="ie.css" rel="stylesheet" type="text/css" />

Finally, create a blank CSS document in our template directory, save it as ie.css, then add this css

#header {
	float:left;
}

ul.social li {
	margin-left:10px;
}

Ok, looks great now in IE 6

Bug in IE6 Fixed

Demo Link

Demo

Thank you for reading this tutorial. I hope you learn some new techniques.

Author: Mohammad Jeprie

Mohammad Jeprie is a writer from Indonesia. He loves to share his design skill by writing tutorial in various blog. When he is not too busy, he shares free design resources in PSDfreemium. Don't forget to say hi to him in Twitter.

website design and development

26 Comments

  1. Andre Noore

    Very nice tutorial, it would be great if using HTML 5 & CSS 3, i hope someday…cheers! :D

  2. Monex

    It provides information regarding font metrics such as ascent descent text width text height and maximum horizontal advance. ascent..double..Pixels..void..Returns the distance in pixels from the text baseline to the highest upper grid coordinate used to place an outline point.

  3. Santos Dockray

    Very interesting entry, I look forward to the next!

  4. sandra

    w5pu0k http://fhYj30Mxb55m1SpveOxt.com

  5. Mythic Tech

    thanks for the info I found it quite useful, had not considered this approach for designing a site like this. I only ever used PSD and photoshop for individual elements.

    Trevor Seabrook
    Mythic Tech – Toronto Web Design http://www.mythictech.ca

  6. Gabi

    Thanks Mohammad for this detailed PSD to HTML tutorial.
    I already submitted to http://psdtohtmltuts.com

    Cheers,

  7. cramping in early pregnancy

    lazy boy, lazy lady, lazy girls, lazy men

  8. Edwina Relles

    I do not even know how I ended up here, but I thought this post was good. I do not know who you are but certainly you are going to a famous blogger if you are not already ;) Cheers!

  9. ivebo psd to html5

    I suggest to use professional front-end web developer if you have any problems with html/css

  10. rogerlinks

    Nice post… Thanks for the info!

  11. dHaNy

    Very detailled tutorial about psd to html wordpress theme.. thanx to Jeprie and Satrya

  12. iShooy

    Wow.. Great Tutorial..
    Mohammad Jeprie Paling Keren! TOP :)

  13. sunglasses

    My friend told me that she bought Tiffany and sunglasses last week,they are very beautiful.I am also want to buy Tiffany and sunglasses,but my mother disagree,she said they are not to fit me.

  14. Beautiful Sea Creatures

    Nice tutorial. Thanks

  15. tabletpcunion

    Great post. Learnt a lot. I will try myself. thanks.

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US