Blog Layout - Design to Coding

This tutorial takes in to effect that you have a basic understanding of Photoshop, HTML and CSS already.

1. First of all we will create a new document. I am using 860x1000. Set the resolution to 72 pixels/inch.

2. Fill the background with #576d7b.

3. With the rectangular marquee tool create a rectangle around 760px wide and 100% height. On a new layer fill this with #2b363d.

4. With Layer1 still selected press Ctrl + A to select the whole of the canvas, press V and at the top align it to the middle of the page.

5. Ctrl + left click on the layer preview image in the Layers panel for the rectangle that we just created. This will create a selection of our rectangle. Go to the Select menu then Modify and chose Expand, set to 6px.

6. On a new layer fill this selection with #abb6bd. Now Ctrl + left click the preview image of Layer 1 again, single left click on Layer 2 and press Delete. This should give you 2 6px borders each side of your rectangle.

7. Select the rectangular marquee tool again and create another rectangle covering the whole width of the canvas and around 80-100px high. On a new layer fill the selection with #2b363d.

Right click the layer and select Blending Options, tick the box next to Stroke then click stroke, apply these settings:

Size: 5px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Color
Color: #abb6bd

Move this near the top of the canvas but leave it 10px or so clear at the top. This will be our header.

Note: If you are using Photoshop Elements you won't have blending options, use the same technique that you used for the main rectangle but expand by 5px instead of 6, fill with the same color.

8. Duplicate this layer and move it to the bottom, but make it so 1/2 of the rectangle is off the canvas. This will be our footer.

9. Now we will create our tabbed navigation buttons. This is more of an optional step but I will be creating tabbed buttons with rounded corners, if you want to skip this step then just create rectangles instead, you will get the same outcome albeit that your rectangles don't have rounded corners.

There are 2 ways to create rounded corners on rectangles. 1 is to use the Rounded Rectangle Tool and set a radius to the tool and just draw it. The second is to use channels to create rounded corners. It is entirely up to you which one you use, I will show you both ways.

Here is a comparison between the 2. The tool has a radius of 10px set.

Note: Both have strokes applied using Blending Options.

For the buttons we will be making them twice as big as you see them and hiding the rest of the tab under the header bar.

Here is how my buttons look with the header hidden.

Here I have 2 buttons in normal state, 1 in hover state and 1 in active state.

Here they are with the header bar showing.

Go ahead and create your tabs like above using either or the below techniques, I used channels for my buttons.

Rounded Rectangle Tool

1. Set the foreground color to #576d7b
2. Set radius to 10px and make sure the mode is set to Shape Layers or Fill Pixels.
3. Draw the tab however big you want it.

Channels

1. Create a rectangle how ever big you want your tabs, select the channels tab in the layers panel and press the Save Selection As Channel button (dark rectangle with light circle in the middle.
2. Click the Alpha channel that has just been created. It will be a white square on a black background.
3. Go to Filter >> Blur >> Gaussian Blur and set to 5px.
4. This will blur the rectangle, if you look at the result of the blur you will see that the corners aren't pointed any more, but there is a lot of noise around the rectangle.
5. Go to Image >> Adjustments >> Levels (or press Ctrl + L)
6. Set the Input Levels at the top to 127 1.00 159. Press OK and you will get a nice smooth rounded rectangle. Ctrl + click the layer preview to create a selection of the channel and go back to the Layers tab.
7. Create a new layer and fill with #576d7b.

When using channels if you blur the selection more or less than 5px you will need to use different attributes in your Input Levels. This technique can also be applied to all other selections that you wish to smooth out.

10. Add some text to your buttons and the navigation tabs are complete.

The font I have used is called Y2K Neophyte and can be downloaded from dafont.com

11. That is pretty much it for the design aspect of Photoshop, we will just need to slice the document and create our code.

When you slice your document you are going to need to get all 3 states of each button. Personally I will duplicate the layers and hide them and slice the document using a the name normal, then slice again with the hover state and name the document hover and so on, and do this for all the buttons, but you can slice it however you want.

Repeat the slicing for all 3 of the button states. In your images folder that is created when you save, we can go through and delete all the repeated images and rename the ones we want to use to something more helpful.

From the slices you can crop the header and footer slices to 1px wide as they will be repeated across the page. This will make the images smaller in size allowing less bandwidth use and quicker page load times.

12. Now we can start coding our website.

First I will start off by setting our background image.

This is pretty much self explanitory for those that know CSS. You can ignore most of it, but take note of the background, here I have set the color to our main background color. I have done this in case the background isn't downloaded for some reason then any white text wouldnt be readable.

The background is then set to use the image located in the images folder called body_bg.jpg which I have set in to position at the top center of the page and is then repeated on the Y axis all the way down the page. For this image I have just used a 1px high image so that the user only has to download a tiny image rather than using an image 2000px high with no repeat. This saves on your servers bandwidth and the users allowing for faster page load times.

You can see the result here.

13. On to the Header. What I would usually do is create a container 760px wide so everything is contained within the background image, but we don't want our header contained, we want it to cover the whole width of the page.

For the header I have created a CSS ID called header, this is the code:

Now as you can see again I have set the background to that of the header image and repeated it across the X axis this time. I have also set the height of the image, although this can be bigger than your header image, but if anything goes out of this area, your site will not look too good.

I have also set a margin at the top so its not stuck to the top of the page. I could of also set the margin on the body tag but I prefer to keep margins out of the body and apply them separately.

For this CSS code to work we need to add a div with an ID of header.

You can what ever you want within the header such as an image or text.

You can see the result here.

14. Next we will do our navigation.

Once again we will need to create another div with some CSS applied to it. I have given it the ID navigation.

This sets the width to 760px which is how wide we made our rectangle, then the margin sets the top and bottom margin to 0, so that our buttons cleanly touch the header and the left and right margins are automatically decided by the browser, which in 99% of cases will center it.

For my navigation I am using a simple Javascript rollover script to change the buttons on the rollover, then if you wish later on using PHP you can have the active page use the active button for that tab.

Here is the Javascript code created directly from Dreamweaver:

You DO NOT need to edit this code, just paste it in to your head section.

For our image rollovers we use this code:

Here we have set the javascript for the hyperlink, which features the image, there are only a few things which you need to change which are red below.

Optional: We can also add some code to our body tag to preload the hover button:

I have put some additional CSS code in to display our buttons more efficiently.

This CSS applies to all child DIVs of the layer with the navigation ID. It makes them float to the left and adds some padding to the left and right side.

Here is the full CSS:

Here is the full HTML:

You can see mine here.

For the full HTML and CSS you can look at my example and view the source, if you don't know how to do that, I don't think you should really be trying to create your own website.

15. Now for our content area.

I will cover the HTML first.

What I am doing is creating a container exactly the same as the navigation container called content. This will set the content to be within the 760px rectangle we have.

I am then splitting this in to 2 columns, the right column is extra navigation, the left side for content.

I'm sure you have noticed that the navigation code is before the content code, this is because we are floating the navigation on to the right side of the page so we have a tableless design.

For the navigation I have used an unordered list. This is (or so I have read) is better to use to be SEO friendly rather than using the display: block code on hyperlinks and screen readers will just see a string of words as they ignore the display CSS code.

For our CSS code:

Here I have set the contentarea to have a margin of 160px so it stays out of the navigation column. I also put the border on the content div as the content it more likely to be longer than the navigation, but that is up to you, you can put the border on the navigation div if you wish to.

I have then set the styling for the unordered list. I have removed all the normal styling using list-style: none and removed the padding and margins that browsers add then added my own margin at the bottom to split multiple lists up.

For the headings of the seperate lists I have given the first list item a class called head, which is bold and has some extra styling to make it stand out from the normal links.

As I have a child unordered list within another list, I have had to reapply the margin attributes so that it doesn't have a margin at the bottom.

You can see mine here.

16. Footer.

This will basically be exactly the same as the header but we will change the height and image.

HTML:

CSS:

For the CSS I have used the same code as the header but aligned the text to the center, which won't take effect to the text within the 2 floats.

The 2 floats have padding on them to keep them away from the border, then I added the padding for all the child divs of the footer.

You can see mine here.

17. Add some extra styling of your own and you are complete.

You can see mine here.