How to Create a Clean Blog Design with Photoshop

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