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.

Download the source file

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

• clean-blog-design.zip (ZIP, 0.74 MB)

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).

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.

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.

You should have something like this:

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.

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

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

You should get something like this:

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.

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

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

You should now have something like this:

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.

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.

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.

You should now have something like this:

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.

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.

You should have something like this:

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

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).

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.

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.

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 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.

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.

Navigation:

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

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.

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.

Footer:

I’ve placed some copyright information on the footer.

Header:

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

You should have something like this:

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.

Download the source file

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

• clean-blog-design.zip (ZIP, 0.74 MB)