Psdbase - Adobe Photoshop Tutorials

Create a Sleek Portfolio Layout

On 02.07.10, In Web Layouts, by admin

For our first Tutorial here at PSDbase.com we will create a sleek stunning portfolio layout using Photoshop. I’ll show you the techniques used to create each effect throughout this layout

Preview:

Resources:

Create a new photoshop document

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

Creating the header

2 Select the rectangular marquee tool (M) and create a rectangular section across the top part of the canvas,
its height should be 60px-70px

3 Set the foreground color to #383838 and the background color #212121. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gredient in the selection

4 Select the rectangular marquee tool (M) and create a 1px section across the top part of the canvas.

5 Set the foreground color to #ffffff then fill the layer (shift+f5). Set the layers blending options to Overlay.

Creating the Display area

6 Select the rectangular marquee tool (M) and create a rectangular section accross the canvas directly below the header,its height should be 290px-300px

7 Set the foreground color to #007dc1 and fill the section (shift+f5)

8 Select the rectangular marquee tool (M) and create a 1px section across the top part of the Display area.

9 Set the foreground color to #ffffff then fill the layer (shift+f5). Set the layers blending options to Overlay then the layers fill to 50%

10 Select the radial gradient tool (G) open the gradient editor dialogue.

11 Create a large radial gradient in the middle of the display area.

12 Select the radial gradient and change its blending options to overlay and fill percentage to 50%

13 We are now going to add some realistic brush effects to spice up this layout, they can be downloaded from here. Install the brushes the select the brush tool (B), This part of the tutorial is up to you, you can add as much or as little brush effects as you like.

Creating the Footer

14 Select the rectangular marquee tool (M) and create a section near the bottom of the Display area with a height of 3px and width of 900px

15 Set the foreground color to #b5b5b5 then fill the layer (shift+f5)

16 Select the Rectangular Marquee Tool (M) and create a section with a width of 800px and height of 2px place the section 100px to the right side of the banner, Set the foreground color to #ffffff then fill the layer (shift+f5).

Creating the logo

17 Select the Horizontal Type Tool (T). Add some text to the canvas, use the settings shown in the image below

Creating the Navigation and hover

18 Select the Horizontal Type Tool (T). Add some text to the canvas, use the settings shown in the image below.

19 Select the Polygonal Lasso Tool (L). Create a small triangle, this will act as our rollover state

20 Select the Polygonal Lasso Tool (L). Create a small triangle, this will act as our rollover state

Creating the Display areas content

21 For the Display area, I decided to use a Safari interface with a webdesign inside, the safari interface can be downloaded from here.

22 Place the Safari interface in the center of the display area, I decided to add my favorite website inside the interface.

23 Duplicate the interface twice. Reduce the duplicates size by 30% place the 2 smaller duplicates behind the big one.

Creating main content

24 For the main content you will need 3 icons, here is what I used:

25 Place each icon in a line with roughly 300px between each icon.

26 Select the Horizontal Type Tool (T). Add some text to the canvas, use the settings shown in the image below.

27 Duplicate the layer twice and place each duplicate to the right of an icon.

28 Select the Horizontal Type Tool (T). Add some text to the canvas, use the settings shown in the image below.

29 Duplicate the layers twice and place them underneath each icon.

30 We will now create a contact area, we will be using a contact icon that can be found here, place the icon below the first icon and its text.

31 Select the Horizontal Type Tool (T). Add some text to the canvas, use the settings shown in the image below and place the text to the right of the contact icon.

32 Select the Horizontal Type Tool (T). Add some text to the canvas, use the settings shown in the image below then place it similar to how I have.

Here is what we have made so far:

Creating the footer content

33 Select the Horizontal Type Tool (T). Add some text to the canvas, use the settings shown in the image below then place it similar below the footer we made earlier.

Congratulations!

You have now completed the tutorial, your outcome should look similar to this:

Thanks for reading our tutorial, we would love to hear some comments from our readers, so please comment about our designs or any ideas you may have. Remember, you can always support PSDbase on Twitter and via RSS.