Design a Clean & Tidy Blog Layout Mock-Up in Photoshop

  • 0

Design a Clean & Tidy Blog Layout Mock-Up in Photoshop

Category : Blog

Step 1 – Setting up the document
Create a new document in Photoshop (Ctrl/Cmd + N) with the dimensions 1920px by 1100px. Then fill the background with the color #dbdbdb using the Paint Bucket Tool (G).

Step 2 – Creating the background of the content
Select the Rectangle Tool (U) and create a rectangle in the middle of your canvas with the width 940px and the color #f8f8f8. Then double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer “layout bg.”

Step 3 – Creating the header
Create a new group and name it “header.” Then select the Rectangle Tool (U) and create a rectangle with the height 15px that goes from the left edge of the canvas to the right edge. Use the color #90999b. Name this layer “top bar.”

Step 4
Select the Line Tool (U) and create a line with the weight 1px and the color #848d8f. Put this line at the bottom of the rectangle which you have created at the previous step. Name this layer “1px dark line.”
Duplicate this line (Ctrl/Cmd + J), change the color of the new one to #acb7ba and move it one pixel up. Name this layer “1px light line.”

Step 5
Select the Rectangle Tool (U) to create a rectangle with the dimensions 940px by 100px using the color #f2f5f5. Double-click on this layer and use the settings from the following image. Name this layer “header bg.”

Step 6
Use the Type Tool (T) to write a name for your layout in the header. I have used the font Adobe Garamond Pro and the color #9da6a7. Double-click on your text layer to open the layer style window and use the settings from the following image.

Step 7
Create a new group and name it “subscribe.” Download these social media icons and move the rss, email and twitter icons into your document. Put them in the right side of the header and write the name of each icon beneath it using the font Georgia and the color #909b9c.

Step 8 – Creating the navigation bar
Create a new group and name it “navigation bar.” Then select the Rectangle Tool (U) and create a rectangle with the height 40px beneath the header using the color #afbbbc. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer “navigation bar.”

Step 9
Use the Line Tool (U) to create four lines with the weight 1px – two at the top of the navigation bar and two at the bottom. Use the color #9aa4a6 for the dark lines and #bdcccd for the light ones. Take a look at the following image for reference.

Step 10
Select the Type Tool (T) and write the name for your navigation menu items. Use the font Georgia and the color #ebf3f4.

Step 11 – Creating the featured area
Create a new group and name it “featured.” Then select the Rectangle Tool (U) and create a rectangle with the height 180px beneath the navigation bar using the color #ddeaeb.

Step 12
Create two lines with the weight 1px and put them at the bottom of the rectangle which you have created at the previous step. Use the color #becacb for the dark line and #e0f0f1for the light one.

Step 13
Select the Rectangle Tool (U) and create a rectangle with the size 240px by 140px. Double-click on this layer to open the Layer Style window and use the settings from the following image.
Duplicate this rectangle two times (Ctrl/Cmd + J) and arrange them as you see in the image below.

Step 14
Select the Ellipse Tool (U), hold down the Shift key to maintain the proportions and create a small circle in the right side of the featured area using the color #c3d4d5. Name this layer “right circle”, double-click on it and use the settings from the following image.

Step 15
Use the Custom Shape Tool (U) to create an arrow inside the circle with the color #edf6f7. Name this layer “right arrow.”

Step 16
Select the “right circle” and “right arrow” layers and drag them over the ‘Create a new layer’ button from the bottom of the Layers palette to duplicate them. With the two new layers selected go to Edit > Transform > Flip Horizontal. Then move them in the left side of the featured area using the Move Tool (V). Change the name of these layers to “left circle” and “left arrow.”

Step 17 – Creating the content
Create a new group and name it “content.” Then use the Rectangle Tool (U) to create a rectangle with the dimensions 600px by 160px. Then copy the layer style of one of the rectangles from the featured area and paste it to this layer to get the same double stroke effect.
Use the Type Tool (T) to add some text beneath the rectangle. I have used the font Georgia Bold Italic for the headline (#555858) and Helvetica for the block of text (#525757).

Step 18
Create a new rectangle with the dimensions 290px by 100px. Right-click on this layer and select Paste Layer Style to add the double stroke effect. Then select the Type Tool (T) and add some text beneath this rectangle.
Select the two layers and duplicate them three times by dragging them over the ‘Create a new layer’ button from the bottom of the Layers palette. Then arrange the rectangles and the text layers to have four blog posts. Take a look at the following image for reference.

Step 19
Select the Line Tool (U) and create a horizontal line and a vertical one using the color #cccccc, to separate the blog posts.

Step 20
Create a new group and name it “sidebar.” Then select the Rectangle Tool (U) and create a rectangle with the width 300px using the color #e7eded. Name this layer “sidebar bg.”

Step 21
Use the Line Tool (U) to create two vertical lines in the left side of the sidebar. Use the color #c9cfcf for the dark line and #f3f9f9 for the light one.

Step 22 – Creating a search bar
Select the Rectangle Tool (U) and create a rectangle using the color #f4f7f7. Name this layer “search bar”, double-click on it and use the settings from the following image for Stroke. Then use the Type Tool (T) to write something inside your search bar.

Step 23
Use the Type Tool (T) to add some text in your sidebar.

Step 24 – Creating the footer
Create a new group and name it “footer.” Then select the Rectangle Tool (U) and create a rectangle with the height 40px using the color #b6bfc0. Name this layer “footer bg”, double-click on it and use the settings from the following image for Gradient Overlay.

Step 25
Select the Line Tool (U) and create two horizontal lines at the top of the footer. Use the color #9da5a6 for the dark line and #c5cfd0 for the light one.
Then select the Type Tool (T) and write a copyright statement in your footer using the color #858e8f and the font Georgia.

Final Result
Here is the final result of this tutorial. I hope you enjoyed it. Click on the following image to see the full size layout.


Leave a Reply

Recent Comments