This tutorial can be found here http://www.devwebpro.com/celebrity-fansite-tutorial/
Introduction
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.
(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.
Duplicate the background layer then apply Filter > Stylish > Emboss with the following settings:
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%.
Your background should now look like this:
You can now merge the two background layers together if you want.
Step 2 – The Logo
Get the Text Tool out (
) then write out your logo-text near the top-left.
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:
Now, find then select the Custom Shape Tool, go into the shapes then select the Ornaments set.
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.
Now apply the same layer styles to the ornament layer as you did with the text.
Lastly for this step, add in text with the same settings and all, except a smaller size next to the word ‘LILLY.’
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
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:
I changed the color of the Contact text to indicate a mouse-over. The color I used was #ff8908.
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.
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.
In the layer’s palette near the bottom, click the layer mask button then do some grunge brushing in the layer mask.
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:
For the first layer I lowered the Fill to 60% and applied this Inner Glow.
For the other thumbnail layers I used the exact same settings, except I used a high Fill opacity. 85% to be exact.
Lastly, add in some text underneath the thumbnails.
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.
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
• Stroke
You should now have something like this:
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.
Fill this selection with a very dark-gray gradient. I also applied this Inner Glow.
I then applied Filter > Noise > Add Noise with an amount of about 1.5.
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%.
Now I added in some dotted lines 1px from each side of the header. Use the pencil tool to get this effect.
Change the layer mode for these dotted line layers to either Soft Light, or Overlay.
Lastly for the header, I blended in a stock photo of some grass, and added in text.
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.)
Fill this selection with a dark brown gradient. The colors I used for my gradient were #a49d86, and #4f4c3c.
I added a little ornament to the left of the bar, which comes with Photoshop, and I also added in the text.
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.
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.
Duplicate all of those layers, merge them together, then move it downwards.
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.
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.
