In this tutorial, we’re going to learn how to create a sleek & clean portfolio/blog Website interface design inside Adobe Photoshop. As we go through, we will deal with selections, layer styles, some basic typography, and so on…We’ll also use 960 Grid System to keep our layout nicely well-aligned. So come on in, let’s get started and have some fun!

Tutorial Details

• Program Used: Adobe Photoshop CS3 or higher.
• Difficulty: Intermediate
• Estimated Completion Time: Around 2-3 hours

Final Outcome

Take a look at what we’ll be creating together. Click the image to enlarge.

Step 1

As I mentioned earlier, we’ll use 960 Grid System to keep everything aligned. Once it’s downloaded, open the document “960_grid_24_col.psd” up in Photoshop.

Since we’ll use guides a little bit too much, we need to get them—and the Rulers—viewed. In order to do that, go to View > Extras, Rulers, and Snap (to make our objects snap in alignment with the guides). By the way, the keyboard shortcuts of these three commands are definitely ones you wanna memorize.

Also, notice that the height of the final outcome is taller than the current one. So we need to adjust our Canvas Size, by going to Image > Canvas Size > Height: 1637px.

We need to fill our website background with a light gray color. To do that, create a new layer, create a selection over the whole canvas (1020x1637px) using the Rectangular Marquee Tool (M), set your foreground color to: #f5f3f4 then click Shift+Backspace in order to fill the selection with that foreground color.

Step 2

In this step we’ll create a thin bar at the top of the page, that would state your availability status. So go ahead and grab the Rectangular Marquee Tool (M), create a selection of 1020x40px, and fill it with this color value: #e5e6e8

Type some text, using the Horizontal Type Tool (T),  that represents your availability status (like: Available for hire), using the following character settings:
(Notice that I’ll only mention the settings that may be changed, the other settings can be seen in the image below. For example: the default Tracking value is set to zero, which is what we want, which means it doesn’t need to be changed, therefore, I won’t mention it below).

• Font Family: Archer (learn more & buy at Typography.com)
• Font size: 15px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #9a1447
• Kerning: Optical

And type your email, so that people can get in touch, using the following character settings:

• Font Family: Georgia (available in all the operating systems)
• Font size: 15px
• Font weight: Italic
• Anti-aliasing setting: Smooth
• Color: #9a1447
• Kerning: Optical

Step 3

Let’s create a new bar that will contain the Website’s logo and navigation. We’ll start by creating a selection of 1020x100px using the Rectangular Marquee Tool (M). Then filling it with this color value: #9a1447

Using the Horizontal Type Tool (T), type your Website’s name, and apply the following character settings to it:

• Font Family: Gotham Rounded (learn more & buy at Typography.com)
• Font size: 45px
• Font weight: Book
• Anti-aliasing setting: Smooth
• Color: any color for now, as we’ll apply a Gradient Overlay
• Kerning: Optical

Now, we’ll go ahead and apply a Gradient Overlay to our text, according to the following image:

Select the Horizontal Type Tool (T), and type your navigation text using the following character settings:

• Font Family: Gotham Rounded
• Font size: 25px
• Font weight: Light
• Anti-aliasing setting: Smooth
• Color: #f5f3f4
• Kerning: Optical

We’ll separate these words using  by putting small circles between them. So using the Ellipse Tool (U) create a perfect circle (hold down the Shift key while drawing) of 5x5px, and fill it with: #ffffff.

In order to align the vertical centers of the logo/navigation with its background (the dark India pink bar), we’ll select the layers of the both of them, then click on “Align vertical centers” in the control bar while having both layers selected.

As you work with Photoshop, I really encourage you to get into the habit of giving your layers reasonable names, and even grouping them. — I personally rename every single layer in my document! Take a look:

Step 4

It’s time to create an area where we can write some welcoming text to our site visitors, and put some images of our featured work. We’ll start by creating a selection using the Rectangular Marquee Tool (M) of 1020x300px.

Let’s give this selected area a gradient color overlay, why don’t we? So select the Gradient Tool (G), open up the Gradient Editor dialogue box, set your color values from: #ececee to: #f5f3f4, and while selecting Radial Gradient as your dragging option, drag from the top-right of your selection to the bottom left of it—you may also hold down the shift key to constrain your angle.

Grab the Single Row Marquee Tool, and create two selections each one of them is: 1020x1px—don’t worry about the dimensions of your selection, since the tool itself will do that automatically—place them like in the image below, and finally fill them with white (#ffffff).

Step 5

Drag two new horizontal guides according to the following image. These two guides will indicate the top and bottom borders of our image slider—that we’ll start creating in just a moment.

Let’s start creating our image slider! First, we’ll create a holder for our images, we’ll do so by creating a rounded rectangle, using the Rounded Rectangle Tool (U) of: 390x145px, radius of: 3px—don’t worry about its fill color, an image will be placed there, anyways.
Call this layer: “image_holder.”

Now let’s apply some Layer Style to our image holder to stop it from looking plain. Will leave you with the image below…

In order to place an image of a featured piece of work, go to File > Place > locate to where your image is > Place. Make sure that the layer of your placed image is right on top of “image_holder” layer. Then right-click on your image’s layer and choose: “Create Clipping Mask.”

What we’ll create now is an arrow to slide between images. So we’ll draw a circle using the Ellipse Tool (U) of 40x40px, fill it with Black (#000000) and take its opacity down to: 30%.

Using the Custom Shape Tool (U) create a 20x20px arrow and fill it with any color just for now.

Apply some Layer Style to it according to the following image:

Drag a new horizontal guide according to the following image. This will indicate the top border of the text that will come below the image.

Using the Horizontal Type Tool (T) type the name of your featured project/design using the following character settings:

• Font Family: Archer
• Font size: 20px
• Font weight: Medium
• Anti-aliasing setting: Sharp
• Color: #ab114a
• Kerning: Optical

Beneath your title, type a very brief description about your project; using the following character settings:

• Font Family: Georgia
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #630d28
• Kerning: Optical

Step 6

Drag a new horizontal guide according to the following image:

It’s time to write our Website’s first read—well, probably—the welcoming title, using the Horizontal Type Tool (U), and the following character settings:

• Font Family: Gotham Rounded
• Font size: 41px
• Font weight: Light
• Anti-aliasing setting: Smooth
• Color: #ac114a
• Kerning: Optical
• Tracking: 5

Notice: I wanted my title to fit in 10 columns of my gird, but it was a little bit short, so I had to increase my tracking value. However, if you’ll write another title—you’ll probably do that—then you should adjust your tracking value depending on how long your title is. For example: if it was too long, then you may have to decrease your tracking value.

Then type a subtitle using the following character settings:

• Font Family: Archer
• Font size: 25px
• Font weight: Medium
• Anti-aliasing setting: Smooth
• Color: #9a1447
• Kerning: Optical

I know it’s a little bit weird, but I’ll start with creating the buttons first, then, typing the welcoming text (the text between the title and the two buttons). So using the Rounded Rectangle Tool (U), create a 150x40px rounded rectangle, with 3px radius, and fill it with any color for now—obviously, as we’ll apply a Gradient Overlay.

Now let’s apply some Layer Style to our plain old button/rectangle so that it looks more interesting. Will leave you with the image below:

Now using the Horizontal Type Tool (T) type some text inside the button (“hire us,” for example), and apply the following character settings to it:

• Font Family: Gotham Rounded
• Font size: 24px
• Font weight: Medium
• Anti-aliasing setting: Smooth
• Color: #ffffff
• Kerning: Optical
• Tracking: -25

Apply a Drop Shadow to your text. Use the image below for reference.

Duplicate the button you just created, move to the right, and change the text on it (maybe something like: “see more.”)

Back to the welcoming/about text we’ve not written yet. Using the Horizontal Type Tool (T), create a text block and type around four lines inside of it; using the following character settings:

• Font Family: Georgia
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #9a1447
• Kerning: Optical
• Leading: 25px

Our text now is probably not centrally aligned between the title and the two buttons. Maybe you can align it visually. But *personally* I use a little trick—that you may be familiar with—to do that. Using the Rectangle Tool (U), create a rectangle that fills the area where you want to align your text (the area between the title and the two buttons, in our case), select the layer of the rectangle that you’ve just drawn, and shift click to select the text’s layer, then click on “Align vertical centers” in the control panel—while having both layers selected.

Don’t forget to keep your layers panel organized. Here’s how mine looks:

Step 7

Drag a new horizontal guide according to the following image.

Using the Rectangular Marquee Tool (M) create a selection of 1020x50px and fill it with this color value: #630d28

Grab the Rounded Rectangle Tool (U) and create a 190x30px rounded rectangle, with 3px radius and again fill it with any color just for now.

We’ll apply some Layer Style to it to stop from looking flat. Follow up with the image below:

Using the Horizontal Type Tool (T) type some words inside the rounded rectangle that shows that this is a search box, using the following character settings:

• Font Family: Georgia
• Font size: 15px
• Font weight: Italic
• Anti-aliasing setting: Smooth
• Color: #636363
• Kerning: Optical

Next to this field, type the word “search,” using the following character settings:

• Font Family: Archer
• Font size: 15px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #f5f3f4
• Kerning: Optical

Now let’s create the “GO” button. Create a rounded rectangle of 25x25px, with 5px radius, and fill it with this color value: #a41240.

Inside that rounded rectangle and using the Horizontal Type Tool (T), type the word “GO” and apply the following character settings to it:

• Font Family: Gotham Rounded
• Font size: 12px
• Font weight: Medium
• Anti-aliasing setting: Smooth
• Color: #f5f3f4
• Kerning: Optical

Then, apply a Drop Shadow to it; according to the following image:

We’ll finish off this step by creating a simple breadcrumb. So grab the Horizontal Type Tool, and type this sentence “You are here: Home > Latest Stuff”—or whatever that tells that this is a breadcrumb. And apply the following character settings to your text:

• Font Family: Archer
• Font size: 15px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #f5f3f4
• Kerning: Optical

Now tell her where she is, again, using the following character settings:

• Font Family: Georgia
• Font size: 15px
• Font weight: Italic
• Anti-aliasing setting: Smooth
• Color: #f5f3f4
• Kerning: Optical

Step 8

It’s time to start working on the content area. We’ll start by dragging a new horizontal guide according to the following image:

Oh, before we go any further, would like to ask you a question, mind you! Have you organized your layers panel?

Okay, back to our content area, let’s start working on the sidebar. So using the Line Tool (U) create a 1x43px line, fill it with this color value: #630d28, and place it like in the image below:

Using the Horizontal Type Tool (T), type a title (for example: “Advertisement.”) using the following character settings:

• Font Family: Gotham Rounded
• Font size: 30px
• Font weight: Light
• Anti-aliasing setting: Smooth
• Color: #630d28
• Kerning: Optical

Beneath your title, type a sub-title to support it. Using the following character settings:

• Font Family: Archer
• Font size: 20px
• Font weight: Medium
• Anti-aliasing setting: Smooth
• Color: #ac114a
• Kerning: Optical

Drag a couple of new horizontal guides according to the following image:

Using the Rectangle Tool (U), we’ll create a 110x110px rectangle, which will work as an ad block. Also, fill it with any color cause an image will be there, anyway. After you do that, apply a Stroke to it, use the image below for reference.

Make two copies of your ad block, then align them like in the image below:

Step 9

Drag a new horizontal guide according to the following image:

Create a new title using the same techniques we’ve gone through in the previous step.

Assuming your second title was “Categories,” let’s type some popular categories in our Website, using the following character settings:

• Font Family: Georgia
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #630d28
• Kerning: Optical
• Leading: 30px

Using the Ellipse Tool (U), create a 6x6px circle next to each category, and fill it with this color value: #acaead.

Step 10

Create yet another title—something that has to do with Twitter this time—using the same techniques we’ve used above.

Now type some text as an example of a tweet, using the following character settings:

• Font Family: Georgia
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #630d28
• Kerning: Optical
• Leading: 20px

After that, let’s type some information about the tweet, using the following character settings:

• Font Family: Archer
• Font size: 15px
• Font weight: Semi-bold
• Anti-aliasing setting: Smooth
• Color: #636363
• Kerning: Optical

Make another copy of your tweet and its info, and make sure to align it according to the following image:

We’ll end this step the same way we started it. By dragging a new horizontal guide according to the following image, that will indicate the bottom border of our content area.

Step 11

It’s time to design the featured blog posts area. Again, create a title for it like in the sidebar and make sure to align it  according to the following image:

Using the Rectangular Marquee Tool (M) create a selection of around: 253x115px, fill it with any color, and apply a Stroke to it. Use the image below for reference.

Place an image, and create a clipping mask for it—we already have seen how to do that.

We’ll now create a small bar that will contain some information about the blog post. So using the Rectangular Marquee Tool—or the Rectangle Tool (U) or whatever tool you prefer to use—create a 253x20px rectangle, fill it with: #9a1447, and leave 10px between it and the image above it.

Inside that rectangle, write some information about your blog post—I’ve written its categories and number of comments—using the following character settings:

• Font Family: Archer
• Font size: 15px
• Font weight: Medium
• Anti-aliasing setting: Smooth
• Color: #f5f3f4
• Kerning: Optical

Drag a new horizontal guide according to the following image:

Using the Horizontal Type Tool (T), type the title of your blog post, using the following character settings:

• Font Family: Archer
• Font size: 25px
• Font weight: Medium
• Anti-aliasing setting: Smooth
• Color: #636363
• Kerning: Optical

Now, and again, using the Horizontal Type Tool (T), write a few lines of your post, using the following character and paragraph settings:

• Font Family: Georgia
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #630d28
• Kerning: Optical
• Leading: 26px
• Paragraph: Justify all

Also, make sure to leave 20px between your body text and your title.

Let’s create the “Read More >>” button, why don’t we? Create a 110x20px rectangle and fill it with this color value: #9a1447. Also, make sure to align it according to the following image:

Type the word “Read More >>” inside of it, using the following character settings:

• Font Family: Archer
• Font size: 15px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #ffffff
• Kerning: Optical

Then, apply a Drop Shadow to it. Settings can be seen in the image below:

Make a copy of this blog post and align it to the right. Use the image below for reference.

Step 12

In this step we’ll create an area for our featured work. So, again, create another title, like the others we created before, and make sure to align it according to the following image:

Place an image of a featured work with the same specifications of the blog post’s image.

Type a title and a short description using the same character settings we applied for the blog post’s text.

Create a “Case Study >>” button, that looks like the “Read More >>” one. Also align it according to the following image:

Step 13

Drag a new horizontal guide according to the following image, that will indicate the top border of our footer area—that we’re just about to start creating.

Using the Rectangular Marquee Tool (M), create a selection of 1020x300px.

Fill your selection with this color value: #9a1447.

Create another selection, this time of: 1020x290px (which means to leave 5px in the top and the bottom).

Grab the Gradient Tool (G), open your Gradient Editor up, adjust your colors/settings according to the following image. With your selection still selected, and with Radial Gradient as your dragging option, drag according to the following image. Make sure to hold down the Shift key to constrain your angle—if necessary.

Step 14

Drag two new horizontal guides according to the following image:

Type the first footer title (“Who’s behind this,” in our case) using the following character settings:

• Font Family: Gotham Rounded
• Font size: 30px
• Font weight: Light
• Anti-aliasing setting: Smooth
• Color: #ffffff
• Kerning: Optical

Use the Line Tool (U) to create a 270x1px, fill it with White (#ffffff), and make sure to align it according to the following image:

Create a 270x70px rectangle—using whatever tool you prefer,—place an image inside of it, using the “Create Clipping Mask” command, and give it a Stroke of 4px and a color value of: #e5e6e8. Finally, don’t forget to align it like in the image below:

Type some text about you, using the following character settings:

• Font Family: Georgia
• Font size: 14px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #ffffff
• Kerning: Optical
• Leading: 27px

Step 15

In this step, we’ll create an area that contains recent comments. So, create another title that says “Latest Comments,” that looks like the title on the left.

Then, type an example of a comment, using the following character settings:

• Font Family: Georgia
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #ffffff
• Kerning: Optical
• Leading: 20px

And type some information about the comment, using these character settings:

• Font Family: Archer / Gotham Rounded
• Font size: 15px
• Font weight: Bold Italic / Medium
• Anti-aliasing setting: Smooth
• Color: #acaead
• Kerning: Optical

Make a duplicate of your comment and its information, and make sure to place them like the image below:

Step 16

The right part of our footer will contain some contact information. So, again, create a new title that looks like the others on the left, also it should say something that has to do with getting in touch. Then, place an image like the one on the left, but this time, it should be an image of map.

Now we’ll create a button that says “Locate Us.” So, using the Rounded Rectangle Tool (U), create a 100x30px rectangle, with 5px radius, fill it with: #f5f3f4, and take its Opacity down to: 50%.

Type the word “Locate Us” inside the rounded rectangle, using the following character settings:

• Font Family: Gotham Rounded
• Font size: 15px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #ffffff
• Kerning: Optical

Then, apply a Drop Shadow to it, so that it looks more interesting. Follow up with the image below:

It’s time to add some contact information. Grab the Horizontal Type Tool (T), and type some information. We’ll start by typing “Address,” using the following character settings:

• Font Family: Gotham Rounded
• Font size: 15px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #ffffff
• Kerning: Optical
• Caps: All Caps

Then, type the address itself, using the following character settings:

• Font Family: Archer
• Font size: 15px
• Font weight: Bold Italic
• Anti-aliasing setting: Smooth
• Color: #ffffff
• Kerning: Optical
• Leading: 20px

Keep adding more information…

So far, probably, the centers of the three parts of our footers are not horizontally aligned. So, we’ll put each one of them inside an individual Layers Group, select the three of the groups, and click on “Distribute horizontal centers.”

Step 17

Using the Rectangular Marquee Tool (M), create a selection of: 1020x40px and fill it with this color value: #e5e6e8. Call this layer: “footer_small_bg”

Use the Single Row Marquee Tool, to create a selection like the one in the image below and fill it with White (#ffffff).

Type your footer navigation text, using the following character settings:

• Font Family: Archer
• Font size: 15px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #9a1447 – #636363
• Kerning: Optical

Then write your copyright text, using the same character settings shown above.

Put the text of the footer in an individual group, Shift click and select the layer “footer_small_bg” then click on “Align vertical centers” in the control panel, to make sure they’re vertically well-aligned.

That’s it, my friends!

It took a little bit of time, but there we have it. We’ve created a sleek Website layout/interface inside Adobe Photoshop. Really hope you’ve found this tutorial useful, and—more importantly—enjoyed it! If you have any comments, criticism, need help, or whatever, just drop a comment! :)