Create A Detailed Blue WordPress Blog Layout In Photoshop

Posted in Tutorials, Web Interface3 years ago • Written by 11 Comments

Hello there everybody and welcome to another PSD web design here at 1stwebdesigner.

In my previous tutorial we learned how to create a Dark WordPress style layout.  Today you will be learning to create a clean light WordPress style layout and I hope all of you can follow this step by step tutorial. Let’s get started.

Resources you will need to complete this tutorial:

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_download\templates\photoshop\960_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!

PSD File: Click to download.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

11 Comments Best Comments First
  • Rean John Uehara

    Wednesday, December 15th, 2010 12:17

    1

    Wow, I’m not really much of a designer but looking at the first part of this article I think I’ll try it on my free time. I’ll share this on my Facebook, my friends who are inclined towards designing will surely love this. Thanks Michael!

    0
  • Bunnygotblog

    Thursday, December 16th, 2010 00:07

    5

    This is fantastic. Great job!

    0
  • Abhishek Bhardwaj

    Wednesday, December 15th, 2010 21:21

    4

    Nice layout! :)

    0
  • Anonymous

    Wednesday, December 15th, 2010 17:31

    3

    very nice post and you explain very well thanks for sharing

    0
  • Tod

    Wednesday, December 15th, 2010 10:30

    2

    Could I follow this tutorial on an older version of Photoshop or do I have to use the latest CS5? I’m interested in getting into web design but just wondered if I really need the latest version of PS, i.e. is it worth picking up an older version and how old a version can I use and still be good for this type of stuff.

    0
  • Michael John O. Burns

    Wednesday, December 15th, 2010 20:53

    6

    Your welcome. Goodluck!

    0
  • Michael John O. Burns

    Wednesday, December 15th, 2010 20:55

    7

    Yes you can follow this tutorial in older versions of PS.

    0
  • Samuel

    Monday, September 5th, 2011 23:49

    11

    A really nice blue and grey combination of theme you designed here. Good inspiration for others to design a similar theme or collect some of the ideas here. Nice work!

    0
  • Amy

    Tuesday, May 31st, 2011 12:28

    10

    let me tell you that’s tutorials was very amazing.. i do it … Thank You

    0
  • Sharon

    Wednesday, May 25th, 2011 07:18

    9

    Nice tutorial, very nice layout.

    0
  • Jeanlucslagle

    Thursday, December 16th, 2010 18:49

    8

    Do you have any tutorials about the process from design to coding, and getting it online, using dreamweaver etc?

    0
  • Samuel

    Monday, September 5th, 2011 23:49

    11

    A really nice blue and grey combination of theme you designed here. Good inspiration for others to design a similar theme or collect some of the ideas here. Nice work!

    0
  • Amy

    Tuesday, May 31st, 2011 12:28

    10

    let me tell you that’s tutorials was very amazing.. i do it … Thank You

    0
  • Sharon

    Wednesday, May 25th, 2011 07:18

    9

    Nice tutorial, very nice layout.

    0
  • Jeanlucslagle

    Thursday, December 16th, 2010 18:49

    8

    Do you have any tutorials about the process from design to coding, and getting it online, using dreamweaver etc?

    0
  • Michael John O. Burns

    Wednesday, December 15th, 2010 20:55

    7

    Yes you can follow this tutorial in older versions of PS.

    0
  • Michael John O. Burns

    Wednesday, December 15th, 2010 20:53

    6

    Your welcome. Goodluck!

    0
  • Bunnygotblog

    Thursday, December 16th, 2010 00:07

    5

    This is fantastic. Great job!

    0
  • Abhishek Bhardwaj

    Wednesday, December 15th, 2010 21:21

    4

    Nice layout! :)

    0
  • Anonymous

    Wednesday, December 15th, 2010 17:31

    3

    very nice post and you explain very well thanks for sharing

    0
  • Tod

    Wednesday, December 15th, 2010 10:30

    2

    Could I follow this tutorial on an older version of Photoshop or do I have to use the latest CS5? I’m interested in getting into web design but just wondered if I really need the latest version of PS, i.e. is it worth picking up an older version and how old a version can I use and still be good for this type of stuff.

    0
  • Rean John Uehara

    Wednesday, December 15th, 2010 12:17

    1

    Wow, I’m not really much of a designer but looking at the first part of this article I think I’ll try it on my free time. I’ll share this on my Facebook, my friends who are inclined towards designing will surely love this. Thanks Michael!

    0

Comments are closed.

54.196.215.114 - unknown - unknown - US