Creating a web template using Photoshop

This is a tutorial on how to create a website main page template using Photoshop as the medium
This is part of a 6 part tutorial series on how to create a Flash website using Flash CS5. The tutorial covers the following : 1. Creating a web template using Photoshop

2. Importing a Photoshop file in Flash CS5

3. Adding sounds and animation to buttons

4. Adding Animation and Button interactivity

5. Adding a Preloader

6. Publishing the Flash content

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. 1. 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.

2. 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.

3. 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.

4. 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. 5. 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. 6. 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.

7. 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.

8. 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. 9. 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. 10. 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.

11. Enter text COLLECTIONS, TIMEPIECES, FRAGRANCES, STORES, EVENTS, DOWNLOADS, C ONTACT 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.

12. 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.

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 Step 2: Importing your Photoshop file in Flash CS5

Please Like, Tweet or Share this page if you found this resource useful!