This tutorial can be found here


Welcome to the tutorial.
In this tutorial I will be teaching you how to make a stylish, celebrity, fansite web layout. You will need to have moderate knowledge of Photoshop to complete this tutorial, as I will not be going in-depth on everything. We’ll be using Evangeline Lilly (Kate from LOST) as the star of our fansite template tutorial.
Girly Fansite Web Layout
(Click for larger preview)

Step 1 – The Background

We’ll start by creating a new document for our web layout. I used a document size of 740 x 740 pixels. I used the default resolution of 72.
Now fill the background with #413e2f. Now apply Filter > Noise > Add Noise to the Background layer. Use an amount of about 1.0-2.5.
Filter Noise Background - Photoshop Tutorial
Duplicate the background layer then apply Filter > Stylish > Emboss with the following settings:
Emboss Settings - Photoshop Tutorial
Now apply Filter > Sharpen > Sharpen to the same layer. Now change the layer mode for this layer to Overlay, and lower the opacity to 80%.
Layer Mode Settings - Photoshop Tutorial
Your background should now look like this:
Background Imag - Photoshop Tutoriale
You can now merge the two background layers together if you want.

Step 2 – The Logo

Get the Text Tool out (Text Tool Icon - Photoshop Tutorial) then write out your logo-text near the top-left.
Text Written Out - Photoshop Tutorial
The details for my text are as following:
Font: Times New Roman.
Sizes: 48pt and 36pt.
Color: #eae5d7.
After writing out your text, apply the following layer styles:
Drop Shadow
Gradient Overlay
You should now have text that looks like this:
After Applying Layer Styles - Photoshop Tutorial
Now, find then select the Custom Shape Tool, go into the shapes then select the Ornaments set.
Custom Shape Tool - Photoshop Tutorial
In the above image, you can see where to find the Custom Shape Tool, and also where to change the shapes, and the shape that I used (selected).
Change your foreground color to the same color as what you used on the text, then draw out the ornament above your text.
Drawn Ornament - Photoshop Tutorial
Now apply the same layer styles to the ornament layer as you did with the text.
Layer Styles Applied - Photoshop Tutorial
Lastly for this step, add in text with the same settings and all, except a smaller size next to the word ‘LILLY.’
Smaller Fansite Text - Photoshop Tutorial

Step 3 – Navigation Text

In the same font (Times New Roman) and the same color (#eae5d7) write out some navigation buttons underneath the text logo.
My navigation was laid out like so:
.01 Home
.02 About
.03 Contact
.04 Gallery
.05 Links
Navigation Text - Photoshop Tutorial
For the text .01, .02, etc, I used size: 24pt, and for the main text I used size: 36pt.
Go into the blending options for the navigation text, then apply the following layer styles/settings:
Drop Shadow
Inner Shadow
Gradient Overlay
Now your text should look like this:
Layer Styles Applied - Photoshop Tutorial
I changed the color of the Contact text to indicate a mouse-over. The color I used was #ff8908.

Button Mouseover - Photoshop Tutorial

Step 4 – Thumbnails Area

Now for this section, which will be under the navigation buttons, you’ll need some photos of Evangeline Lilly. Download them below.
Waterfall Shower
Summer Fun
LOST Wallpaper
Now, let’s start our thumbnail holders. First create a new layer. Now make a selection of about 100 x 80 pixels underneath the navigation text.
Selection - Photoshop Tutorial
Fill this selection with the same color as we’ve been using (#eae5d7), duplicate that layer, move it over to the right so there’s only 10 pixels inbetween the two, then repeat once more.
Duplicate Boxe - Photoshop Tutorials
In the layer’s palette near the bottom, click the layer mask button then do some grunge brushing in the layer mask.
Grunge Brushing Layer Mask - Photoshop Tutorial
The brush I used mostly comes with Photoshop, it’s called Rough Round Bristle.
Now you need to add in your thumbnails. Follow these simple steps:
1) Open Evangeline Lilly photos, resize to much smaller size. Move into template document.
2) Make selection inside of image, sized 96 x 76 pixels.
3) Invert the selection (Select > Inverse), press delete.
4) Move thumbnail into place (inside of borders).
Hopefully, you’ll have something that looks like this:
Thumbnails - Photoshop Tutorial
For the first layer I lowered the Fill to 60% and applied this Inner Glow.
After Layer Setting - Photoshop Tutorials
For the other thumbnail layers I used the exact same settings, except I used a high Fill opacity. 85% to be exact.
After Layer Mode Changes - Photoshop Tutorial
Lastly, add in some text underneath the thumbnails.
Text Added - Photoshop Tutorial
The font I used was Tahoma, 12pt, #eae5d7 & #ff8908.

Step 5 – Updates Area

Before you continue, you can see how you’re doing with the tutorial, here.
Now let’s make an updates/content area. First ggt the Rectangular Marquee Tool then make a Fixed Size Selection of about 360 x 1000 pixels, 20 pixels from the end of the document.
Selection - Photoshop Tutorial
Fill this selection with the light brown color we’ve been using. (eae5d7)
After filling the selection, go into the Blending Options and use the following settings:
Outer Glow
You should now have something like this:
Layer Style Settings - Photoshop Tutorial
Not bad.
Now let’s made the header. First create a new layer then make a selection at the top of the main area. My selection was 348 x 140 pixels.
Header Selection - Photoshop Tutorial
Fill this selection with a very dark-gray gradient. I also applied this Inner Glow.
Inner Glow Applied - Photoshop Tutorial
I then applied Filter > Noise > Add Noise with an amount of about 1.5.
Noise Settings - Photoshop Tutorial
I then used the Rough Round Bristle brush that comes with Photoshop to do a little bit of grunge brushing in the left corner of the header. I then changed the layer mode for the grunge layer to Overlay and lowered the opacity to 40%.
Grunge Brushing - Photoshop Tutorial
Now I added in some dotted lines 1px from each side of the header. Use the pencil tool to get this effect.
Dotted Lines - Photoshop Tutorial
Change the layer mode for these dotted line layers to either Soft Light, or Overlay.
Layer Mode Chang - Photoshop Tutoriale

Lastly for the header, I blended in a stock photo of some grass, and added in text.
Stock Photo and Text - Photoshop Tutorial
To blend the photo in, I first cropped it to the header size, changed the layer mode to Soft Light then erased a few parts with a grunge brush.
For the text, I used the following layer styles:
Blending Options: Main
Drop Shadow
Inner Shadow
Gradient Overlay
And that’s it.
Lastly, we’re going to add in the update bars and stuff.
First create a new layer, then create a selection the same width of the header, but about 30px or so in height. (Make this selection underneath the header.)
Updates Bar Selection - Photoshop Tutorial
Fill this selection with a dark brown gradient. The colors I used for my gradient were #a49d86, and #4f4c3c.
Gradient Bar - Photoshop Tutorial
I added a little ornament to the left of the bar, which comes with Photoshop, and I also added in the text.
Ornament and Text - Photoshop Tutorial
The ornament I used above can be found in the Ornaments shapes set which comes with Photoshop.
The font I used above is called Georgia, the sizes I used were 11pt & 10pt, the color I used was #dcdad4.
Now, create another new layer, then make a selection the same width, but a lot taller underneath the bar. Fill this selection with #d5cbaf.
Box Selection Filled
The size of the box above is 348 x 120 pixels.
Lastly for the update box, add in text. The font I used was Georgia, and the color I used was #545140.
Updates Text Added - Photoshop Tutorial
Duplicate all of those layers, merge them together, then move it downwards.
Updates Box 2 - Photoshop Tutorial
Lastly, all you have to do is duplicate one of the bar layers, move it to the bottom of the document, then change the text to the copyright.
Copyright Bar - Photoshop Tutorial
That’s pretty much it for this tutorial, we hope you enjoyed it.
If you would like to download the PSD for learning purposes only, you can download it from here.

Written by Kevin - Visit Website