Slicing The Header
As I mentioned back in step 2, the header is pretty simple and only consists of two images: the logo and the gradient. To complete this step there will be more measuring involved, but not much.
First of all we will measure the whitespace between the gradient and the top of the layout. We do this by getting the ruler out again and dragging the guides like so:
As mentioned in the image, it should come to 95 pixels. If you're wondering why we didn't measure the gradient, this will all become clear to you soon!
Now we've got one piece of information for the header: its base height will be 95 pixels. I've chosen to include the gradient in the header, so it's time to measure that too. But first, I'm going to introduce you to a new procedure that I call CNP.
CNP stands for Copy merged -> New -> Paste. What it does is copies the area you select with the marquee tool, but instead of the normal copy behaviour that just copies that selected area from the current selected layer, it copies everything - hence the name "copy merged". Photoshop then also copies the dimensions of the selected area to the clipboard, which are accessible next time you choose to make a new canvas. This means once you've made the new canvas, you can paste the image onto it directly and it will fit perfectly.
This procedure saves us the effort and time of having to drag the rulers everywhere, and it also lets us do everything we want to do at once. Let's use CNP on the gradient area at the bottom of the header.
Remember earlier on in the guide I talked about repeating and fast loadtimes? This is a brilliant place to put this strategy into practice. As the gradient just repeats sideways, we only need to get one pixel widthways of the gradient and then leave it to repeat across the selected area. Anyway, go back into Photoshop and select a one pixel wide selection of the full gradient like below:
Notice how I zoomed in to do this? Don't be afraid to, it's as easy as pressing CTRL and + to zoom in, CTRL and - to zoom out, and CTRL + ALT + 0 to get back to 100% again. Now we go Edit -> Copy Merged, which will find us our selection dimensions for us.
Once we've done that, make the new canvas by going File -> New. The prompt should come up with the dimensions already placed in the boxes like so:
If it's not coming up as this, make sure the preset is set to "Clipboard"! Anyway, we've got our height, which is 50 pixels.
Now paste that into the new canvas. Once it's in, you'll have to save it for the web. If you don't know how to do this or haven't done it before, then it's pretty simple: File -> Save For Web. If you have eleven fingers, or just have bendy ones, then the keyboard shortcut is ALT + SHIFT + CTRL + S if you can manage that without cramping your hand. Save it in a new folder called layout, and call the file "header_gradient.gif"
We've got our first image done, and now it's time to slice the logo out of the layout. This is done pretty simply - by selecting all the pixels that the logo makes up. By doing the same CNP procedure, you should get dimensions roughly equal to 259 by 67. Save the image using Save For Web inside the layout folder again, this time naming it "logo.gif"
Now we've got our two header images sliced and diced, it's time to build up our CSS code for them both. But first, before we begin to understand how we'll make this up, I need to talk to you about the box model.
Introducing The Box Model
The box model is basically, how width, height, padding, border and margin work together and what relation they have to each other. The best way to explain this is in a graphic format, so here it is below:
Blue stripes are the margin. This is the region outside of the box that nothing else can touch or be in. The black line is the border, which comes in between the margin and the padding. The brown stripes are the padding, which is an offset for the content inside the box. The grey area is the actual box. The dimensions of the grey area are the width and the height.
To form a mathematical equation for the real width of the box, or indeed height, we would do the following:
padding_l + width + padding_r
Where padding_l equalled the left padding, and padding_r equalled the right padding. The same is true for the vertical properties, only of course with top and bottom padding. Padding of any element does not cause an offset to the background.
With that said, it's time to use this theory in our CSS.
The real height of the box will be the height of the gradient + the height of the whitespace. In other words, that's 50 pixels + 95 pixels = 145 pixels. Remember when I said that the padding of any element doesn't offset the background? This means we can save placing an image, or anything equivalent, for the gradient. Instead, we can include it in the main header div as a background.
This means that the bottom padding of this header will be 50 pixels.
The rest of the layout, i.e. the whitespace, will make up the remaining 95 pixels of the entire header height. For the logo, we can insert this as an image and then use relative positioning to put it just where we want it.
Here's what our CSS code is going to look like so far for the header div, assuming we give it the id, "header."
#header {
height: 95px;
padding-bottom: 50px;
background: #FFF url('layout/header_gradient.gif') repeat-x bottom;
}
The background property I used was shorthand. The syntax is pretty simple - background: [COLOUR] [URL] [REPEAT] [POSITION]. We define a colour before anything else as a fallback property - even if your background image url is meant to fill up the entire space, if it doesn't load, that colour will be displayed instead. For the repeat property, repeat-x means it will repeat across the X axis. The position simply denotes where the background will start.
Now once that's been added, we need to add the header div inside the container one. This is done simply, and like so:
<div id="container">
<div id="header"></div>
</div>
Now that's done, we shall take care of the image's positioning.
Introducing Relative Positioning
Relative positioning means the element will be positioned relative to where it's anchored in the XHTML code. You can use the CSS offset properties, top, right, bottom and left to manipulate its positioning. In this case, we will be assigning an image its own ID and then using that with relative positioning to put it in the exact same place as it was back in our Photoshop prototype layout.
It's time to do a bit more measuring. If your logo is still selected using the marquee tool - great! If not, it doesn't matter. Align the ruler guides up to the top left corner of the logo and then take the readings from that edge to the top and the left edges of the layout. If you did it properly, you'll get values somewhere on the lines of 17 pixels from the corner to the left, and 15 pixels from the corner to the top.
If we incorporate this into the CSS and assign the logo image the id #logo, we will come up with something like below:
#logo {
position: relative;
top: 15px;
left: 17px;
}
Now inserting the logo is as easy as just adding an image tag inside the header div, like below:
<img id="logo" src="layout/logo.gif" width="259" height="67" alt="Bluesquare Communications" />
All done? It should now match up perfectly to what we have in Photoshop. Click here for a live preview of what it should be looking like. For the correct code, just view the page's source.
Now for step 5: the content.