Design a Stylish Blue Blog Theme in Photoshop

Today we will be going through the process of designing an attractive blog theme in Photoshop. The design uses a textured background and a basic two-column layout with a right sidebar. At the end of the tutorial you will be able to download the PSD file if you would like to work with it.

What We Will Be Designing:

Before we get started, he is a preview of what we will be designing (click the image to see it in full size).

Throughout the tutorial, images that show the work in progress can be seen in full size by clicking on the image.

Step One: Create a new file

Create a new file (File – New on the toolbar) that is 1600 pixels wide and 1525 pixels high.

Step Two: The background

To get started we want to use a radial gradient with two shades of blue. Set the foreground color to #2e4d7a and the background color to #1f2a42. Select the gradient tool and make sure that the radial gradient is chosen. Also, set the gradient to fade from the foreground color to the background color.

Apply the radial gradient near the top left of the canvas by placing the arrow just over the top of the canvas area, click and drag it down about 500 pixels and release the mouse.

Now that we have the gradient on the background layer we will add some texture by using a photo. I will be using a texture that comes from Lost and Taken. You can get the image at this URL. It’s a grungy paper texture that we will use to sit on top of our background.

Once you have downloaded or copied the image, flip it vertically and paste it on top of your background layer. Then, double click the texture layer in the layers palette and set the blend mode to overlay and the opacity to 50%.

This will give you some texture to the blue background.

The next step is to apply linear gradients that will fade from our page’s background color to transparent so that the textured background will fade into a solid background color that can be set with CSS.

Create a new layer (Layer – New) and set the foreground color to #1f2a42. Select the gradient tool and set it to linear and to fade from the foreground color to transparency. We will be creating a gradient in this layer that will set the bottom portion of the canvas to be the solid dark blue color and it will fade to transparency so that the textured background shows at the top portion of the canvas.

Start the gradient about 900 pixels from the top of the canvas and drag it up to about the 550 pixel mark, and release the mouse button there.

Then add another layer and create a similar radial gradient on the left side of the canvas. Start the gradient at the edge and bring it in about 250 pixels before releasing the mouse. When that is done, create another layer and repeat the process at the right side of the canvas. This will give us a texture background that is able to fade into a solid color at the bottom and on both sides.

Step 3: The content area

Our design will have a width of 960 pixels and the content area will start 155 pixels from the top of the canvas. I like to use guides to get the layout set, so if you would like to use guides you can set vertical guides at 320 pixels and 1280 pixels. Set a horizontal guide at 155 pixels. Set the foreground color to #eae6e0 and select the content area by using the rectangular marquee tool. Using the paint bucket, fill the content area with the light gray color.

We’re going to give the sidebar a different background color, so set a vertical guide at 980 pixels and use the paint bucket to fill the sidebar with #dbc7b3. Then use the pencil tool to give a one-pixel left border to the sidebar in #cab7a4.

Next we’re going to use the pencil tool to give the content area a two-pixel border in #2e4d7a on the top and the sides. Set the border outside of the existing content area.

Step 4: The navigation menu and header

Before moving on the designing the main content area and the sidebar, we will take care of the header. We’re going to create a navigation menu that is aligned to the right of the layout.

Select the rounded rectangle tool and set the radius to 15 pixels (the foreground color should still be #254068). Our navigation menu is going to go from the 825 pixel mark to the right edge of the layout, and the top of it should start at 110 pixels. To make this easier you can set a horizontal guide at 110 pixels and a vertical guide at 825 pixels. Then use your mouse to add the rounded rectangle that lines up with those guides. The bottom of the rectangle will extend into the content area.

With the foreground color set at #254068, set the background color to #1f2a42 if it is not already. Double click on the layers palette and select gradient overlay. Select the gradient that fades from the foreground to background color and apply it so that the lighter blue color is at the top and the darker blue is at the bottom. Then select “stroke” and set it to 1 pixel outside at #2e4d7a.

Now move this layer below the layer that includes the background for the content area so that the bottom of the rounded rectangle is not visible. The stroke on the outside of the rounded rectangle should line up with the edge of the blue border that surrounds the content area. If this is not the case, select the rounded rectangle layer and go to Edit – Free transform. From here you can use the arrow keys to move it one pixel at a time to get it lined up properly.

Use the text tool to add some links in 16 pt Arial, #eae6e0.

We’re going to use some icons from the popular free icon set by Function to include links to subscribe by RSS and email, and to link to a Twitter profile. Download the icon set from Function, open up the RSS, email and Twitter icons and resize each of them to 20 pixels by 20 pixels. Paste them in just above the content area and add text in 12 pt Arial. The left edge of the RSS icon should line up with a vertical guide at 340 pixels.

Next we will use the free font Walkway Bold to create the title title/logo. I’m using 48 pt text in #eae6e0. Then double click on the layer in the layers palette and select “drop shadow.” Set the drop shadow distance and size to 3 pixels each and the opacity to 50%.

Step 5: Add the post content

We now have the background and the header set and we can move on to the post content. Here is a look at where it currently stands.

We’re going to leave 20 pixels of padding to the left, top and right. Use the text tool to add a text box and add a post title. I’m using 30 pt Arial in #2f4f7f for the title and 14 pt Arial in #747272 for the post info that goes on the next line (with leading set to 24 pixels). The function icon set also includes a comment icon, so you can resize that to 20 pixels by 20 pixels and paste it in.

Our blog’s front page will show post excerpts with a thumbnail for each post. I’m just using some random photos for this purpose, use whatever you like. The thumbnails will be 200 pixels wide and 160 pixels high, and will be surrounded by a five-pixel border in #d2cfc9. The top of the thumbnails border will start 20 pixels below the text, and the left edge will line up with the post title, RSS icon, and blog logo. Use the rectangular marquee tool to select the area for the thumbnail and the paint bucket to apply the gray. Then paste in an image that is 200 pixels by 160 pixels.

Now we can add some text for the post excerpt. I’m aligning the text 10 pixels to the right of the thumbnails border and using 14 pt Arial in #1c2131. For the link to read the full post, change the color to #2f4f7f, and set the text to italic and underline.

Below the post excerpt we will be adding a two-pixel border. Leave 20 pixels of space between the bottom of the link to read the full post and the border. First, use the pencil tool to add a one-pixel white (#ffffff) border that goes from the left edge of the content area to the edge of the sidebar. Then add a one-pixel border in #c6c6c6 directly below the white line.

This is a blown up version of how it will look.

And here is the actual-size result.

Now you can repeat the process of adding the post title, thumbnail, content and border for two more posts (You could of course have more than 3 posts on the front page if you would like. I kept it to 3 primarily to save a little bit of time).

After the posts are done, 20 pixels below the last border we will add a button to view the older posts. Use the rectangular marquee tool to draw the button and fill it with #2f4f7f. The text is 14 pt Arial in #eae6e0. Around the edges of the button, use the pencil tool to add a one-pixel border in #254068.

That completes the content area and we can now move on to the sidebar.

Step 6: The sidebar

At the top of the sidebar we will be creating some space for 125 by 125 banner ads. Each banner will have a 5 pixel border and there will be 10 pixels of spacing all the way around.

With the borders included, each ad slot will be 135 by 135, so we will want to select an area of this size with the rectangular marquee tool and fill it with #cab7a4, which will be the border color. Leave 10 pixels above the border and to the left and the right. Then paste in your 125 by 125 ads.

Twenty pixels below the banners, add the text “search the blog” in 18 pt Arial, #1c2131. Everything in the sidebar will align vertically with the left edge of the border on the banners, 10 pixels from the left edge of the sidebar.

Then use the rectangular marquee tool to draw a search field that is 25 pixels high and fill it with white (#ffffff). Create a button for the search that is also 25 pixels in height and lines up with the right edge of the border on the banners (10 pixels from the right edge of the sidebar). Use the paint bucket to fill the button with #2f4f7f and the pencil tool to give it a one-pixel border of #254068. Give the white search field a one-pixel border of #cab7a4.

Leave 20 pixels of space below the search and add a text box and the text “article topics” in 18 pt Arial, #1c2131. Then add links to various categories using 14 pt Arial in $2f4f7f. I’m using 16 pixels of leading here.

Leave 20 pixels of space below the last link and add another list for popular posts, using the same sizes and colors for text.

The last thing we will do in the sidebar is add two-pixel borders below each link. Use the pencil tool to add a one-pixel line in #efdece and then another one-pixel line in #cab7a4 directly below it. The border should go all the way from the left edge of the sidebar to the right edge.

Step 7: The Footer

The last step is to add the footer. Use the rectangular marquee tool to select the bottom area and fill it with #1f2a42 (levae 20 pixels of spacing below the “older posts” button to the start of the footer). Use the pencil tool to add a two-pixel border in #2f4f7f that connects to the borders on each side. The add text for links using 14 pt Arial in #eae6e0.

The Finished Product:

That completes the design. Here is a look at what we just did.

If you would like to download the orginal PSD file that was used to create this tutorial you can get it here (7.1 MB zip file).

For more Photoshop layout tutorials see:

• Design a Portfolio Site with a Textured Background
• Design an E-Commerce Website in Photoshop
• Design a Premium Theme Marketplace Layout Using Photoshop
• Design a Layout for a Non-Profit Organization in Photoshop
• Design a Clean Blog Theme in Photoshop