Gungurru Web Design Blog

This is the second of a two part tutorial on Designing and Coding a Sleek Web 2.0 Style Website Layout. (Part one can be viewed here).

For this version, you will need your .PSD file from the original tutorial. If you want to start with what I got, please download the PSD file here. Note: There is one important change in this PSD file than the end result of the first part of this tutorial (the alignment of the ‘content-background’ layer). So if you want a better result, please download the PSD file.

First off, open up the PSD layout in Photoshop, and select the Slice tool (this is found behind the crop tool in the toolbar, default key ‘c’)

Now, make a vertical slice along the header background, right down to the zigzagged lines, and make sure that your slice will allow the image to be repeatable (this is really important for the CSS later on).

Then, make a slice around the logo (you can resize the edges of your slice by clicking and dragging them).

After this, slice around the top of the zigzagged lines which are below the ‘Call-to-action’ image. Make sure again that the image will be able to loop seamlessly horizontally. (Again, This is really important for later)

Then, slice around the 3 icon images (the globe, the clock and the twitter icon).

Then slice the Headings, A suitable part of the zigzagged grey footer, and the footer logo.

Now, there’s a really useful part of the ‘Slice Select’ tool (Different to the normal ‘Slice’ tool). This means that you can rename the sliced areas to a chosen name.

Just double click on the slice, and rename the parts to your choosing.

Here’s a list of what I’m renaming slices to:

Header zigzagged Background: ‘header-bg’

Header Logo: ‘header-logo’

Content zigzagged background: ‘content-bg’

Globe Icon, Clock Icon & Twitter: ‘icon-globe’, ‘icon-clock’ & ‘icon-twitter’

Headings: ‘we-are-global’, ‘we-are-fast’ & ‘twitter’

Footer Background: ‘footer-bg’

Footer Logo: ‘footer-logo’

Then click File>Save for Web & Devices (shortcut Alt+Control+Shift+S). Select PNG-8 as your image format, then click save. In the browse view, create a new folder on your Hard Drive named ‘site’. Then choose the following settings (ensure to check the ‘interlaced’ box, and click ‘Save’. Make sure that only ‘User Slices’ are exported.

Note: Photoshop should have automatically put the images into a folder named ‘images’ inside your ‘site’ folder, and if not, manually do this.

Now we have to manually delete some parts in the ‘header-bg.png’ and ‘content-bg.png’ files. Open them both up into Photoshop, and do the following (this is really important): Duplicate the background layer, and delete the original background layer. Don’t create a layer from background, or this won’t work. Now, select the magic want tool, and a tolerance of around 10, and delete the light blue colour right in the middle of the zigzag.

Now for the hardest part of this tutorial: open the info panel (default key f8), and draw a rectangular selection all the way around the ‘Call to action’ bit (the stuff with the blue gradient background), and make sure to include the zigzags within your selection. Now, in the info palette, have a look at the object size bit, and look at the height value (it has an H: 000 value, where 000 is your selection height – min is 360px) and remember the height for the next part:

Deselect that now (Ctrl+D / Mac Cmd+D), and move the entire ‘Call-to-action’ group into a new canvas. Make the canvas height the same height as your height value from the info palette earlier. Make the width 1300px, so that the background image will fit nicely inside.

Next, select the ‘Call-to-action background’ layer, and select the gradient tool with a linear gradient like so:

(a white to white gradient, with one side 0% opacity and the other side 100% opacity).

Then, draw white gradients from the outside in:

Then, try to centralise the content, but keeping the background in the same place.

Then, save the image as a jpg file in the ‘images’ folder that you have used earlier, and make sure that the quality is relatively high, so as to look sleeker in the final website.

That’s all we need to do in Photoshop! Now onto the coding! Arguably, we can say that the navigation hasn’t been exported yet, but I think we should leave that to CSS, but you can do an image sprite if you want to.

In the ‘site’ folder, create a new html file and call it index.html – then insert the standard tags and whatnot (i.e. doctype, head, html & body).

Then, create a new CSS stylesheet (call it styles.css) and link to it from the index.html file.

<link rel="stylesheet" href="styles.css" />

In the styles.css file, make sure that the body margin and padding are 0.
Header Styles
Create a #header div and apply the following:

#header {
width: 100%;
height: 201px;
background: url(images/header-bg.png) repeat-x;
position: relative;
z-index: 1;
}
#header img {
margin: 63px 0px 0px -470px;
border: none;
}

Here’s the HTML for the header:

<div id="header">
<a href="index.html">
<img src="images/header-logo.png" alt="Web 2.0 Business layout from Gungurru" />
</a>
</div>

And so far it should look like this:

Now for the Call-to-action image. I’m going to call it #callto in the CSS, because it saves so much time to write it out!

#callto {
width: 100%;
height: 360px;
margin-top: -10px;
background: url(images/call-to-action.jpg) center no-repeat #fff;
position: relative;
z-index: 0;
}

The HTML is the following:

<div id="callto"></div>

And now it should look like this:

Next part is the main content section. In the CSS, we’ll create two divs: #top and #content (why two separate ones? The #top div is for the zigzagged lines at the top, and the #content is for the blue box underneath. The reason that the zigzagged lines cannot be a part of the #content div is because the background colour is set as #2142 and would ruin the effect)

#top {
width: 100%;
height: 28px;
margin-top: -15px;
background: url(images/content-bg.png) top left repeat-x;
position: relative;
z-index: 1;
}
#content {
width: 100%;
min-height: 500px; /* This means that the box will look a nice size even with nothing in it */
background: #002142;
padding: 10px 0px 40px 0px;
}

The HTML for the content box is the following:

<div id="top">
</div>
<div align="center">
<div id="content">
</div>
<!-- Don't Close the Div Align Center until the end! -->

And this is what it should look like:

Now onto the navigation – with thanks to desizntech for this (this is using a mod of their code)

#nav {
background: #002142;
padding: 0px 0px 0px 20px;
height: 40px;
list-style: none;
font-family: "arial rounded mt bold", arial, "lucida console", sans-serif;
width: 876px;
}
#nav ul {
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
margin: 0;
padding:0px 30px 0px 0px;
}
#nav a {
display: block;
line-height: 30px;
margin: 0;
padding: 10px 20px;
font-size: 30px;
color: #fff;
text-decoration: none;
background: #none;
}
#nav a:hover {
text-decoration: none;
background: #66789c;
}
.current {
background: #66789c;
}

What you may need to modify is the #nav width. This is what it is so that the Menu can be centred.
And here’s the html for it:

<ul id="nav">
<li>
<a class="current" href="#">Home</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Services &amp; Pricing</a>
</li>
<li>
<a href="#"> Contact </a>
</li>
</ul>

And that should be the navigation styling!
This is what the site should look like now:

Next, we need to style the three columns. I’m just going to go right ahead and style it as an unordered list…

#columns {
list-style: none;
width: 890px;
padding-top: 30px;
}
#columns ul {
margin: 0 auto;
padding: 0;
}
#columns li {
display: inline-block;
text-align: center;
width: 280px;
vertical-align: top;
}
#columns p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
text-align: left;
padding: 0px 10px;
}
#columns img {
border: none;
}
.global {
padding: 0px 10px;
}
.fast {
padding: 0px 10px;
}
.twitter {
width: 290px;
}

And here’s the html to go with it:

<ul id="columns">
<li class="global">
<img src="images/icon-globe.png" alt="Globe Icon" />
<br />
<img src="images/we-are-global.png" alt="We Are Global" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</li>
<li class="fast">
<img src="images/icon-clock.png" alt="Clock Icon" />
<br />
<img src="images/we-are-fast.png" alt="We Are Fast" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.
</p>
</li>
<li class="twitter">
<img src="images/icon-twitter.png" alt="Twitter Icon" />
<br />
<img src="images/twitter.png" alt="We Are On Twitter" />
<!-- Here you need to put your personal code in from www.twitter.com/badges -->
</li>
</ul>

Now it should look like this:

Finally, onto the footer styles:

#footer {
background: url(images/footer-bg.png) repeat-x left top #ccc;
width: 100%;
min-height: 100px;
margin-top: -16px;
}
#footer p {
width: 890px;
background: url(images/footer-logo.png) no-repeat bottom right;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666;
padding-top: 50px;
}

And here’s the html to go with it:

<div id="footer">
<p>
Copyright Gungurru Web Design 2009
</p>
</div>

Note: that last div closes the div align center from earlier…

And, if I’ve managed to give correct instruction, the site should look something like this:

And that concludes this tutorial: Please do tell me what you think and how you got on with the tutorial! And if you have found this useful, and want to see more, just subscribe for the latest updates (there’s an interview with Chris Spooner coming up soon)!

Related posts:

1. Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 1)
2. Design a Vintage WWII Poster: a Photoshop Tutorial
3. Design a Warm Nature Website Layout: a Photoshop Tutorial
4. Design an Online Advert Set in Photoshop
5. Why We Love Spoongraphics: A Visual, In-Depth Examination

Tags: code, design, graphic, photoshop, psd to html, slice, tutorial, web 2.0, website

This entry was posted on Monday, August 24th, 2009 at 1:50 pm and is filed under Graphic Design, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.