In this Photoshop tutorial I will show you how to create a nature inspired WordPress layout. We are going to use the following resources:

• Free Social Media Icons
• Function Icon Set
• Nature photos: 1 | 2 | 3

I would like to thank Gin-n-Juice, Philipp Klinger and Paulo Brandão for taking those beautiful nature shots. Now let’s get to work.

Final Image Preview

Here is the final image we will be creating. You can also view a larger version here.

Step 1 – Setting up the document

Before I start creating a layout, I usually use the Gridmaker plugin for Photoshop CS4. If you have the same version of Photoshop, download the plugin and install it. Then go to Window > Extensions > Gridmaker and create a new document with the settings from the following image. Increase the size of your canvas by going to Image > Canvas Size. Set the width to 1200px and the height to 1000px.

Note: To hide/show your guides hit Ctrl+;.

Step 2

Select the Paint Bucket Tool (G) and fill the background with the color #fffbb5.

Step 3

Create a new group and name it "header." Then select the Rectangle Tool (U) and create a rectangle at the top of your document with the height of 20px, using the color #2f271c. To create more guides, drag them from the ruler (Ctrl+R).

Note: Open the Info palette (F8) to see the exact size of your rectangle while you are creating it.

Step 4

Select the Rectangle Tool (U) and create a new rectangle with the height of 130px, using the color #aa4720. Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.

Step 5

Select the Line Tool (U) and create a horizontal line with the weight of 1px at the bottom of the orange rectangle using the color #de542a. Then create a new line using the color #210b05 and set the opacity of this line to 60%.

Step 6

Create two more horizontal lines at the bottom of your brown rectangle using the colors #88745a and #0e0c08. Set the opacity of the second line to 60%.

Step 7 – Adding a logo

Create a new group inside the "Header" group and name this one "logo." Then select the Type Tool (T) and write the name of your layout using the color #eca94d and a font that you like. For this layout I used only fonts from the Myriad Pro family. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 8

Select the Type Tool (T) and write a tagline beneath the logo using the color #f4bf77. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 9 – Creating the "Subscribe" area

Create a new group inside the "header" group and name this one "subscribe." Then open in Photoshop the rss, e-mail and twitter icons from the Free Social Media Icons pack. Move these icons into your document using the Move Tool (V) and put them in the right side of the header. Then select the Type Tool (T) and write the name of each icon beneath it using the color #f7f7f7.

Step 10 – Adding a gradient beneath the header

Create a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did. Then select the Gradient Tool (G) and drag a black to transparent gradient from the top to the bottom of your selection. Leave a distance of 1px between the header and this gradient. Then set the opacity of this layer to 10% and name it "gradient."

Step 11 – Creating the navigation bar

Create a new group and name it "Navigation bar." Then select the Rounded Rectangle Tool (U), set the radius to 6px and create a rounded rectangle with the dimensions 980px by 45px, using the color #a6b840. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 12

Select the Type Tool (T) and add the text for your navigation menu items using the color #fffdd1.

Step 13

Now we are going to create some separators. Create a new group and name it "separators." Then select the Line Tool (U), set the weight to 1px and create two vertical lines using the colors #dbe394 and #7e8f2d. Duplicate these two lines and put them between your navigation menu items.

Step 14 – Creating the background for the content

Select the Rounded Rectangle Tool (U), set the radius to 6px and create a white rounded rectangle with the dimensions 980px by 790px. Double-click on this layer and use the settings from the following image for Stroke. Name this layer "content bg."

Step 15

Ctrl-click on the vector mask of the "content bg" layer to select the white rounded rectangle, create a new layer, select the Gradient Tool (G) and drag a black to transparent gradient like I did. Set the opacity of this layer to 5% and name it "content bg gradient." Then select the Move Tool (V) and hit the down arrow on your keyboard twice to move this layer 2 pixels down.

Step 16

Create a new group and name it "Content." Create another group inside the "Content" group and name this one "1st article." Then select the Rectangle Tool (U) and create a rectangle with the dimensions 200px by 200px, using any color you want. Name this layer "200×200."

Then open a photo that you like in Photoshop and move it into your document using the Move Tool (T). To scale the image down, go to Edit > Free Transform (Ctrl+T). Move the photo above the rectangle, right-click on it and select Create Clipping Mask. Now your photo is using the rectangle as a mask. Name this layer "photo."

Step 17

Select the Type Tool (T) and write an excerpt of your first article next to the photo, using the color #222222 for the title and #333333 for the text.

Step 18

Open in Photoshop the comment icon from the Function Icon Set. Then move this icon into your document using the Move Tool (V). To scale this layer down, go to Edit > Free Transform (Ctrl+T). Name this layer "comment icon" and write a number on your icon using the Type Tool (T) and the color #333333.

Step 19

Repeat the last three steps to create your second and third articles.

Step 20 – Creating the "Community Link Feed" area

Create a new group and name it "Community Link Feed." Select the Rounded Rectangle Tool (U), set the radius to 5px and create a rounded rectangle with the dimensions 220px by 750px, using the color #e9e8dc. Double-click on this layer and use the settings from the following image for Stroke.

Step 21

Select the Rectangle Tool (U) and create a small rectangle at the top of your rounded rectangle, using the color #dcdbcc. Double-click on this layer to open the Layer Style window and use the same settings from the previous step for Stroke. Then right-click on this layer and select Create Clipping Mask. Now your rectangle is using the layer beneath it (the rounded rectangle) as a layer mask.

Step 22

Open in Photoshop the news icon from the Function Icon Set and move it into your document using the Move Tool (V). Put this icon at the top of your rounded rectangle. Name this layer "news icon."

Select the Type Tool (T) and write "Community Link Feed" next to your news icon, using the color #71716e.

Step 23

Select the Type Tool (T) and add some text inside your "Community Link Feed" area. I used the color #71716e for the titles and #7b7b78 for the rest of the text.

Step 24

Create a new group and name it "separators." Then select the Line Tool (U) and create some horizontal lines with the weight of 1px between the blocks of text, using the color #cdccc1.

Step 25 – Creating the sidebar

Create a new group and name it "Sidebar." Create another group inside the "sidebar" group and name it "search." Then open in Photoshop the search icon from the Function Icon Set and move it into your document using the Move Tool (V). Name this layer "search icon."

Select the Type Tool (T) and write the word "Search" next to the icon, using the color #333333.

Step 26

Select the Rectangle Tool (U) and create a search bar using the color #f0f0ea. Add a stroke to your search bar using the settings from the following image. Then select the Type Tool (T) and write "type and hit enter to search" inside your search bar using the color #cdccbf.

Step 27

Create a new group and name it "categories." Select the Type Tool (T) and write the word "Categories" using the color #333333. Then add the text for your categories and an icon that you like. I used a coffee icon.

Create a new group and name it "dots." Then use the Ellipse Tool (U) to create a small dot for each category. Take a look at the following image for reference.

Step 28

Create a new group and name it "recent posts." Then create a list for your recent posts and add an icon that you like from the Function Icon Set.

Step 29

Create a new group and name it "flickr." Add the flickr icon and use the Type Tool (T) to write the word "Flickr." Then select the Rectangle Tool (U) and create 9 squares with the dimensions 60px by 60px using the color #e9e8dc. Add a stroke to each of these squares using the settings from the following image.

Final Result

I hope that you enjoyed this tutorial. Please let me know what you think about it in the comments bellow and if you like it, spread the word about it.

Related Posts

1. Create a Portfolio Layout with Wooden Background in Photoshop
2. How to Create a Magic Mysterious Ball in Photoshop
3. How to fill an empty bottle with water in Photoshop
4. Create a Clean and Colorful Web Layout in Photoshop