Coding a Band Website Created in Photoshop

Dec 29 2009 by Shannon Noack | 30 Comments

Coding a Band Website Created in Photoshop

In Part 1 of this tutorial, you learned step-by-step how to design an awesome band website in Photoshop. Now in Part 2, you’ll learn how to take that PSD and turn it into clean, working XHTML/CSS code.

Band Website Series:

Working Proof

If you follow along with the tutorial, you should end up with the following live demonstration.

Working ProofClick to view live demo

Setting up the files

1 Start out by creating a new folder on your computer to put all of the site files in; I titled my folder sixrevisionsband. Create another folder in your working folder you just created and call it images; it will contain all the images, including CSS background images, for the site.

Setting up the files

2 Now open up your favorite code editor (I use Coda.) Create a new HTML file titled index.html in the root of the folder -this will be our main page template. I like to keep all of my stylesheets in one folder in case I need to add a few different stylesheets. That way they are all kept together neatly. So we’ll add a folder titled css, and a CSS file inside it titled screen.css. screen.css will be the main stylesheet for our template.

I start out the HTML with some basic stuff, making sure to add a title and a link to the stylesheet:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<title>Six Revisions Band Website</title>
</head>
<body>

</body>
</html>

Setting up the files

My stylesheet also starts out with a few basic styles such as a border, margin, padding reset for all elements and some style declarations for common elements such as headings, lists, paragraphs, and hyperlinks. Then to organize, I break the stylesheet into several logical parts so that when I maintain the stylesheet later on, things will be easier to find:

/***** Global Settings *****/

html, body {
  border:0;
  margin:0;
  padding:0;
}

body {
  font:.9em/1.3em arial, helvetica, sans-serif;
  color:#403d3d;
}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
  font-weight:normal;
}

h1 {
  padding:30px 0 25px 0;
  letter-spacing:-1px;
  font:2em arial, helvetica, sans-serif;
}

h2 {
  padding:20px 0;
  letter-spacing:-1px;
  font:1.5em arial, helvetica, sans-serif;
}

h3 {
  font:1em arial, helvetica, sans-serif;
  font-weight:bold;
  padding:5px 0 10px 0;
}

p, ul, ol {
  margin:0;
  padding:0 0 18px 0;
}

ul, ol {
  list-style:disc;
  padding:0 0 18px 40px;
}

img {
  border:0;
  margin: 0 0 5px 0;
}

/***** Links *****/

a, a:visited {
  text-decoration:underline;
  color:#403d3d;
}

a:hover {
  text-decoration: none;
}

/***** Wrapper *****/



/***** Header Area *****/



/***** Homepage Content *****/



/***** Footer *****/



/***** Global Classes *****/

.clear { clear:both; }

Starting with the background (in Photoshop)

3 I like to start out from the back and work my way forward (towards the screen). If you downloaded the PSD file from Part 1, you’ll notice the layers are organized into folders: header, home, footer, and back. This helps for the coding process.

You’ll want to turn off all of the groups except for back, which contains all of the layers with the background files. You’ll also want to turn off the content area, and you’ll be left with this:

Setting up the files

4 You’ll need to change the canvas size (Image > Canvas Size) to 1600px wide so the background will be wide enough to save as a full-width background. Once we do that, we see that the grid texture has harsh lines that we’ll need to get rid of.

Setting up the files

5 We’ll create a mask like we did in Part 1. Select the layer with the grid texture by holding down the Cmd/Ctrl key and clicking on the layer thumbnail in the Layer Panel.

6 Then create the layer mask by clicking on the Add Layer Mask button at the bottom of the Layer Panel.

7 We’ll choose a large soft round brush, like Soft Round 300 and change the Opacity and Flow settings to 50%. Make sure your foreground color is set to black (press D to reset your foreground and background color quickly). Softly brush the sides (not the bottom) a few times until the harsh lines are all gone. Your background should look like this:

Setting up the files

5 Our background is ready to save. Choose File > Save for Web & Devices. I like to experiment in here and find the best settings for the image, while trying to keep the file size as low as possible. With this image, I found that a JPG at 40% keeps the file size fairly low but the quality good enough so that it’s not pixilated. Save this to the images folder as background.jpg.

Adding the background to the web design

6 To add the background to your design, use the body element’s CSS background attribute. The style declaration below tells the background not to repeat, to be at the top and in the center at all times, and when the picture runs out, use the tan color #d5d4c2.

body {
  background: url(../images/background.jpg) no-repeat top center #d5d4c2;
}

Next, we’ll need to make sure all of our other items are centered in a 960-pixel wide wrapper. I’ll add a wrapper div in HTML:

<div id="wrap"></div>

And then we’ll need to give it some styles to center it:

#wrap {
  width:960px;
  margin:0 auto;
}

Working on the site’s logo

7 Turn all layer folders back on to see what’s next. I like to code in the order the items will be in the HTML, so the logo is next. I add some guides around the logo to make everything precise and then I crop the logo to the guidelines. I save this out as a JPG at 40% as well.

Logo

8 Now we’ll add the logo in with an h1 tag, which tells search engines that this an important element on our page. Then we’ll add an a tag inside of it that will link back to the homepage.

<div id="logo"><h1><a href="index.html">Six Revisions</a></h1></div>

I like to use a negative text-indent which will hide the text from sighted viewers, but will still be visible to search engines and screen-reading technologies.

And then I add the image in as a background in the stylesheet. We’ll also need it to float it left because the navigation will be floating to the right. Here’s what the CSS looks like:

#logo h1 {
  float:left;
  display:block;
  padding:21px 0 0 23px;
  text-indent:-2000px;
  margin: 0;
}
	
#logo h1 a {
  width:293px;
  height:100px;
  display:block;
  background:url(../images/logo.jpg) no-repeat;
}

Coding the navigation

Hover

9 Moving on to the navigation. First we’ll go in and crop out the hover background, cropping it at 1px wide by 110px tall. We can save it out as a PNG-24. The transparency will work everywhere except in Internet Explorer 6 and below, but it’ll appear as a light grey background there, which I’m fine with.

As a quick note, I do test and make sure my sites are functioning in Internet Explorer, but as you may know, IE6 has several issues, like not supporting certain image types (like PNG-24s) and misinterpreting certain CSS specs. So I find ways to make it work but according to browsers stats by w3 schools in October 2009, only 10.6% of internet users are still using IE6 and it appears to be dropping quickly. So, although the light grey hover background isn’t as classy as the transparent PNG-24, it gets the job done, which is my method for taking care of IE6. Period. Ok let’s move on.

We’ll use a straightforward unordered list, and the HTML will look like this:

<div id="navigation">
  <ul>
    <li><a href="#">News</a></li>      
    <li><a href="#">Songs</a></li>      
    <li><a href="#">Photos</a></li>      
    <li><a href="#">Videos</a></li>      
    <li><a href="#">Tours & Events</a></li>
  </ul>
</div>

I’ll show you the CSS and then I’ll break it all down:

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

#navigation li a {
  padding: 64px 14px 33px 14px;
}

#navigation li a:hover {
  background: url(../images/hover.png) repeat-x;
}

First, I floated the navigation to the right to get it into place. Then I added some styles to get the look of the text to be uppercase and bold with a 1.1em font size. Also, I changed the link color to #706752 and told it not to have any underline.

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

Now onto our unordered list. First, I took away any list-style and zeroed out the padding and margins, and then added another float right to get it placed correctly.

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

Next, I floated the li to the left to get each link to sit next to each other, because the default is to line up vertically. If you float the li right, then your links will be listed backwards. Then, I added padding to the top and bottom of the li with #navigation li to get the links in the right place.

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

This padding spaces the li‘s out from side to side and also tells the hover action the height.

#navigation li a {
padding: 64px 14px 33px 14px;
}

And finally we add in our hover background, which will repeat horizontally.

#navigation li a:hover {
background: url(../images/hover.png) repeat-x;
}

Coding the content area

Setting up the files

10 Moving on to the content area. Back in Photoshop, we’ll turn off these groups: home and footer, leaving back and header group on. We’ll add guides to the top and the bottom of the content area to decide where we’d like to crop it. I find that 960 pixels wide by 710 pixels tall will be a good size and plenty tall enough. Crop it and save it for the web. And again, a JPG at 40% will do the trick.

We’ll clear the float above with:

<br class="clear" />

Then we’ll add a div called #contentarea for the content area and then style it. A simple hack was added here, as IE6 doesn’t recognize min-height. The two lines beneath min-height (height and _height) allow IE6 to recognize the fact that we’d like the #contentarea div to be at least 830px tall. I also added in padding to push all the content inside in the right place easily.

#contentarea {
  background: url(../images/contentarea.jpg) no-repeat top center;
  width: 908px;
  min-height: 684px;
  height: auto;
  _height: 684px;
  margin: 18px 0 0 0;
  padding: 26px 26px 0 26px;
}



11 Next, inside the content area is the feature. You can place a slider here using this tutorial called Create a Slick and Accessible Slideshow Using jQuery or use a flash component. To keep things simple for the code and for the purposes of this tutorial, we’ll just simulate the look of the an animated feature with a simple image for now.

I’ll keep call this section #flash:

<div id="flash"><img src="images3/flash.jpg" alt="flash" /></div>

And the CSS is basic dimensions and margin definitions:

#flash {
  width: 908px;
  height: 411px;
  margin: 0 0 35px 0;
}

The margin on bottom accounts for the space between the #flash div and the 3 columns that will be below.

Creating the columns

12 Now we’ll crop out the next couple photos to get everything ready for the 3 columns of content below the flash. We’ll need to crop the video (which we’ll simulate with an image for this tutorial, just like we did with the #flash image), and the 6 social media icons.

13 Next we’ll set up the HTML for the columns. The br tag clears the float for the footer that will be below these columns.

<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
<br class="clear" />

Some simple CSS gets the columns all set up and in place:

#column1 {
  float: left;
  display: block;
  width: 233px;
  margin: 0 68px 0 0;
}

#column2 {
  float: left;
  display: block;
  width: 335px;
  margin: 0;
}

#column3 {
  float: right;
  display: block;
  width: 207px;
  margin: 0;
}

14 We’ll add the content to the first column and your html should look like this:

<div id="column1">
  <h3>Latest Videos</h3>
  <p><img src="images3/video.jpg" alt="video" /><br />
  <a href="#">Another video to watch here</a><br />
  <a href="#">And yet another video here</a></p>
</div>

15 For the blog posts in column 2, I could use simple pie or some php script to call in the 3 most recent blog post titles and a couple lines, but for now we’ll just add some simple HTML to column 2 to simulate the look of the blog posts:

<div id="column2">
  <h3>Six Revisions blog</h3>
  <p><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a><br />
			Nunc eu mi risus, nec luctus justo.[...]</p>
  <p><a href="#">Bibendum est eu gravida cras dui sem</a><br />
			Venenatis a egestas id, consectetur faucibus nibh.[...]</p>
  <p><a href="#">Aliquam arcu nisi, sagittis at feugiat quis</a><br />
			Accumsan ut metus. Mauris rhoncus[...]</p>
</div>

16 The third column will be set up using some unordered lists, to get the indent without having to use another div. Here’s our HTML:

<div id="column3">
  <h3>Connect with us</h3>
  <ul>
    <li><a href="#"><img src="images3/facebook.png" alt="facebook" /></a></li>
    <li><a href="#"><img src="images3/myspace.png" alt="myspace" /></a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="images3/twitter.png" alt="twitter" /></a></li>
    <li><a href="#"><img src="images3/linkedin.png" alt="linked in" /></a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="images3/flickr.png" alt="flickr" /></a></li>
    <li><a href="#"><img src="images3/rss.png" alt="rss" /></a></li>
  </ul>
</div>

I also had to add some CSS to control the unordered list properly:

#column3 ul {
  list-style: none;
}

#column3 li {
  float: left;
  display: block;
  padding: 0 27px 10px 0;
}

The finale: the footer

17 Almost there! Moving onto the final piece, the footer. Add some simple HTML:

<div id="footer">
  copy; 2009 Six Revisions Band  |  <a href="#">contact us</a>
</div>

And the CSS is pretty simple as well. The line was added with a 6px border at the top and I needed some space above the line (which I created with margins) and some space below the line and above the text (which I created with padding). I also wanted some space below the text and before the edge of the browser window, which I created with padding as well. And the font size needed to be slightly smaller than the other body copy, so I made it .9em.

#footer {
  width: 960px;
  border-top: 6px solid #c4c2af;
  padding: 10px 0 30px 0;
  text-align: center;
  margin: 30px 0 0 0;
  font-size: .9em;
}

And we’re all finished!

Working Proof

Thanks for following along through the full tutorial. I hope you learned some coding techniques and PSD to XHTML/CSS tricks. Feel free to ask any questions and definitely let me know what you think in the comments area.

Download the source files

Related Content

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly at the Snoack Studios blog and you can connect with @snoackstudios on Twitter as well.

30 Comments

Cubanoid

December 29th, 2009

Great tutorial.
Thanks for it.

ditracreative

December 29th, 2009

Wonderful tutorial! Easy to follow! Nice design! Thanks, Shannon!

My Designs

December 29th, 2009

Awesome.. Great Collection.

I totally love it. Am inspired, i go to try these for my works.

W/ lots of love and Kiss.

Thanks…

Colorate

December 29th, 2009

Good tutorial

Kenny G. Villacorta

December 29th, 2009

I’m fairly new to css. Can you explain more about div tags? Can you put any type of value as long as you declare it in css?

Prince of Andalus

December 29th, 2009

div tag is for class in css, it can be in various places throughout the document.

while id is opposite, can only be used once

check here

http://www.tizag.com/cssT/cssid.php

ajay

December 30th, 2009

Good Tutorial.

Ahsan Malik

December 30th, 2009

Oh this is exceptional , tutorial, thanks Shannon for providing this to us. i was stucks somewhere in codding , and u made this easy for me

Shannon

December 30th, 2009

Glad you all are liking the tutorial!

@Kenny G. Villacorta: Just as Prince of Andalus said, a class can be used multiple times on one page, an id just once. And you can make the class or id anything you want and call it in using css. Hope that helps and good luck with learning!

Ama

December 30th, 2009

That was really helpful, I’ve always been iffy about coding my own layouts since I’m not able to always check them in every browser >.<

diseño

December 30th, 2009

i love this post! i will do it now, congratulations

Kenny Villacorta

December 30th, 2009

Thank you everyone for the explanation and links!

debtmanager

December 30th, 2009

very helpful article. I have been trying to learn more about coding.

Webjohn01

January 2nd, 2010

Hello Shannon!

It was a very nice tutorial and I learned a lot.

Keep up the good work.

More thanks!

Joe Payton

January 2nd, 2010

One of the best things I’ve found recently for a band website was a newly updated plugin for wordpress http://gigpress.com/

If you’re building a band’s website, which I built a site for my brother’s band ( http://straightjacketseduction.com ) this plugin is worth a look.

Josemi

January 4th, 2010

I used to code {display:inline} to avoid a vertical menu line up. But this tutorial shows a better way. Thank you.

Ben Stokes

January 15th, 2010

I did the same as Josemi – excellent tutorial, many thanks for sharing this.

john3

January 25th, 2010

how do you install this on wordpress? is says its broken and style sheet is missing….

Henry

February 4th, 2010

Thank for the great tutorial. Its very helpful for newbie like myself

Alias

February 18th, 2010

great tutorial. learned a lot and inspired to do it on my own. thanks for explaining about the coding part (not just the design). that’s when the website comes to life.

Aveef

February 20th, 2010

Waw !!! amazing !! very useful tutorial !!

fireRox

April 12th, 2010

Great tutorial. Very clean coding. Everyone who wants to become professional, has to read this article.

Carlos Y. Arias

November 12th, 2010

Thanks a lot, I love you Shannon!

Teme

May 31st, 2011

Nice clean design as well, maybe do a second version post where you show how to make a wordpress theme out of it? I think most people today would rather use a CMS.

MyFirstWebsite

June 11th, 2011

I have a question.

On the code you have section of images. How do you save those. I created a PSD file using your part 1. But on part 2 you have section of images rather than the whole image. For eg. you have image for flash, logo etc.

I hope i am making any sense. This is my first website ever!

Andy

June 13th, 2011

thank you shannon. This helped me a lot. I am a bit good at web design but when it comes to coding, i cannot say so. I am improving though.

waseem

September 4th, 2011

regards from pakistan .perfect tutorial for bignners :)

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify