Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop
  • 25 November 2011
  • Tutorials
  • This post was written exclusively for PV.M Garage by Mohammad Jeprie
  • Comment (1)»

In this tutorial, we will learn to design a one page portfolio site in Photoshop. In the process we will use subtle pattern and lots of layer styles to make a simple and interesting design. Let’s get started!

This tutorial is a collaboration with a young and talented web designer from Indonesia, Aris FM.

Preview

Click on the image below to see it in full size.

One Page Portfolio Site Preview

Step 1

Open Photoshop. Click File > New or hit Ctrl + N to make a new file. In the dialog bos, set its size to 1340 × 2598 px.

Design a One Page Portfolio Site in Photoshop

Step 2

Make new layer. Click foreground color on toolbox and change its color to #c5c5c5. Hit Alt + Delete to fill it with foreground color.

Design a One Page Portfolio Site in Photoshop

Step 3: Make Pattern

Make new file with size 6 x 6 px..

Design a One Page Portfolio Site in Photoshop

Step 4

Set foreground color to default, black, by pressing D. Activate Brush tool with brush size 1 px. Make new layer and then draw two diagonal lines as seen below.

Design a One Page Portfolio Site in Photoshop

Step 5

Click eye icon on front of Background layer to hide it. Click Edit > Define Pattern to save the picture as a pattern.

Design a One Page Portfolio Site in Photoshop

Step 6

Let’s return to our site design. Activate background layer we have just made in Step 2. Double click layer and add Pattern Overlay. Select pattern that we have just created.

Design a One Page Portfolio Site in Photoshop

Here’s the result of our background in 100% magnification.

Design a One Page Portfolio Site in Photoshop

Step 7: Guides

Reveal ruler by pressing Ctrl + R. Click and drag from vertical ruler onto the canvas to make new guide. Place the guides on 280 px and 1060 px.

Design a One Page Portfolio Site in Photoshop

Step 8: Main Menu

Draw a rectangle shape with color: #434343 on top of the site. Make sure to make it big enough until its top, left, and right sides are outside the canvas. Set its layer Opacity to 50%.

Design a One Page Portfolio Site in Photoshop

Step 9

Double click rectangle shape layer to open Layer Style dialog box. Add Drop Shadow and Stroke with following settings.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

This is the difference with and without Layer Style.

Design a One Page Portfolio Site in Photoshop

Step 10

Use type tool to write main menu.

Design a One Page Portfolio Site in Photoshop

Step 11: Main Content

Start writing main content of this site, the owner’s name. We are using free Lobster font.

Design a One Page Portfolio Site in Photoshop

Double click text layer. Add Drop Shadow and Stroke.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Step 12

Add subtitle. Add layer style drop shadow to add letterpress effect onto the text.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Step 13

Add a slogan that define the site owner’s principle. Again, add same layer style to add letterpress effect.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Step 14: Separator

We’re done with main content section. Before adding another section, we need to make a custom shape separator between each section.

Activate Custom Shape tool. From the option bar activate shape layer and select indicated shape below.

Design a One Page Portfolio Site in Photoshop

Step 15

Click and drag on the canvas to draw the shape.

Design a One Page Portfolio Site in Photoshop

Step 16

Select another shape from the option bar. Shift-drag to add shape onto the layer shape.

Design a One Page Portfolio Site in Photoshop

Step 17

Select shape we have just created with Path Selection tool. Alt-drag shape to duplicate it. Perform transformation (Ctrl + T), right click and select Flip Vertical.

Design a One Page Portfolio Site in Photoshop

Step 18

Repeat previous step, this time to all shapes. Select all shapes and then Alt-drag to duplicate them. Transform (Ctrl + T), right click and choose Flip Horizontal.

Design a One Page Portfolio Site in Photoshop

Add following Drop Shadow onto the shape.

Design a One Page Portfolio Site in Photoshop

This is the result after adding Layer Style.

Design a One Page Portfolio Site in Photoshop

Step 19

Let’s hide the custom shape layer by clicking on its eye icon. Use Pencil tool to draw two 1 px lines, black and white, in a separate layers.

Design a One Page Portfolio Site in Photoshop

Step 20

Set black line layer Opacity to 40% and white line layer Opacity to 60%.

Design a One Page Portfolio Site in Photoshop

Step 21

Place both lines into a group layer, by selecting both of it and hit Ctrl + G. Alt-click Add Layer Mask icon to hide both lines. Activate brush tool. Use big and soft brush. Paint indicated areas with white.

Design a One Page Portfolio Site in Photoshop

Step 22

Reveal custom shape that we have made earlier.

Design a One Page Portfolio Site in Photoshop

Step 23: Featured Project

Write title of the next section.

Design a One Page Portfolio Site in Photoshop

Add following Drop Shadow to add letterpress effect.

Design a One Page Portfolio Site in Photoshop

Step 24

Draw a rounded rectangle under the title. Make sure it fits the content width.

Design a One Page Portfolio Site in Photoshop

Add Drop Shadow and Stroke with following settings.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Below is the result.

Design a One Page Portfolio Site in Photoshop

Step 25

Paste a picture on top of the shape. Convert it to Clipping Mask by pressing Ctrl + Alt + G. This will force the picture goes inside the shape.

Design a One Page Portfolio Site in Photoshop

 

Step 26

Draw a rectangle on lower part of the shape. Convert it to Clipping Mask (Ctrl + Alt + G). Add following layer style Gradient Overlay.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Step 27

Draw a 1 px line with color #939393. Add a Drop Shadow.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Step 27

Add project title and its category.

Design a One Page Portfolio Site in Photoshop

Add Drop Shadow to give it 3D appearance.

Design a One Page Portfolio Site in Photoshop

Step 28

Add more pictures for another project.

Design a One Page Portfolio Site in Photoshop

Step 29

Draw a small circle shape for slide navigation.

Design a One Page Portfolio Site in Photoshop

Add following Drop Shadow, Gradient Overlay, and Stroke.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Here’s the result after adding Layer Style.

Design a One Page Portfolio Site in Photoshop

Step 30

Activate Move tool. Alt-drag the circle twice to duplicate it.

Design a One Page Portfolio Site in Photoshop

Step 31

Select one of the circle. We need to change its appearance for active condition. Edit layer style with following settings.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

And below is the slide navigation with one of them in active condition.

Design a One Page Portfolio Site in Photoshop

Step 32: Section Owner Description

Let’s continue working on next section. Duplicate section separator. Add section title and make sure to use layer style settings as the previous section title on Step 23. Add short description about the site owner.

Design a One Page Portfolio Site in Photoshop

Step 33: Add Social Network Icons

Grab some social network icons. Place them under the owner short description. In layers panel, select all their layers by clicking on first layer and then Shift-click the last one.

Design a One Page Portfolio Site in Photoshop

Step 34

Activate Move tool. From the option bar, click Align vertical centers and Distribute horizontal centers to perfectly align all the icons and distribute them equally.

Design a One Page Portfolio Site in Photoshop

Step 35: Section Contact

Before moving on to next section. Let’s duplicate the separator first. Alt-drag the separator to duplicate it.

Design a One Page Portfolio Site in Photoshop

Step 36

Add section title. Make sure to consistent using same layer style as the other section title.

Design a One Page Portfolio Site in Photoshop

Step 37

Draw simple rounded rectangle for the contact form input box. On top of each input box add clear description.

Design a One Page Portfolio Site in Photoshop

Step 38

Let’s working on its submit button. Draw another rounded rectangle shape but this time use lighter color.

Design a One Page Portfolio Site in Photoshop

Draw following layer styles.

Design a One Page Portfolio Site in Photoshop

We add subtle noise inside the button using Inner Glow. notice that in the setting we use small Opacity, max out the Noise setting to 100%, and increase the Size setting.

Design a One Page Portfolio Site in Photoshop

Below is our button.

Design a One Page Portfolio Site in Photoshop

Step 39

Write Submit on the button. Add layer style Drop Shadow to make it 3D.

Design a One Page Portfolio Site in Photoshop

Design a One Page Portfolio Site in Photoshop

Final Result

We’re done with this design. Click on the image below to see it in full size. Don’t missed next tutorial, because we will convert this design into a functional HTML page, complete with its image slide.

One Page Portfolio Site Preview

Download File PSD

Download file PSD

Author: Mohammad Jeprie

Mohammad Jeprie is a writer from Indonesia. He loves to share his design skill by writing tutorial in various blog. When he is not too busy, he shares free design resources in PSDfreemium. Don't forget to say hi to him in Twitter.

website design and development

One Comments

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US