Quality content for Photoshop fans everywhere! 
Final Image
This is the final image that we’ll be creating:
Images Used
Here is a list of images used in the making of this tutorial:
Step 1
Open up a new document (960X850px). Create a new layer called ‘main background’ and fill your canvas with cream (E9E8E5). Then create a new layer called ‘darker background’. Use your rectangular marquee tool to select the top of your canvas, and then fill it with a slightly darker cream (DAD8CF).
Step 2
Now open up your photo in a new document. Go to image>resize and resize your photo to 920px wide. Then return to your original document and hit paste. This will automatically paste your image into the center of your image. Move the image upwards towards the top of your canvas, keeping it horizontally central.
Step 3
Now I want to do a little photo improvement, seeing as the island photo is the central part of my layout. First I go to image>adjustments>levels and change my input levels to: 25, 1.55 and 245. Then go to image>adjustments>hue/saturation and reduce your photos saturation to -30. Finally, go to image>adjustments>color balance and change your color levels to +25, +25, -50.
Step 4
Now go to blending options for your photo layer and apply a 6px white stroke effect and a drop shadow.
Step 5
Now select your ‘dark background’ and apply a gradient overlay and drop shadow to it.
Step 6
Create a new layer called ‘light spot’ above your background layers but below your photo layer. Then drag out a white to transparent radial gradient from the top center of your canvas. This should give your header a subtle lighting effect.
Step 7
Now type out some menu links on a new layer above your background and light spot layers and beneath your photo layer. The font I used was Arial, size 14pt, bold, -50 kerning. Put 15 spaces (spacebars) between each link item.
This works out at about 50px between each link. Now create a new layer beneath the text layer called menu. Create a bar, with 25px space to the side of each link, and fill your bar with a brown gradient.
Step 8
Now zoom in and use your rectangular marquee tool to delete 1px dividers in your menu.
Step 9
Now apply an inner shadow effect to your menu layer.
Step 10
Select your home tab using your marquee selection tool, and then go to image>adjustments>brightness/contrast. Up your brightness to +60 and your contrast to +15.
Step 11
Now paste in a tag photo. I cut it out using the magic wand tool and lasso tool. It was too intense so I went to image>adjustments>hue/saturation and reduced my saturation and increased my lightness.
Step 12
Now go to blending options for your tag layer and apply a drop shadow (settings below):
Step 13
Add some logo text next to your tag, and add a sunshine custom shape over your tag.
Step 14
Now plan out your main content areas. Use your rounded rectangle tool (5px radius) and draw out a large area to the left, and two smaller areas to form a right column. For the 2 right areas, apply gradient overlays, ranging from dark brown to slightly lighter brown for the top area, and dark greeny-blue to slightly lighter dark greeny-blue for the bottom right area.
Step 15
To finish off the template add some content. I would go into the specifics of this step, but there aren’t really any! You’ve already setup your main template, so simply use your text tool to add in your text, and then paste in photos for your sidebar content.
No special effects, just good contrast against your backgrounds works well.
And We’re Done!
I really hope that you enjoyed this tutorial, and as always I’d appreciate your comments.
You can view the full sized layout by clicking the image below:
26 Awesome Comments: Leave Your Comment