SpyreStudios - Design and Development Magazine

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 :)