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.
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 x 2598 px.
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.
Step 3: Make Pattern
Make new file with size 6 x 6 px..
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.
Step 5
Click eye icon on front of Background layer to hide it. Click Edit > Define Pattern to save the picture as a pattern.
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.
Here's the result of our background in 100% magnification.
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.
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%.
Step 9
Double click rectangle shape layer to open Layer Style dialog box. Add Drop Shadow and Stroke with following settings.
This is the difference with and without Layer Style.
Step 10
Use type tool to write main menu.
Step 11: Main Content
Start writing main content of this site, the owner's name. We are using free Lobster font.
Double click text layer. Add Drop Shadow and Stroke.
Step 12
Add subtitle. Add layer style drop shadow to add letterpress effect onto the text.
Step 13
Add a slogan that define the site owner's principle. Again, add same layer style to add letterpress effect.
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.
Step 15
Click and drag on the canvas to draw the shape.
Step 16
Select another shape from the option bar. Shift-drag to add shape onto the layer shape.
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.
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.
Add following Drop Shadow onto the shape.
This is the result after adding Layer Style.
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.
Step 20
Set black line layer Opacity to 40% and white line layer Opacity to 60%.
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.
Step 22
Reveal custom shape that we have made earlier.
Step 23: Featured Project
Write title of the next section.
Add following Drop Shadow to add letterpress effect.
Step 24
Draw a rounded rectangle under the title. Make sure it fits the content width.
Add Drop Shadow and Stroke with following settings.
Below is the result.
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.
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.
Step 27
Draw a 1 px line with color #939393. Add a Drop Shadow.
Step 27
Add project title and its category.
Add Drop Shadow to give it 3D appearance.
Step 28
Add more pictures for another project.
Step 29
Draw a small circle shape for slide navigation.
Add following Drop Shadow, Gradient Overlay, and Stroke.
Here's the result after adding Layer Style.
Step 30
Activate Move tool. Alt-drag the circle twice to duplicate it.
Step 31
Select one of the circle. We need to change its appearance for active condition. Edit layer style with following settings.
And below is the slide navigation with one of them in active condition.
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.
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.
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.
Step 35: Section Contact
Before moving on to next section. Let's duplicate the separator first. Alt-drag the separator to duplicate it.
Step 36
Add section title. Make sure to consistent using same layer style as the other section title.
Step 37
Draw simple rounded rectangle for the contact form input box. On top of each input box add clear description.
Step 38
Let's working on its submit button. Draw another rounded rectangle shape but this time use lighter color.
Draw following layer styles.
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.
Below is our button.
Step 39
Write Submit on the button. Add layer style Drop Shadow to make it 3D.
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.
