How to Create a Clean Blog Design with Photoshop

Aug 12 2009 by Reece | 38 Comments

How to Create a Clean Blog Design with Photoshop

In this step-by-step web design layout tutorial, you will discover a method for designing a clean blog design with stunning gradient and lighting effects using Adobe Photoshop. This tutorial is geared for beginner to intermediate Photoshop users.

Final Result

To view the finished product, click on the following image to see the full-scale version.

How to Create a Clean Blog Design with Photoshop

Download the source file

The PSD source file is available for you to download and study.

Setting up the Photoshop document

1 Open up Photoshop, create a new document that is 1000px in height 1300 pixels in width, and with a white background (#FFFFFF).

Setting up the Photoshop document

Creating the banner rotator section

2 Create a new layer on top of the Background layer. Select the Rectangular Marquee Tool (M) and create a rectangular selection across the canvas leaving a 50px gap at the top. The height of the rectangle should be around 250px – 275px.

Creating the banner rotator section

3 Set the Background color to #00C0FF. Double-click the layer to open up the Layer Styles dialog box and then add a Gradient Overlay layer style with the settings shown in the following figure.

Creating the banner rotator section

You should have something like this:

Creating the banner rotator section

Creating the banner’s lighting effect

4 Create a new layer. Select the Ellipse Tool from the Tools Panel and create an ellipse over the banner that is roughly between 250px – 275px in width, use the following figure as a guideline.

Creating the banner's lighting effect

5 Select the layer and lower the fill to 0%.

Creating the banner's lighting effect

6 Double-click the layer to open up the layer styles dialog box and then add the layer styles shown in the following figure.

Creating the banner's lighting effect

You should get something like this:

Creating the banner's lighting effect

7 Create a new layer, and select both the new layer and the Ellipse layer by holding down Ctrl/Cmd and clicking on the layers’ thumbnails in the Layers Panel.

Creating the banner's lighting effect

8 Right-click on the layers in the Layers Panel, and choose Merge Layers.

Creating the banner's lighting effect

9 Select the merged layer in the Layers Panel and adjust its Blend Mode from Normal to Overlay.

Creating the banner's lighting effect

You should now have something like this:

Creating the banner's lighting effect

Creating the banner’s rotator buttons

10 Select the Ellipse Tool and create a 20px wide circle; hold down the Shift key so that it is perfectly circular. In the Layers Panel, lower its opacity to 60%.

11 Duplicate the layer by right-clicking on the layer in the Layers Panel and choosing Duplicate Layer. Use the Move Tool (V) to move the circles on either side of the canvas down midway on top the banner rotator’s background.

Creating the banner's rotator buttons

Building the navigation bar

12 Select the Rectangular Marquee Tool (M) and create a rectangular selection across the canvas under the banner rotator. The height of the rectangle should be around 100px – 200px.

Building the navigation bar

13 Create a new layer. Choose Edit > Fill and fill the rectangular marquee selection with any color. Set the background color to #000000. Set the opacity of the layer in the Layers Panel to 15%. Double-click the layer and open up the layer styles dialog box and then add a Gradient Overlay layer style as shown in the subsequent figure.

Building the navigation bar

You should now have something like this:

Building the navigation bar

Creating the content boxes

14 Select the Rounded Rectangle tool from the Tools Panel. Set the Radius of the tool to between 5px – 10px (depending on how much you want the corners to be rounded) in the Options bar. Create a large box 600px by 800px. This will serve as the content area background.

Creating the content boxes

15 Double-click the layer to open up the Layer Styles dialog box and then add a Stroke layer style with the settings shown in the following figure.

Creating the content boxes

You should have something like this:

Creating the content boxes

16 Select the Rectangular Marquee Tool (M) and create a rectangle over the top part of the rounded rectangle.

Creating the content boxes

17 With the rectangle still selected, create a new layer. Use the Gradient Tool (G) to create a Black (#000000) to Transparent Linear Gradient going up (see following figure).

Creating the content boxes

18 Click on the layer with the rounded rectangle (the one we created in Step 14) in the Layers Panel to select it. Now choose the Magic Wand Tool (W) and click the outside of the shape.

Creating the content boxes

19 With the area still selected, click the layer with the linear gradient (step 17) in the Layers Panel. Press the Delete key to delete the area beneath the magic wand selection.

Creating the content boxes

20 Repeat the Steps 14 – 19 to create more content boxes as needed. In the following figure, I have created two more content boxes on the side bar using the same method above.

Creating the content boxes

Creating the Footer section

21 Select the Rectangular Marquee Tool (M) and create a rectangular selection across the bottom part of the canvas. The height of the rectangle should be around 70px – 90px. Set the Background color to #D9D9D9.

Creating the Footer section

Finishing touches

22 To spice this layout up, fill your header, banner, navigation, content boxes and footer with dummy content and pictures.

Banner:

I placed a screenshot of this mockup on the right, and used the Horizontal Type Tool (T) to type in some white (#FFFFFF) text.

Finishing Touches

Navigation:

Navigation text is simple, to simulate HTML text, I chose bolded Arial with anti-aliasing method on the Options bar set to None.

Finishing touches

Content Boxes:

Here you can see I’ve simply placed some more dummy text in the content area using the Horizontal Type Tool (T). To get yourself some dummy text to copy and paste, head over to the Lipsum generator site.

Finishing touches

Sidebar:

The first content box on the sidebar uses some smaller anti-aliased text. I also placed an image there that you can replace to showcase a logo or a photo of you/your company. The second sidebar content box is for banner advertisements.

Finishing touches

Footer:

I’ve placed some copyright information on the footer.

Finishing touches

Header:

Just a simple logo that you can replace with your own.

Finishing touches

You should have something like this:

Finishing touches

Congratulations, you’re finished!

If you followed along the tutorial, you should come out with something that looks like the following figure, click on it to see the full-scale version.

Finishing touches

Download the source file

The PSD source file is available for you to download and study.

Related Content

About the Author

Reece is an enigmatic and mysterious freelance designer based in the beautiful state of Victoria in Australia. He loves to create eye-catching websites.

38 Comments

Venard

August 12th, 2009

What a great and plain site. I’m going to use what I’ve learned in future designs.

Kirill Galenko

August 12th, 2009

The design is nice overall and I am sure that the novice designers will really learn from this. Great job.

However, maybe something can be done to improve the readability of the white text on top of the white highlight in the header?

Philipp

August 12th, 2009

Cool and clean tutorial!

jubo

August 12th, 2009

That’s a really good web page, I’m not very good with Photoshop but you’ve made this so easy to follow I’m going to try it out.
Thank you

sign.nl

August 12th, 2009

verry nice tutorial well explaind nice color combinations
great job :)

Reece

August 12th, 2009

@Kirill galenko.

u can lower the opacity of the layer in step 9. (ellipse layer)
this will make the text more readable.

Sean Hurley

August 12th, 2009

Very nice design and thanks for the source files.

Webr

August 12th, 2009

Nice tutorial, but we all must keep aware not to use all the same style. But anyway, nice tutorial!

Osmanelka17

August 12th, 2009

Thank you very much on this guidance…
This consortium is the most useful knowledge ..

Nicole Foster

August 12th, 2009

Great tutorial! The blog design is sleek, and clean. I hope there will be a how-to-code-this-into-wordpress follow up. I have been wanting to learn how to code designs into WordPress for awhile now.

Nikola Lazarevic

August 12th, 2009

Nice and clean design. Thanks!

Tomas Laurinavicius

August 12th, 2009

Very clean and professional look, thanks.

ijlal

August 12th, 2009

Thats really cool. The main coding part from psd to xhtml is very scarce on the web. There should be alot of more well explained xhtml coding tutorials.
Very nice work indeed.
Thanks

Jason Wizards

August 12th, 2009

Fantastic tutorial!
Keep up the good work!

Alex

August 13th, 2009

Very nice tutorial, I include it in my WP mock-up tutorials post list. Very nice job.

Gerasimos

August 13th, 2009

Nice one. Really easy to follow and a great simple design. Good work :)

David

August 13th, 2009

The Layout is not bad, but the typography is poor. I don’t wear glasses but

David

August 13th, 2009

[sorry] … i can’t read this small Font on my Screen. Line length and height are also not optimal.

Simukis

August 13th, 2009

@David: u really need glasses then, if u creating design by this tutorial , u will be able to make letters bigger.
@Reece: very beautiful design.
How you add a logo near your nick?

Christie

August 13th, 2009

Awesome work.. I just love the simplicity of design and clean minimalistic look.. Hope to see a “code” tutorial for this :)

Danny

August 13th, 2009

Great outcome, thanks for sharing this with us.

chris

August 15th, 2009

How do you code this into XHTML , that is what im most interested in

Jacob Gube

August 15th, 2009

@chris: We don’t have plans on covering the HTML/CSS part of this yet – but if enough people show interest, we might do it.

KDMART

August 15th, 2009

wow very amazing :D

but how to convert it to theme to use it in the blog ,,

it is now a psd file

Greg

August 17th, 2009

Very nice tutorial, thanks. I’d also like to see a followup on converting this design to html/css.

Tim

August 17th, 2009

How do we convert this into WordPress template?

Eric Shafer

August 17th, 2009

Great tutorial guys, I’d put my vote in to see a PSD->Wordpress conversion.

Ashely Adams

August 18th, 2009

Nice tutorial!enjoyed going through it.Although i use the wordpress templates myself , and am pretty satisfied with them.

Keith D

August 18th, 2009

Fantastic detail, great screenshots and superb result… makes me wish that I used Photoshop. Sadly, I don’t.

Any chance of a few Adobe Fireworks tutorials?

Jacob Gube

August 19th, 2009

@Keith D: Fireworks is something I’ve been wanting to cover for a while; I’ll see if I can find some authors who would like to write Fireworks tutorials.

Artendz

September 4th, 2009

Wow.. Thank so much for ur tutorial
Greatt….

Shane Walsh

September 23rd, 2009

Nice tutorial

But remember newbies the basic design is great but try add the rest of the content into CSS so you can update it easily!

duone

September 27th, 2009

snap, the part where we have to match the css layout with images from created from photoshop is the trickiest.I still trying to figure out about this.

ann

November 10th, 2009

Great tutorial! I’m going to try your tutorial

ani

February 12th, 2010

how do make background design in photoshop?in new model

Brad

November 25th, 2010

Very good post.
Great!

adhy

March 11th, 2011

Graet tutorial. but could you make its html code?plizzz

Leave a Comment

Subscribe to the comments on this article.