Blog Layout - Design to Coding

This tutorial guides you through how to create this layout for your blog. We will then be coding the site using HTML and CSS to achieve a tableless layout.

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