Psdbase - Adobe Photoshop Tutorials

Create a smooth portfolio layout

On 02.18.10, In Web Layouts, by admin

In this tutorial we will be creating an easy to make portfolio design, this design uses simple effects combined with a great color scheme to give it a smooth look.

Preview:

Resources:

Creating a new photoshop document

1 Open Photoshop, create a new document that is 1000px by 1500px, with a background color of #ffffff

Creating the background

2 Select the Rectangle Marquee Tool (M) and create a rectangle going accros the top part of the canvas, its height should be 450px, Set your foreground color to #6e5a48 and background#372d24 select the Gradient Tool (G) with the Linear Gradient option. Drag the linear gradient from the top of the selection down to create the linear gradient inside the rectangular selection.

3 Select the Rectangle Marquee Tool (M) create a selection accros the top part of the canvas its height should be 1px, Set your foreground color to #ffffff and blending options to Overlay, set the layers opacity to 50%.

Creating the rotator’s background

4 Select the Rectangle Marquee Tool (M) Create a selection in the middle of the brown area, it’s height should be 290px and width 910px fill the selection light brown (#6d5a47)

5 Double click the layer to open the layer styles dialouge box, enter the same settings as the images below:

Creating the rotator’s nav

6 Select the Rectangle Marquee Tool (M) and create a rectangle going accros the bottom part of the brown area, its height should be 70px, Set your foreground color to #ebebeb and background#d1d1d1 select the Gradient Tool (G) with the Linear Gradient option. Drag the linear gradient from the top of the selection down to create the linear gradient inside the rectangular selection.

7 Double click the layer to open the layer styles dialouge box, enter the same settings as the images below:

Creating the rotator buttons

8 Create a white cricle (#ffffff) with a hieght and width of 20px

9 Double click the layer to open the layer styles dialouge box, enter the same settings as the images below:

10 Duplicate the circle 3 times and place them in a horizontal line.

Creating 3 project area’s

11 Select the Rectangular Marquee Tool (M), create a rectangle with a width of 285px and height of156px set your foreground color to #382d24 and fill shift > F5.

12 Duplicate the layer twice and place them in a horizontal line similar to below:

13 Select the polygonal tool (L) and create a shape similar to the image below:

14 Fill the selection grey (#444444)

15 Add a gaussain blur to the layer using the settings below:

16 Put the layer behind the box layer then repeat this step for each box.

Adding the Content

With the content we will start from the top down.

Header Content

17 I added a logo using the Rockwell font it’s font size is 30px.

18 For the nav I used the Rockwell font it’s font size is 14px.

19 I used a large image of Hv-designs in the rotator area, that’s the header done. Here is a preview:

Main Content

20 I added 3 images of my gallery theme to the 3 project areas.

21 I added basic content under each project box.

22 I added a basic news post.

23 I added a about author area with an image and some text about me.

Footer

24 For the footer i just added some simple text.

Congratulations! You have completed this Tutorial.

You should have something like this:

Don’t forget to subscribe to us via out RSS, Twitter and Flickr.