Photoshop Tutorial – Create A Detailed Blue WordPress Blog Layout

Here is what we will making, click on image for full preview:

Before we get started download first 960grid system for easy guideline creation.

• Open 960_downloadtemplatesphotoshop960_grid_12_col.psd
• Ctrl + Shift + C to change the canvas size

Step 1: Working with Header

Lets make this tutorial organized. Rename the Layer1 folder to top_header and also rename the layer1 to top

To start will make some guidelines for our header.
Click View > New Guide set the value to 40px, orientation to Horizontal.

Select Rectangular Marquee tool(M) make a selection from the guide we have just created.
Fill it with any color.

Add this Blending Option:

Drop Shadow

• Opacity: 50%
• Angle: 90
• Distance: 2px
• Size: 3px

Inner Glow

• Color: white
• Opacity: 50%
• Size: 1px

Gradient Overlay

• Style: Linear
• Angle: 90
• Gradient: #2f2f2f #404040

To finish the top_header select Text Tool(T), put some links at the right side.

Step 2: Working with Site Name and Search Bar

Create a new layer below the top layer, name it header_bg

Create a new guide 225px horizontally, make a selection and fill it with any color.

Apply this Blending Option

Gradient Overlay

• Style: Linear
• Angle: 90
• Gradient: #2c8797 #3da2b4

Using Text Tool(T) Add the Site Name and Slogan follow the image bellow

1st

• Font: Lucida Bright Regular
• Size: 48pt

webdesigner

• Font: Arial Regular
• Size: 30pt

Tutorials, Inspirations & Freebies

• Font: Lucida Bright Italic
• Size: 12pt

Apply this Blending Option:

Drop Shadow

Inner Glow

Gradient Overlay

Now lets create the search bar.

Create another folder inside the Header name it Search, put all your search related layers there.

Select Rounded Rectangle Tool(U) and set the radius to 10px. Place it as shown below and name it nav_bg.

Add this Blending Option

Drop Shadow

• Blend Mode: Overlay
• Color: White
• Opacity: 75%
• Angle: 90
• Distance: 0px
• Size: 1px

Inner Shadow

• Opacity: 50%
• Angle: 90
• Distance: 2px
• Size: 5px

Gradient Overlay

• Style: Linear
• Angle: 90
• Gradient: #2d899a #2d8899

Result:

• Duplicate the nav_bg layer.
• Right click the layer and Click Clear Layer Style.
• Right click the layer again and Click Rasterize Layer.
• CTRL + Click the layer to make a selection. While it its being selected
• Select Rectangular Marquee Tool(M) Hold SHIFT + ALT. Follow the selection below.

This means that whatever you selected will not be included to the selection.

Hit Delete then Name the layer search_btn:

• CTRL + Click the layer to make selection
• Go to Select > Modify > Contract. Contract it by 2px.
• CTRL + SHIT + I to inverse the selection and hit delete.

Add this Blending Option:

Inner Glow

• Opacity: 50%
• Color: White
• Choke: 5%
• Size: 3px

Gradient Overlay

• Style: Linear
• Angle: 90
• Gradient: #2c8797 #3da2b4

Stroke

• Size: 1px
• Position: Inside
• Color: #1f606b

To add the search icon select Custom Shape Tool(U) and find the search icon.

Place the icon in the button of the button we have created.

Add this Blending Option:

Drop Shadow

• Blend Mode: Multiply
• Color: Black
• Opacity: 50%
• Angle: 90
• Distance: 0px
• Size: 1px

Use Text Tool(T) to add text:

• color: white
• italic

Step 3: Working with Navigation

At the layers panel make a new folder above the top_header folder name it Navigation, put all your search related layers there.

Make a new guideline 265px orientation to Horizontal.

Create a new layer and name it nav. Make a selection to our new guideline and fill it with a color.

Apply this Blending Option

Drop Shadow

• Blend Mode: Multiply
• Color: Black
• Opacity: 50%
• Angle: 90
• Distance: 2px
• Size: 5px

Inner Glow

• Opacity: 50%
• Color: White
• Choke: 0px
• Size: 1px

Gradient Overlay

Stroke

• Color: #b2b2b2
• Size: 1px

Create new layer above the nav layer and name it shine.
Us the same process as we did before on how we make a selection from search_btn. See the image shown below.

Fill it with white and change the blend mode to Softlight, Opacity to 75%

Using Text Tool(T) Add links to our navigation as shown.

Duplicate the text layer. Move the original text 1 below by hitting the arrow down once. Then change the color to White and you get nice embedded text.

Result:

Now lets create a divider for our Navigation.
Make a new layer name it divider. Zoom in 800% and make a selection show in the image.

Set the foreground color to white.

• Select Gradient Tool(G)
• Choose Foreground to Transparent
• Choose Reflected Gradient

Duplicate the divider and move 1 from right by pressing the right arrow key.

Apply this Blending Option:

Color Overlay

• Color: #b2b2b2

Merge the two layers and duplicate it 4 times. Don’t forget to group the layer and name it dividers.

Step 4: Working with Body Background

Create a new folder below the top_header name it body_bg. Inside it create a new layer name it noise and fill the layer with Black.

Go to Filter > Noise > Add Noise.

Set the blend mode to screen

Create a new layer below the noise layer and name it gradient.

Select the Gradient Tool(G) Set the Foreground color to #d6d5d6 background to #e1e0e0

While holding the Shift key drag it from top to center of the page.

Step 5: Working with Featured Content

At the layers panel make a new folder name it featured_content, put all your featured content related layers and folders there.

Show the guideline by pressing CTRL + :

Follow the image below to make guidelines:

Select Rectangular Marquee Tool(U) and make a big rectangle as show below and fill it with black color.

Apply this Blending Option:

Drop Shadow

• Blend Mode: Multiply
• Color: Black
• Opacity: 70%
• Angle: 90
• Distance: 2px
• Size: 3px

Inner Glow

• Opacity: 50%
• Color: White
• Choke: 0px
• Size: 3px

Gradient Overlay

Stroke

• Color: #b2b2b2
• Size: 1px

Grab a sample screenshot make it 630 x 225.

Apply this Blending Option

Stroke

• Color: #ffffff
• Size: 1px

Select Rectangular Marquee Tool(M) make a selection as shown below and fill it with black color, set the fill to 50%.

Using Text Tool (T) add some text:

• Size:18px
• Lucida Sans Regular
• Color: white.

Now we will create Next and Prev Buttons. Select Rounded Rectangle Tool(U) Set the radius to 10px.

Set the fill to 10%.

Apply this Blending Option:

Stroke

• Color: #b2b2b2
• Size: 1px

Adding arrow -  select Rounded Rectangle Tool(U) do the following step.

Apply Color Overlay make it white.

Duplicate the whole layer and make another button in the opposite side. Don’t forget  to name every button.

What we do next is adding sliding option, so people could switch screens:

Create a new folder and name it circles. Select Eliptical Marqueee Tool(M). Make four circles.

The first circle will serve as active/hover state, so apply this Blending Option to it:

Drop Shadow

• Blend Mode: Overlay
• Color: White
• Opacity: 70%
• Angle: 90
• Distance: 0px
• Size: 1px

Gradient Overlay

For the unhover circles add this option:

Drop Shadow

• Blend Mode: Overlay
• Color: White
• Opacity: 70%
• Angle: 90
• Distance: 0px
• Size: 1px

Inner Shadow

• Blend Mode: Multiply
• Color: Black
• Opacity: 50%
• Angle: 90
• Distance: 2px
• Size: 3px

Color Overlay

• Color: #cdcccc

Step 6: Working with Posts

Create a new folder and name it posts. Create a new layer there and name it posts_holder.

Select Rectangle Tool(U) and draw a big holder for our post.

Apply this Blending Option to it:

Inner Glow

• Opacity: 50%
• Color: White
• Choke: 0px
• Size: 2px

Gradient Overlay

Stroke

• Color: #b2b2b2
• Size: 1px

Create another box as shown in the image below. This will serve  as the background of every post.

Apply this Blending Option:

Gradient Overlay

Stroke

• Color: b2b2b2
• Size: 1px

This is how our posting will look like:

Follow the image shown below and add all the options to your own design:

For the read more button you’ll need to add this:

• Select Rectangle Tool(U) position it as shown above.
• Apply the same layer style as we do to our bg of the post,
  but this time make the gradient reverse.

Open up social network icons and place it as shown in screenshot below.

Add a divider at the top of the icons

Select Rectangular Marquee Tool(M) make a selection as shown. Fill it with color #efeeee.

Group all the layers and name it posts and duplicate it 3 times.

Below our last post we will make a pagination buttons.

Select Rectangle Tool(U)  and make a box as shown in the screenshot below.

Apply the same layer style as we did to our read more button, for the gradient uncheck Reverse.

Duplicate a couple of times and place it beside with each other.  Use distance 5px and for the gradient check Reverse.

Using Text Tool(T) put up numbers. I used the same font color #676666

Step 7: Working With Right Sidebar(RSS, Twitter, Advertisement, Newest Posts, Popular Posts).

At the layers panel make a new folder name it right_sidebar, put all your sidebar related layers and folders there.

Rss

Lucida Sans Regular 25pt color #e67a18 (Drop shadow 1px white blend mode to overlay)
Lucida Sans Regular 14pt color #676666 (Drop shadow 1px white blend mode to overlay)

Twitter

Lucida Sans Regular 25pt color #2c8797 (Drop shadow 1px white)
Lucida Sans Regular 14pt color #676666 (Drops hadow 1px white)

Notice I’ve add some divider about 20px below. The same step and color as we do previously in our posts. Or simply just duplicate some divider.

For the advertisement

Grab 125×125 advertisement images, use 20px distance with each other.

For the Latest Posts

Select Rectangle Tool(U) and draw as shown below in the screenshot. Apply the same style we used in post_bg but this time change the stroke color to #b2b2b2 position inside.

Draw another rectangle that will serve as our header for the box as shown below in the screenshot.

Apply following blending options to it:

Add text for the header also for the post, follow the image below for details.

Draw a little square which will serve as a bullet.

Apply the same layer style as we used to our header.

Group all the layers name it latest_posts. Duplicate new group and name it popular post. Hold SHIFT and drag it below. Name it popular_posts,

Step 8: Working with Footer

At the layers panel make a new folder and name it footer, put all your footer related layers and folders there.

Select Rectangular Marquee Tool(M) and make a selection as shown in the screenshot, fill it with black color.

Apply the same layer style as we did in our top_header.

Using Text Tool(T) add some text 12px color to white.

Apply this Blending Option to it:

Drop Shadow

Now we’re done for now – congratulations!!!

I really hope you enjoyed this tutorial and will keep coming back for more. If you have any tutorial request related to web design feel free to comment it below – I would be happy to fulfill your needs.

Any question or suggestions? Please do leave your comment to let me help you too. Thanks!

Source: 1stwebdesigner.com

you may also like:

• Photoshop Tutorial – Create Clean and Fresh Button
  Step 1 Create a new document size 750px * 400px (size doesn’t really matter here) and fill this background layer with White. Create a new layer on top of the background layer called “gradient”, grab ...
• Photoshop Tutorial – How to Create Dark Web Design
  I’ve been seeing a lot of Dark Websites lately, and it inspires me to make one. Today we will create dark web design which we will do in Photoshop. I will show you how to achieve the look of dark webs...
• Photoshop Tutorial – Chocolate Pro WordPress Style Layout
  This will be your final result 1. The first thing we want to do is create a new document. For the purpose of this tutorial, make it around 1024×998. 2. Next we want to go ahead and chang...
• Photoshop Tutorial – GreenPress WordPress Theme Design
  Final Result: 1. The first step we want to make is to create a new document with the dimensions of 1024x 1478 for the purpose of this tutorial. 2. Now we want to go ahead and set up our ...
• Photoshop Tutorial – Classic navigation menu
  Step 1. Start off with a new document sized 500×80. Fill it with a cream colour. Create a new layer and using the rectangular tool with the colour code below create a shape: Step 2. Add...