![]()
In this Photoshop tutorial I will show you how to create a nature inspired WordPress layout. We are going to use the following resources:
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.
Here is the final image we will be creating. You can also view a larger version here.
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+;.

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

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.

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.

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

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

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.

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.

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.

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

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.

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

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.

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

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.

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

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.
August 7, 2009 11:00 am Sam http://WebsiteURL