Create a basic 2 column blog layout from scratch in photoshop

In this tutorial we are going to create a basic 2 column blog layout from scratch using photoshop then in another tutorial we will code this into a blogger template

start by creating a new document 900 x 800 pixel with the background colour #ebebeb

next select the rectangular marquee tool create a section spanning the full width of the layout with a fixed height of 30px at the top of your layout,

fill this section with the colour #181818 then add some dummy text links with 1px seperators to seperate the links you should get something like the following image

now create another section again spanning the full width of your layout with a fixed height of 130px

fill this section with any colour as we are going to apply a gradient to this layer so right click the layer and choose "Blending Options" then "Gradient Overlay" and use settings below

next click on "Inner Glow" and use settings below

now add your blog title and description you should get something like the following image

again create another section spanning the full width of your layout with a fixed height of 40px just underneath the header

fill this section with any colour then right click the layer and choose "Blending Options" then "Gradient Overlay" use settings below

next click on "Drop Shadow" and use settings below

now add some dummy text for the navigation links and create some seperators to seperate the links using two small 1px lines next to each other with the colours #ffffff and #e4e4e4

now add a layer mask to the 1px lines layer then press D on your keyboard to reset your background colours and drag a reflected gradient starting from the center towards the bottom.

duplicate the seperators and move them across you should get something like the following image

now for the post create a section with a fixed width of 550px and height 250px

fill this section with any colour then right click the layer and choose "Blending Options" then "Inner Shadow" use settings below

then click "Gradient Overlay" use settings below

finally click on "Stroke" and use settings below then click ok

you should have something like the following screenshot

now select the "Custom Shape Tool" and find the "talk bubbles" shapes seen in the following screenshot

set your foreground colour to #cccccc then drag out a small shape on the right of your post then right click the layer and choose "Blending Options" then "Inner Glow" then use settings below

next click on "Stroke" and use settings below then click ok

you should now have something like the following screenshot

now while holding down Ctrl/Command on your keyboard click the talk bubble layer to load the section then go to select > modify > contract and contract the section by 1px set your foreground colour to white, create a new layer then select the "Brush Tool" using a small soft round brush click once in the center of the section then change the blending mode of this layer to overlay your layout should now look something like the following image

now load the talk bubble section again and use the rectangle marquee tool to cut the bottom half of the section off like the following screenshot

create a new layer above the other layers fill this section with white then turn the opacity down for this layer to 50% you should have something like

now add a post title and some dummy content here's what mine looks like

now for the sidebar create a section with a fixed width of 280px and height 250px on the right side of the layout fill this section with any colour then copy the layer styles from the post background by right clicking the layer then choosing "Copy Layer Style" finally add some dummy content your layout should look something like the following image

now duplicate the post and sidebar then move them down below the others using the "Move Tool" and finally create another section at the bottom of the layout spanning the full width with a fixed height of 30px on a new layer then add your copyright info here's my final result

enjoy comments are welcome