From PSD to HTML: Building a Set of Website Designs Step by Step:
What We’re Building
As you may or may not know, I’ve (very slowly) writing a book on WordPress theming. What we’re building is actually the HTML that I’m using in the book to build the main example themes. The final set of themes is called Creatif. You can see the 4 mockups shown in screenshots below (click to get the larger versions).You can get the full layered PSD files *and* a tutorial on designing them up from our PSDTUTS Plus membership – but it will cost you $19 a month to access. If you don’t wish to join though, don’t worry because you can follow today’s tutorial completely just using the JPG screenshots below.
Step 1 - Getting Ready
So first of all we boot up our code editor of choice. I actually use Dreamweaver most of the time (and Textmate sometimes). I find it has some pretty decent code tools and a few features that I’m really used to (in particular a powerful Find+Replace and a quick <img> hook up). If you do use Dreamweaver, I recommend setting up a "Site".In any case the first things to do are create a directory structure and get ready to build. I usually have an /images/ directory and a /scripts/ directory, and then plonk all my CSS and HTML in the root.
Step 2 - Quick Early Layout
The first thing we’ll do is a quick overall layout in HTML with some barebones CSS just to make sure we’ve got a solid foundation. We can also check it in the major browsers (IE7, IE6, Firefox, Safari) just to make sure we’re on a solid footing. There is nothing worse than coming back all the way to the beginning to fix browser compatibility issues. It’s much better to do it as you go.So we’re building the first mockup, we can see a few things:
- The design is centred. That immediately tells us we have to wrap it in a container and then centre that container.
- Essentially the design is a series of horizontal blocks. Sometimes the blocks have two columns, sometimes one. So we can do it as a series of <div>’s. This is good because we can then mix and match elements into different pages as you’ll see later.
- We have a footer which is a different colour. This means the background needs to be that colour, in case the users browser stretches. So the footer will need to sit in a different container to the main stuff.
<!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>Creatif</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
Logo / Menu
</div>
<div id="block_feature">
Featured Content
</div>
<div id="block_content">
Content
</div>
</div>
</div>
<div id="footer">
<div class="container">
Footer Stuff Goes in Here
</div>
</div>
</body>
</html>
As you can see there are two segments: the #main area and the #footer area. Inside each we have a <div class="container"> element which will be fixed width and centred. Then inside the main container we just have a sequence of <div>’s. Now let’s add a little CSS as follows:
body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background-color:#c4c0be;
}
#footer {
color:white;
}
.container {
width:950px;
margin:0 auto;
border:1px solid red;
}
So we’re setting the body’s background colour to the dark brown of the footer. Then the #main area has the lighter background. Finally you can see the .container elements have a width of 950px and are centred using margin: auto. I’ve also added a red border just so you can see where the elements are on the page.
You can see the layout here, or view the screenshot below.
Step 3 - Add Some Background Images
So our layout is looking ship shape. With the main elements positioned, it’s just a matter of going through and styling it all up, couldn’t be easier :-)The first thing we need are some images. You can make these yourself if you have the layered PSD’s, or just grab the download ZIP and you’ll find some I made earlier!
Here’s a screenshot of me saving the first image – a large background JPG. I’m using this large background image to get that radial gradient highlight, then I’ll use a thin 1px slice to fill out the left and right sides so it extends off.
Similarly we’ll create a background image for the footer to tile along as a border between it and the main area (you can find that image in the ZIP file, it’s called background_footer.jpg). Now we’ll update the CSS file to remove that red border and add our new background images, as follows:
@charset "UTF-8";
/* Background-Styles */
body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
}
#main .container {
background-image:url(images/background_light.jpg);
background-repeat:no-repeat;
min-height:400px;
}
#footer {
background-image:url(images/background_footer.jpg);
background-repeat:repeat-x;
color:white;
padding:40px;
}
.container {
width:950px;
margin:0 auto;
position:relative;
}
Two things to note:
- There are multiple ways to set a background. In #main I’ve used a single selector which sets three properties – colour, image, image repeat. But you can also set each property individually as I’ve done in #main .container and #footer.
- Notice that because I want to apply the "background_light.jpg" image to the <div class=’container’> which inside #main, but not to the one that is inside #footer, I’ve written #main .container. In other words, apply it only to elements with the class=’container’ that are inside elements with id=’main’.
Step 4 - Testing in Browsers
So far so good. Don’t forget to test in different browsers. Here you can see in IE7 it’s looking fine and dandy!
Step 5 - Making a Transparent Logo
Next I’ve created the logo element. Because later on we’ll be running an alternate colour scheme I’m going to use a transparent background PNG file. You can make these by switching off the background in Photoshop and then going to File > Save for Web and Devices and selecting PNG-24. You should be aware that PNG-24 produces pretty high file sizes. It’s OK for a small image like this, but for larger ones it can be big.(If anyone knows how to make compressed PNG files, leave a comment, because I’m pretty sure there is a way to do it, I just don’t know how!)
Anyhow you can grab the transparent logo PNG here.
<!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>Creatif</title>
<link href="step_2.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
<ul id="menu">
<li><a href="">Portfolio</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Request a Quote</a></li>
</ul>
<div id="logo">
<h1>Creatif</h1>
<small>A Family of Rockstar WordPress Themes</small>
</div>
</div>
<div id="block_feature">
Featured Content
</div>
<div id="block_content">
Content
</div>
</div>
</div>
<div id="footer">
<div class="container">
Footer Stuff Goes in Here
</div>
</div>
</body>
</html>
and this extra CSS:
#header {
padding-top:20px;
}
#logo h1, #logo small {
margin:0px;
display:block;
text-indent:-9999px;
}
#logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:194px;
height:83px;
}
ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
}
Some things to note:
- Rather than just placing the logo image in the HTML, we’ve created a <div id="logo"> and inside that placed a <h1> with the title. Then using CSS we’ve made the text vanish and swapped it for the logo image. This has some SEO benefits.
- I used to just set the text to display:hidden, but a kind commenter on a previous tutorial pointed out that this is a bad practice and it’s better to use text-indent. So as you can see I *do* read my comments :-)
- I’ve placed a very quick, unstyled menu using an unordered list. By setting the display property to inline for the <li> elements, the list changes to a horizontal set of elements … yay!
- Finally because our <div class="container"> element has position:relative, we can now use absolute positioning inside and set right:0px for the menu and it will be aligned to the right. This is great for a WordPress theme because as the person creates new pages the menu will extend, and this way it will stay right aligned.
Step 6 - Fixing Transparency in IE6
Now the one problem with transparent PNGs is that our friend Internet Explorer 6 doesn’t support them! Fortunately that’s relatively easily fixed thanks to this article I found – The Easiest Way to Fix PNG for IE6. We just download a script and add this line in our CSS:- /* Fix up IE6 PNG Support */
- img, #logo { behavior: url(scripts/iepngfix.htc); }
So anyhow at this point I stopped paying attention to IE6 :-) I’m going to have to get me yet another way to view IE6, maybe through parallels.
In any case, here’s a screenshot of what we get in IE6 when transparency is *not* working
Step 7 - Fixing up the Menu
Now our menu is still looking pretty ugly, so let’s add a few styles to finish it off, as follows:ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
}
Nothing very exciting here except that we’ve defined an "active" style which is the same as the :hover style (namely it’s a darker shade). That means we can write <a href="" class="active"> and the link will darken. Later in WordPress we’ll make it so that you can tell what page you are on at any given time.
Step 8 - Adding the Featured Portfolio Item Content
Now we have the base of our page laid out, it’s time to start adding the content blocks. As I mentioned earlier we are going to make this site as a series of interchangeable content blocks. The first one is the "Featured Project" block. So let’s add some HTML:<div id="block_featured" class="block">
<span class="block_inside">
<div class="image_block">
<img src="images/sample_feature.jpg" />
</div>
<div class="text_block">
<h2>Eden Website Design</h2>
<small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>
<p>And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
<br />
<a href="" class="button">View Project</a>
</div>
</span>
</div>
So that code goes below the <div id="header"></div> code from the previous steps. And unstyled it looks like this:
- You will see that we have a <div class="block"> followed immediately by a <span class="block_inside">. This is because the boxes we are drawing have a double border, first there is a 1px dark grey border, then inside that a 1px white border. So having two elements means we can have a border on each. I don’t know why I used a <span> on the inside, and as you’ll see later on we wind up changing it :-)
- Where we have the View Project button, instead of using an image, we’re going to create a ‘button’ class and then apply it to regular text links. This makes for a very simple, reusable button look and feel.
Step 9 - Adding some Basic Styles
Now we apply some basic styling like this:/*
Block-Styles
*/
.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
}
.block_inside {
display:block;
border:1px solid #ffffff;
background: #ffffff url(images/background_block_slice.jpg) repeat-x;
padding:30px;
overflow:auto;
}
.image_block {
border:1px solid #b5b5b5;
background-color:#d2d2d2;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
.text_block {
float:left;
width:430px;
margin-left:30px;
}
So as I mentioned above we have the .block class which just sets a border and bottom margin. Then immediately inside we have the .block_inside element which has a white border, thin slice background (to give it that faint gradient), some padding and finally an overflow value.
We have overflow:auto because we are going to have two floated elements inside. I used to use a clearing <div> but someone in my previous comments pointed out that this works just as well and is a lot cleaner!
Then inside we have an .image_block class which gives our image a double border (one on the <div> and one on the <img> itself) and which is floated left with our main .text_block also floated left to form a mini columned layout.
So our layout now looks like this:
Step 10 - Adding Text Styles
Now the text styling is all over the place at the moment. It sort of looked OK in the previous screenshot because Firefox which I was using has defaulted to a Sans-Serif font. But if I’d screenshotted IE you would have seen a Serif’d typeface instead. So we should get the text sorted out now. We’ll add these bits of CSS to our stylesheet:body {
margin:0px; padding:0px;
background-color:#131211;
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}
/*
Text-Styles
*/
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }
a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
}
So:
- First I’ve updated the body tag to have a default font, colour, size and line-height.
- Then we’ve created a <h2> style which fixes the margins and sets the font to Helvetica
- We’ve also created a <small> style for subheadings (like what category a post is in etc)
- We’ve created a link style and link:hover style
- We’ve reset the <p> styling so that the margins are fixed from the stupid defaults
- Finally we’ve created that button class. Note that I’ve defined it as "a.button", or in other words all <a> tags with the class = "button". Why didn’t I just make it ".button" ? Well later on there is a good chance that I will make a second button class for <input>’s and it will be slightly different. So this way they won’t accidentally interact.
- In the button class you will see we’ve set some padding, a border, a background image, a hover style and a line-height attribute … wait a line-height attribute? Yes unfortunately this is a fix for IE which otherwise cuts off the button.
No comments:
Post a Comment