Design a Professional Blog Layout in Photoshop

Today we’re going to walk through designing a professional blog magazine theme in Photoshop. This is an exercise in aesthetics and you’ll learn a bunch of techniques which will improve your skills in Photoshop. Grab a coffee, sit tight and let’s get started!

Resources

Before we dive in, let me first introduce you to a few resources which will help you out.

The Grid

Using a grid makes it so much easier to align elements and decide on their proportions. In this design, we’ll be using a Baseline Grid created by the awesome guys at Teehan+Lax . It’s a 6px baseline grid coupled with the 960 grid system.

Typography

Take it seriously when you choose typefaces. By selecting the right fonts you’ll achieve successful design before moving to the next step and coding the template. Here are a couple of articles to help you understand which are the right fonts for your project.

• A Beginner’s Guide to Pairing Fonts
• How to Choose a Typeface
• What Font Should I Use?”: Five Principles for Choosing and Using Typefaces
• Choosing the Right Font: A Practical Guide to Typography on the Web
• Choose your web fonts wisely
• On Choosing Type

Anti-Aliasing

Here’s a really excellent article, you have to read this one! I won’t say a single word, except that for body copy (small point sizes) we’ll use Sharp, and for headings (larger point sizes) we’ll use Crisp.

• The Ails Of Typographic Anti-Aliasing

Pattern

And a quick download for your .pat collection.

• Stitch Pattern

Step 1: Setting up the Document

Open up Adobe Photoshop (I use CS5.1, but that’s not necessary to follow along). As mentioned above, you’ll need to grab a copy of the TeehanLax Baseline Grid. Extract the contents of teehanlax_baseline_grid.zip, open the Teehanlax Baseline Grid folder and drag the grid2.psd into Photoshop.

The first thing we’re going to do is select all the existing layers in the document and delete them. All, that is, except the “Marks” folder. Once done, lock the Marks folder in the layers panel.

We’re going to be building a fairly lengthy layout, so go ahead and change the height of the document. To do that apply the following setting by going to Image > Canvas Size, changing the height and setting the Anchor to Top Center.

Click View > Extras (to view our Guides), Rulers (to view the Rulers).

Step 2: Creating the Background

Create a new layer, call it “BG”, select Paint Bucket Tool (G), fill the background with this (white) color value: #FFFFFF. Then go to Filter > Noise > Add Noise and apply the following settings to give the background a soft noise effect.

• Amount: 3.
• Distribution: Uniform.
• Monochromatic: Check.

Step 3: Creating the Navigation Bar

In order to create the navigation bar, select the Rectangle Tool (U), create a rectangle of 1260x49px but, make sure you already set the color’s Box to this color value: #000000.

Tip: “If you go into the shape creation options there is a checkbox for “snap to pixels”. Now when you create a shape it will always be crisp as the points never land ‘between’ pixels.” – Jeff

From the layers panel, select our navigation bar layer and drag it into a new folder (alternatively, you can just do that by holding down the CTRL+G key) then name the folder Header, remember that we’re working on the header area.

Let’s work on the layer color by using Gradient Overlay. Select the layer shape that we’ve called “navigation bar” and Go to Layer > Layer Style > Gradient Overlay. Apply the following settings.

Great job so far! Let’s move on by applying the rest of the layer style settings.

Gradient Overlay.

• Blend Mode: Normal.
• Opacity: 100%.
• Gradient Reverse: Check.
• Styler: Linear.
• Angle: 90°.
• Scale: 150%.

Inner Shadow.

• Blend Mode: Normal.
• Opacity: 10%.
• Angle: -90.
• Use global light: Uncheck.
• Distance: 5px.
• Choke: 0%.
• Size: 8px.

Drop Shadow.

• Blend Mode: Normal.
• Opacity: 42%.
• Angle: 90.
• Use global light: Uncheck.
• Distance: 2px.
• Spread: 0%.
• Size: 3px.

Excerpt: Smart objects were introduced to Photoshop with the release of CS2. Smart filters were added in CS3. So you’ll need a current version of Photoshop to take advantage of these types of nondestructive techniques. Smart objects and smart filters allow for a flexible workflow. Smart objects point to an original vector object, raster image, or RAW file.

Using smart objects means you’re working with reference images. So when working with smart objects, the changes applied to them do not affect the original image. You can even save these effects and swap images. Smart filters are also not permanent effects, but can be edited or removed. Normal filters are irreversible, at least after saving the document. Psdtuts+

In order to apply Smart Filters follow the image below.

Add a noise effect to our Smart filters layer.

• Amount: 1.
• Distribution: Uniform.
• Monochromatic: Check.

This is how it looks like when you convert a layer to Smart Filters.

I’ve received a bunch of questions about making the stitch effect in Photoshop. It’s not that difficult; just select the Horizontal Type Tool (T), then hold the Negative (-) Key until you have the result below.

Give the layer this color value: #1C1C1C, then apply the setting Drop Shadow.

• Blend Mode: Normal.
• Opacity: 10%.
• Angle: -90.
• Use global light: Uncheck.
• Distance: 1px.
• Choke: 0%.
• Size: 0px.

as you see in the image below we have a pretty convincing stitch effect.

Our navigation is a little darker. I thought maybe I should apply some light, what do you think?. Make a copy of the navigation bar, then clear layer style and set the Fill layer to 0%.

Apply the layer style settings as you see in the image below.

Gradient Overlay.

• Blend Mode: Normal.
• Opacity: 8%.
• Gradient Reverse: Check.
• Styler: Linear.
• Angle: 90°.
• Scale: 100%.

Inner Shadow.

• Color: #FFFFFF.
• Blend Mode: Normal.
• Opacity: 10%.
• Angle: 90.
• Use global light: Uncheck.
• Distance: 1px.
• Choke: 100.
• Size: 0px.

Here’s a before and after reference.

Select the Horizontal Type Tool (T), type your navigation text, then apply the following character settings as you see in the image below.

• Font: Helvetica Neue LT Std.
• Weight: 55 Roman.
• Size: 12px.
• Kerning: Metrics.
• Color: #EBEBEB.
• Anti-Aliasing: Sharp.

Step 4: Creating the Drop-Down Menu

Yep, it’s time to create the drop-down menu. Grab the Rounded Rectangle Tool (U), create a Rounded of 147x120px and remember to maintain the quality of the edges as much as possible – pixel perfection!

Make a selection with the Rectangular Marquee Tool (M), inverse the selection. Now add a new mask to our layer by following the settings Layer > Layer Mask > Reveal Selection. We’ve now effectively trimmed the upper part off.

Inverse.

Layer Mask.

This is how layer mask appears.

Now, let’s give our little rounded shape a gradient overlay effect.

Gradient Overlay.

• Blend Mode: Normal.
• Opacity: 100%.
• Gradient Reverse: Uncheck.
• Styler: Linear.
• Angle: 90°.
• Scale: 100%.

Drop Shadow.

• Blend Mode: Normal.
• Opacity: 76%.
• Angle: -90.
• Use global light: Uncheck.
• Distance: 2px.
• Spread: 0%.
• Size: 0px.

Move to the next step and apply the noise effect.

• Amount: 2.
• Distribution: Uniform.
• Monochromatic: Check.

Select the Rectangular Marquee Tool (M), create a selection of 147x49px, fill it with this color value: #FFFFFF.

Call it “Transparent”, set the Fill layer to 0%.

Having completed that apply the gradient transparent effect as you see in the image below.

And this is how it appears after having applied the gradient transparent effect.

Now what we’re going to do is duplicate a copy of the rounded rectangle layer and set the Fill Layer to 0%. We’ll then apply the gradient transparent effect.

Gradient Overlay.

• Blend Mode: Normal.
• Opacity: 8%.
• Gradient Reverse: Uncheck.
• Styler: Linear.
• Angle: 90°.
• Scale: 100%.

Inner Shadow.

• Color: #FFFFFF.
• Blend Mode: Normal.
• Opacity: 10%.
• Angle: 90.
• Use global light: Uncheck.
• Distance: 1px.
• Choke: 100.
• Size: 0px.

Use the Rectangular Marquee Tool (M) to create the horizontal separating lines with #b4b4b4 as you see in the image below.

Grab the Horizontal Type Tool (T), start typing the elements of the sub-menu, using the following character settings.

• Font: Helvetica Neue LT Std.
• Weight: 55 Roman.
• Size: 12px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #EBEBEB.
• Anti-Aliasing: Sharp.

Remember that the text should be sitting on the Baseline Grid.

Step 5: Create the Logo

Grab the Horizontal Type Tool (T), type the name of your website using the following character settings:

• Font: Arial.
• Weight: Black.
• Size: 48px.
• Kerning: Metrics.
• Color: #202020-D55355.
• Anti-Aliasing: Crisp.

Step 6: Create the Header Banner

Use the Rectangular Marquee Tool (M) to create a selection of 468x60px, fill it with this color value: #474747, then apply a Stroke effect.

Stroke.

• Size: 3px.
• Position: Inside.
• Blend Mode: Normal.
• Opacity: 100%.
• Fill type: Color.
• Color: #FFFFFF.

And this is how it should look once you’ve completed all those steps.

Step 6: Create the Slideshow

Alright, let’s get started with the slideshow. Grab the Rectangle Tool (U), create a rectangle of 700x254px, then apply the following settings.

Drop Shadow.

• Color: #000000.
• Blend Mode: Normal.
• Opacity: 50%.
• Angle: 90.
• Use global light: Uncheck.
• Distance: 0px.
• Spread: 0%.
• Size: 5px.

Drag an image into the document and create a clipping mask by holding ALT+CTRL+G, you can do that by following the setting Layer > Create Clipping Mask.

Clipping Mask.

Once again, grab the Rectangle Tool (U), create a rectangle of 128x211px and apply the clipping mask to it.

Now it’s time to make our slide pop a little by adding some shadows behind the slider. Select Rectangle Marquee Tool (M), make a selection of our layers shape as you see in the image below.

Select the Gradient Tool (G), make sure it’s a transparent gradient shadow.

Here’s a quick tip to make the right shadow; once you select the gradient tool click and drag and make sure your finger is on the SHIFT key.

Repeat the same process with the right layer.

Hmm…I think our Slideshow needs to be stitched, what do you think? Grab the Rectangle Tool (U), make a horizontal rectangle of 2px height, then apply the following pattern settings.

Pattern Overlay.

• Blend Mode: Normal.
• Opacity: 31%.
• Scale: 100%
• Link with layer: Check.

Make a copy of our stitch and drag it a little bit down as you see in the image below.

This how it appears when you’ve apply the stitch effect to the rest of the images.

There’s one more step to be completed for our slideshow, the navigation buttons. Grab the Rounded Rectangle Tool (U), create a rounded shape of 119x19px, then apply the layer style settings to it.

Stroke.

• Size: 1px.
• Position: Outside.
• Blend Mode: Normal.
• Opacity: 22%.
• Fill type: Pattern.
• Scale: 100%
• Link with layer: Check.

Drop Shadow.

• Color: #000000.
• Blend Mode: Normal.
• Opacity: 20%.
• Angle: 90.
• Use global light: Uncheck.
• Distance: 0px.
• Spread: 0%.
• Size: 3px.

Once again, select the Rounded Rectangle Tool (U), create a rounded shape, give the layer this color value: #DFDFDF, then apply the layer style settings below.

Gradient Editor.

Gradient Overlay.

• Blend Mode: Normal.
• Opacity: 100%.
• Gradient Reverse: Uncheck.
• Styler: Linear.
• Angle: 90°.
• Scale: 100%.

Inner Shadow.

• Color: #000000.
• Blend Mode: Normal.
• Opacity: 12%.
• Angle: 120°.
• Use global light: Check.
• Distance: 2px.
• Choke: 0%.
• Size: 2px.

Use the same tool to create the rest of the buttons.

We’re not done yet! We need to do one more thing, we’re going to create a small icon under our slideshow. Select the Custom Shape Tool (U), then select the shape as on the image below.

Editor’s note: I’ve no idea what this UI element is for! We’ll put it down to designer’s discretion :)

Give the layer shape this color value: #FFFFFF

Grab the Polygonal Lasso Tool (L), split the half of the shape by making a selection as you see in the image below.

Remember how we applied clipping masks earlier? Alright then, give our shape a layer mask.

And there we are, we’ve done creating our slideshow.

Step 7: Create the Categories

Let’s start first with the Love Button. Select Rectangle Marquee Tool (M), create a vertical rectangle of 60px, use the gradient tool to make a transparent shadow.

Change the opacity of our layer to 10%.

Select the Rectangle Tool (U), create a vertical rectangle of 1x173px, then apply the following settings. Remember that we always set the fill of the layer to 0%.

Pattern Overlay.

• Blend Mode: Normal.
• Opacity: 25%.
• Scale: 100%
• Link with layer: Check.

Make a copy of vertical layer, drag it a little bit to the right as you see in the image below.

Let’s add text to our love button. Select Horizontal Type Tool (T), type a number, then apply the following character settings.

• Font: Arial.
• Weight: Bold.
• Size: 28px.
• Kerning: Metrics.
• Color: #E0E0E0.
• Anti-Aliasing: Sharp.

Loves.

• Font: Georgia.
• Weight: Bold Italic.
• Size: 21px.
• Kerning: Metrics.
• Color: #E0E0E0.
• Anti-Aliasing: Sharp.

We’ll finish the love button by creating a heart shape. Select the Custom Shape Tool (U), pick the heart shape, give the layer shape this color value: #D25455.

Having completed the love button let’s move to the next step, placing the text and thumbnail images. Select the Horizontal Type Tool (T), type the name of our category which in this case is “Business > Gamification”, then apply the following character settings.

Category.

• Font: Georgia.
• Weight: Bold Italic.
• Size: 13px.
• Kerning: Metrics.
• Color: #5E5E5E.
• Anti-Aliasing: Crips.

Title.

• Font: Helvetica Neue LT Std.
• Weight: 55 Roman.
• Size: 18px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #5E5E5E.
• Anti-Aliasing: Crips.

Posted by, Date, Comments.

• Font: Georgia.
• Weight: Regular.
• Size: 13px.
• Kerning: Metrics.
• Color: #5E5E5E-#AAAAAA.
• Anti-Aliasing: Crips.

Description.

• Font: Arial.
• Weight: Regular.
• Size: 13px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #5E5E5E.
• Anti-Aliasing: Crips.

Tags.

• Font: Georgia.
• Weight: Regular.
• Size: 11px.
• Kerning: Metrics.
• Color: #5E5E5E.
• Anti-Aliasing: Crips.

• Font: Georgia.
• Weight: Regular.
• Size: 13px.
• Kerning: Metrics.
• Color: #AAAAAA.
• Anti-Aliasing: Crips.

It’s time to create the Thumbnail Image. Grab the Rectangle Tool (U), create a rectangle of 160x157px, apply the following layer style settings.

Stroke.

• Size: 3px.
• Position: Inside.
• Blend Mode: Normal.
• Opacity: 100%.
• Fill type: Color.
• Color: #FFFFFF.

Drop Shadow.

• Color: #000000.
• Blend Mode: Normal.
• Opacity: 20%.
• Angle: 90°.
• Use global light: Uncheck.
• Distance: 0px.
• Spread: 0%.
• Size: 3px.

Add a new image to our layer shape and merge the image with the layer shape by applying the Mask Technique; Layer > Create Clipping Mask.

We’re close to finishing the first category. Grab the Rectangle Tool (U), use it to create a rectangle of 1px height as you see in the image below, then apply the following settings to it.

Pattern Overlay.

• Blend Mode: Normal.
• Opacity: 10%.
• Scale: 100%
• Link with layer: Check.

This is how it should look once you’ve create the rest of the categories. Remember that between every category is 29px height white space.

Step 8: Create the Old Posts

In order to create the old posts, first grab the Rectangle Tool (U) and create a rectangle of 280x11px.

Create an empty space by making a selection of 100px, remember to cut the part of the layer off, making sure that you have used the mask technique.

This is the empty space where we are going to add our “old posts” text.

Apply the Layer style settings.

Pattern Overlay.

• Blend Mode: Normal.
• Opacity: 10%.
• Scale: 100%
• Link with layer: Check.

Type in “OLD POSTS”, Then apply the following character settings.

• Font: Helvetica Neue (TT).
• Weight: Bold.
• Size: 14px.
• Kerning: Metrics.
• Color: #999999.
• Anti-Aliasing: Crisp.

Create a small vertical line using Rectangle Tool (U) with 1px, then apply the stitch effect to it. Remember to set the fill opacity to 0%.

Pattern Overlay.

• Blend Mode: Normal.
• Opacity: 10%.
• Scale: 100%
• Link with layer: Check.

Grab the Rectangle Tool (U), create a rectangle of 60x61px, apply the same settings as we did with the category thumbnail image.

Stroke.

• Size: 3px.
• Position: Inside.
• Blend Mode: Normal.
• Opacity: 100%.
• Fill type: Color.
• Color: #FFFFFF.

Drop Shadow.

• Color: #000000.
• Blend Mode: Normal.
• Opacity: 20%.
• Angle: 90°.
• Use global light: Uncheck.
• Distance: 0px.
• Spread: 0%.
• Size: 3px.

Add an image to it and you’ll have this result.

Select the Horizontal Type Tool (T), type the name of our category and the date, then apply the following character settings.

• Font: Georgia.
• Weight: Regular.
• Size: 12px.
• Kerning: Metrics.
• Color: #5E5E5E-AAAAAA.
• Anti-Aliasing: Crisp.

Title.

• Font: Georgia.
• Weight: Regular.
• Size: 18px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #5E5E5E.
• Anti-Aliasing: Crips.

This how is looks like when you create the rest of the categories, between every category there’s 18px of white space .

Step 9: Create the Next page

In order to create the next page, grab the Rectangle Tool (U), create a rectangle of 35x37px, give the layer shape this color value: #333333.

Once again, grab the rectangle Tool (U), create the rest of the shapes, give the layer this color value: #CCCCCC.

Select the Horizontal Type Tool (T), type the numbers of the pages, then apply the following character settings as you see in the image below.

• Font: Helvetica Neue LT Std.
• Weight: 55 Roman.
• Size: 13px.
• Kerning: Metrics.
• Color: #5E5E5E.
• Anti-Aliasing: Crisp.

Grab the Pencil Tool (B) and (carefully!) create the little pixel icon shown here.

Step 10: Create the “Social Media” Section

Grab the Rectangle Tool (U), create a rectangle of 300x100px as we did with the old posts section, make an empty space of 100px, then apply the same settings. We’ll have this result below.

Type the subscribe text, then apply the following character settings to it.

• Font: Helvetica Neue (TT).
• Weight: Bold.
• Size: 14px.
• Kerning: Metrics.
• Color: #888888.
• Anti-Aliasing: Crisp.

It’s time to add social media icons. We’ll use Subscribe and Twitter icons, so grab some suitable icons (try these from Design Kindle) and drag a couple into your document. Then apply the following character settings.

Number of subscribers.

• Font: Georgia.
• Weight: Regular.
• Size: 20px.
• Kerning: Metrics.
• Color: #444444.
• Anti-Aliasing: Crisp.

Subscribers.

• Font: Georgia.
• Weight: Regaluar.
• Size: 13px.
• Kerning: Metrics.
• Color: #999999.
• Anti-Aliasing: Crisp.

Apply the same settings to the twitter section as you see in the image below.

And this is how it appears once you’re done.

Step 10: Create the “Search Box” Section

In order to create the search box section, grab the Rounded Rectangle Tool (U), create a rounded shape of 220×31, then apply the following layer style settings.

Gradient Editor.

Gradient Overlay.

• Blend Mode: Normal.
• Opacity: 100%.
• Gradient Reverse: Check.
• Styler: Linear.
• Angle: 90°.
• Scale: 100%.

Stroke.

• Size: 1px.
• Position: Inside.
• Blend Mode: Normal.
• Opacity: 22%.
• Fill type: Pattern.
• Scale: 100%
• Link with layer: Check.

It should look something like this:

Once again, grab the Rounded Rectangle Tool (U), create the button shape, give the layer shape this color value: #2D2D2D, convert the shape to a Smart Filter by going to Filter > Convert for Smart Filters, then apply the following settings.

Gradient Overlay.

• Blend Mode: Soft Light.
• Opacity: 60%.
• Gradient Reverse: Check.
• Styler: Linear.
• Angle: 90°.
• Scale: 100%.

Add Noise.

• Amount: 2.
• Distribution: Uniform.
• Monochromatic: Check.

Select the Horizontal Type Tool (T), type “Search Here” in the form and “Search” in the button form, then apply the following character settings.

• Font: Helvetica Neue (TT).
• Weight: Bold.
• Size: 12px.
• Kerning: Metrics.
• Color: #D8D8D8.
• Anti-Aliasing: Crisp.

Step 11: Create the “Sponsors” Section

Download or create an advertising banner of 125x125px as you see in the image below.

Step 11: Create the “Most Popular” Section

Grab the Rounded Rectangle Tool (U), create a rounded form of 368x301px, set the fill layer to 0%, then apply following layer style settings to it.

Drop Shadow.

• Color: #000000.
• Blend Mode: Normal.
• Opacity: 28%.
• Angle: 90°.
• Use global light: Uncheck.
• Distance: 0px.
• Spread: 0%.
• Size: 3px.

This is how it appears now. Make sure you’ve already set the fill layer to 0% so we can work with an empty form.

Again, grab the Rounded Rectangle Tool (U) and let’s work on the above part which is “TAB”. Create a rounded shape of 230x36px, give the layer shape this color value: #F4F3F3, then apply the following settings.

Gradient Overlay.

• Blend Mode: Overlay.
• Opacity: 50%.
• Gradient Reverse: Check.
• Styler: Linear.
• Angle: 90°.
• Scale: 130%.

Add Noise.

• Amount: 1.
• Distribution: Uniform.
• Monochromatic: Check.

Grab the Rectangle Tool (U), make three vertical lines, give the layer shape this color value: #DEDEDE as you see in the image below.

Grab the Horizontal Type Tool (T), type the names of the most popular section using the following character settings.

• Font: Helvetica.
• Weight: Bold.
• Size: 12px.
• Kerning: Metrics.
• Color: #555555.
• Anti-Aliasing: Crisp.

In this step we’re going to create a small thumbnail image, grab the Rectangle Tool (U), create a rectangle of 40x43px, then apply the following layer style settings.

Stroke.

• Size: 2px.
• Position: Inside.
• Blend Mode: Normal.
• Opacity: 100%.
• Fill type: Color.
• Color: #FFFFFF.

Drop Shadow.

• Color: #000000.
• Blend Mode: Normal.
• Opacity: 47%.
• Angle: 90°.
• Use global light: Uncheck.
• Distance: 0px.
• Spread: 0%.
• Size: 2px.

Add an image to it and you’ll have this result.

Grab the Horizontal Type Tool (T), type the name of our posts, then apply the following character settings.

• Font: Helvetica Neue LT Std.
• Weight: 55 Roman.
• Size: 14px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #444444.
• Anti-Aliasing: Crisp.

Date.

• Font: Georgia.
• Weight: Italic.
• Size: 12px.
• Kerning: Metrics.
• Color: #C0C0C0.
• Anti-Aliasing: Crisp.

Create a stitch line of 368x1px.

This is how it looks like once you’ve completed all the steps above. Make six copies of it.

Step 12: Create the “News Subscribe” Section

Make a copy of search box folder and change the name of “Search here” To “Enter your email” and “Search” to “Subscribe”. Simple!

Step 13: Create the “Categories and Pages” Section

In order to create the categories and pages section, grab the Horizontal Type Tool (T), type the name of your categories, then apply the following character settings as you see in the image below.

• Font: Helvetica Neue (TT).
• Weight: Bold.
• Size: 12px.
• Kerning: Metrics.
• Leading: 36px.
• Color: #5E5E5E.
• Anti-Aliasing: Crisp.

Right.

• Font: Helvetica Neue (TT).
• Weight: Bold.
• Size: 12px.
• Kerning: Metrics.
• Leading: 36px.
• Color: #5E5E5E.
• Anti-Aliasing: Crisp.

This is the final result of our categories and pages section.

Step 14: Create the “Video of the week” Section

Grab the Rectangle Tool (U), create a rectangle of 300x181px, add an image to it, then apply the following layer style settings.

Stroke.

• Size: 3px.
• Position: Inside.
• Blend Mode: Normal.
• Opacity: 100%.
• Fill type: Color.
• Color: #FFFFFF.

Drop Shadow.

• Color: #000000.
• Blend Mode: Normal.
• Opacity: 12%.
• Angle: 90°.
• Use global light: Uncheck.
• Distance: 0px.
• Spread: 0%.
• Size: 3px.

This is the final result of our “video of the week” area.

Step 15: Creating the Footer Area

Grab the Rectangle Tool (U), create a rectangle of 1260×721, give the layer shape this color value: #2D2D2D, then apply the following setting to it.

Add Noise.

• Amount: 1.
• Distribution: Uniform.
• Monochromatic: Check.

Once again, grab the Rectangle Tool (U), create the above part of 19px height, give the layer shape this color value: #2D2D2D.

Remember the stitch technique? alright then, apply it to the above part.

Grab the Horizontal Type Tool (T), type the name of your website logo using the following character settings.

• Font: Arial.
• Weight: Black.
• Size: 13px.
• Kerning: Metrics.
• Color: #202020-D55355.
• Anti-Aliasing: Crisp.

Create a rectangle shape of 60x10px, set the fill layer to 0%, then apply the following pattern settings.

Pattern Overlay.

• Blend Mode: Normal.
• Opacity: 34%.
• Scale: 100%
• Link with layer: Check.

Grab the Horizontal Type Tool (T), type the description of your website using the following character settings.

• Font: Arial.
• Weight: Regular.
• Size: 13px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #E0E0E0.
• Anti-Aliasing: Crisp.

Twitter.

• Font: Helvetica Neue (TT).
• Weight: Bold.
• Size: 14px.
• Kerning: Metrics.
• Color: #FFFFFF.
• Anti-Aliasing: Crisp.

Title.

• Font: Arial.
• Weight: Regular.
• Size: 13px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #E0E0E0.
• Anti-Aliasing: Crisp.

Date.

• Font: Georgia.
• Weight: Italic.
• Size: 12px.
• Kerning: Metrics.
• Color: #8F8F8F.
• Anti-Aliasing: Crisp.

Create a horizontal separator line of 221px as you see in the image below.

This how it looks like once you’ve done all the steps above, make five copies of it.

Apply the same setting to recent post section.

• Font: Arial.
• Weight: Regular.
• Size: 13px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #E0E0E0.
• Anti-Aliasing: Crisp.

Add a Flickr section as you see in the image below.

Grab the Rectangle Tool (U), create a rectangle of 73px height for the copyright bar, then apply the stitch technique.

Grab the Horizontal Type Tool (T), type the name of copyright, then apply the following character settings.

• Font: Arial.
• Weight: Regular.
• Size: 13px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #E0E0E0.
• Anti-Aliasing: Crisp.

The copyright of the designer.

• Font: Arial.
• Weight: Regular.
• Size: 13px.
• Kerning: Metrics.
• Leading: 18px.
• Color: #E0E0E0.
• Anti-Aliasing: Crisp.

Conclusion

This has been a lengthy walk through, and I hope that you’ve learned something new and useful. You should now be able to apply some of these techniques to your own designs, making your own decisions along the way. If you have any questions feel free to ask in the comments below and I’ll do my best to help. Thanks for following along!