From Photoshop to XHTML and CSS

4 Oct

Welcome everyone, to another long yet humourous tutorial from me! This one is going to take you through every nook and cranny of taking a lovely, glossy layout from Photoshop and putting it into a webpage with no tables, valid XHTML and CSS.

Here’s the one we’re going to be working with today, and later on it should turn into something a little like this.

Click to enlarge

Click to enlarge

First of all, take a look at the layout and see which parts you can split it into. Remember that CSS can’t go round corners or angles and that every image has to have four points. (I can’t wait for circular images to come out..

For the example template, I’ve drawn on some guidelines for you:

Click to enlarge

Click to enlarge

Each colour denotes a different part of the layout. We can already see that it’s going to be quite complicated with the shadows and that background being tiled. Let’s set out what we’re going to do in plain English first.

Green area – this can be inside the body{} selector since it’s right at the background. We can use a tile for this. The shadows can be added by the side of the layout, or we can use a PNG with its alpha blending capabilities to do this slightly better.

The main layout – this can be put inside a container element, like a <div> for example set to a fixed width if we don’t want it to be liquid. This can also help alignment problems as well.

Blue nav area – this can be a div with either an inline displaying list inside it for the links, or if we’re looking to have some more effects on it, we can just style our links inside the div only.

Yellow area – this can be the background for the content holding div, which can then contain the following..

Content boxes – Each inside a separate div floating to the left or right depending on which side we want the content box. We can have, for the real content areas, a repeating background image with the shadow on either side. For the header, we can have the title image as a background which also includes the shadow, which will connect to the rest of the box. At the bottom, we’ll need an extra div to close the box’s shadow.

Now we’ve got that, we can now propose a structure for the HTML of this, barring CSS:

<body> <!– Styled –>
<div id=”container”>
<div class=”header”>
<!– Header goes here –>
</div>
<div class=”navigation”>
<!– Navigation items here – list or normal links –>
</div>
<div id=”main_content”>
<!– This is a sub container for the main content –>
<div id=”leftcol”>
<!– Left column stuff here –>
</div>
<div id=”rightcol”>
<!– Right column stuff here –>
</div>
</div>
</div>
</body>

Now to get styling. We’ve already got our CSS class and ID elements above, so just paste them into a new HTML document in Dreamweaver, for example, then you’ve already got our document model set up. Note: this is an XHTML 1.0 Transitional layout.

When doing layouts, I like to start building from the bottom upwards. If you think about it, the <body> is at the bottom of all these elements, so it’s a good place to start.

1: Hide the rest of your layout apart from your background. (Skip this if you haven’t got a background pattern!)

This can be done by organizing your layers into sets and then simply hiding the layer set.

image 3

2: Select the eyedropper tool and get the main colour of your background. Zooming in isn’t a crime! Do it if you must (and you probably will..)

In this case, it’s #F7F5BF.

Great! If you’ve got a pattern, then you’ll have to select the pattern in such a way that it doesn’t repeat incorrectly. I’ll do a tutorial on this some other time, but I’m assuming you’ve got at least a little bit of brains to do this properly. If not, there’s always trial and error – or you can just ask me.

3: Set this to your body tag and then make sure all margins are set to zero.

This is pulled off by the following code:

body {
background-color: #F7F5BF;
color: #000; /* needed to keep the css validator happy */
margin: 0;
padding: 0; /* incase any crazy users specify in their browser settings they want a padded window.. */
}

And now for dealing with your container element. Well, this is pretty easy since you only need to specify the width you want and then set it to be centered in the browser.

1: Whip out your ruler!

..by pressing CTRL+R in Photoshop. You’ll need to right click one of the axes on it and make sure it’s set to pixels, and nothing else. Then, click the origin of the rulers and drag it towards where your layout starts. This includes shadows and any other effects.

Click to enlarge

Click to enlarge

All you have to do now is scroll across and then take the reading from the other side, which in this case comes to the magic number of: 710px. Congratulations, you now know the size your container div should be.

2: Set this in CSS.

Simple code really, if none of you knows about centering in CSS without using the text-align property, you can use margin instead!

Let’s not forget that inside the container we have a slightly different background colour. It’s time to get out your eyedropper tool again, reading as #F8F7E7. We’ll put it in here as well. But, have you not noticed the shadows on the sides? They’re the same colour all along, and if they go across the whole layout then why not set them as a background image tiling downwards as well? Time to take out your selection tool and select between the shadows. A quick tip for this is to only make it a few pixels high, since if it’s going to be tiled then it will automatically be repeated. By doing this we can reduce load time and file size

Click to enlarge

Click to enlarge

Once we’ve got it selected, go:

Edit->Copy Merged
File->New [Dimensions from clipboard]

In the new canvas, Edit->Paste/CTRL+V

By using the Copy Merged tool, this means we copy everything we see. If we only copied from layer, we would only copy from that layer – therefore potentially missing out some details and making some mistakes.

Once we’ve done that and pasted it in the new canvas, we’ve got the new image.

So now it’s time to save it. Go to File->Save For Web and save it as “container_background.jpg”, or something to that effect. Place it in your images folder to be organised!

Here goes:

div#container {
margin: 0 auto 0 auto; /* top and bottom: 0, sides: flexible (stretches) */
width: 710px;
background: #F8F7E7 url(images/container_background.jpg) repeat-y;
color: #000; /* again, for the w3c validator to stop hyperventilating */
}

Where are we now? We’ve got the two “bottom” elements done, it’s now time to use and abuse the marquee/selection tool a bit more…

For the header, we’ll just have to select whatever we see, use Copy Merged again, paste it into a new canvas, save and add the CSS. Does that sound complicated to you? It’s not, really. Here we go:

Click to enlarge

Click to enlarge

We also need to get the widths of this, so right after you’ve pasted it into the new document you can find out the image dimensions by going to Image->Canvas Size, where the dimensions will automagically appear before your eyes. That is, unless you’re blind.

image 7

709*127.. my favourite graphic size.. mmm.

Once again, save it for the interwebs, and save it in your images folder as the sweet and simple “header.jpg”.

Now, it’s time to add the CSS. If you think you’ve got the brains to do this then do it yourself, otherwise get a hold of this CSS:

div.header {
background: url(images/header.jpg) no-repeat;
height: 127px;
width: 709px;
}

But, perhaps you’d like some invisible text in there for search engines as well?

Yup – that would be a pretty good idea, it being your header and all. Here’s the code, and a little example usage:

div.header * { /* * – denotes any tag to be used */
display: none;
visibility: hidden;
}

And the example usage of this would be like so:

<div class=”header”>
<h1>HEY MR. GOOGLE, THIS IS MY HIDDEN HEADING TAG!</h1>
<h6>Note: Google will hate you if you load hidden text with keywords. Keep it relatively keyword rich, but be wary..</h6>
</div>

We’ve now got the header, the container and the body styled. Looking good, right? Now for the navigation.

The navigation isn’t a tricky part of a layout, but it is definitely the most customiseable. You have a lot of work to do however..

1: Whip out the selection tool (again) and select the navigation’s main background part. This can then be tiled sideways. The image helps a bit more:

Click to enlarge

Click to enlarge

Do the same old procedure with copying it, pasting it into a new document then saving it. I saved mine as “navigation_bg.jpg” in images.

2: Your CSS.

So, we’ve got the shadows on either side of us because of the container div’s style. If we just put the background on, it wouldn’t want to work properly and it would go over the shadows. To solve this we use the margin element with the style, to “cut off” the parts that would overlap.

div.navigation {
background: url(images/navigation_bg.jpg) repeat-x;
height: 26px; /* this is the height of the image! */
margin: 0 5px 0 4px;
}

Now, this isn’t the only code we’re going to use for the navigation. We’ll come back to this later, when I explain why. For now, let’s move onto the main content area.

Remember that shadow I was talking about earlier, just under the navigation? We can put this into the content area style since it comes directly under the navigation. Here’s what I selected, along with the Copy Merged, New Document, Paste (CNP) procedure. I saved mine as “content_shadow.jpg” in the images folder:

image 9

And for your CSS, we’ll have to add the margin properties again. Then, I’ve added 10 pixels padding everywhere:

#main_content {
margin: 0 5px 0 4px;
padding: 10px;
background: url(images/content_shadow.jpg) repeat-x;
color: #000;
}

Congratulations! We’ve now got the three main chunks of the layout complete. Now, we have to do the content boxes – but before that, we need to do the columns we can put the navigation boxes into. If you’re tired of selecting pixels, you’ll be happy to learn that there’s very little Photoshop involved and the rest is all CSS. Here we go!

For your columns, we’ll be using floats as stated earlier. We need to specify a width for them, add a little padding and margin here and there and we’re pretty much done. You can experiment as you wish, but it’s time to take out the ruler again..

Go back into Photoshop and take the ruler out again. We need to line the rulers up with the edge of the content box. As I’ve said before, you need to drag them to the top left corner of a content box and take the dimensions, like so:

image 10

Small note: If you don’t like this process, you can simply select the content box, do the CNP procedure (Copy Merged etc..) and then go Image->Canvas Size and take them from there. It’s the same result, so don’t worry!

You should get the dimensions 182px across on the small box, and 471px across on the larger one. Remember that height doesn’t matter – they’re going to stretch anyway!

Armed with these dimensions, we can put them into the CSS like so:

#main_content #leftcol {
width: 182px;
float: left;
}
#main_content #rightcol {
width: 471px;
float: right;
}

Floating them left and right does exactly what it says on the tin. There’s going to be more to this soon..

You can now put content into each of these columns and it’ll work – but now for the actual content boxes, which involves a lot of Photoshop love. Now we’ve got the widths of each of these boxes, we now need to select the title images at that exact width. It’s not too hard, and can be pulled off like so:

Click to enlarge

Click to enlarge

CNP the selected area and save it as “leftcol_heading.jpg” in images. Do the same with the right hand side title image too, naming it accordingly. Notice that we included the shadow just below this area – this is just to keep things simple, and since it connects onto the rest of the shadows it will be fine.

For the CSS, I’ve done some interesting techniques which mean you can use the same class name in either column, but it will use the right image for that column. Here we go:

#leftcol .heading {
background: url(images/leftcol_heading.jpg) no-repeat;
height: 36px;
width: 182px;
}
#rightcol .heading {
background: url(images/rightcol_heading.jpg) no-repeat;
height: 36px;
width: 471px;
}

We’ll be coming back to this later with the navigation when we add a typeface.

Now for the actual content boxes we’ll do the same CSS trick with using classes. Remember when we said we’d use a repeating shadow for the container? That’s exactly what we’re going to do here. Take out the selection tool and take a one pixel high part of your content area from each column then use the CNP procedure on them, then from left to right, save them for web as “leftcol_content.jpg” and “rightcol_content.jpg” respectively. Put this into the CSS like so..

#leftcol .content {
background: url(images/leftcol_content.jpg) repeat-y;
}
#rightcol .content {
background: url(images/rightcol_content.jpg) repeat-y;
}

“..and now ladies and gentlemen, for closure..” – Deranged Master of Ceremonies, 1924AD.

To close each content box, we’ll need to add an extra element at the bottom to add that bottom shadow part. Just select the bottom shadow part of each, use the CNP procedure and save them as “leftcol_cshadow.jpg” and “rightcol_cshadow.jpg”. The style is pretty straightforward as you can see:

#leftcol .cshadow {
background: url(images/leftcol_cshadow.jpg) no-repeat;
height: 5px;
}
#rightcol .cshadow {
background: url(images/rightcol_cshadow.jpg) no-repeat;
height: 5px;
}

With this done, we’ve pretty much done everything except for one little problem when we preview it in the browser:

Click to enlarge

Click to enlarge

Yup, that’s right – the background has gone missing.

Why the heck is this? Well, when floating elements, it means they are.. well.. floating. If you imagine the parent element as the ground, and the floating element as floating, there is no point for the parent on the ground to extend, since the floating element doesn’t need to the ground to float. This can be fixed, though!

clear: both; to the rescue!
To combat this evil little rule of web physics, we just add a div with a class name called “clearmeplz” after the columns, which closes the floating at the end, like so:

.clearmeplz {
clear: both;
}

And add the div just about here:

image 13

Onto the navigation and more!

For the links, we’ll just use styled a tags. We also need to make a modification to the div.navigation properties and add text-align: center;

Here’s the style for the links. Using padding on them means that there’s an invisible, yet clickable, box outside the text that the user can click on.

.navigation a {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 14pt;
padding: 0 10px 3px 10px;
color: #FFFFFF;
text-decoration: none;
}
.navigation a:hover {
color: #EDE28E;
}

..and more!

If you’ve tried putting text in the content boxes already, you’ll notice they look slightly ugly. This can be fixed by tweaking with the padding and font families as we’ve done already with the navigation. As you can see, I’ve used Georgia for the main font since this goes with the layout. But, since you probably won’t be using this layout for your site you can tweak it with what you want. You’ll be happy to know that there’s no more Photoshop involved anymore!

So, we’ll start off by fixing the padding with these title boxes. If you’ve ever done this before, you’ll have realised that padding is actually an add on to the true width and height of the element being styled. So, for example if you had a 100px wide element and added 2px padding to it, the true width of it would be 104px. If you’re wondering why it’s 104px instead of 102px, you’ve got to remember that 2px padding is applied on both left and right hand sides. Just to finish it off, here’s what I did – and the best thing about it is all you need to know is adding and subtracting! 😛

We just need to replace a few things here and there. Here are the new styles:

#leftcol .heading {
background: url(images/leftcol_heading.jpg) no-repeat;
height: 31px; /* +5 = 36 */
}
#rightcol .heading {
background: url(images/rightcol_heading.jpg) no-repeat;
height: 31px; /* +5 = 36 */
}
.heading {
font-family: Georgia;
padding-left: 4px; /* take away 4px from the width */
padding-top: 5px; /* take away 5px from the height */
font-weight: bold;
color: #FFF;
}

I added a standard .heading class, which would apply to both rightcol and leftcol columns.

Finally..

You’ll also have noticed that the content boxes looked a little unloved. This was fixed by adding another standard .content class applying to both columns giving it a font family and padding property:

.content {
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}

You can view the full result at here.

..and that’s it! I’ll have you know I’ve been working on this for three hours, bar breaks for going out and rolling around in the snow. I’ll post some pictures of that in the forums later!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: