Portfolio Web Layout in Photoshop

Preview

Introduction

For this tutorial we will use the 960 Grid System. Download it and unzip the archive file. Then open the “960_grid_12_col.psd” file in Photoshop (you will find it inside the “photoshop” folder which is located inside the “templates” folder).

After you open the .psd file in Photoshop you will see 12 red bars. That is the grid system that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer.

During this tutorial I will ask you to create shapes with certain dimensions. Open the Info panel (Window > Info) and when you create a shape you will see in this panel its exact width and height. The .psd file contains some guides as well which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;. I usually hide the red bars and activate the guides whenever I need them.

Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. Let’s get started!

Step 1: Setting up the document

Open the “960_grid_12_col.psd” file in Photoshop. Go to Edit > Canvas Size and change the width to 1200px and the height to 1400px.

Fill the background with the color #333333. Right-click on the Background layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the image below.

Step 2: Creating the header background

Create a new group and name it “header”. Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 140px and the color #30a0b8. Name this layer “header bg”, right-click on it and select Convert to Smart Object. Add some noise to this layer using the settings from the image below.

Step 3

Select the Rectangle Tool (U) and create a rectangle with the height 4px and the color #33b9d6. Name this layer “top bar” and move it at the top of the bigger rectangle.

Step 4: Creating a triangle pattern

Now we will create a pattern to use it in the header. Create a new document with the dimensions 20px by 8px. Zoom in, select the Pen Tool (P) and create a black triangle like the one you see in the following image. Make the “Background” layer invisible (click on its eye icon in the layers panel). Then go to Edit > Define Pattern, give your pattern a name and click OK. Now you can close this document.

Step 5: Applying the pattern

Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 10px. Set the Fill of this layer to 0% (the Fill option is right underneath the Opacity in the Layers panel). Name this layer “top pattern”, double-click on it to open the Layer Style window and use the settings from the following image for Pattern Overlay.

Step 6: Changing the color of the pattern layer

Now we need to change the color of the triangles and apply some other layer styles. Right-click on the “top pattern” layer and select Convert to Smart Object. Double-click on this layer to open the Layer Style window and use the settings form the image below. For Color Overlay I used the color #33b9d6.

Step 7: Duplicating the pattern layer

Drag the “top pattern” layer over the “Create a new layer” button from the bottom of the Layers panel to duplicate it. Name the new layer “bottom pattern” and move it at the bottom of the header. Double-click on this layer and change the color of the Color Overlay to #30a0b8.

Step 8: Creating a texture for the header

Use the Rectangular Marquee Tool (M) to create a rectangular selection over the header area. Create a new layer and fill this selection with #aaaaaa. Hit Ctrl/Cmd + D to deselect. Name this layer “texture”, right-click on it and select Convert to Smart Object.

We want the texture to affect only the header area, and not the background or other elements. To achieve this, hold down the Ctrl/Cmd button and click on the thumbnail of the “header bg” layer and the “bottom pattern” layer (this way the entire header will be selected). Now make sure that the “texture” layer is active and go to Layer > Layer Mask > Reveal Selection.

With the “texture” layer selected, go to Filter > Noise > Add Noise and use the settings from the image below. Then go to Filter > Sketch > Water Paper and use the settings from the following image. Set the blend mode of this layer to Soft Light.

Step 9: Adding the name of the layout

Select the Type Tool (T) and add the name of your layout in the left-hand side of the header. Activate the guides to help you position this layer. For my text layer I used the color #e3eef2 and the font Univers Ultra Condensed. Double-click on your text layer and use the settings from the following image for Drop Shadow.

Step 10: Creating the navigation bar

Create a new group and name it “navigation”. Select the Type Tool (T) and write the name for your navigation menu items. I used the color #ffffff, the font Univers Light Condensed and the size 18pt. Make sure you activate the guides so you can arrange the navigation items better. Add a shadow to these text layers using the settings from the following image.

Download this set of icons and look for icons that are suitable for your navigation menu items. Open those icons in Photoshop and place them above the navigation menu items as you see in the following image.

Step 11: Creating the style for the active navigation item

Select the Rounded Rectangle Tool (U), set the Radius to 2px and create a rounded rectangle beneath one of your navigation items using the color #3895a8. Name this layer “active”, double-click on it and use the settings from the following image.

Step 12: Create a diagonal stripes pattern

Create a new document with the size 4px by 4px. Zoom in, select the Rectangular Marquee Tool (M), hold down the Shift key and create four square selections as you see in the following image. Create a new layer and fill the selection with black. Hit Ctrl/Cmd + D to deselect. Then hide the “Background” layer, go to Edit > Define Pattern, give your pattern a name and click OK. Now you can close this document.

Step 13: Creating the image slider

Create a new group and name it “slider”. Select the Rectangle Tool (U) and create a rectangle with the dimensions 1000px by 350px and the color #9eafb2. Name this layer “slider border”, double-click on it to open the Layer Style window and use the settings from the following image. Put this rectangle in the center of your document.

Step 14

Create another rectangle with the dimensions 980px by 330px and the color #ffffff. Name this layer “image_holder” and put it in the center of the bigger rectangle. This is the area where the slider images will be displayed.

To show an image in this area, open it in Photoshop, move it into your web layout document, above the “image_holder” layer. Name this layer “image”, right-click on it and select Create Clipping Mask. Now your image will be visible only over the area of the “image_holder” layer.

Step 15: Creating the image slider arrows

Create a new group and name it “right arrow”. Select the Ellipse Tool (U) and create a circle with the dimensions 45px by 45px and the color #33b9d6. Name this layer “circle”. Copy this symbol “»”, select the Type Tool (T) in Photoshop and paste it in the middle of your circle. For this arrow symbol I used the font Univers Condensed with the color #f4f4f4.

Duplicate the “right arrow” group by dragging it over the “Create a new layer” button from the bottom of the Layers panel. Then go to Edit > Transform > Flip Horizontal. Name this group “left arrow” and move it to the left hand side of the slider.

Step 16: Creating the headline for the featured area

Now we will create a ribbon for the headline of the featured area. We will use the same ribbon later for other areas of the web layout.

Create a new group and name it “headline”. Select the Pen Tool (P) and create a shape like you see in the following image in the upper left corner of the image slider using the color #ac1eda. Name this layer “bg”, double-click on it to open the Layer Style window and use the settings from the following image.

Step 17: Adding shadows to the ribbon

Create a new layer above the “bg” layer and name it “shadows”. Right-click on this layer and select Create Clipping Mask. Now everything you draw on this layer will be visible only over the area of the “bg” layer.

Select the Brush Tool (B) and use a black soft brush with the opacity 60% to add some shadows on your ribbon. Change the color of your brush to white and add some highlights to the ribbon. Take a look at the following image for reference. Set the blend mode of this layer to Soft Light 70%.

Step 18

Select the Type Tool (T) and write the word “Featured” on your ribbon. I used the color #ffffff and the font Univers Ultra Condensed. Add a shadow to this text layer using the settings from the image below.

Step 19

Select the Line Tool (U), set the Weight to 1px and create a black horizontal line with the width 10 px. Put this line in the upper left corner of the ribbon.

Duplicate this line and move the new one to the right. Repeat this process until you reach to the upper right corner. Put all these layers inside a group and name it “top”. Put this group inside another one and name it “dashed lines”.

Duplicate the “top” group and move the new dashed lines at the bottom of the ribbon. Name this group “bottom”. Then set the blend mode of the “dashed lines” group to Soft Light 50%.

Step 20:

Select the Rectangular Marquee Tool (M) and create a selection like you see in the following image. Create a new layer and use a black soft brush to add a shadow in the left hand side of the ribbon. Hit Ctrl/Cmd + D to deselect. Name this layer “shadow” and set its opacity to 50%.

Step 21:Creating the background for the content

Create a new group and name it “content bg”. Select the Rectangle Tool (U) and create a rectangle with the dimensions 1000px by 1670px. The height depends on how you will align all the elements of the web layout later. If you need a different height for your content background after you add the content, you can go back and modify it.

Right-click on this layer and select Covert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the following image.

Step 22: Creating white triangle patterns

Create a new document with the dimensions 20px by 10px. Zoom in, select the Pen Tool (P) and create a white triangle shape as you see in the following image. Then hide the background layer, go to Edit > Define Pattern, give your pattern a name and click OK.

With the triangle shape layer selected go to Edit > Transform > Flip Vertical. Use the Move Tool (V) to move this layer at the bottom of the document. Then go again to Edit > Define Pattern to create a new pattern.

Close this document as we don’t need it anymore.

Step 23: Applying the triangle patterns

Select the Rectangle Tool (U) and create a rectangle with the dimensions 1000px by 10px at the top of the content background. Name this layer “top triangles” and set its Fill to 0%. Double-click on it to open the layer style window and apply the pattern you created.

Duplicate this layer and move the new one at the bottom of the content background. Name this layer “bottom triangles” and change the triangle pattern.

Step 24: Creating the “Services” area

Create a new group and name it “services”. Duplicate the “headline” group from the image slider and move it in the upper left corner of the content background. Change the color of the ribbon (the “bg” layer) to #da1e4a. Select the Type Tool (T) and edit the text to read “Services”.

Step 25: Adding a description of the services

Create a new group and name it “web design” (or any other name of design service). Activate the guides (Ctrl/Cmd + ;). Select the Rectangle Tool (U) and create a rectangle with the dimensions 220px by 320px and the color #f4f4f4. Name this layer “border”, double-click on it and use the settings from the following image. For Stroke I used the color #d4d4d4.

Step 26

Create a new rectangle with the dimensions 200px by 300px and the color #ffffff. Name this layer “image_holder” and put it in the middle of the “border” layer. Add a 1px Stroke to this rectangle using the color #d4d4d4.

Step 27

Select the Type Tool (T) and add some content for this design service. Take a look at the following image for reference.

Step 28: Creating a “Read More” button

Create a new group and name it “button”. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 140px by 30px and the color #ac1eda. Name this layer “button”, double-click on it to open the Layer Style window and use the settings from the following image.

Select the Type Tool (T) and write the words “Read More »” on your button. I used the color #ffffff with the font Univers Light Condensed and the size 16pt. Add a shadow to this layer using the settings from the following image.

Step 29

Duplicate the “web design” group three times for the other three design services. Activate the guides and arrange the groups as you see in the image below. Select the Type Tool (T) and change the name of the design services.

Step 30: Creating the “Portfolio” area

The following sections of the web layout will be easier to create as we will just copy elements that we created previously and edit them to suit the new sections.

Create a new group and name it “portfolio”. Duplicate one of the “headline” groups from the “featured” area or the “services” area and move it inside this new group. Change the color of the “bg” layer to #aec81e and use the Type Tool (T) to edit the ribbon text so it reads “Portfolio”. Leave a distance of 60px between the bottom edge of the “services” area and the ribbon of the “portfolio” area.

Now we will create some image holders for the portfolio items. Create a new group and name it “#1″. Activate the guides (Ctrl/Cmd + ;). Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 140px by 140px and the color #f4f4f4. Name this layer “border”. Then copy the layer style from one of the “border” layers from the “services” area (right-click on it and select Copy Layer Style) and paste it to this layer.

Create another square with the dimensions 120px by 120px and the color #ffffff. Name this layer “image_holder” and put in the in middle of the “border” layer. Add a 1px stroke to this rectangle using the color #d4d4d4.

Duplicate the “#1″ group 7 times and arrange them as you see in the following image.

Duplicate one of the “button” groups from the “services” area, change its color to #aec81e and move it at the lower right corner of the “portfolio” area. Edit the text so it reads “View Portfolio »”.

Step 31: Creating the “About” area

Create the “About” area using the same process of duplicating elements from previously created sections, changing their colors and arranging them. The color of the ribbon and button is #40b1e6. Selected the “ribbon” group, go to Edit > Transform > Flip Horizontal and move the ribbon to the right edge of the layout (note: you will have to temporarily move the text layer from the “ribbon” group while you do the transformation; you don’t want the text to be flipped horizontally; after you flip the ribbon, move the text back into the group and edit it so it reads “About”).

I also added a paragraph of text using the font Helvetica Regular with the size 12pt and the color #515151.

Step 32: Creating the “Blog” area

Add a “ribbon” group inside the “blog” group. Change its color to #da7b1e and edit the text to read “Blog”. Put this ribbon at a distance of 60px from the bottom edge of the “portfolio” area.

Create a new group and name it “post #1″. Then create an image holder for this blog post. For the “border” layer use the size 220px by 220px and for the “image_holder” layer use the size 200px by 200px. Add some text next to this image holder and a “Read More” button. Take a look at the following image for the reference.

Duplicate the “post #1″ group, and move the new post underneath the first one. Name this group “post #2″.

Step 33: Creating the sidebar of the blog

Create a new group and name it “categories”. Select the Type Tool (T) and write the word “Categories”. I used the font Univers Ultra Condensed with the color #515151 and the size 36pt.

Select the Line Tool (U) and create a horizontal line with the weight 1px and the color #b9b9b9, as you see in the following image.

Select the Rectangle Tool (U) and create a rectangle with the dimensions 300px by 5px and put it underneath the “1px line”. Name this layer “diagonal lines” and set its Fill to 0%. Then double-click on it and use the settings from the following image for Pattern Overlay.

Select the Type Tool (T) and add a list of categories. I used the font Helvetica Regular with the size 12pt and the color #515151.

To create the bullet points, select the Ellipse Tool (U), hold down the Shift key and create a circle with the dimensions 5px by 5p and the color #515151. Duplicate this layer as many times as you need and arrange them using the Move Tool (V). Group all these layers and name the group “bullet points”.

Create one more list for popular post, just like you created the categories list.

Step 34: Adding separators between content sections

Create a new group and name it “separators”. Then select the Line Tool (U) and create a horizontal line with the width 940px and the color #dbdbdb. Name this layer “1px line” and put it between the “services” area and the “portfolio” area.

Duplicate the “1px line” layer and put the new line between the “portfolio” area and the “blog” area.

Step 35: Adding the footer

Create a new group and name it “footer”. Select the Type Tool (T) and add a copyright statement at the bottom of your layout. I used the font Helvetica Regular with the size 12pt and the color #ebebeb.

Final Result

Below you can see the final result of this tutorial. Click on the image to see the full-size version. Thanks for reading and I hope you enjoyed this tutorial.

COMMENT IF U LIKE IT

Posted in: Web Designing