Design a Textured Portfolio Website

Step 1

Create a new document (1000X1000px). Then download a metallic texture:

Metallic Texture.

Resize this texture and paste it into your document:

Step 2

Now add an adjustment layer (hue/saturation). Reduce your saturation to -100, and your lightness to -85. This should make your texture a suitable background design.

Step 3

Paste in this photo of smoke.

This photo has a white background, and we want it to have a black background. Go to image>adjustments>invert. This will invert the colors of your smoke image, making the background black, and your smoke green.

Step 4

Now change your layer's blend mode to 'screen'. This will hide your black background. Then move your smoke to the top of your canvas, as this will help construct the background of your header.

Then go to image>adjustments>desaturate, in order to grayscale your smoke. For the right side of your smoke, use a soft eraser brush to blend it smoothly into your background texture.

Then reduce your layer's opacity to 20%.

Step 5

Now duplicate your smoke layer, and go to edit>transform>flip horizontal.

Then add in a further smoke image (smoke image). Repeat your previous technique to integrate this image into your design.

Step 6

Create a new layer called 'overlay lighting'. Select your radial gradient tool, and create a few radial gradients overs your smoke. Be sure to use neon colors.

Step 7

Now change the blend mode of this layer to 'overlay'. Reduce the layer opacity to 45%.

This should color your smoke, creating an attractive background design.

Step 8

Now merge all of your smoke layers together (command+E to merge down your layers). Your merged layer will have an opacity of 100%. Reduce the layer opacity to 65%.

Step 9

Go to view>new guide. Apply a vertical guide at 100px and 900px. Then apply vertical guides at 160px, 200px, 450px and 800px. These guides form the basis for your layout:

Step 10

Now create a new layer called 'menu'. Use your marquee selection tool to fill the top area defined by your guides. Fill your selection with white, and then reduce your layer's opacity to 10%.

Step 11

Now create a layer called 'content area'. Fill the bottom area defined by your guides with 292929.

Step 12

Now go to blending options for your 'content area' layer. Apply a stroke effect: Size: 1, color: ffffff, opacity: 20%.

Step 13

Paste in this old paper texture.

Use your guides to cut out all of the areas of paper that goes outside of the area directly beneath your menu. Call this layer 'old paper texture'.

Step 14

Now apply an adjustment layer (hue/saturation). Reduce your saturation to -80, and increase your lightness to +60. This will effect your entire canvas, whereas you only want it to effect your paper texture area. To fix this, go to layer>apply clipping mask.

Step 15

The background is a little distracting at the moment, so to tone it down create a new layer above all of your background layers, but beneath your menu and content area layers.

Fill your canvas with a linear gradient ranging from 000000 to 1e1e1e.

Reduce this layer's opacity to 40%.

Step 16

Create a new layer called 'highlight'. Option+click on your dark gray 'content area' layer in your layer's palette. This will automatically select this area.

With your selection in place, select your new 'highlight' layer in your layer's palette.

Then use the radial gradient tool, to create a white-transparent gradient ranging from the top center of your 'content area'. The fact that this area is enclosed by an active selection means that your radial gradient shouldn't go beyond the edges of this area.

Step 17

Create a new layer called 'background highlight'. Create a white-transparent radial gradient ranging from the top-center of your canvas. Ensure that this layer is beneath your menu/content area layers, but above your other background layers.

Then change this layer's blend mode to 'overlay'.

Step 18

Now apply some text over your menu. I made my font Arial, 14pt, -50 kerning, b4b4b4.

Step 19

Create a new top layer called 'menu active tab'. Use your polygon lasso tool to create an arrow shape. Fill it with 2e282f. This acts as your active menu link.

Step 20

Now take a screen capture of an example of a website you've built. I went with our new network fanextra. Paste this into your document, and resize it to fit over your paper texture area.

Step 21

Now apply a stroke blending option to your screengrab layer. Make your stroke 6px in size, black, with 15% opacity.

Step 22

Now apply some heading text over your paper texture area.

I used AW Conqueror Slab font, 40pt, -50 kerning, 1e1e1e.

Step 23

Now apply some more text underneath your header text. I chose Arial font, 18pt, -50 kerning, 737373.

Step 24

Create a rounded rectangle (10px radius) beneath the words 'learn more'. Apply a color overlay (262428). Then change the color of your 'learn more' text to b6b6b6 to make it stand out against this dark button.

Step 25

Now type out some text at the top center of your canvas to act as your website's logo. I made my text dbdbdb, in order to stand out against the dark header background.

Step 26

Now we're going to add some content to our bottom dark gray content area.

We want this area to have 3 columns, so it's time to create some more guides!

Create vertical guides at 366px and 634px.

Step 27

Download the great icons below, and paste them into the center of your 3 columns at the bottom of your design:

blog icon

Forum/Member Icon

Services Icon.

Step 28

Now add some text beneath each icon, making sure to centrally align it in it's respective icon.

Step 29

Finally, add some footer text. I typed out my logo (using the same font specifications I used for my logo), and then typed out a copyright notice.

I made my font medium-gray in order to give it a faded look against my dark background. The color I used is: 535252.

Step 30

I wasn't happy with my left aligned menu, so I made my menu text central. Remember to move your active menu tab arrow also.

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: