Tutorial1
The Design Lab: PSD Conversion
Hello, welcome to another layout coding tutorial. In this tutorial il show how to code my design lab layout tutorial. Make sure you have your PSD ready made in photoshop.
Create a new folder on your desktop called “design lab”, inside this folder create another folder called “images”. Open notepad then just goto “file > save as” save the blank document as “styles.css” save it in the “design lab” directory. Open up dreamweaver start a new HTML document then goto ” file > save as” save the HTML file as “index.html”.
Open up both files (styles.css & index.html) in adobe dreamweaver, put your HTML file in code view by clicking the code tab. Change the text within the title tag to what ever you want your site name to be. Also link your style sheet by adding the snippet of code underneath the title tag. That snippet of code is vital as without it your website will look pretty dull.
The way i code my PSD’s are from top to bottom, so we’l start with the main things first like our container, title and naviagtion. The first thing we’ll need is our containe r to hold the website, then within the container there will be another container for our clouds background. Then there will be our title and naviagtion. We can draft these out in our HTML file which looks like this.
To keep on top of our code and to see where one div begins and where another one ends we can use coded comments, which you’ll only see when viewing the source code. When creating a div i always start with a comment to say that it starts here, then end it with a comment to reflect the end of the div. from the structure above you can clearly see where one item begins and where one ends. Now before we code out CSS we need to make a couple of images from our PSD. The first one being our clouds background, so in photoshop with your PSD file HIDE every layer apart from your clouds layers (there should be two) a blurred one and a normal one. With all the layers hidden apart from the two clouds images goto “layer > merge visable”your two clouds layers should merge into one. Now you need to make a selection around your clouds image making sure you have it all. Once the selection has been made copy and paste it to a new document with a TRANSPARENT background. Goto “file > save as” then save it as clouds.png in your images folder. Heres my clouds image on my canvas.
your going to need to do this for each item that we copy from our PSD so remember the steps listed above, failure to follow the steps will result in choppy images, non transparent images etc,.. Do the same to the website title and the navigation bar.
Save each file as “navigation.png” and “title.png”.
You also need a little chunk of the background as we have used a gradient background. We can repeat the background horizontally across our website.
Save the background as “background.png”. You should now have 4 images in your images folder background, website title, navigation and the clouds.
Now we have our first set of images we can now add our CSS styles to our stylesheet. The first set of styles we will write will be our body styles which will be repeated through out our whole site.
*{
padding:0;
margin:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #797979;
margin: 0px;
padding: 0px;
background-color: #156894;
background-image: url(images/background.png);
background-repeat: repeat-x;
}
So we dont want any margins or padding around our website so we set our margin and padding to 0. We want a common font family “Arial, Helvetica, sans-serif;”, with a size of 12 pixels in the color #797979. Our background color will reflect the color at the very bottom of our “background.png”file. Mine is #156894 yours might be slightly different depending on how long your selection was. Just open it up in photoshop and use the eye dropper to select the color of the last couple of pixels. We then want our background image with the gradient on it to repeat along the x axis (horizontally). The next bit of code we need to add is for our container and clouds.
#container {
width: 850px;
margin: auto;
}
#clouds {
width: 850px;
float: left;
background-image: url(images/clouds.png);
background-repeat: no-repeat;
}
The first div we style is our container which we want to be 850pixels wide the same as our PSD file. We want our magins set to auto, this will center our whole site in our a browsers. We then style our 2nd div which is our clouds div, which will also act as our container but with a background image. We want the width to be the same as our container and we want to float it left within our container, we then set our background image to the clouds image in our images folder. We dont want it to repeat so we set no-repeat. You can view your HTML file in your browser to see how it looks, yo u wont see alot, but you’ll definetley be able to see if your background color matches. The next part we want to style is our title and navigation which looks like this.
#title {
background-image: url(images/title.png);
background-repeat: no-repeat;
height: 39px;
width: 243px;
float: left;
margin-top: 45px;
margin-left: 20px;
}
#navigation {
background-image: url(images/navigation.png);
background-repeat: no-repeat;
height: 45px;
width: 434px;
float: right;
margin-top: 40px;
}
.nav_menu li{
list-style:none;
display:inline;
padding-left: 13px;
padding-right: 13px;
float: left;
padding-top: 14px;
}
.nav_menu a {
font-size: 11px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #848484;
font-weight: bold;
}
.nav_menu a:hover {
color: #156894;
}
Okay so the title div first, we set a background image which will be our title image from our images folder, we dont want it to repeat. Then the width and height which is the actual dimensions of our title.png image.
We then want to float it left with a top and left margin to bring the title in abit so its not stuck up in the corner of our container. Next is our navigation similar to our title styles we set a background, width and height, dont forget the width and height have to be the same as your .PNG image in your images folder. Then we just want to add a top margin to bring it down a touch, importantly we want to float it to the right.
Now for our lists, and link styles for our navigation bar. We dont want any list style, setting the list style to none will get rid of the bullet points, we also want our navigation text to display inline next to each other so we use display:inline. We want our text in the middle of our navigation so ive set some padding around the items. Yours might have to be adjusted depending on how big your navigation.png image is. We then style our links and hovers for our navigation text, i wont go into to much detail on the last two styles as there self explanitory. Hit F12 on your HTML file to display it in our browser. This is how mine looks.
If you examine the PSD file you will see we also have some catchy text above our big content box, we can add this the same way we did our title.
The HTML code for the catchy text is as follows.
We want our catchy text to be inside the same div our big content box will be in, so we add the above content underneath the END of our navigation div. We start with an id of content which will be like our container for our big content box, then simply add our id of catchy text. Then end with our content closing div. The styles for our content and catchy text div are as follows.
#catchy_text {
height: 55px;
width: 362px;
background-image: url(images/catchy_title.png);
background-repeat: no-repeat;
margin-top: 150px;
margin-left: 65px;
}
#content {
float: left;
width: 511px;
}
Firstly the styles for the catchy text, the width an height relate to the image dimensions of our catchy text, dont forget you will need to create the .png image from the PSD file. The background image refers to the actual image in the images folder, we dont want it to repeat. We have then added quite a big top margin to push the whole thing down quite abit. Ive also added a left margin to center the text abit, you will see its sort of centered when we add the content box.
The content div will be like a container for our content box, we just need to float it left and add a width of 511 pixels which is how wide i want it to be. If you view your HTML file in your browser you should have something like this.
Coming on nicely :) dont you think…… Right this next part you need to create top, middle and bottom images from your big content box.
Quick Tip: instead of creating your bottom bit of the content box, just rotate your canvas 180 degrees on content box top image then just save it as content_box_bottom. That way your top content box will be identical to the bottom ;) therefor your styles will also be the same. So you’ve got your 3 individual images saved in your images folder. Lets draft it out into our HTML file.
You’ve already done the content div and catchy text, just add the rest. Content box top and bottom will stay the same but inbetween the content box middle div and ending div thats where your content will be. Also please note content top, middle and bottom are all classes NOT div id’s. Now for the styles.
.content_top {
background-image: url(images/content_top.png);
background-repeat: no-repeat;
height: 16px;
width: 511px;
}
.content_middle {
background-image: url(images/content_middle.png);
background-repeat: repeat-y;
width: 471px;
padding-right: 20px;
padding-left: 20px;
line-height: 20px;
padding-top: 15px;
padding-bottom: 15px;
}
.content_bottom {
height: 16px;
width: 511px;
background-image: url(images/content_bottom.png);
background-repeat: no-repeat;
margin-bottom: 50px;
}
The first class is the top half of the content box, it has the background image of content_top which is the top part of the big content box, we dont want it to repeat. Height and width refer to the images dimensions. The bottom class is exactly the same apart from it has a bottom margin, the margin is there to ensure there’s spacing between the box and the footer which will be underneath. Also because these styles are classes, they can be duplicated in the HTML file so you can continue to create another content box underneath if need be. The content middle class is abit different, it has a background image but repeats on the y axis (vertically) also note there is no height only the width, the width is 471 pixels, but is exactly the same as 511pixels if you add the left and right padding.
You have to count the padding in with your width. If we set a height then the box wouldnt expand with the content. Also note there is some padding in all directions, this is to make the content nice and spacious, you can adjust the padding to suite if you wish.
Add some text and headers to your content middle part and check to see how it looks in your browser. Dont forget to style some head tags ;) They might look like this.
h1 {
color: #3b3b3b;
font-size: 24px;
margin-bottom: 10px;
}
h2 {
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
margin-left: 5px;
line-height: 30px;
}
Now for the sidebar, The way the sidebar is constructed is exactly the same as our content box we just created. Only the top half of our sidebar box will contain a big tag saying free quote. Split your sidebar box into 3 sections from your PSD file like we did with the content box. Once your done we’ll write it out in our HTML file.
We start off with a div called sidebar which will be like our sidebar container, then we have 3 classes similar to the big content box sidebar top, middle and bottom. Inbetween sidebar middle and the ending div thats where your content would go. The CSS for the sidebar is as follows.
#sidebar {
float: right;
width: 264px;
margin-top: 75px;
}
.sidebar_top {
height: 58px;
width: 264px;
background-image: url(images/sidebar_top.png);
background-repeat: no-repeat;
}
.sidebar_middle {
background-image: url(images/sidebar_middle.png);
background-repeat: repeat-y;
width: 264px;
padding-top: 20px;
padding-bottom: 20px;
}
.sidebar_bottom {
background-image: url(images/sidebar_bottom.png);
background-repeat: no-repeat;
height: 8px;
width: 264px;
margin-bottom: 20px;
}
So we start with our first style which is for our div of sidebar, because we want it to be on the right side of our page we float it right, we also need a margin at the top BUT not as big as the big content box as the sidebar sits slightly higher. Finally the width of the sidebar is 264pixels which should also be the size of our split images for our content box.
The last 3 class top, middle and bottom are the same as we did for the big content box but only on a small scale meaning the images arn’t as
wide as the big content box., Just make sure the widths and heights of the top and bottom relate to the images in your images folder. Although the widths should most definetley be identical.