Home Photoshop Web Layout Create Clean Portfolio Layout

Create Clean Portfolio Layout

Added: Aug 23, 2011 Level: Beginner Software: Photoshop

In this tutorial I will show you how to create Clean Portfolio Layout step by step. In this tutorial you will learn how to make your own guidelines, patterns and how to improve your typography. This tutorial is perfect for peoples who just start to work in Photoshop but want to make a quality web layouts. I hope you will like this tutorial.

Final Result:

In this tutorial I will use Font: Myriad Pro. If you have not installed it on your computer, then you can download it for free - there.

Let's begin

Start new document with 1020px Width and 1140px Height.

We will create a 3 column Portfolio Layout. To be easier, we can use guidelines. For that go to: View > New Guide. Use Curent Options: Orientation Vertical; Position 30px.

You should obtain similar result:

This is our first guideline. Repeat this steps and for our next guidlines. (View > New Guide) with options:

Orientation Vertical; Position 300px.

Orientation Vertical; Position 375px.

Orientation Vertical; Position 645px.

Orientation Vertical; Position 990px.

You should obtain similar result (I colored columns to distinct them, but you don't need to do that):

Let's create navigation sections. With type tool write your sections. For this text I used Font: Myriad Pro Condensed with white color (#ffffff), 18ptsize and Anti Aliasing Method: Sharp. Align This text to our 300px Vertical Guidline and apply the same Drop shadow effect that we used for the logo.

Now Let's create our Hover effect. With Rounded Rectangle Tool create a shape with fixed size: 75px Width; 40px Height and 10px Radius.

Let's add some styles for this shape.

Inner Shadow:

Inner Glow:

Gradient Overlay with colors: #0792c2 to #005a89.

Stroke:

You should obtain similar result (Let's hide temporary our guidelines View > Show > Guides):

Search box

With Rounded Rectangle Tool create a fixed shape with dimensions: 185px Width; 20px Height and 10px Radius.

You should obtain similar result:

For this shape Use this Blending Options (Layer > Layer Style > Blending Options):

Inner Shadow:

Gradient Overlay with colors: #0389bd to #0191c3.

Stroke:

You should Obtain similar result:

Use this search icon. Resize it (Edit > Free Transform) and put inside of our search box.

Change Blending Mode to Soft Light and modify Opacity to 70%.

Add some text. (I used Arial Font with color: #00d0ff and 12pt size).

Slider

First Step is to create the area for our slider. With Rectangle Tool create a fixed shape with: Width: 1020px; Height: 380px and color: #f0f0f0. Put This shape below navigation menu.

Create New Layer (Layer > New > Layer). With Rectagular Margue Tool make a rectangular small selection, similar to this:

On this New layer apply Linear Gradient with colors: #cacaca to transparent:

For Deselection go to Select > Deselect.

Now let's create New Layer. Layer > New > Layer. Now with Single Row Margue Tool create a single row selection on the last line of our navigation menu. Now go To Edit > Fill. In Contents region choose: Use: Color: #000000.

Change Blending Mode to Soft Light and modify Opacity to 70%.

Now let's create another layer. And repeat the previous steps: "with Single Row Margue Tool create a single row selection on the last line of our navigation menu. Now go To Edit > Fill." but at this time use white color (#ffffff). Modify Opacity to this layer to 70%.

For the image slider I used this beautiful photo by Patrick Smith. Resize image to what size do you want to be your slider. I was resized it to the 770px Width and 285px Height.

Now let's add some layer styles for this slider. Go to Layer > Layer Style > Blending Options.

Drop shadow:

Stroke:

You should obtain similar result:

Now with Ellipse Tool, create a fixed circle with dimensions: 12px width and height.

Add some effects. Layer > Layer Style > Blending Options.

Inner Shadow:

Color Overlay:

You should obtain similar result:

Go to Layer > Dublicate Layer. Now with Move Tool move this circle in the right.

Repeat this step for adding more circles.

Now let's show wich image is now active. Select one of this circle and go to Layer > Layer Style > Color Overlay. There modify color to #028fc1.

Create New Layer. Layer > New > Layer. Now with Single Row Margue Tool make slection on the bottom of our slider area.

Go to Edit > Fill > Color and use color #cdcdcd Press ok.

Let's create navigation buttons for our slider. With Rectangle Tool create a fixed shape with dimensions: Width 50px; Height 60px and fill it with color: #028fc1.

For the arrows we will use simbols: >.

For that arrow use current Blending options (Layer > Layer Style > Blending Options):

Drop Shadow:

Inner Shadow:

Color Overlay:

You should obtain similar result:

Repeat this steps and for the right navigation button.

Let's create shadow for our slider.

Create New Layer. Layer > New > Layer and put this layer behind the our slider. With Elliptical Margue Tool make similar selection.

Now Go to: Edit > Fill > Use: Color: #000000.

Now Go to Filter > Blur > Gaussian Blur and apply Filter with 4px radius. Press ok. After that Go to Filter > Blur > Motion Blur and apply a filter with options: Angle 0; Distance 220px. Press ok.

Now first of all we need to turn on our guidlines. Go to View > Show > Guidlines. We will create 3 columns that will contain: Title, Image preview, Description and button "read more". So let's begin.

For the title I used Myriad Pro Condensed Font with size of 18pt and color #8c8c8c.

For the first image I used: this shot. I resized this image to 270px Width and 140 Height.

Let's add some text. For that I used Font: Myriad Pro with 12pt size and sharp anti aliasing method.

It's looking good, but not enough. By Default Photoshop use Auto Leading (If you didn't view this panel go to View > Character). Auto is good, but Manual is better. Let's setup it manualy.

General rule for typography is: Leading value = Size of our font * 1,5. In our case if we use 12pt size for the font, then for the Leading we should use: 12*1,5=18. Let's see the diference:

For the button we will use Rounded Rectangle Tool with Fixed Size: Width: 70px; Height: 20px and radius 3px.

Let's add some Blending Options (Layer > Layer Style > Bleding Options).

Inner Shadow:

Gradient Overlay with colors: #0a89d4 to #0ea8e0.

Stroke with color#1271b4:

You should obtain similar result:

Add some text on the button and apply this Blending options(Layer > Layer Style > Drop Shadow):

You should obtain similar result:

Create New layer (Layer > New > Layer). With Pencil tool with size of 1px and white color, draw similar arrow on the button.

Our first column will look like this:

For the second and third column repeat all steps that we made for the first column. I will not explain them again because this steps are the same but with different image and text. (For the second image I used this image and for the third - this).

Now we need to create a separator for our columns. For that we need to create a simple pattern. First of all we need to create a new layer. Go to Layer > New > Layer after that with Pencil tool draw a simple point of 1px size with color: #d7d7d7.

With Rectangular Margue Tool make a selection of 2px. Like this:

Now we need from this point to make a pattern. Go to Edit > Define Pattern. Rename this pattern as you want and press ok. After you finished previous step, you can delete this layer that we create for pattern. We don't need it anymore.

With Rectangle tool create a fixed shape with dimensions: Width: 960px Height 5px and put this shape between our guidelines.

Reduce the Fill of this layer to 0%.

Now our rectangle disappeared, but don't worry, this is normal. After this we need to apply our pattern. For that go to Layer > Layer Style > Pattern Overlay. There click on the small arrow to open pattern picker and choose pattern that we create in anterior steps. Press ok.

After that our separator should look like this:

Now let's create video section. For the title I used the same Font with the same options that I used and for previos titles above (Myriad Pro Condensed; Size: 18pt; Color#777777).

To show where will be the video frame, simply go to youtube or vimeo and make a screenshot for one video that you like. Resize this image to Width: 270px Height: 160px.

Flickr section: For the title use the same settings (Myriad Pro Condensed; Size: 18pt; Color#777777). Now we need to add some images. For that go on the Flickr.com. Find some images that you like. For the example I will use this image. There press on action Menu and select option: View All sizes.

There Select Square size (75x75).

After that you will have a small thumbnail with sizes of 75px Height and Weight. Now Press Right click on your image and choose Copy image, then go back to Photoshop and go to Edit > Paste.

Repeat this steps and for the rest of five images.

Contact Form.

For the title use the same font (Myriad Pro Condensed; Size: 18pt; Color#777777). Now we need to create 4 shapes: 1 for Name, 1 for email, 1 for message and the last one for Send button.

Name Form.

With Rounded Rectangle Tool create a fixed shape with dimensions: Width: 75px Height 20px and Radius 3px. Align this shape to our left guidline.

For this shape add next Blending Options (Layer > Layer Style > Blending Options):

Inner Shadow:

Color Overlay:

Stroke:

You should obtain similar result:

Go to Layer > Dublicate Layer. This will be the shape for our Email Form. With Move Tool, move down this shape.

Add Some text inside of this shapes.

Font that I used: Myriad Pro Regular; 11pt size and color#c1c1c1.

Message Form

With Rounded Rectangle Tool create a fixed shape with dimension: 270px Width; 100px Height and 3px Radius. Aplly the same Blending Options that we create for Name and email form (Right click on the layer with our Name/Email Form and choose Copy Layer Style, then on the Layer with "mesage form" press right click and choose Paste Layer Style).

Send Button

Again with Rounded Rectangle Tool create a fixed shape with dimension: Width: 80px; Height: 50px and 3px Radius.

For this button apply next Blending Options (Layer > Layer Style > Blending Options):

Inner Shadow:

Gradient Overlay:

Stroke:

You should obtain similar result:

Add some text. For the Font I used next options: Myriad Pro Regular; size 15pt; Color:#7e7e7e and 1px of shadow. To create shadow go to Layer > Layer Style > Drop Shadow.

You will obtain:

Now we need to create another separator. For that select our previous separator layer and then go to Layer > Dublicate Layer. Move this separator further down.

Footer

At the left side add some text. (I used Myriad Pro Regular; Size: 12pt; Color:#777777).

For the right side we will add Social Icons. First of all add text: "Follow us:" For that text I used font: Myriad Pro Condensed; Size 13pt; Color: #777777. For the icons, I used this images: RSS, Twitter, Youtube, Facebook, StumbleUpon, RSS Email. Copy all this images on you computer then open them in Photoshop in our current document (Drag and drop in PS).

We see that this images is too big for us, we need to resize them. For that make sure that now the layer with that icon is selected, then go to Edit > Free Transform.