FanExtra Network


Final Image

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

Step 1

Open up a texture from our free texture set:

NoiseRock Texture.

Call this layer ‘texture background’.

Step 2

Now resize your image to be 1000px wide. We want to really bring out the details of this texture, so I go to filter>sharpen>sharpen.

Step 3

Go to layer styles for your texture layer and apply a normal, black cover overlay, 90% opacity.

Step 4

Create a new layer called ‘header highlight’. Drag a white-transparent radial gradient from the top left corner of your canvas.

Then reduce this layer’s opacity to 20% and change it’s blend mode to ‘hard light’. I also sharpen my texture layer again.

Step 5

Type out some header text (font: Baskerville, size: 82pt, color: white). Change this layer’s blend mode to ‘soft light’ and reduce it’s opacity to 80%.

Then apply an inner shadow layer style (color: black, opacity: 90%, distance: 2px).

Step 6

Now use your custom shape tool to create a custom shape above your logo text. We want this shape to have the same engraved effect as our logo text, so to easily achieve this simply right click on your logo text layer in your layers palette and click ‘copy layer styles’. Then return to your new shape layer and right click on it > paste layer styles. This will replicate not only the layer effects but the layer opacities etc of your text layer. Voila! A cool engraved logo.

Step 7

Select the pen tool, and then draw a curved line across the top left corner of your canvas.

Select a 2px white paintbrush tool. Now select your pen tool and right click on your path. Select ‘stroke path’ to stroke your path with a 2px white line. Then in your paths palette right click on your path and press ‘delete path’ to leave a white curved line. Copy/paste in the layer styles from your previous engraved layers. However, as the line is thinner than your logo text/symbol you’ll need to reduce the inner shadow distance from 1px. Then change the layer’s mode from ‘soft light’ to ‘normal’ and reduce it’s opacity to around 35%.

Step 8

Repeat this technique to create a range of curved lines in your header. There is no need to create these lines on new layers, as using your initial line’s layer will mean that each subsequent line uses the same layer styles.

Finally, once you have created your lines and remembered to delete all your paths, use a large, soft eraser brush to erase away the edges of some of your lines, fading them gradually into the background.

Step 9

Now type out some menu text to the right of your logo. I used Baskerville again as the font, and used no layer styles, but reduced this layer’s opacity to 35%.

Then I used my rectangle tool to add a basic underline effect under the ‘home’ link, acting as it’s current menu state.

Step 10

Setup two vertical guides, one at 50px, one at 950px. Then setup two additional horizontal guides, one at 180px, one at 400px. Then create a new layer called ‘border’. Use your rectangular marquee tool to create a selection between each of the guides. Fill your selection with white, and then go to select>modify>contract and contract by 1px. Hit delete, to leave a 1px white border area.

Then reduce this layer’s opacity to around 25%. Add an outer glow layer style: opacity: 50%, spread: 7%, size: 18px. This should create a nice subtle lighting effect to go with your border.

Step 11

Now use your magic wand tool to select inside of your border. With your selection in place go to select>modify>contract and contract by 10px. Create a new layer called ‘inner area’ and fill your selection with a linear gradient ranging from 303030 to 525151.

Then reduce this layer’s opacity to 35%.

Step 12

Create vertical guides set at 50px, 350px, 650px and 950px.

This will provide the guidelines for the lower part of our layer.

Step 13

Use the guides to create three columns of content in the bottom part of your layout.

I used baskerville at varying degrees of opacity to create my text. Then I used my marquee/gradient tools to create white-transparent 1px dividing lines. Finally, I added an image to my left column, giving it a border that used the same techniques as my main section’s border:

Step 14

But what if you want to have a taller layout?

Go to image>canvas size and adjust the height to 1300px.

Then duplicate your original ‘texture background layer. Move the texture beneath the original texture area. You will notice a slight seam between the two textures. In order to blend the two layers together, go to layer>layer mask>reveal all.

Then create a linear gradient (black>transparent) and drag it down from the top of your second texture.

Step 15

Set out some guides for the next section of your layout. You need vertical guides at horizontal guides at 660px and 800px. Then add additional vertical guides at 150, 350, 400, 600, 650, and 850px. (see below).

Now download some pictures to add to this new section:

Once you’ve pasted in these images, merge all of the layers together. Then go to image>adjustments>brightness/contrast. Reduce the brightness to -150, and contrast to 30.

Now apply an outer glow and stroke layer effect to your merged photo layer. You can see the final result below:

Step 16

Now add some text above these images. Then add a 1px divider. To do this I create a transparent-white-transparent gradient ranging across my canvas. Then I deleted all but 1pxs height from this.

Step 17

Create a circular selection, and fill it with a linear gradient ranging from 000000 to 2a2a2a. Apply an outer glow, bevel & emboss and stroke layer effect (see details below):

Then add a faint arrow shape over your circle.

Step 18

Now make sure that your 3 column part of your content area has all of it’s layers within a single layer folder. Duplicate this layer folder and move it down beneath your flickr gallery area.

Change the content of these three columns to provide further homepage content. Be sure to keep the opacity of your content relatively low to match the general theme of the design, and let the textured background show through.

Step 19

Now create a new layer called ‘footer clouds’. Select your lasso tool and be sure to change it’s feather amount to 100px. Draw a wavy semi-circle type selection in the bottom of your canvas. Then hit ‘d’ on your keyboard to reset your colors.

Go to filter>render>clouds. The feathered selection will mean that your clouds have a soft edge, smoothly blending into your main background. Reduce this layer’s opacity to 75%.

Then add a copyright label.

Step 20

Create a new layer called ‘main area clouds’. Repeat the steps that you used to create clouds in your footer.

Use a 100px feathered lasso selection and filter>render>clouds to create a mass of clouds over your main area near the top of your canvas.

Reduce this layer’s opacity to 40% and then duplicate it. Keep the duplicate’s layer mode as ‘normal’ but change the original cloud layer’s to ‘color dodge’.

Step 21

Now repeat this technique, creating several smaller clouds around your area. Use your eraser brush if necessary to touch up the details.

Step 22

Type some text over the center of this area. Copy/paste the layer styles of your logo, being sure to reduce the size of your inner shadow layer style to 1px.

Step 23

Paste in this picture of a hot air balloon:

Hot Air Balloon.

Apply a drop shadow layer style (settings shown below) to help add depth to your balloon.

Step 24

Go to image>adjustments>hue/saturation and reduce the balloon layer’s opacity to -80.

Then go to image>adjustments>levels and apply the settings shown below to add more impact to your image:

Step 25

Add some more images to your main area, repeating the steps used on your first hot air balloon. By amassing colorful photos in this type of montage you are contrasting the site’s dull colorscheme, but combining the styles of gothic and traditional with fun, lively and bright.

Step 26

Now add some text to your main area, beneath your traditional text. Use a funky, script like font (I used Brush Script MS, b0e3f8). Reduce your layer’s opacity to 70% to make it a bit more subtle, and then add the inner shadow and outer glow settings shown below. This should complete a fun heading for your site!

And We’re Done!

Sketch in a final rough underline underneath your blue text to complete your layout!

I hope that you enjoyed this tutorial. You can view the final image below (click to view full-sized version):

VIP Download

Download the original .psd file for this tutorial here:


Leave a comment


No comments have been posted yet. Be the first!

Leave a Comment:

Related Posts