Kevin Crafts dot com

Create a Modern Blog Layout in Photoshop

This tutorial will cover how to create a modern blog design in Adobe Photoshop. I am using Adobe Photoshop CS4, but this can be accomplished with any modern version of the software. I tend to use the marquee tool to make many shapes in this tutorial but you can use the shape tools if you are more familiar with those.

Download the layered Photoshop file

Let’s have a look at what we’ll be making…

Start off by creating a new document in Photoshop. Make the document 960 pixels wide and 1100 pixels high. The site itself will be 960 pixels wide but we’ll make a larger background. I find it easier to start off with a canvas at 960 pixels and then increase the width later.

NChoose a background color. I used a bluish color with the hex number of #376475. Create a new layer and fill it with white.  The layer palette should look like this:

With the background layer and the content layer created now we can increase the width of the design. I like to do this  after I’ve made the initial later because it will help be draw in some guides later. Select Canvas Size from the image menu and increase the width to 1600 pixels.

With the top layer selected, drag two vertical guides that line up with the edges of the layer. This is easier if you have the Snap to Guides option turned on.  Once those are drawn draw another vertical guide at 960 pixels.

The site will use a base padding of 20 pixels, so draw in more vertical guides 20 pixels on both sides of the three guides you have already created.

Draw 3 horizontal guides at 100 pixels, 150 pixels and 170 pixels. Your guides should look like this:

The sidebar needs a different background color to help separate it from the main content area. Create a new layer and choose a light grey color (I chose #ececec) and draw a rectangle from the right side of the document to the guide at 960 pixels. Select the top of the rectangle, from the top of the document down to the 100 pixel guide and press delete. Your canvas should look something like this:

Add another new layer and create a small detail to the sidebar by adding a one pixel wide black line at 960 pixels. Reduce the opacity to 15%.

The header of the design can contain a text or a logo. For this tutorial I have just added the fictitious name of the blog at the top. Choose a nice big font (48 point or so) and click the type tool on the third guide from the left. This will give the site name a 20 pixel indent from the edge of the design. Once you’ve type in the name, center the title vertically between the top of the document and the first guide at 100 pixels.

For the navigation bar choose a color that goes well with the background. I chose a nice red/orange color (#cd521b).

Create another new layer and using the Marquee tool, select the area from the first vertical guide to the last vertical guide and from the second and third horizontal guides. Fill this area with the color you selected. Your rectangle should extend by 20 pixels on the left and right side of the white background layer.

One big trend in web design right now is to give some elements of the design a three dimensional feel. We’ll do that by adding some sides to the navigation bar. First select a color that is slightly darker than the color you just used. I used #a03b13.

To complete this next step it might be easier to zoom in a little bit so get the magnifying glass out and zoom in to 200% on the left size of the navigation bar.

Create a new layer and place it underneath the navigation bar. Select the Polygon Marquee tool and create a triangle underneath the navigation bar from the first guide to the second guide and down 20 pixels. If you hold down the shift key when you click your lines will be constrained to 45 and 90 degree angles. Your selection should look like this:

Fill the selection with your darker color. Now you could go through this whole process again to create the triangle for the other side but the easy way is to duplicate the layer, flip it horizontally, and move it to the right side.

Create a new layer on top of the navigation bar and make a one pixel horizontal white line and align it with the top of the navigation bar. The line may be wider than the navigation bar but you can fix that by using the bar as a clipping path. Holding down the Option key (Alt on a PC), click the line between the two layers. This will create a clipping path for the top layer. Lower the opacity of this layer to 20%.

Create another layer and make a one pixel horizontal black line directly underneath the navigation bar – not on top of the bar. Because the line is not over the bar a lipping path can’t be used here. But now the line extends past the edge of the white background area, so delete the edges that are not over the white background and lower the opacity to 20%.

Select the type tool and select a font for the navigation. I chose a 24 point Arial bold. I chose Arial because I would most likely have this be HTML text and not an image. If you don’t want to use Arial you can chose another web font. Make sure your type color is white.

Click on the third guide and type in some text for the main navigation. I typed the words Blog,Topics, About,Contact with 4 spaces between each word.

Next we’ll create a link to the RSS feed. For the feed icon, I downloaded one of the icons from feedicons.com, put it on a new layer on top of the navigation bar and scaled it so it fit within the bar. To make it blend in with the bar, first desaturate the layer, then choose Levels from the Adjustments menu to move all the darker colors to black. You should end up with something like this:

Now just change the layer blend mode to Screen and it will blend right in with the bar.

Now that the navigation bar is completed we can make some fake content for the left side of the design. I’m just using some lorem ipsum I grabbed from text4designers.com. Select the type tool and click on the third guide from the left and type or paste in some text for the blog post title. Again I am using Arial but this time it is 30 point and regular. Once your done typing/pasting the title, align it with the third vertical guide.

Below the title well make an area to show the post date, categories, tags, and number of comments. Create a new layer, select a middle grey color (#696969), and using the marquee tool make a rectangle between the third and fourth guide and 30 pixels tall. Fill it with the grey color you selected. Select the text tool, change the color to white, choose a small font size (around 12 point or so) and type in some text for the meta area. I typed “Posted July 1, 2009 in Category 1, Category 2 • Tags: Tag1, Tag2, Tag3 • 2 comments” and aligned it vertically in the grey box and inset it a little bit from the left side. If you put in too much text, either make your grey box bigger or delete some of your text. This is just some mockup text so that’s ok.

Using the text tool again, change the color to black and paste in a paragraph of dummy text for the post content. You may find it easier to click and drag with the type tool to create a type area before pasting so your text will wrap appropriately.

Create a new layer and using the same color we used for the navigation bar create a small rectangle underneath the text you just typed/pasted in for the content. This will be a link to continue reading the post. Make it just wide enough to include some type such as “Read More”, an arrow, and some padding.

You can repeat this step or you can just copy the layers and move them down until they are under the first post area.

Now let’s create an advertisement area for the sidebar. Create a new layer and using the Marquee tool click and drag from the intersection of the sixth vertical guide and the third horizontal guide to create a 125 pixel square selection. Fill it with a color. Now we can create the other three ad spaces by duplicating the layer and moving them. Duplicate the first ad, and move it 145 pixels to the right. Duplicate this layer and move it 145 pixels down. Duplicate the layer and move it 145 pixels to the left. We now have a grid of four 125 pixel square ads.

To create the sidebar headings we will use the same technique we used for the navigation bar. I chose a brown color (#603913). Using the Marquee tool, make a section starting at the 960 pixel guide and drag it out to the last guide line on the left. Make the rectangle 60 pixels high and fill it with the brown color you selected.

Using the same steps we used before, create a small triangle underneath the rectangle and fill it with a slightly darker color. Since these headings are only in the sidebar we only need to have the triangles on the right side. You can create a highlight and shadow to the headings the same way we did earlier – create a single pixel white horizontal line and align it with the top of the heading background and lower the opacity to 20%. Then create a single pixel black horizontal line and move it directly under the heading background and lower its opacity to 20%.

Now lets create some content for the sidebar. Using the type tool, change your color to white and the font size to 24 point. Click on sixth guide line and type “Recent Tweets” and align it vertically within the heading background. Put some sample tweets below the heading in the same color you used for the navigation bar.

You can duplicate your sidebar content, including the heading, to create the next content block. Move your duplicated layers down and change the heading to read “Recent Posts.”

Blogs need some links to navigate you between the newer and older posts. Let’s put that at the bottom of the page. Again we will use the same techniques we used for the navigation bar and the sidebar headings. Create a new layer and choose a middle grey color (I choose a slightly bluish-grey: #707375) and using the Marquee tool drag a rectangle from the first vertical guide to the last vertical guide. Make the rectangle 60 pixels high. Since this bar is the bottom of the website, make sure you delete any of the white background that extends underneath it.

Select a slightly darker color and create the triangles only this time instead of putting them beneath the rectangle we will put them above, giving the illusion we are looking down on this element of the website. You can add the highlight to the post navigation bar by adding a single pixel horizontal white line and aligning it with the top of the post navigation bar. Lower the opacity to 20%.

Now you can type in some text for the next and previous links. Using the text tool, change your color to white and click on the third vertical guide. Type in the link text and center the text vertically within the bar.

Still using the type tool, click on the third vertical guide and type in a copyright notice. Move this below the post navigation bar.

Now for the final touch we will add something to the background to make it a little more interesting. Create a new layer abover the background layer, change your color to white and using a large grunge brush (the brush should be larger than your document), click once in the center of the document. Lower the layer opacity to 20%. This should give you a nice distressed background.

Now that the design is completed it can easily be sliced, exported and coded in HTML.

Download Layered Photoshop file (CS4)