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

16 Responses to “Create a basic 2 column blog layout from scratch in photoshop”

Pretty neat. How quickly does it load compared with a Blogger 2 column template?

@Steve
it should load just as quick

Thank! Nice tutorial! But I want you to teach how to convert it into an XML blogger template?

Thank!

Lawny,

People who are actually interested in designing layouts for money can actually use this tutorial to help them get started in the business. Very easy to follow photoshop guide.

-Kai Lo

Thank you very much dear friend. Very well explained. I need your help in creating blogspot navigation bars. How can I contact you?

Awesome post man ... thanx for giving us tutorial on psd designs....well i am eagerly waiting for you to tell us how to code a template :-) cheers to you friend

@Fabrique
i have already wrote two tutorials for creating navigation bars here and here

terima kasih atas petunjuk nya, akan saya coba nh tutorial nya....

Which version of Photoshop did you use to create this blogg tutorial? I used my Photoshop CS1 version but it did not load.

@Anonymous
i used adobe photoshop cs3

how to add subscribe via email option to a blog?

@xyz
the subscribe via email form is from feedburner

Thank you for your share your information.
mah jong tile

Thank! Nice tutorial! But I want you to teach how to convert it into an XML blogger template?

Thanks for your informative information in this topic i am really interested in your great ideas.

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2012 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger