Designing a highly-professional website, from the sketch to the code

Designing a highly-professional website, from the sketch to the code

Making great websites is like designing excellent buildings. A good web designer approaches the planning of a website like a worthy architect starts a new projects for a physical structure. The art and science of designing ‘something’, a website or a building, includes technical, aesthetic and functional criteria and all structures created through a balanced mix of usability and creativity will be a little piece of art.
In this new post of ‘The web side of WeGraphics’ series we will try to design a super-professional and very clean website for a fictional Architecture studio, that we call ‘Studio Hunter’. We want to reproduce through the website the main objectives of the studio: elegance, simplicity, rhythm and professionalism.
We can start! Remember that you may become a member of WeGraphics to download the source files of this tutorial (PSD+HTML/CSS).

The Final Result

Below you can see the final result of our efforts: a grid-based web layout with a clean design and a professional look to engage the visitors. Click here to see a large preview of the template.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

DOWNLOAD PSD + HTML/CSS TEMPLATE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.

The Design Process

A good website borns from a white sheet that a masterly hand fills with some opportune lines, in fact the sketch is the first, important, step in the design process. You have to keep in mind the main aim of the website and what kind of design you want to create, then you can start to draw your layout on paper.
In this case we should build a professional and super-clean layout that has to communicate a strong message with elegance. For these reasons we decide to show directly the works of studio’s architects through a big slider, containing ‘featured works’, and to include other contents in a grid-based system (3-columns for the middle container with some important information and 2-columns for the bottom of the page with side information).

Designing an highly-professional website, from the sketch to the code

Step 0 – The canvas

Let’s start with Photoshop. First of all, create a new document 1024×1280 pixels with a resolution of 72 pixels/inch. Import the 960 grid template (12 Col Grid), it is useful to design the page within 940 pixels (in this case) and to easily draw the columns for the grid.

Step 1 – The header

Draw a rectangle on the top of the page (using the Rectangle Tool) and add a Drop Shadow, a soft Gradient Overlay and a with (1px) Stroke in order to obtain the following result.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Generally the logo needs a proper design process, but the main objective of the post is explaining how to create the entire web layout, for this reason we’re going to drawn an elegant and simple logo with Photoshop and directly on the layout. We use Mank Sans Font with the Type Tool and add two new layer of text (color #656567, 30pt) as shown below (use italic and bold for the word ‘hunter’).

Designing an highly-professional website, from the sketch to the code

Raterize the layer ‘hunter’ and transform and move the two layers in order to create the following string. You can use the Eraser Tool to delete some pixel to customize your logo.

Designing an highly-professional website, from the sketch to the code

Now, with the help of the grid (View>Show>Grid, set ‘Gridline every’ from Edit>Preferences>General>Guides, Grid and Slices to 1px) and of the Rectangular Marquee Tool draw a nice ruler as shown below.

Designing an highly-professional website, from the sketch to the code

Repeat the previous operation to complete the logo.

Designing an highly-professional website, from the sketch to the code

Add the items for a navigation menu on the right using the Type Tool (font Verdana, 13pt, #656463).

Designing an highly-professional website, from the sketch to the code

Use Rounded Rectangle Tool (radius 15px) to draw a shape, useful for the hover effect in our menu. Experiment adding Inner Shadow, Gradient Overlay and Stroke in order to obtain an engraved effect as the following image shows.

Designing an highly-professional website, from the sketch to the code

Don’t forget to collocate all elements created in the correct way with the helps of the 12 Col Grid layer and the Photoshop guides.

Designing an highly-professional website, from the sketch to the code

Step 2 – Slider

The main goal is to emphasize the works of the architects and often the best way to present them is a big slide-show. Download some images from stock.xchng, like ‘Rotterdam 2010′ (remember that in this article it’s all fiction).
Add a new rectangular shape using the Rectangle Tool that covers the entire width of the document; add the style: Gradient Overlay and Pattern Overlay (use one of the soft and ‘white’ pattern of the set ‘Soft Grunge Patterns’).
The result should be the following.

Designing an highly-professional website, from the sketch to the code

Add one of the images, previously downloaded, and two white borders (two 1px lines) as shown.

Designing an highly-professional website, from the sketch to the code

With the help of the Ellipse Tool draw a white circle, then use the Type Tool to create a layer with ‘<’. Rasterize the layer with the round shape and use the ‘<’ to engrave an arrow from the main shape.

Designing an highly-professional website, from the sketch to the code

Add the following style to the custom shape just created.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Step 3 – The middle container

Create a new big rectangle for the background of this section of the layout, add a Drop Shadow and a Gradient overlay in order to obtain the following result.

Designing an highly-professional website, from the sketch to the code

Below is the style that we have applied to the layer. Make sure that the order of the different layers is correct to have a good shadows effect.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Now we can fill the container with three columns, this task can be easier using the 12 Col Grid layer (form the 960 Grid System).

Designing an highly-professional website, from the sketch to the code

Fill the left column with the heading, a bottom-line to separate title and paragraph and a list of two specific articles. Use the Line Tool to draw the solid line and Type Tool text typing in a string of ‘- – - – - – - – -’ for the dashed borders.

Designing an highly-professional website, from the sketch to the code

Within the centered container we can link a video presentation through an image, adding a paragraph to provide a short description and a call-to-action button to the gallery of the website.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

The right side of the middle container is for contacts details.

Designing an highly-professional website, from the sketch to the code

You can create the two icons (phone and email) using the Pen Tool and the Rectangle Tool; you should work with a zoom value of 2800% – 3200%.

Use the pen tool to draw a custom shape, then right-click and choose ‘Make selection’ from the menu, create a new layer (ctrl+shift+n) and finally fill the selection with a dark color.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Use the Rectangular Marquee Tool and Elliptical Marquee Tool to delete (ctrl-x) some extra pixels and make more elegant your icon.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Duplicate the layer, Edit>Transform>Flip Horizontal and merge the two shapes just created. You may set the opacity value to brighten up the icon.

Designing an highly-professional website, from the sketch to the code

Use the same technique to create the email icon, this time you can generate the basic shape with the help of the Rectangle tool.

Designing an highly-professional website, from the sketch to the code

Take a look at the final result, it’s clear that the other elements (texts and borders) of this section are created using the same procedure adopted for filling the previous columns.

Designing an highly-professional website, from the sketch to the code

Now we can add a simple form for the login. With the Rounded Rectangle Tool add a custom shape as shown and don’t forget the style: Inner Shadow and Gradient Overlay.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Complete the form with the title ‘Client Area’ (Type Tool, Verdana, #015990, 13pt; add a soft Drop Shadow too), labels and input (design the text input using the Rounded Rectangle Tool with a radius of 20px and then apply a soft Inner Shadow).

Designing an highly-professional website, from the sketch to the code

The button needs a specific style, take a look to the following images to understand how to create a nice effect.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Add the text with a strong Drop Shadow.

Designing an highly-professional website, from the sketch to the code

Step 4 – The footer

Use the Rectangle Tool to draw a rectangular shape just below the middle container (height about 50 pixels, color #8f7544). Add three guides at the center of the document (as shown in the image below) and, using Add Anchor Point Tool, insert three points to the rectangle (on the bottom line), use the Direct Selection Tool (A) to draw a little arrow.

Designing an highly-professional website, from the sketch to the code

Rasterize the layer, add a soft noise effect (Filter>Noise>Add Noise), a nice style (Gradient Overlay and a white – 1px – strong Drop Shadow) and write a slogan (font Verdana, color #fff and a strong Drop Shadow).

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Add a new rectangular shape for the background of the footer with the same Gradient Overlay of the middle container background (from #f7f7f7 to #fdfdfd). Fill the footer with two columns (width about 470px), more of the footer elements are texts, headings and borders… and we know how to ‘fight’ with this kind of contents.

Designing an highly-professional website, from the sketch to the code

Just the buttons on the left side and the separator need some explanations. The following screenshots explain how to create the grey buttons.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

For the separator draw a vertical 1px line using the Line Tool (an opportune guide can help you to design a perfect segment), set the Fill to 0% and add a radial Gradient Overlay as shown (use a light grey).

Designing an highly-professional website, from the sketch to the code

Finally add a new dark grey shape with a 3px top-border (light grey) and the credits as shown.

Designing an highly-professional website, from the sketch to the code

PSD-to-HTML conversion

Now it’s time to create the HTML/CSS structure. First of all we have to understand the main structure of the layout.

Designing an highly-professional website, from the sketch to the code

Step 5 – HTML Structure

Create a blank index.html and style.css, then, using our favourite text editor (I write my code through Notepad), we can initialize our HTML document with Doctype, head and body.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Studio Hunter - Awesome architects</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>

</body>
</html>

Now, according with the structure displayed in the above image, we can write the basic html structure. Note that the <div class=”fix_width”> will be useful to force the contents within the 940px.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Studio Hunter - Awesome architects</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
</head>

<body>

<div id="header">
	<div class="fix_width">

	</div>
</div>

<div class="slide_cont">
	<div class="fix_width">

	</div>
</div>

<div id="middle_container">
	<div class="fix_width">

	</div>
</div>

<div id="footer">
	<div class="fix_width">

	</div>
</div>

<div id="credits">
</div>

</body>
</html>

Add reset to the style.css as shown below.

/* CSS Reset */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ol, ul { list-style: none; }

:focus { outline: 0; }

h2, h3, h4 { font-weight: normal; }
Step 6 – Header

Extract the following images to reproduce the top of the website as we have planned in Photoshop.

Designing an highly-professional website, from the sketch to the code

The markup for the top-header, we use unordered lists for the menu and h1 for the logo.

<div id="header">
	<div class="fix_width">
	<div class="logo">
		<h1><a href="#">Studio Hunter - Architecture</a></h1>
	</div>

	<ul class="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About us</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contacts</a></li>
	</ul>
	</div>
</div>

And now the CSS rules.

/* General */
body { background: #fdfdfd; font: 12px Verdana, sans-serif; line-height: 1.5em; color: #444; }

.fix_width { width: 940px; margin: 0 auto; }
.fix_width:after, .left_foot_cont ul li:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }

a { text-decoration: none; }

p { line-height: 1.7em; }

/* Header */
#header { background: url(images/head_bck.png); height: 84px; z-index: 3; position: relative; }
	.logo { float: left; margin: 15px 0 0 35px; }
	.logo h1 a { background: url(images/logo.jpg) no-repeat 0px 0px; display: block; width: 136px; height: 50px; text-indent: -9999px;}
	.logo h1 a:hover { background-position: 0px -50px; }

	ul.nav { float: right; margin: 30px 20px 0 0; }
	ul.nav li { display: inline; }
	ul.nav li a { color: #656463; padding: 6px 10px; margin: 0 5px; }
	ul.nav li a:hover { background: url(images/nav_bck.jpg); -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 1px 1px 0px #fff, -1px -1px 0px #d9d9d9; -khtml-box-shadow: 1px 1px 0px #fff, -1px -1px 0px #d9d9d9; -webkit-box-shadow: 1px 1px 0px #fff, -1px -1px 0px #d9d9d9; box-shadow: 1px 1px 0px #fff, -1px -1px 0px #d9d9d9;   }
Step 7 – Slider

Now we can add the slider. In order to realize a nice slide-show we use the Nivo Clider Plugin.
First of all download the jQuery plugin and paste the file ‘slider.js’ into the folder of our template called js, download jQuery and paste ‘jquery.js’ into the same folder (js); then you have to add the following lines of code into the ‘index.html’.

<head>
<title>Studio Hunter - Awesome architects</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<!-- Activate the slider! -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
		animSpeed:900,
		pauseTime:5500,
		directionNav:true,
		directionNavHide:true,
		controlNav:false
});
});
</script>
</head>

For the slider section we use a nice pattern for the background, and some images of buildings.

Designing an highly-professional website, from the sketch to the code

Designing an highly-professional website, from the sketch to the code

Now take a look at the markup for the slider.

<div class="slide_cont">
	<div class="fix_width">
		<div id="slider">
		<img src="images/slideimg1.jpg" alt="" />
		<img src="images/slideimg2.jpg" alt="" />
		<img src="images/slideimg3.jpg" alt="" />
		</div>
	</div>
</div>

It’s time for the style.

/* Slider */
.slide_cont{ background: url(images/slider_bck.jpg); position: relative; top: -4px; z-index: 1; margin: 0 auto; }
	#slider img { border-left: 1px solid #fff; border-right: 1px solid #fff; position: absolute; top: 0px; left: 0px; }
	.nivo-slice { display:block; position:absolute; z-index:50; height:100%; }
	.nivo-directionNav a { position:absolute; top: 38%; text-indent: -9999px; cursor: pointer; z-index: 99; }
	.nivo-prevNav { left:10px; display: block; width: 122px; height: 122px; background: url(images/slide_nav_left.png); }
	.nivo-nextNav { right:10px; display: block; width: 122px; height: 122px; background: url(images/slide_nav_right.png); }
Step 8 – Middle container

Create the grid for the ‘middle_container’ section using the following HTML structure. Below the images that we have to extract from the psd.

Designing an highly-professional website, from the sketch to the code

<div id="middle_container">
	<div class="fix_width">
	<div class="left_cont">
		<h2>Innovation for your future</h2>
		<p>The main goals for an e-commerce website are to sell and promote products and services. This kind of website, much more than the others, should be optimized to create a perfect user experience.</p>

		<ul>
		<li><a href="#"><img src="images/list_1.jpg" alt="image1" /><span class="list_tit">Sustainable Energy</span><br /><span class="list_text">It's evident that these potential customers need different things</span></a></li>
		<li><a href="#"><img src="images/list_2.jpg" alt="image2" /><span class="list_tit">Innovation</span><br /><span class="list_text">It's evident that these potential customers need different things</span></a></li>
		</ul>
	</div>

	<div class="centered_cont">
		<h2>Research behind our works</h2>
		<a href="#"><img src="images/image_1.jpg" alt="images1" /></a>

		<p>The main goals for an e-commerce website are to sell and promote products and services. This kind of website, much more than the others, should be optimized to create a perfect user experience.<span class="cta"><a href="#">go to gallery</a></span></p>

	</div>

	<div class="right_cont">
		<h2>Contact us directly</h2>
		<p>The main goals for an e-commerce website are to sell and promote products and services.</p>

		<ul>
		<li class="phone"><span class="list_tit_right">Phone number</span><br /><span class="list_text">+39 098x 46 51 512 354</span></li>
		<li class="email"><a href="#"><span class="list_tit_right">Send us an email</span><br /><span class="list_text">[email protected]</span></a></li>
		</ul>

		<form action="#" method="post" id="login">
			<fieldset>
				<legend>Client area</legend>
				<div class="login_input">
				<label for="username">Username</label>
				<input type="text" maxlength="60" name="username" id="username" />
				</div>
				<div class="login_input">
				<label for="pass">Password</label>
				<input type="password" name="pass" id="pass" />
				</div>
				<input type="submit" name="login" value="login" class="form_submit" />
			</fieldset>
		</form>

	</div>
	</div>
</div>

Use the following style to create the middle container as we’ve planned in the psd mockup.

/* Middle container */
#middle_container { background: url(images/content_bck.png) repeat-x; position: relative; top: -12px; z-index: 3; padding-top: 40px; }
	#middle_container  h2 { color: #1d4777; font-size: 18px; border-bottom: 2px solid #d9d9d9; padding-bottom: 10px; margin-bottom: 10px; }
	.left_cont, .centered_cont, .right_cont { width: 280px; float: left; }
	.left_cont img { border: 1px solid #d0cece; }
		.left_cont ul  { margin-top: 10px; }
		.left_cont ul li { clear: both; margin: 0; border-bottom: 1px dashed #d0cece; }
		.left_cont ul li a { display: block; padding: 10px 0; min-height: 69px; }
		.left_cont ul li a:hover { background: #f7f7f7;}
		.left_cont ul li img { float: left; margin: 0 10px 0 0; }
		.right_cont ul { margin-top: 5px; }
		.right_cont ul li { padding: 10px 0 10px 0; border-bottom: 1px dashed #d0cece; }
		.right_cont ul li.email a { display: block; }
		.right_cont ul li.phone { padding-left: 55px; background: url(images/phone.png) no-repeat 10px 20px; }
		.right_cont ul li.email { padding-left: 55px; background: url(images/email.png) no-repeat 10px 20px; display: block; }
		.right_cont ul li.email:hover { background: #f7f7f7 url(images/email.png) no-repeat 10px 20px; }
		span.list_tit { font-size: 14px; color: #6fb450; }
		span.list_tit_right { font-size: 14px; color: #a1493a; }
		span.list_text { font-size: 10px; color: #757474;  }
	.centered_cont { margin: 0px 50px; }
	.centered_cont img { margin: 4px 0 5px 0; border: 2px solid #d0cece; }
	span.cta a { display: block; width: 117px; height: 32px; background: url(images/cta.png); float: right; margin-top: 15px; text-indent: -9999px; }
	span.cta a:hover { background-position: 0 -32px; }

	form#login { width: 278px; height: 146px; background: url(images/login_bck.png) no-repeat; margin: 40px 0 0 2px; }
		.login_input { padding: 5px 20px;}
		legend { color: #1d4777; font-size: 18px; text-shadow: 1px 1px 2px #ccc; padding: 12px 10px; }
		label { font-size: 11px; float: left; margin-right: 8px; padding-top: 2px; width: 70px; }
		form#login input[type="text"], form#login input[type="password"] { width: 130px; font-size: 12px; padding: 4px 10px; border: none; -moz-border-radius: 20px; -khtml-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-box-shadow: 1px 1px 0px #fff, -1px -1px 0px #ccc;  -khtml-box-shadow: 1px 1px 0px #fff, -1px -1px 0px #ccc;  -webkit-box-shadow: 1px 1px 0px #fff, -1px -1px 0px #ccc; box-shadow: 1px 1px 0px #fff, -1px -1px 0px #ccc;  }
		form#login input[type="submit"] { width: 52px; height: 17px; background: url(images/login.png) no-repeat; text-indent: -9999px; float: right; border: none; margin: 10px 30px 10px 10px; cursor: pointer; }
Step 9 – Footer and credits

Finally we can complete our layout with the footer. Below the images and the markup.

Designing an highly-professional website, from the sketch to the code

<div id="footer">
	<div class="fix_width">
	<h4>Your future in our hands will be a great future</h4>
	<div class="left_foot_cont">
		<ul>
		<li>

			<img src="images/image_2.jpg" alt="images2" />

			<div class="list_foot_text">
				<h3><a href="#">Zone 1 - Block 1</a></h3>
				<p>The main goals for an e-commerce website are to sell and promote products and services</p>
			</div>
			<div class="foot_list_info">
				<ul>
				<li class="details"><a href="#">details</a></li>
				<li class="support"><a href="#">technical support</a></li>
				</ul>
			</div>

		</li>

		<li>

			<img src="images/image_3.jpg" alt="images3" />

			<div class="list_foot_text">
				<h3><a href="#">Zone 1 - Block 2</a></h3>
				<p>The main goals for an e-commerce website are to sell and promote products and services. This kind of website</p>
			</div>
			<div class="foot_list_info">
				<ul>
				<li class="details"><a href="#">details</a></li>
				<li class="support"><a href="#">technical support</a></li>
				</ul>
			</div>

		</li>

		</ul>
	</div>

	<div class="right_foot_cont">
		<h3>Our team</h3>
		<p>We have understood as to create a strong trust in our users is very important to maintain a business on-line. Sure, a well-done user
interface is a good.</p>

		<ul>
			<li><div><a href="#"><img src="images/image_4.jpg" alt="images4" /></a></div><a href="#">Development and future projects</a></li>
			<li><div><a href="#"><img src="images/image_5.jpg" alt="images4" /></a></div><a href="#">Our high-quality partners</a></li>
			<li><div><a href="#"><img src="images/image_6.jpg" alt="images4" /></a></div><a href="#">Marketing and advertising</a></li>
		</ul>

	</div>
	</div>
</div>

<div id="credits">
	<p>WeGraphics.net - All Rights Reserved - A Premium Template</p>
</div>

Use the following style to complete the footer.

/* Footer */
#footer { background: url(images/footer_bck.jpg) repeat-x; margin-top: 30px; }
	#footer h4 { font-size: 16px; text-shadow: 1px 1px 1px #0d2540; color: #fff; text-align: center; height: 50px; padding: 13px 0; background: url(images/slog_bck.jpg) no-repeat 50% 46px; }
	.left_foot_cont { width: 445px; float: left; margin-top: 25px; background: url(images/foot_sep.png) no-repeat right; padding-right: 24px; }
	.left_foot_cont ul li { clear: both; border-bottom: 1px dashed #d0cece; margin-bottom: 15px; padding-bottom: 15px; }
		.left_foot_cont ul li  img { float: left; border: 2px solid #d0cece; }
		.list_foot_text { padding-left: 15px; width: 180px; float: left; margin-right: 5px; }
		.list_foot_text h3 { margin-bottom: 5px; }
		.list_foot_text h3 a { font-size: 16px; color: #1d4777; margin-bottom: 5px; }
		.list_foot_text h3 a:hover { text-decoration: underline; }
		.right_foot_cont h3 { font-size: 18px; color: #1d4777; margin-bottom: 10px; }
		.list_foot_text 	p { font-size: 10px; line-height: 1.4em; }
		.foot_list_info { float: left; border-left: 1px dashed #d0cece; }
		.foot_list_info ul li { padding: 0; margin: 10px 0 10px 10px; border: none; }
		.foot_list_info ul li.details  a { background: url(images/details.png) no-repeat; width: 108px; height: 21px; display: block; text-indent: -9999px; }
		.foot_list_info ul li.support  a { background: url(images/support.png) no-repeat; width: 108px; height: 21px; display: block; text-indent: -9999px; }
		.foot_list_info ul li.details  a:hover, .foot_list_info ul li.support  a:hover  { background-position: 0px -21px; }
	.right_foot_cont { width: 445px; float: right; margin-top: 25px; }
		.right_foot_cont ul  { margin-top: 15px; }
		.right_foot_cont ul li { display: inline; width: 120px; float: left; text-align: center; padding: 3px 12px; }
		.right_foot_cont ul li:first-child  { padding-left: 0; }
		.right_foot_cont ul li img { border: 2px solid #d0cece; }
		.right_foot_cont ul li { line-height: 1.1em; }
		.right_foot_cont ul li a { color: #116397; font-size: 10px; display: block; margin-top: 3px; }
		.right_foot_cont ul li a:hover { color: #011e31; background: #f7f7f7; }

/* Credits */
#credits { background: #21262b; border-top: 3px solid #d0cece; margin-top: 50px; padding: 8px; }
	#credits  p { font-size: 11px; color: #ddd; text-align: center; }

That’s all, friends! I hope you will appreciate the article and the final result.

DOWNLOAD PSD + HTML/CSS TEMPLATE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.

Related Posts

feat month

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

piervix

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development. Now he works to make WeGraphics the best place to find design resources

69 Comments

(+add yours)
  1. This is an awesome tutorial, the only one I’ve ever seen that goes from beginning to end.

    Bookmarked, tweeted and all the other things.

    PS: Above your comment section it says:

    It’s quite in here! Why not leave a comment?

    Pretty sure you mean ‘quiet’.

    Cheers.

    • Thank you Marc!
      Typo fixed!

  2. this tutorial was amazing!Thank you for the great work you did!It helped me a lot!! :)

  3. thanks for this tutorial, very detailed walk through. Nice finished product!

  4. Great piervix, the tutorial is really hight-detailed.
    It’s difficult to find article like this. You’re great ;)

  5. so detailed, so professional, and such a great end result

    great job ;)

  6. Great tutorial. Always start with a sketch and the job gets done perfectly!

  7. This awesome tutorial, very detail and nice finished result :)

  8. Wow, the techniques used are amazing. One of the rare tuts that shows a complete website building. Kind of what I plan to do too, but with a whole advertising project.

    And I still wouldn’t be able to put it in 1 page.

  9. Your comments are always appreciated, friends. Thank you!

    • Call me wind because I am absotluely blown away.

  10. this tutorial tweeted by 99designs.com, what a great tutorial sharing to the world.

  11. It’s a lot of PS/Html/CSS when you see someone else doing it. Thanks

  12. Awesome!

    Very thorough and provides a nice look at the total design process. Normally this kind of stuff is broken into 5-6 different tutorials, so I’m glad you took the time to put it all together.

  13. excellent work in whole tutorial. thanks for sharing

  14. Great job really, but all of the above implies that a reader is well familiar with the CSS as very few of the CSS elements are explained and there are a lot of them. But still great job

  15. You are genius!

  16. Thank you firends! It’s awesome to see this interest for my tutorial. Your comments make me feel good…

  17. Great!

  18. Thanks for sharing this wonderful tutorial. It will surely help me out in my next project.

  19. Eddie

    AWESOME tutorial! I appreciate this so much!

    I just wanted to ask, how did you get that engraved look in the navigation? I couldn’t get the same, elegant look that you achieved. I tried for a little while, but I just couldn’t make it look nice. Any tips?

    • Hi Eddie,
      After created the rounded corners rectangle, it’s all about blending options. Play with a soft inner shadow. Decrease distance, size and opacity.

    • Yes Eddie, you have to create the rounded rectangle adding the following style:

      - Inner shadow:
      — Blend Mode: Multiply (black);
      — Opacity: 20%;
      — Angle: -56°;
      — Distance: 1px;
      — Choke: 0%;
      — Size: 2px;

      - Gradient overlay:
      — Blend Mode: Soft Light;
      — Opacity: 65px;
      — Gradient: from black to white;
      — Style: Linear;
      — Angle: 90°;
      — Scale: 120%;

      -Stroke:
      — Size: 1px;
      — Position: Inside;
      — Blend Mode: Normal;
      — Opacity: 100%;
      — Color: white;

      • Eddie

        Thank you so much! I was going about it in a completely different way. This will help me a lot with future button designs. Thanks again!

  20. Pretty nice tutorial! I am planning to redesign my blog and your tutorials and your website in general are a great source on inspiration for me ( in a good way :) )

  21. Wow. Amazing. Professional!

  22. Hi piervix, I’d just want to say that this is such an amazing tutorial. I have always wanted to learn how to build website but have never found time to follow a formal course. And then I stumble upon your wonderful site. It’s such an incredible feeling to see the finished website. I have learnt so much from your tutorials.Thank you very much for sharing this detailed guide.

    While following your tutorial, there’s a few glitches that I haven’t seen anybody mentioned yet.

    1, For the slider, I got this error where the images were chopped up into square box and these boxed piling on top of each other. After trying out different stuff, I’ve finally found that I need to add this line into the Slider section.

    .nivo-box { display:block; position:absolute; z-index:5; }

    2. For the credits part, I got the same result from the Photoshop design by making the a part of instead of seperating by itself.

    If you have time I would love to hear what you think about these 2 adjustments that I found for the code. It will help me improve at coding website.

    Once again, thank you very much for sharing this tutorials.

  23. virgilio vega

    I am following this tutorial, nice, but not really explanied step by step for beginners :(

  24. Its such as you learn my thoughts! You appear to understand a lot about this, like you wrote the e-book in it or something.
    I feel that you just could do with a few % to power the message home a bit, but instead of that, that is wonderful blog. A fantastic read. I’ll definitely be back.

  25. advovaNot

    ?? ??????? ???????, ????????????? ??????? ?????? ????? ?????????? “???????? ?????” ?????????????? ?????????????, ?????? ???? ?????????? ????? “????” ????????? ????????? ???? ????? ?? ??????? ????????? ?????????????: ?????????????? ???????? ??? ???????? ????? ????? ????????. ???? ?????????????? ???????? ? ?????? ????? ???????? ????????? ???????? ????? “????” ?????????? ???????, ??? ?? ???????? ?????????????? ????????? “???????? ? ????????” ?????????? ????? ? ????, ??????, ??? “?????” (????????? ?? ????? ??????????? ?? ????????????? ????????? ????). ??? ?????????? ???, ? ?? ? ??? ?????, ???????????? ?? ??? ?????????????? ???????? ? ????????, ??? ? ?????????????? ???? ???????? ? ???????????? ???????? ?????? ?????????? ???????????. ??? ???? ?? ???????? ?????? ?? ?????? ?????????????? ? ?????? ????? ? ????? ?????? ????????????? — ?? ?? ????? ?? ???????? ???????? ?? ???????? ????? “16+” ? “18+”, ?????????? ??????? ??? ????? (??????? ?????? ????????? ??????? “????? ?????? 18 ???” — ??? ?? ?? ?? ???????? ??????, ????? ????????: “???????, ?? ?? ?? ???????! — ?????? ???? ???????, 23 ????!”). ?????? ?? ?????, ? ?????? ????? ???????????? ???????? ?????? ????????, ??????? ? ?????? ??????.

    ??????????? ??????? ??????? — ? ??????? ?? ?????????? ?????????. ???????????, ??? ??? ?????????? ?? ?????? ? ????????: “???????????!” ???, ????? ???????? ?? ???????? ???????? ??????, ?? ?????? — ?? ??? ??? ???????? — ?????? ???? ???????????. ??, “18+”. ???, ???? ?????, ???? ??????????? ????????? ??????. ? ????? ???????? “??????” ? ?????????? ????? ???? ???????? ???????? ???.

    ? ??? ?????, ?????, ???? ? ????? ????????????? ????????, ????????? ????? ? ?????? ???? ????????????? ?? ?????? ????? ?, ???? ??????????? ??????, ??????????? ? ??????????, ?????????? ?? ???????????? (??? ????? ????? ? ????, ???? ?? ?? ????? imdb.com), ?????? ????????? ?????? ?????. ?????? ???? ?????. ??? ?? ??? ??? “???????”, ??? ????????? ? ?????? ???????? ???? ? ???????????? ????????? ?? ????? ?????????: “??? ? ?????? — ?????? ????? ??????!”

  26. vijay

    Hearty thanks alot..keep on rocking!

  27. great tutorial…..but i think slice tool is good for use instead of marquee tool.
    otherwise awesome tut and keep it up.

  28. Always good to read how other people do it. Personally I use slicing but that’s just how I learned. You should have showed the good stuff like hooking up the forms :) I spend alot of time on forms and it’s super important for designers to understand how they work. Good read.. Thanks for the article.

  29. Hi there, kosmetyczka Radom I just wanted to mention,
    I enjoyed this blog post p12847. That it was practical entry3566.
    Keep writing!

  30. Incredible points. Sound transport medyczny Lublin discussions.
    Maintain the amazing work.

    This information 8605 is priceless. How do I find out more?

  31. What’s up, tu I would like to say, I loved this article tu.
    It actually was funny link. Carry on publishing!

  32. rakesh kumar

    ameging. i am fan of u plz send me your fb contact for further conversation.

  33. Incredible points. Sound transport medyczny Lublin points.
    Maintain the amazing effort.

    This info transport medyczny Lublin is worth everyone’s attention.
    How might I get more information?

  34. What’s up, od?ywki just wanted to say, I liked this post
    od?ywki na si??. It seemed to be funny tanie od?ywki.
    Keep submitting!

  35. Hi there, fotografia dzieci?ca Warszawa I just
    wanted to say, I enjoyed this article fotografia dzieci?ca Warszawa.
    That it was inspiring fotografia dzieci?ca Warszawa.
    Keep going writing!

  36. Hi, web site merely wanted to say, I loved this post web site.
    It had been helpful web site. Continue on writing!

  37. Incredible points. Sound suplementy sklep questions.
    Sustain the amazing work.

    This valuable post suplementy sklep is invaluable.
    Where will I discover more?

  38. On peut vous dire que ce n’est nullement incohérent !!!

  39. Very rapidly this web page will be famous amid all blog viewers, due to it’s
    fastidious articles

  40. Nice Tutorial, looking forward for more tutoriaks

  41. I really love your website.. Great colors & theme.

    Diid yyou make this web site yourself? Please reply back as I’m hoing to creaate my very
    own website and would like to find out where youu got this from or just what the theme is called.
    Thank you!

  42. Rebecca Hanson, author of Law of Attraction for Business, founder of the Law of Attraction Training Center, and president of Tele –
    Class International Services Inc. This treatment stimulates healing in the heel
    and has proven to be a successful option in the past.
    Here are a few common treatments for plantar
    fasciitis:.

  43. You pop them in your shoes and just go about
    your normal business. In the surgical intervention the Plantar Fascia is partially released from
    the bone and any spur removed if found to be present.
    Besides the arch, such shoes also need to provide support to the
    heel and the ball of the feet.

  44. “Megan really educated herself big-time so she really understood the safe boundaries of how to exercise and eat well,” said Pasternak,
    whose clients include Halle Berry, Lady Gaga, and Jessica Simpson.
    This happened because of our turtle-like evolution
    as well as the world’s modernization. chicken breast,
    turkey breast and Goose breast are also included in this group.

  45. Fantastic website. Lots off useful info here. I’m sending it
    to some friends ans also sharing in delicious.
    And obviously, thanks oon your sweat!

  46. Hey! Do you know if they make any plugins to help with Search Engine Optimization? I’m trying
    to get my blog to rank for soje targeted keywords but I’m not seeing very good success.
    If you know of any please share. Appreciate it!

  47. com, who ran the first photo, displays an X-ray
    of a water rat, a species endemic to Australia, and
    compares it to characteristics of the Montauk Monster.

    Clearing and building would never ever getting a problem in Dragon town they are conceivable since longer as you have actually sufficient gold.

    More often than not, a reporter’s life is anything but glamorous.

  48. Hello there! I know this is kind of off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

  49. Hola ! Esta es mi primera visita a su blog! Somos un grupo
    de colección de voluntarios y comenzar una nueva
    iniciativa proyecto en una comunidad en el mismo nicho.
    Tu blog nos ha proporcionado valiosa La información para trabajar.
    Usted ha hecho un maravillosa trabajo!

  50. The very best way will be to locate a dealership offering this type of financing.
    A dump truck buyer will probably come across dump truck financing to generally be much easier to obtain and far more readily available than other kinds of
    commercial financing.

  51. Having a skilled financing partner is often extra important than getting
    the top price or terms over a deal. Capitalize on this by going for any
    employed rather than new truck.

  52. Together with the number of financing options out there,
    leasing has become a valuable way to save income on equipment charges.
    How can you get Commercial Truck Financing so that you can start your own operations and obtain out within the open roads.

  53. Keep in mind that subsequent to a house or property, buying a new truck as well as an excellent
    employed truck is going to be your biggest acquire. For those who can show that you will be confident that you can make dollars using the automobile, the lender
    will likely be far more comfortable to provide you using
    the financing you want.

  54. Mijn programmer probeert te overtuigen overtuigen mij om te
    verhuizen naar net van PHP.. Ik heb altijd een hekel aan het idee vanwege de kosten. Maar hij tryiong niettemin. Ik heb met behulp van WordPress diverse websites voor ongeveer een jaar en ben bang over te
    schakelen naar een ander platform. Ik heb gehoord zeer goed goede dingen over blogengine.net.
    Is er een manier waarop ik kan import al mijn wordpress content in het?
    Elke hulp zou zeer gewaardeerd!
    Goede dag! Zou je het erg als ik jje blog delen met mijn twitter groep?
    Er is een heleboel mensen dat ik denk dat zou echt genieten waarderen uw inhoud.
    Laat het me weten. Proost

  55. Because the admin of this site is working, no uncertainty very soon it
    will be famous, due to its feature contents.

  56. At this time I am going away to do my breakfast, after having my breakfast coming again to read other
    news.

  57. Aw, this was an exceptionally good post. Taking the time and actual ffort
    to produce a very good article… but what can I say… I
    hesitate a lot and never manage to get nearly anything done.

  58. Thanks ffor sharing your thoughts on photoshop.

    Regards

  59. It’s actually a great and useful piece of info.
    I’m satisfied that you shared this useful info with us.

    Please keep us informed like this. Thanks for sharing.

  60. This design is spectacular! You definitely know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Great
    job. I really enjoyed what you had to say, and more than that, how you presented it.
    Too cool!

  61. Just want to say your article is as astounding.
    The clearness for your publish is simply cool and i can think you’re knowledgeable
    in this subject. Fine together with your permission allow me to take
    hold of your RSS feed to keep up to date with forthcoming post.
    Thank you a million and please continue the enjoyable work.

  62. May I just say what a comfort to discover an individual who genuinely knows what they are discussing on the net.

    You definitely understand how to bring an issue to light and make it important.
    More people ought to check this out and understand this side of your
    story. I was surprised you aren’t more popular given that you surely possess the gift.

  63. This is my first time pay a quick visit at here and
    i am genuinely happy to read everthing at single place.

  64. Thank you for sharing your thoughts. I truly appreciate your efforts and I will be waiting for
    your next post thank you once again.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team