Create a Slick and Minimalist Web Layout in Photoshop

Jan 8 2010 by Mahmoud Khaled | 97 Comments

In this Photoshop web design tutorial, we’re going to learn how to create a slick and minimal-looking website layout. We will use the 960 Grid System as a template to make it easy to align the design elements on the layout.

Preview

Here’s a preview of what we’ll be creating together, click the image to enlarge.

Create a new Photoshop document

1 We’ll be using the 960 Grid System (download it at http://960s/) as a starting template. Once downloaded, ppen up the file called 960_grid_12_col.psd and then hide the group called 12_col_grid.

Create a new Photoshop document

Creating the background

2 First of all, right-click on the Background layer in the Layers Panel and then choose Layer From Background. This will unlock the Background layer so that it’s editable. I named the Background layer as bg.

Creating the background

3 Now select the Gradient Tool (G), set your Foreground color to #efefef and your background color to #cacaca. Select Radial Gradient as the type of gradient in the Options bar. Drag the gradient onto the canvas so that you have something similar to this:

Creating the background

Designing the header section

4 We’ll add a new horizontal guide at the 50px mark from the top of the document to set our top borders. This will mark the location of the layout’s header section.

Designing the header section

5 We’ll start adding our title and slogan; select the Horizontal Type Tool (T) and type your site’s name and your slogan. Here are the font settings I used in the layout:

"YourName"

Font family: Nilland font (get it from dafont.com)
Font size: 33pt
Font weight: Bold
Anti-aliasing setting: Strong
Color: #525252

"some awesome slogan"

Font family: Arial
Font size: 14pt
Font weight: Regular
Anti-aliasing setting: Strong
Color: #207687

6 Align the fonts on the left top, using your guides for accurate placement.

Designing the header section

Creating our navigation

7 Select the Horizontal Type Tool (T) and type the navigation text (home, about us, services, portfolio, and contact) using the following font settings:

Font family: Arial
Font size: 17pt
Font weight: Regular
Anti-aliasing setting: Strong
Color: #525252

8 Use the document’s guides to align the navigation link text like the following image:

Creating our navigation

Creating the search bar

9 Now it’s time to create the search bar that’s situated on the right of the navigation links. Select Rounded Rectangle Tool (U), set the Radius option value to 5px, and then draw the rounded layer shape onto the canvas such that it has 155px width and 20px height, and located at the right of the navigation links.

10 Add an Inner Shadow layer style by double-clicking on the rounded rectangle shape layer in the Layers Panel to open up the Layer Styles dialog box. Use the following settings below for the layer style settings:

Creating the search bar

11 Let’s create the GO button now. Create a new rounded rectangle shape with the same height (20px) and Radius option value (5px), but with a width of 30px.

12 Apply a vertical (90 degrees) Linear Gradient layer style onto the Go button, with the left color stop being #2fa9c1 and the right color stop being #207687.

Creating the search bar

13 And then write any text like "search…" using the Horizontal Type Tool (T) on top of the search bar; use a white color (#ffffff).

14 Using the Custom Shape Tool (U), create a white arrow and align it to the center. I used the custom shape called Arrow 2, which comes standard in Photoshop CS versions. Look for it in the Shape option dropdown menu in the Options bar.

Our search bar should be looking like this:

Creating the search bar

15 Before we move to the next step, just make sure that everything is well-organized in our document. Here’s a screen grab of my Layers Panel as I was developing the layout:

Creating the search bar

Creating the separating lines

16 Using the Line Tool (U), Create two 1px lines on top of each other, with the following color values:

Creating the search bar

Note: There are many ways to set the colors of the line shapes. The first is by setting the Color option in the Options bar before drawing the lines. The other way, if you already drew the lines, is to use a Color Overlay layer style. I’ll let you decide how to do this.

Adding the sub-navigation

17 Type your sub-navigation text using the Horizontal Type Tool (T) using the following settings:

Font family: Arial
Font size: 17pt
Font weight: Regular
Anti-aliasing setting: Strong
Color: #787878

18 Make sure that the separating line is centrally aligned between the main and sub-navigation. Here’s how it should look:

Adding the sub-navigation

Creating the featured designs area

19 We’ll start creating the place where the image of a featured design would be, so we’ll select Rounded Rectangle Tool (U), and we’ll create a rectangle of 335px width and 128px height, and a Radius option set to 5px.

20 Apply a gradient Stroke layer style to it by setting the Fill Type option to Gradient. Modify the gradient colors so that it starts at #31aeca and ends at #2b9ab2.

Creating the featured designs area

21 Call this newly created layer photo_holder.

22 Well, let’s add an image of a featured design by going to File > Place. This will open up the Place dialog box where you can select an image to place on our canvas. Pick an image, and then press the Place button when you’re done.

23 Make sure that the layer of the image is above the photo_holder layer; if it isn’t, move it. Right-click on the image layer and choose Create Clipping Mask.

Creating the featured designs area

24 Modify the size of the image to fit; you can use Free Transform (Ctrl/Cmd + T). When you’re happy with the size, Make sure that your image is aligned according to the image above, flushed to the right of the layout design.

Add some content to the design

25 Let’s add some content to our design, but before we do that, we have to set our boundaries for our content. To do that, drag two horizontal guides like in the following image.

Add some content to the design

Add a title and a category

26 Use the following settings for the title and category.

Title (in my case it was "Handstand!")

Font family: Arial
Font size: 20pt
Font weight: Regular
Anti-aliasing setting: Strong
Color: #2197b1

Category (in my case it was "Photoshop design"):

Font family: Arial
Font size: 17pt
Font weight: Regular
Anti-aliasing option: Strong
Color: #313131

Paragraph content

27 Add your paragraph text, using the following image for reference.

Paragraph content

28 Choose the Move Tool (V) in the Tools Panel and select our three text layers in the Layer Panel (hold down Ctrl/Cmd while clicking on them to select all of them).

29 Give them equal spacing using the Distribute top edges option.

Paragraph content

Create the slider control

30 It’s time to create the slider control. Start by duplicating the two lines we’ve created for the navigation, and then resizing them (you can use Free Transform to do this). We’ll make the dark line darker, giving it a color value of #777575.

Create the slider control

31 Then create a small box rectangle shape using the Rectangle Tool (15px wide and 15px high) and apply a Gradient Overlay layer style to it.

Create the slider control

32 Before we move to the next step, we have to organize our layers. Use the following reference image to make sure the layers are in proper order.

Create the slider control

Creating the content boxes

33 First off, we need to set our boundaries. Drag a horizontal guide and put it on the slider line. Leave a 50px gap, and then add another horizontal guide.

Create the slider control

34 Now select the Round Rectangle Tool (U). Create a rectangle of 260px width and 170px height and a color of #d0d0d0. Call this layer bg_1.

35 Align the rectangle like the following reference image, using the Move Tool (V) to position them accurately.

Create the slider control

36 Right-click on the bg_1 layer in the Layers Panel and choose Create Layer Mask from the contextual menu.

37 Select the Gradient Tool (G), set your foreground and background color to Black and White (press D to automatically reset the colors). With a linear gradient, drag from top to bottom until you’re satisfied with the look.

Create the slider control

38 Now let’s create the shadow. Duplicate the bg_1 layer. Name the duplicated layer shadow. Place the layer beneath the bg_1 layer. Then apply a Color Overlay layer style with a dark gray color (#3e3e3e).

Create the slider control

39 While having the shadow layer selected, go Filter > Blur > Gaussian Blur. Set the Blur Radius to 5.0px.

Create the slider control

40 Using Gradient Tool (G), adjust the layer mask until you have something like this:

Create the slider control

41 Add some content to the box. Below, you’ll see what I ended up with.

Create the slider control

42 Group the content layers that you created into a group called content.

43 Now we want to align it. Select the content group, hold down the Ctrl/Cmd key, and select the bg_1 layer in the Layers Panel. Choose the Move Tool (V), and click on the Align horizontal centers option and the Align vertical centers option to position them.

Create the slider control

44 Now make two copies of this box by duplicating the layers of the original content box we just created. Align them, change the content, and don’t forget to add a horizontal guide at the bottom.

Content

45 Let’s check back and make sure that all of our layers are organized; use the screenshot of my layers as reference.

Content

Creating the main content area

46 Leave a 50px gap and drag a new horizontal guide. Start adding your content and align it according to the following image.