Design a One Page Portfolio Site in Photoshop – Part 2 Coding

Design a One Page Portfolio Site in Photoshop – Part 2 Coding
  • 25 November 2011
  • Web Design
  • This post was written exclusively for PV.M Garage by Mohammad Jeprie
  • Comment (1)»

This is second part of designing a one page portfolio tutorial series. In the first tutorial, we had created a simple and elegant Portfolio PSD mockup. Now, we’ll convert the PSD to a HTML5 and CSS3 with some jQuery goodness. Make sure you have read the first tutorial and make the design in Photoshop, or you can just grab the final PSD mockup from there.

Take a look at our PSD mockup first. Our portfolio design has a simple one column page with a large white-space, big and bold header, a slider to put some portfolio items, and a contact form on the footer. We’ll play around with some fancy CSS3 effects like text-shadow on the header, semi-transparent background on the navigation menu and border-radius on the portfolio slider and contact form. We’ll also use a jQuery slider plugin named slides.js to create the slider. Let’s get started!

Final Result

Click on the image below to see the final design in HTML.

One Page Portfolio Site Preview

Step 1: File Structure

Create a new directory in your computer and give it a name whatever you like. Inside this newly created directory, create another directory called img to put all the images that we extracted from PSD file.

Grab Slides.js and place it inside the directory.

Step 2: Exporting the image files from PSD

Before we started coding, we need to export all the necessary images from the mockup such as background, portfolio items, and social media icon.

1. Background

Activate Zoom tool and click several times on the canvas to maximum magnification. Create a selection using crop tool. Click menu File > Save for Web and Device (Ctrl + Shift + Alt + S) and save it as bg.jpg in the img directory.

2. Slider Background

Head over tothe slider area and make a selection on the portfolio background using crop tool. Save it as detail_bg.png.

3. Portfolio Items

Create selection around the portfolio image and save it as items1.jpg. Grab the other image by switching the layer visibility on the item and save each item as items2.jpg and items3.jpg.

4. Slider Navigation

First, convert the circle shape to smart object by right clicking on the layer and select Convert to Smart Object. This way, we can select the layer and its layer styles. Create guide around our newly created smart object. Make selection with crop tool along the guide. Hide background layer to get a transparent background and save it as PNG-transparent file named nav.png. Repeat this step on the active state circle shape, save it as nav_a.png.

5. Separator

Merge all layers inside layer group “separator” by right clicking it and select Merge Layers. Then create guide around the merged layer. Create selection with crop tool and then hide the background layer. Save it as separator.png.

6. Social Icon

We will export all social icons as a single image instead of separate images, we’ll then use CSS sprite to separate the icons in the webpage. Shift the position of each icon until there are no gap between each icon, then create selection with crop tool after hiding the background layer. Save it as social.png.

7. Submit Button

Merge submit button shape and text into a single layer and then create guide around the new layer. Create selection with crop tool after hiding the background layer and save as submit.png.

Step 3: Basic Structure

We’re done with the images, now grab a coffee and let’s start on the coding. Open up your favorite code editor and write our first HTML markup.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>My Awesome Portfolio</title>
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="slides.min.jquery.js"></script>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script type="text/javascript">
		WebFontConfig = {
			google: { families: [ 'Lobster::latin' ] }
		};
		(function() {
			var wf = document.createElement('script');
			wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
			wf.type = 'text/javascript';
			wf.async = 'true';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(wf, s);
		})();
	</script>
</head>
<body>

</body>
</html>

Our HTML begins with typical document structure consisting of doctype, link to stylesheet file, link to jQuery slider and jQuery library from Google API, and an HTML5 hacks script for IE. We’re also embedding a google webfont, Lobster, with WebFont loader (personally I like this method because I can adjust how things look during and after font loading by defining CSS rules).

The CSS style begins with a simple reset to get rid the browser default style, and then some basic setting such as typography, color and background image.

/* ----- Resetting CSS ------ */

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/* ----- Layout ------ */

body {
	background:#c6c6c6 url(img/bg.png);
	color:#444;
	font-family:helvetica,arial,sans-serif;
}

Step 4: The Navigation

Our first element in the markup is the top navigation. We’ll use <nav> element as our navigation wrapper and then place the menu as an unordered list. Since our page is just a single page, the menu works as a shortcut to jump to element that matched with the ID’s that we specify in the menu.

<nav id="top">
	<ul>
		<li><a href="#head">Home</a></li>
		<li><a href="#portfolio">Portfolio</a></li>
		<li><a href="#about">About</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul>
</nav>

Step 5: CSS

As in the mockup, our navigation menu has 37 px height and 5 px border in the bottom with a semi-transparent background. We’ll also make the navigation position static, to keep the navigation at the top of page when we scroll down the page.

nav#top {
	background:rgba(68,68,68,.5);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#55444444', EndColorStr='#55444444'); /* IE specific hacks to make transparent background */
	background-clip:content-box;
	border-bottom:5px solid rgba(255,255,255,.5);
	box-shadow:0 0 5px rgba(0,0,0,.5);
	font-size:16px;
	height: 37px;
	line-height:37px;
	position:fixed;
	top:0;
	width:100%;
	z-index:100;
}
	nav#top ul {
		list-style:none;
		margin:0 auto;
		text-align:center;
		width:780px;
	}
		nav#top li {
			display:inline;
			padding:0 20px;
		}
		nav#top a {
			color:#fff;
			text-decoration:none;
		}

Step 6: The Header

The next element is the header and a short introductory sentence. The syntax is pretty simple, we’ll use a <header> element to wrap the title and tagline, and then use <p> on the introductory sentence.

<header id="head">
	<h1><a href="#">John Doe</a></h1>
	<h2 class="desc">designer by day, superhero by night</h2>
</header>

<p class="hello">I am a web and graphic designer. I design interface for web and mobile apps.</p>

Our site title design have a nice 1 px border and text-shadow to make the title stand out. Fortunately, we can make this effect with just using CSS3 text-shadow. We’ll also use text-shadow to make letterpress effect on the rest of the design.

header {
	padding:102px 0 130px;
	text-align:center;
}
header h1 {
	font-family:'Lobster', Georgia, Serif;
	font-size:64px;
}
header h1 a {
	color:#fff;
	text-decoration:none;
	text-shadow:
		3px 3px 0 #444,
		1px 1px 0 #444,
		-1px 1px 0 #444,
		1px -1px 0 #444,
		-1px -1px 0 #444
	;
}
header h1:hover {
	opacity:.8;
	filter:alpha(opacity=80);
}
header h2 {
	font-size:14px;
	line-height:2;
	text-shadow:1px 1px 0 #fff;
}

p.hello {
	font-size:30px;
	font-weight:bold;
	line-height:1.2;
	margin:0 auto 100px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
	width:620px;
}

Step 7: The Slider

Now, we move to Slider section. We’ll use a <section> as a container of the slider. Inside this container we’ll place an <h3> title and a series of our slider items. Don’t forget to add separator before and after the slider.

<span class="separator"></span>

<section id="portfolio">
	<h3>Featured Project</h3>
	<div class="slider">
		<div class="items">
			<figure>
				<img src="img/items1.jpg" alt="Portfolio Items" />
			</figure>
			<div class="details">
				<a href="#" class="name">News Icon</a>
				<a href="#" class="category">Icon Design</a>
			</div>
		</div>
		<div class="items">
			<figure>
				<img src="img/items2.jpg" alt="Portfolio Items" />
			</figure>
			<div class="details">
				<a href="#" class="name">Go Design</a>
				<a href="#" class="category">Logo Design</a>
			</div>
		</div>
		<div class="items">
			<figure>
				<img src="img/items3.jpg" alt="Portfolio Items" />
			</figure>
			<div class="details">
				<a href="#" class="name">Desain Digital</a>
				<a href="#" class="category">Web Design</a>
			</div>
		</div>
	</div>
</section>

<span class="separator"></span>

To make the slider works, we’ll need to initialize Slidejs by adding a script inside the <head> element. Place this following script below the Google Webfont script.

$(function(){
	$("#portfolio").slides({
		container: 'slider',
		slideSpeed: 500,
		play: 4000
	});
  });

Let’s add style to the slider. Our slider container will have an 8 px rounded corner and a little shadow. We’ll also add a 70 px top and bottom padding to create large white-space. Slidejs automatically generate pagination to the slider, so we also need to style them using graphic circle from our PSD.

.separator {
	background:transparent url(img/separator.png);
	display:block;
	margin:0 auto;
	height:28px;
	width:780px;
}
section#portfolio {
	margin:0 auto;
	padding:70px 0;
	width:778px;
}
h3 {
	font-family:'Lobster', Georgia, Serif;
	font-size:36px;
	margin-bottom:25px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
}
section#portfolio .slider {
	border-radius:8px;
	box-shadow:0 0 5px rgba(0,0,0,.5);
	display:block;
	height:414px;
	width:778px;
	margin-bottom:30px;
}
section#portfolio .items {
	background:#444;
	border-radius:8px;
	border:5px solid #fff;
	margin-bottom:30px;
	height:404px;
	width:768px;
}
section#portfolio .items figure img {
	display:block;
}
section#portfolio .items .details {
	background:#7e7e7e url(img/detail_bg.png);
	height:49px;
	line-height:55px;
}
section#portfolio .items .details a {
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
section#portfolio .items .details a.name {
	float:left;
	margin-left:10px;
}
section#portfolio .items .details a.category {
	float:right;
	margin-right:10px;
}
ul.pagination {
	list-style:none;
	text-align:center;
}
ul.pagination li {
	display:inline-block;
}
ul.pagination li a {
	background:transparent url(img/nav.png);
	display:block;
	height:18px;
	margin:0 5px;
	width:15px;
	text-indent:-9999px;
}
ul.pagination li.current a {
	background:transparent url(img/nav_a.png);
}

Here’s a preview of our current work.

Step 8: About Section

We’re done with the slider, so let’s jump to About Section. We’ll use <section> again as the wrapper of the content and place some text and social media link inside the wrapper. Don’t forget to place separator after the section.

<section id="about">
	<h3>Meet The Hero</h3>
	<p>I'm John Doe, a web &amp; graphic designer. As a web designer, I am best known for making some kickass website. As a graphic designer, especially icon design, my work was used by one of the largest social network on earth, Twitter.</p>
	<p>If you want to know more about me, you can reach me via contact form below or one of these social network.</p>
	<div class="social">
		<a href="#" class="fb">Facebook</a>
		<a href="#" class="linkedin">LinkedIn</a>
		<a href="#" class="twitter">Twitter</a>
		<a href="#" class="lastfm">Last FM</a>
		<a href="#" class="wp">Blog</a>
	</div>
</section>

<span class="separator"></span>

We’ll transform the social media link into a nice icon that we have created before. Since the icons is wrapped in a single file, we need to configure each icon position to match the correct link by modify the background position. This method is called CSS Sprite.

section#about {
	margin:auto;
	padding:70px 0;
	text-align:center;
	width:460px;
}
section#about p {
	font-size:14px;
	line-height:18px;
	margin-bottom:18px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
}
.social {
	display:block
}
.social a {
	background:transparent url(img/social.png);
	display:inline-block;
	height:30px;
	width:33px;
	text-indent:-9999px;
}
.social a:hover {
	opacity:.7;
}

/* CSS Sprite */
.social a.fb {
	background-position:0 0;
}
.social a.linkedin {
	background-position:133px 0;
}
.social a.twitter {
	background-position:100px 0;
}
.social a.lastfm {
	background-position:67px 0;
}
.social a.wp {
	background-position:33px 0;
}

Step 9: Contact Form

Our last element is the contact form. As usual, contact form is just a series of some input text, a text area and a submit button wrapped in a <section> container.

<section id="contact">
	<h3>Drop Me a Line</h3>
	<form action="#" method="post">
		<div>
			<label for="name">Your Name</label>
			<input type="text" id="name" />
		</div>
		<div>
			<label for="email">Your Email Adress</label>
			<input type="text" id="email" />
		</div>
		<div>
			<label for="subject">Message Subject</label>
			<input type="text" id="subject" />
		</div>
		<div>
			<label for="message">Message Text</label>
			<textarea name="message" id="message" cols="30" rows="10"></textarea>
		</div>
		<input name="submit" id="submit" type="submit" value="Submit" />
	</form>
</section>

Each form will have a rounded corners and dark grey background, while the submit button is replaced with graphic image that we exported from photoshop earlier.

section#contact {
	margin:auto;
	padding:70px 0;
	width:460px;
	text-align:center;
}
section#contact form div {
	display:block;
	margin-bottom:35px;
}
section#contact form div label {
	display:block;
	font-size:14px;
	margin-bottom:8px;
	text-shadow:1px 1px 0 #fff;
}
section#contact form div input {
	background:#444;
	border-radius:5px;
	color:#fff;
	margin:auto;
	padding:0 5px;
	height:35px;
	text-align:center;
	width:290px;
}
section#contact form div textarea {
	background:#444;
	border-radius:5px;
	color:#fff;
	margin:auto;
	padding:5px;
	text-align:left;
	height:240px;
	width:450px;
}
section#contact form input {
	background:transparent url(img/submit.png);
	cursor:pointer;
	display:block;
	margin:auto;
	height:38px;
	text-align:center;
	text-indent:-9999px;
	width:145px;
}
section#contact form input:hover, section#contact form input:focus {
	opacity:.7;
}

Step 10: Final Touch

Actually, our portfolio is already done and works well. But we still need to add one final touch to make our site more fancy. We’ll add a jQuery scrolling effect to make a smooth scrolling on our navigation menu. Place this script inside <head> element.

$(document).ready(function(){
	$('a[href*=#]').click(function() {
		if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,")
		&& location.hostname == this.hostname) {
			var $target = $(this.hash);
			$target = $target.length && $target
			|| $('[name=' + this.hash.slice(1) +']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				$('html,body')
				.animate({scrollTop: targetOffset}, 1000);
				return false;
			}
		}
	});
});

Final Result

We’re finally finished coding this portfolio. I hope you enjoy the tutorial. Click on the image below to see the final design in HTML.

One Page Portfolio Site Preview

Download Link

Download One Page Portfolio (HTML)

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

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