In today’s Photoshop tutorial, we’re going to learn how to create a clean WordPress-styled website/blog design. We’ll be mainly dealing with; Basic shapes (lines, rectangles, arrows), Layer Styles, and a bit of basic type. Besides some Photoshop tricks. We’ll also be focusing on keeping our layout very well-aligned. So, let’s get started!
Final Image Preview
Take a quick look at what we’ll be creating together.
Tutorial Details
- Program: Adobe Photoshop CS4
- Difficulty: Intermediate
- Estimated Completion Time: Around 2-3 hours
External Sources
Icons
We’ll get the bird and RSS feed icons from Function free icon set.
Fonts:
We’ll use Frutiger™ CE 45 Light (Get it from Fonts.com), Arial, and Georgia (both are web-safe/standard fonts).
Step 1
We’ll be using 960 Grid System to keep everything well-aligned. Once it’s downloaded, Open this file “960_grid_24_col” up in Photoshop.
The final outcome is taller than the current height. So, we’ll go to Image > Canvas Size > Adjust your options according to the following image.
In order to fill our background with a color. Using the Rectangle Marquee Tool (M) create a selection over the whole artboard, set your foreground color to: #ededed then, click Shift+Backspace to fill your selection. (Make sure to choose “Foreground Color” as a the filling option).
Step 2
Again, using the Rectangle Marquee Tool (M) create a selection of 1020x70px – This will work as our header background.
Fill your selection with this color value: #1a1e27.
Using the Horizontal Type Tool (U) type your navigation text with the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ffffff
Using the Custom Shape Tool (U) create an arrow of about 10x10px and fill it with #ededed and give it a Stroke.
Step 3
Using the same character settings I’ve shown in the previous step, type “Grab our feeds“. Then from the Function Free Icon Set place the icon “rss_48” next to it.
Using the Line Tool (U) create a vertical line of 1px in width. Apply a Gradient Overlay to it.
Create another line, move it 1px to the right. Apply a Gradient Overlay to it as well.
Step 4
In order to create our search bar background, use the Rounded Rectangle Tool (U) to create a rectangle of 180x25px with a radius of 5px, and fill it with #ededed.
Type the word “search” using the following character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Italic
- Anti-aliasing setting: Smooth
- Color: #1a1e27
Using the Custom Shape Tool (U) create an arrow of about 15x15px, and fill it with #646464.
Using the Single Row Marquee Tool create a 1px selection. Fill it with white (#ffffff).
Since this 1px line should appear behind the arrow we’ll load the pixels of the arrow layer (by holding down Ctrl key and clicking on the arrow layer’s thumbnail), then hit Delete while selecting the 1px line layer.
Step 5
Type your site’s name using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 30px
- Font weight: Bold
- Anti-aliasing setting: Smooth
- Color: #1a1e27
Duplicate the text layer, place it beneath the original one, fill it with white, then nudge it down 1px.
Type your site’s slogan using the following character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: None
- Color: #646464
Using the Line Tool (U) create two lines of a width of 1px each. Then fill them with these color values: #ffffff & #d1d1d1.
Write a brief description about your site, using the following character settings:
- Font Family: Georgia
- Font size: 15px
- Font weight: Italic
- Anti-aliasing setting: None
- Color: #646464
Before we move to the next step, make sure to keep your layers organized. Take a look mine:
Step 6
Drag two new guides according to the following image:
Using the Rectangular Marquee Tool (M) create a selection of 600x250px. Fill it with any color for now.
*Call this layer: “image_holder”.
Place an image, put its layer above “image_holder” layer. Right-click on the image’s layer > Create clipping mask…
Using the Rectangular Marquee Tool (M) create another selection of 350x250px and fill it with #1a1e27.
Drag two new horizontal guides according to the following image:
Type a heading of a featured project/post using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 30px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ededed
Write a short description about the project/post using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 30px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ededed
Using the Line Tool (U) create a line of 320x1px and fill it with #393939.
Using the Rectangular Marquee Tool (M) create a selection of about 70x60px. Fill it with any color, then add some layer style to it according to the following image:
Place an image of your choice, create a clipping mask for it – refer to a previous step on how to do that – then make two more copies of your image.
Step 7
Using the Rectangle Tool (U) create a rectangle of about 110x40px and fill it with #1a1e27.
Using the Horizontal Type Tool (T) type “Hire Us” using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 20px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ededed
Using the Ellipse Tool (U) create an ellipse of 20x20px, then apply some Layer Style to it according to the following image:
Using the Custom Shape Tool (U) create an arrow of 10x10px and fill it with this color value: #1a1e27.
Step 8
Drag a new horizontal guide after 50px.
Using the Rectangle Tool (U) create a rectangle of about 310x30px and fill it with #1a1e27.
Type a heading using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 26px
- Font weight: Bold
- Anti-aliasing setting: Smooth
- Color: Won’t matter since we’ll apply a Gradient Overlay.
Apply a Gradient Overlay to your text. Use the image below for reference.
Drag a new horizontal guide according to the following image:
Step 9
Type a heading of a blog post using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 25px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #1a1e27
Beneath the post’s heading type the words “posted in:” using the following character settings:
- Font Family: Arial
- Font size: 14px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #1a1e27
Then next to it, type a name of a category using the following character settings:
- Font Family: Georgia
- Font size: 14px
- Font weight: Italic
- Anti-aliasing setting: Smooth
- Color: #646464
Keep adding the post’s details according to the following image:
Using the Rectangle Tool (U) create a rectangle of 150x150px. And apply some Layer Style to it.
Hold down Ctrl key and click on this layer’s thumbnail to select it. And go to Select > Modify > Contract: 5px. Then fill this selection with any color for now.
Place an image. Apply the “Create clipping mask” command to it.
Write a description about the post using the following character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #1a1e27
Using the Line Tool (U) create a line of 390×1 and fill it with this color value: #bdbdbd.
Add some more details to your post according to the following image:
Step 10
Create a rectangle of 110x30px, and apply a Gradient Overlay to it.
Write the words “Read More” using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 15px
- Font weight: Bold
- Anti-aliasing setting: Smooth
- Color: Any color for now
Give it a Gradient Overlay according to the following image:
Create two more copies of your latest blog post, and leave 100px between each one.
Step 11
We’ll start working on the sidebar. Add some content to your sidebar according to the following image:
Type your name using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 20px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #646464
And your job using the following character settings:
- Font Family: Georgia
- Font size: 15px
- Font weight: Italic
- Anti-aliasing setting: Smooth
- Color: #818181
Step 12
Drag a new horizontal guide according to the following image:
Create yet another heading according to the following image:
Create a rectangle of 165x165px, and fill it with any color just for now.
Apply some Layer Styles for it. Check the image below for reference.
Type the words “Advertise Here” using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 30px
- Font weight: Bold
- Anti-aliasing setting: Smooth
- Color: Any color just for now.
Then, apply a Gradient Overlay to it according to the following image:
Make another copy of what we’ve created in this step:
Step 13
Create another heading:
Create an arrow of 10x10px and fill it with this color value: #646464.
Write a name of a category using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 16px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #1a1e27
Keeping adding more arrows and categories…
Drag a new horizontal guide according to the following image:
Step 14
Using the Rectangular Marquee Tool (M) create a selection of 1020x290px and fill it with any color.
Set the color values in your Gradient Editor from #1c202a to #1a1e27. Select the pixels of the footer background layer. Then drag with a Radial Gradient.
Drag two new horizontal guides according to the following image:
Step 15
Write a heading using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 22px
- Font weight: Bold
- Anti-aliasing setting: Smooth
- Color: #ededed
Using the Line Tool (U) create a line of 270x1px and fill it with this color value: #393939.
Write some links using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ededed
Step 16
Create another heading. Check the image below for reference.
Create a rectangle of 80x80px, fill it with #646464, select its pixels, contract selection, place an image, create a clipping mask for it. We did that previously in another step.
Keep adding some more images…
Step 17
Create a one final heading. Check the image below for reference.
Write some text as an example of a tweet, using the following character settings:
- Font Family: Georgia
- Font size: 15px
- Font weight: Italic
- Anti-aliasing setting: Smooth
- Color: #ededed
Write some more text that represents the tweet information, using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ffffff
Write “Follow Us on Twitter” using the following character settings:
- Font Family: Frutiger CE 45 Light
- Font size: 20px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #818181
Place the bird icon from the Function free icon set.
Create two selections of 1px in height for each at the top and the bottom of the footer, then fill them with white (#ffffff).
Step 18
Type your small footer text, using the following character settings:
- Font Family: Arial
- Font size: 15px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #646464 – #1a1e27
Download The PSD file
Your Turn To Talk
I hope you enjoyed this tutorial! Please take a minute to leave a comment below :)
I assume the blog headers will change and be generated dynamically as the blog is updated.
So how will each blog header be rendered on a live site when the font used is Frutiger (not a system font…)?
@David C.: You could probably use Cufon or sIFR to render those :)
great tutorial, thank you very much.
“mashae allahe 3like akhi mohammed ;) “
Nice Article, Thanks for this – I would love to take it to the next step and see how it gets pulled into Dreamweaver and made into web-standard code. PSD to DW would be an excellent topic.
Thanks for this nice tutorial
Very nice tutorial. Would love a tutorial on how to convert this into a website using HTML and CSS. Also, it would be great if you could tell us how to make a WordPress layout with this.
Is there a WordPress theme for this?
Thanks a lot for your comments guys!
Concerning the HTML/CSS part, I think Jon Philips — the founder of SpyreStudios — may be working on this part.
Peace,
Mahmoud
@Steve, Nagarjun Palavalli, Nagarjun Palavalli: Mahmoud is right, I’m working on converting it to css/html/WP :)
Marvelous tutorial .Thanks for sharing with us
beautiful and really professional website design tutorial.
awesome! im also lookin forward to DW or CSS tutorial from here…kep it up!
Nice and pro. Waiting for HTML and CSS. Maybe not so easy to convert.
This is a very nice detailed tutorial. Passed this on to a buddy of mine. Thanks Again
Amazing tutorial! I was just wondering, how did you make a link for all of the buttons?
good tutorial
really amazing…perfect…all the details presented..a very good work!
Great site and nice post. I was intrigued at your gradient pallet, could you post a link to where you downloaded those from, or if you created them it would be awesome to have them as a pallet.
@Everyone: thanks a lot for your nice comments! :)
@Kasie Thomas: this part of the tutorial is actually about designing the interface/layout inside Photoshop. However, there may be another part on how to code it. :D
@Dale: Happy you liked it. :)
You can download these gradients for free here: http://mkhaled.com/freebie-clean-gradients-set/
Really looking forward to seeing the HTML/CSS or WordPress version of this tutorial. Great work!
Really thank you for this handsome tutorial!!!
Guys, I’ve been working on the HTML CSS from this PSD file. Take a look there at my Github repo. Still a lot of work to do. I plan writing a tutorial on how I got here and how to create a WordPress theme with it.
Brilliante_Layout link:
http://github.com/tatygrassini/Brilliante_Layout
seems quite useful
Very cool website layout. It could be one for me. Maybe I modify it for using this one for my own needs. Currently, because I need really much a website layout or maybe the idea behind. And with this useful tutorial you wrote for us -your readers- I’m able to create my own one for free.
Thanks a lot for your cool website layout tutorial for creatinf a really nice theme/ template for free with Photoshop (or something like this (like Gimp, Fireworks and so on)
Thanks very much for your tutorial. helped me realize that it isn’t that hard, just the mentality that denies you!