Jun 11

Design a Sleek Textured Portfolio Design

Fri, 06/11/2010 - 20:19 — julie

psdfanmembersbut Design a Sleek Textured Portfolio Design

Final Image

As always, this is the final image that we’ll be creating:

bluedes13 Design a Sleek Textured Portfolio Design

Step 1

Creating a new document (1000X1000px) and fill your canvas with 0e4b7f:

bluedes1 Design a Sleek Textured Portfolio Design

Step 2

Now create a new layer called ‘header highlight’ and drag out a radial gradient (white to transparent) from the top-center of your canvas. Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 50%

bluedes2a Design a Sleek Textured Portfolio Design

bluedes2b Design a Sleek Textured Portfolio Design

Step 3

Now download this great metal texture. Paste it into your document, and then go to image>adjustments>desaturate to grayscale it.

Then go to image>adjustments>levels and apply the adjustments shown below:

bluedes3 Design a Sleek Textured Portfolio Design

Step 4

Now reduce you metal texture layer’s opacity to 10%.

bluedes4 Design a Sleek Textured Portfolio Design

Step 5

Now apply some guides to your document, set at 50px and 950px (vertical) and 100px and 950px (horizontal). Then fill the inside area with white, using your marquee tool and paintbucket tool:

bluedes5 Design a Sleek Textured Portfolio Design

Step 6

Add some text to your header (b7dbfe) to construct a logo and menu.

bluedes6 Design a Sleek Textured Portfolio Design

Step 7

Now cut out this photo of a laptop and paste it into your document.

Then adjust the levels of your image to give it more impact:

bluedes7 Design a Sleek Textured Portfolio Design

Step 8

Now paste in a screen grab of one of your client’s websites. Go to edit>transform>distort and distort the image to fit over your laptop screen. Then to give it a subtle border, apply a stroke blending option (settings below):

bluedes8 Design a Sleek Textured Portfolio Design

Step 9

Now add some text to the left of your laptop. I used Arial (-50 kerning) and made the heading 408dd0 and the body text 8e8e8e.

bluedes9 Design a Sleek Textured Portfolio Design

Step 10

Now use your rounded rectangle shape tool (10px radius) and create a button under your welcome text. Apply an inner shadow and gradient overlay blending option (settings below):

bluedes10a Design a Sleek Textured Portfolio Design

bluedes10b Design a Sleek Textured Portfolio Design

Step 11

Create a new layer called ‘bottom area’. Use your marquee tool and fill the bottom part of your white content area with . Then apply an inner shadow blending option (settings below) in order to create a subtle divider.

bluedes11 Design a Sleek Textured Portfolio Design

Step 12

Now add in some content to the bottom half of your layout. I just used Arial for my text, and then for the buttons duplicated the button layer I had already created in the top half of my layout:

bluedes12 Design a Sleek Textured Portfolio Design

Step 13

To finish up, add a simple copyright notice at the footer of your design.

bluedes13 Design a Sleek Textured Portfolio Design

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome:

bluedes13 Design a Sleek Textured Portfolio Design

psdfanmembersbut Design a Sleek Textured Portfolio Design

 Design a Sleek Textured Portfolio Design

Copyright 2009. E-mail Me
Auto Spare Parts