Total Followers 132,503
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.
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
Inner Glow
Gradient Overlay
To finish the top_header select Text Tool(T), put some links at the right side.
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
Using Text Tool(T) Add the Site Name and Slogan follow the image bellow
1st
webdesigner
Tutorials, Inspirations & Freebies
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
Inner Shadow
Gradient Overlay
Result:
This means that whatever you selected will not be included to the selection.
Hit Delete then Name the layer search_btn:
Add this Blending Option:
Inner Glow
Gradient Overlay
Stroke
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
Use Text Tool(T) to add text:
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
Inner Glow
Gradient Overlay
Stroke
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.
Duplicate the divider and move 1 from right by pressing the right arrow key.
Apply this Blending Option:
Color Overlay
Merge the two layers and duplicate it 4 times. Don’t forget to group the layer and name it dividers.
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.
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
Inner Glow
Gradient Overlay
Stroke
Grab a sample screenshot make it 630 x 225.
Apply this Blending Option
Stroke
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:
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
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
Gradient Overlay
For the unhover circles add this option:
Drop Shadow
Inner Shadow
Color Overlay
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
Gradient Overlay
Stroke
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
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:
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
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)
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,
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.
Get The Only Freelancer crash course you will ever need to read!
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. Other than that he loves Coffee and his Girl.
Monday, September 5th, 2011 23:49
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!
Tuesday, May 31st, 2011 12:28
let me tell you that’s tutorials was very amazing.. i do it … Thank You
Thursday, December 16th, 2010 18:49
Do you have any tutorials about the process from design to coding, and getting it online, using dreamweaver etc?
Wednesday, December 15th, 2010 20:55
Yes you can follow this tutorial in older versions of PS.
Wednesday, December 15th, 2010 20:53
Your welcome. Goodluck!
Thursday, December 16th, 2010 00:07
This is fantastic. Great job!
Wednesday, December 15th, 2010 21:21
Nice layout! :)
Wednesday, December 15th, 2010 17:31
very nice post and you explain very well thanks for sharing
Wednesday, December 15th, 2010 10:30
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.
Wednesday, December 15th, 2010 12:17
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!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![Convert 1st Ideas from PSD to HTML [Very Detailed]](http://www.1stwebdesigner.com/wp-content/uploads/2011/05/preview_small_1stideas_convert.jpg "Convert 1st Ideas from PSD to HTML [Very Detailed]")
![1st Ideas: Create a Stylish Design Agency Website [Very Detailed]](http://www.1stwebdesigner.com/wp-content/uploads/2011/04/preview_small_1stideas.jpg "1st Ideas: Create a Stylish Design Agency Website [Very Detailed]")
Rean John Uehara
Wednesday, December 15th, 2010 12:17
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!
Bunnygotblog
Thursday, December 16th, 2010 00:07
This is fantastic. Great job!
Abhishek Bhardwaj
Wednesday, December 15th, 2010 21:21
Nice layout! :)
Anonymous
Wednesday, December 15th, 2010 17:31
very nice post and you explain very well thanks for sharing
Tod
Wednesday, December 15th, 2010 10:30
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.
Michael John O. Burns
Wednesday, December 15th, 2010 20:53
Your welcome. Goodluck!
Michael John O. Burns
Wednesday, December 15th, 2010 20:55
Yes you can follow this tutorial in older versions of PS.
Samuel
Monday, September 5th, 2011 23:49
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!
Amy
Tuesday, May 31st, 2011 12:28
let me tell you that’s tutorials was very amazing.. i do it … Thank You
Sharon
Wednesday, May 25th, 2011 07:18
Nice tutorial, very nice layout.
Jeanlucslagle
Thursday, December 16th, 2010 18:49
Do you have any tutorials about the process from design to coding, and getting it online, using dreamweaver etc?