Design a Sleek Textured Portfolio Design

Step 1

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

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%

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:

Step 4

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

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:

Step 6

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

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:

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):

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.

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):

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.

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:

Step 13

To finish up, add a simple copyright notice at the footer of your 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: