Final result:
Sources for the lesson:
- Patterns
- Icons
- Univers Ultra Condensed Font
- Font Univers Light Condensed
- Font Helvetica
- 960 Grid System
Introduction
In this tutorial we will use the 960 Grid System. Download and unzip the archive. Open the “960_grid_12_col.psd” file in Photoshop (you will find it inside the “photoshop” folder, which is located in the “templates” folder).
After you open the .psd file in Photoshop, you will see 12 red bars. We will use this grid throughout the entire lesson. You can hide this grid by clicking on the eye icon near the “12 Col Grid” layer.
During the lesson you will need to create shapes with specific sizes. Therefore, open the Info panel (Window> Info (Window> Info)) and now when you create a shape you can see its exact width and height in the info panel.
Also .psd file contains guides. To hide them, go to the menu View> Show> Guides (View> Show> Guides), or press Ctrl +; I usually hide red stripes and activate guides only when I need them.
Now that we’ve figured out the basics of using the 960 Grid System, we can start creating our layout. Let’s start!
Step 1. Setting up the document
Open the file “960_grid_12_col.psd” in Photoshop. Go to menu Image> Canvas size (Image> Canvas Size) and change the width to 1200px, and the height to 2400px.
Background layer fill with color # 333333. Right-click on the background layer and select Convert to Smart Object (Convert to Smart Object). Go to menu Filter> Noise> Add noise (Filter> Noise> Add Noise) and use the parameters from the screenshot below.
Step 2. Creating the site header background
Create a new group and name it “header”. Choose a tool Rectangle (
Rectangle Tool) and create a 1200x140px shape and color # 30a0b8. Name this layer “header bg”. Right click on the layer and select Convert to Smart Object (Convert to Smart Object). Apply Noise filter to the layer using the options below.
Step 3
Tool Rectangle (Rectangle Tool) create a 4px high rectangle with the color # 33b9d6. Name the layer “top bar” and move it to the top of the larger rectangle.
Step 4. Creating a triangular pattern
Now we will create a pattern that we will use in the header of the site. Create a new document 20x8px. Zoom the image, select the tool Pen 
(Pen Tool) and create a black triangle. Hide the background layer. Go to menu Editing> Define a pattern (Edit> Define Pattern), name the pattern somehow and click OK. Close this document.
Step 5. Apply the pattern
Tool Rectangle (Rectangle Tool) create a 1200x10px shape. Install Fill (Fill) layer at 0%. Name the layer “top pattern”. Double click on the layer to open the Layer Styles window and use the options from the screenshot below.
Step 6. Change the color of the pattern
Now we need to change the color of the triangles and apply a few more layer styles. Right click on the “top pattern” layer and select Convert to Smart Object (Convert to Smart Object). Open the Layer Styles window and use the options from the screenshot below. For the Color Overlay style I used the color # 33b9d6.
Step 7. Duplicate the patterned layer
Duplicate the pattern layer and rename it to the “bottom pattern”. Move it down the caps. Change the color in style Overlaycolors (Color Overlay) at # 30a0b8.
Step 8. Creating a texture for the header
Using tool Rectangle selection
(Rectangular Marquee Tool) create a selection above the site header. Create a new layer and fill the selection with #aaaaaa. Press Ctrl + D to remove the selection. Name this layer “texture” and convert it to a smart object.
We need the texture to be only in the cap area. To do this, hold down the Ctrl key and click on the thumbnails of the “header bg” and “bottom pattern” layers. Make sure the “texture” layer is active and go to the menu Layer> Mask Layer> Show Selected Area (Layer> Layer Mask> Reveal Selection).
Go to menu Filter> Noise> Add Noise (Filter> Noise> Add Noise) and use the parameters from the screenshot below. Then go to Filter> Sketch> Wet Paper (Filter> Sketch> Water Paper). Change the blending mode to Soft light (Soft Light).
Step 9. Adding a logo
Choose a tool Text
(Type Tool) and add the site name on the left side of the header. Activate the guides to make it easier to place. I used the color # e3eef2 and the font Univers Ultra Condensed. Add style Shadow (Drop Shadow) with the following parameters:
Step 10. Create a navigation bar
Create a new group and name it “navigation”. Choose a tool Text (Type Tool) and add your own menu items. I used the white color and Univers Light Condensed font size 18pt. For the best location of menu items use guides. Add style Shadow (Drop Shadow) using the options from the screenshot below.
Download the set of icons and select the icons for your menu. Open these icons in Photoshop and place them above the menu, as shown in the screenshot below.
Step 11. Creating the active menu item
Take the tool Rounded Rectangle
(Rounded Rectangle Tool), set the radius to 2px and create a shape using the color # 3895a8. Move this layer under the navigation layer. Name it “active” and in the Layer Styles window, apply the following styles:
Step 12. Creating a diagonal pattern
Create a new 4x4px document. Increase it, select the tool Rectangle selection (Rectangular Marquee Tool), hold down the key Shift and create four square selections. Create a new layer and fill the selection with black. Remove selection. Hide the background layer and go to the menu. Editing> Define a pattern. Close the document.
Step 13. Create a slider
Create a new group and name it “slider”. Tool Rectangle (Rectangle Tool) create a 1000x350px shape with color # 9eafb2. Name this layer “slider border”. Open the Layer Styles window and use the parameters shown in the screenshot below. Place the rectangle in the center of the document.
Step 14
Create another rectangle 980x330px white. Name this layer “image_holder” and position the rectangle in the center of the previous one. Images will be displayed in this area. Open some image in Photoshop and move it to your document, on top of the “image_holder” layer. Name this layer “image”, right click on it and select Create clipping mask (Create Clipping Mask).
Step 15. Making the switches
Create a new group and name it “right arrow”. Choose a tool Ellipse
(Ellipse Tool) and create a circle of 45x45px color # 33b9d6. Name the layer “circle”. Copy this symbol – “” “, select the tool Text (Type Tool) and press Ctrl + V, place the symbol in the center of the circle. For the arrow symbol, I used the Univers Condensed font with color # f4f4f4.
Duplicate the “right arrow” group and go to the menu Editing> Transform> Flip Horizontal (Edit> Transform> Flip Horizontal). Rename the group to “left arrow” and move it to the left side of the slider.
Step 16. Create a ribbon for the title
Now we will create a ribbon for the title. Later we will use such ribbons in other areas of our template.
Create a new group and name it “headline”. Choose a tool Pen (Pen Tool) and draw a shape like in the screenshot below, the color is # ac1eda. Name this layer “bg” and add the following layer styles:
Step 17. Add a shadow to the ribbon.
Above the layer “bg” create a new layer and name it “shadows”. Right click on the layer and select Create clipping mask (Create Clipping Mask).
Choose a tool Brush
(Brush Tool) and a soft, black brush with Opacity (Opacity) 60% add shadows to tape. Change the brush color to white and add highlights. Set the blending mode for the layer to Soft light (Soft Light) and reduce Opacity (Opacity) up to 70%.
Choose a tool Text (Type Tool) and write the word “Featured” on the tape. I used the white color and font Univers Ultra Condensed. Add a shadow to the text layer using the options from the screenshot below.
Step 19
Select the Line Tool 1px thick and create a black horizontal line 10px wide. Place this line in the upper left corner of the ribbon.
Duplicate the line and move it to the right. Repeat this action until you reach the right corner. Put all the layers with lines in the group and name it “top”. Put the group inside another one and name it “dashed lines”.
Duplicate the “top” group and move the tapes down. Rename the group to “bottom”. Set the blending mode for the “dashed lines” group to Soft light (Soft Light), Opacity (Opacity) reduce to 50%.
Step 20
Take the tool Rectangular area (Rectangular Marquee Tool) and create a selection, as in the screenshot below. Create a new layer and use a soft black brush to add a shadow to the left side of the ribbon. Remove selection (Ctrl + D). Name this layer “shadow” and reduce Opacity (Opacity) up to 50%.
Step 21. Create a background for the content.
Create a new group and name it “content bg”. Tool Rectangle (Rectangle Tool) create a 1000x1670px shape. The height depends on how you align the elements in the pattern. If you need a different height for the background layer, you can change it after you add content.
Convert the layer to a smart object. Go to menu Filter> Noise> Add Noise (Filter> Noise> Add Noise) and use the parameters shown below.
Step 22. Create white triangular patterns
Create a new 20x10px document. Zoom in and take the tool. Pen (Pen Tool). Create a white triangular shape, as in the screenshot below. Hide the background layer and go to the menu. Editing> Define a pattern (Edit> Define Pattern).
Go to Edit> Transform> Flip Vertical (Edit> Transform> Flip Vertical) and tool Move (Move Tool) move the shape to the bottom of the document. Save this pattern and close the document.
Step 23. Apply Triangular Patterns
Tool Rectangle (Rectangle Tool) create a 1000x10px shape and place it at the top of the content area. Name this layer “top triangles” and reduce Fill (Fill) to 0%. Open the Layer Styles window and apply the pattern you created in the previous step.
Duplicate this layer and move the shape down. Name the layer “bottom triangles” and change the pattern.
Step 24. Creating the “Services” area
Create a new group and name it “services”. Duplicate the headline group and move it to the upper left corner of the content background. Change the ribbon color (in the “bg” layer) to # da1e4a. Tool Text (Type Tool) change the text to “Services”.
Step 25. Add service description
Create a new group and name it “web design”. Activate the guides (Ctrl +;). Tool Rectangle (Rectangle Tool) create a 220x320px shape with the color # f4f4f4. Name this layer “border”. Open the Layer Styles window and use the options below. For Strokes (Stroke) I used the color # d4d4d4.
Step 26
Create another white rectangle of 200x300px. Name this layer “image_holder” and place it in the center of the layer “border”. Add 1px Stroke using the color # d4d4d4.
Step 27
Tool Text (Type Tool) add some content like in the screenshot below.
Step 28. Creating the “Read More” Button
Create a new group and name it “button”. Take the tool Rounded Rectangle (Rounded Rectangle Tool), set the Radius to 4px and create a 140x30px shape, color – # ac1eda. Name this layer “button” and apply the following layer styles:
Tool Text (Type Tool) write “Read More” on your button. I used a white color and a Univers Light Condensed font of 16pt. Add a shadow to the layer using the parameters in the screenshot below.
Step 29
Duplicate the “web design” group three times. Activate the guides and place the elements in the same way as in the screenshot below. Tool Text (Type Tool) change the names of the services.
Step 30. Creating the Portfolio Area
The following sections of the template will be easier to create, because we will simply copy the elements created in the previous steps and edit them a little.
Create a new group and name it “portfolio”. Duplicate the “headline” group and move it to the “portfolio” group. Change the color of the “bg” layer to # aec81e and tool Text (Type Tool) write the word “Portfolio” on the tape. The distance between the “services” and “portfolio” areas should be 60px.
Now we will create several image frames. Create a new group and name it “# 1”. Activate the guides (Ctrl +;). Choose a tool Rectangle (Rectangle Tool), hold down the key Shift and create a square 140x140px color # f4f4f4. Name this layer “border”. Then copy the layer styles from some “border” layer from the “services” area and paste into this layer.
Create another 120x120px square in white. Name this layer “image_holder” and place it in the center of the previous one. Add a 1px stroke, color # d4d4d4.
Duplicate the group “# 1” seven times and place them just as in the screenshot below.
Duplicate the “button” group, change the color of the button to # aec81e and move it to the lower right corner of the “portfolio” area. Change the text to “View Portfolio”.
Step 31. Creating the “About” Area
Create an “About” area by simply copying elements from the previous areas and changing their colors. Color ribbons and buttons – # 40b1e6. Select the “ribbon” group and go to the menu Editing> Transform> Flip Horizontal (Edit> Transform> Flip Horizontal) and move the ribbon to the right corner.
Also, I added text using the Helvetica Regular font in size 12pt and color # 515151.
Step 32. Create the “Blog” area
Add the “ribbon” group inside the “blog” group. Change the color of the feed to # da7b1e and edit the text to “Blog”. Slide the tape 60px down from the “portfolio” area.
Create a new group and name it “post # 1”. Then create a frame for the picture. The size of the frame is 220x220px, the size of the inner square is 200x200px. Add some text to this image and a “Read More” button. The screenshot below shows the font options.
Duplicate the group “post # 1” and place it under the previous one. Rename the group to “post # 2”.
Step 33. Create the sidebar
Create a new group and name it “categories”. Choose a tool Text (Type Tool) and write the word “Categories”. I used Univers Ultra Condensed font, size 36pt and color # 515151. Choose a tool Line 
(Line Tool) and create a horizontal line with a thickness of 1px and color # b9b9b9.
Take the tool Rectangle (Rectangle Tool) and create a 300x5px shape and place it under the 1px line. Name this layer “diagonal lines” and reduce Fill (Fill) to 0%. Add style Pattern overlay (Pattern Overlay) with the following parameters:
Tool Text (Type Tool) add a list of categories. I used the font Helvetica Regular, size 12pt and color # 515151.
To create markers near categories, grab the tool. Ellipse (Ellipse Tool), hold down the key Shift and create a 5x5px circle with the color # 515151. Duplicate this layer as many times as necessary with the tool. Move
(Move Tool) place them near categories. Add all the layers with circles to the group and name it “bullet points”.
Below create another list in the same way as the categories.
Step 34. Add separators between content areas
Create a new group and name it “separators”. Choose a tool Line (Line Tool) and create a horizontal line with a width of 940px and color #dbdbdb. Name this layer “1px line” and place it between the “services” and “portfolio” areas.
Duplicate this layer and place it between the “portfolio” and “blog” areas.
Step 35. Creating the footer
Create a new group and name it “footer”. Tool Text (Type Tool) add your copyright. I used the Helvetica Regular font size 12pt and the color #bebeb.
Final result:
Author: Ionut Ciursa
