Psdbase - Adobe Photoshop Tutorials

Create A Simple Icy Portfolio Layout

On 03.01.10, In Web Layouts, by admin

In this tutorial you will learn how to create a simple portfolio layout that cannot only be used for a portfolio but also a blog, product site or company site with minor modifications

Preview:

Create a new photoshop document

1 Open up Photoshop, create a new document that is 1000px by 1000px, with a background color of #6a7796

Creating the background

2 We are now going to create a cracked wall effect using a stock. The stock was created by Matthew Heidenreich from DeviseFunction

3 Using the eraser tool (E) I erased the left,right and lower regions of the stock so it blends with the background color

4 Set the layers blending options to overlay and lower the opacity to 50%

5 Select the rectangular marquee tool (M) and create a rectangle section across the top part of the canvas,
its height should be 10px

6 Set the foreground color to #3b4459 then fill the layer Shift+F5

Creating the logo

7 For the back of the logo you need a photoshop brush the one used is from Brusheezy

8 For the logo I used this Font. Select the horizontal type tool (T). Place the text on top of the brush effects used in step 7

9 Double click the layer to open the layer styles dialogue box, use the settings in the image below

Creating the main content area

10 Select the rectangle tool (U), and create a white #ffffff rectangle with a width of 880px and height of 760px

11 I added a picture of the “Productbase” layout to the top of the main content area, this will be used as a place holder for a rotator

Creating a 3D title bar

12 Create a dark blue (#3b4459) rectangle with a width of 400px and height of 50px

13 Duplicate the layer twice. Select one of the duplicates, open the hue and saturation dialogue box CRTL+U, and use the settings below

14 We will now skew the layer to give it some dimension. Go to edit > transform > skew, select the middle transform box on the left and raise it upwards

15 Select the rectangular marquee tool (M), using the selection delete the excess bar

Creating the sidebar

16 Select the rectangular tool (U) and create a light Grey (#d1d1d1) rectangle, it’s width will be 485px and height 357px

Creating the footer

17 Select the rectangular marquee tool (M) and create a rectangle section across the bottom part of the white area
its height should be 110px

18 Set the foreground color to #2d333f and the background color #171b25. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards

Here is what we have so far

Adding content

Navigation

19 For the navigation I used simple Ariel font with a drop shadow layer style, I used a scaled version of the logo’s brush background for a hover state

Rotator title

20 I used the same font as I did on the navigation with the same layer style.

Sidebar content

21 For the sidebar I added a thumbnail with a thick dark blue border (#292d36), below that I added a simple bullet point list

main area Content

22 for the main content I added a dark version of the logo as a title, and added some simple Ariel text for the information

footer Content

22 For the footer I duplicated the navigation layer and used the exact same settings

you have now completed the tutorial, you can now put what you have learned here to the test and create your own unique layout, remember creativity is the key

Don’t forget you can follow us on twitter and rss