This is a tutorial on how to create a website main page template using Photoshop as the medium.
Please note:
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.
- Open
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.
-
Create
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.
-
Create
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
Figure.
- Choose 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 selection.
- Next,
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).
The ring 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.
- Double-click
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.
- Similarly
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.
- Use 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.
- Also 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.
- Also
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.
-
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.
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.
The 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
Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!
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.
Travelling is my life
ConversionConversion EmoticonEmoticon