a web template using Photoshop
This is a
tutorial on how to create a website main page template using Photoshop as the
1. You need to have Photoshop CS3 or higher version of
photoshop installed on your machine.
2. You need to have the images used in this tutorial to follow the given steps.
You can download the images.zip (click on the link to download)
or follow the links adjacent to the images in the steps.
Photoshop (which ever version you are having, we are using Photoshop CS3) and
choose File > New from the main menubar; the New window is displayed. Set the parameters in this window as shown in Figure.
Choose the OK button; a new photoshop file is opened.
a new layer and rename it as background and open the background.jpg (click
to download this image) in the photoshop file. The
background is displayed, as shown in Figure.
another layer and rename it as jewel cuffed braclet.
Choose the Rectangular Marquee Tool
from the Tool box and create a vertical rectangle selection, as shown in
the Gradient Tool or press G to
activate this tool. Set the hex values for right side gradient color node to #000000
and left side gradient color node to #850900. Add radial gradient to the
add any HD image of a bracelet to the gradient box. Select the two layers (the
gradient box layer and the bracelet layer) and press CTRL + e to merge them
together, as shown in Figure. (Click on this link to download this image).
image seems to be merging with the background layer because both of them has the same color. To make the ring stand out we will add
outer glow to it. But, if you want to import this template in flash then prefer
adding these effects in flash itself for better quality.
on the rings layer; the Layer Style
window is displayed. Set the following settings for the Outer Glow parameter in this window, as shown in Figure.
add bangles.jpg, ravishing _rings.jpg, and the earings.jpg to the photoshop
file. Also, add the Outer Glow
parameter to these images, as discussed in the previous step. Align all the
four images, as shown in Figure.
the text tool to enter labels to the images as RAVISHING RINGS, CUTTING
EDGE EARINGS, JEWEL CUFFED BRACELETS,
FASHION PULSE BRACELETS (Font: Aparajita,
Type: Regular, Size: 18pt, Color:
White) respectively from left to right. Add outer glow to these text as
discussed earlier in the tutorial.
enter the name of the company as ENTHEOS
Jewels (Font: Rage Italic, Type: Regular, Size: 72pt, Color:
White). Apply drop-shadow on the Entheos layer; Layer
Style window will be displayed. Choose the Drop-Shadow option from this window and choose the Ok button.
write the text, COLLECTION OF THE BEST
KEPT SECRETS ON EARTH (Font:
Trajan Pro, Type: Regular, Size: 14pt, Color: White). Align all these texts as shown in Figure.
- Enter text COLLECTIONS, TIMEPIECES, FRAGRANCES, STORES, EVENTS, DOWNLOADS, CONTACT US (Font: Orator
Std, Type: Medium, Size: 18pt, Color: White) from left to right. Make sure that all the texts are
on different layers.
Enter text FULLSCREEN and MUSIC (Font: Orator Std, Type: Medium, Size:
12pt, Color: White). These two texts
should also be in separate layers. Align the texts added in step 9 & 10, as
shown in Figure.
Create a new layer and rename it as hanging_pendant and open the hanging_pendant.jpg (click to download this image) in the photoshop file.
You can add drop-shadow to it but avoiding adding if you want to import it in
flash. Align this pendant, as shown in Figure.
web template is ready. You can also add images and menus of your choice in this
template and enjoy. But remember, if you want to create the entire website in
flash CS5 then do not add any effects on the images or on the text.
Click here to download the photoshop file
Proceed to Step 2 >> Importing your Photoshop file in Flash CS5
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.