The topic is all about step by step making a simple web template using Photoshop Version 6.0

Step 1. First make sure you have installed Photoshop 6 in your pc.

Step 2. Being your system in a idle position click on start => All programs => adobe=>adobe Photoshop 6.0



Figure 1

It will open you like this.

Step 3. Now click on file new (ctrl+N), a new small window will appear by the name new there specify the width 800 pixels width 800 pixels resolution 72 pixel/inch mode RGB colour and content White click ok. A white editing field will appear.
In the layer window you can able to see Background and is locked. To see the layer window click on window => show layer window. Most of the time opens by default.


Figure 2

It is a good practice to unlock the content so double click on Background inside the layer window. It will open you a new small window by name “New Layer” keep the settings same and click on ok. The layer will change to “Layer 0”



Figure 3

Step 4. Now make a new layer by clicking “Create a new layer” option. A new Layer will generate by name “Layer 1”.



Figure 4

Step 5. Now click on the “Rectangular Marquee Tool(M)” and drag a section rectangle as shown below. While highlighting "Layer 1"



Figure 5



Figure 6


Step 6. To fill the selected section in Photoshop 6 our preferred colour colour should be selected first.



Figure 7

Click on set for ground colour the courser will change to dropper. And we can select our desire colures. As shown
I choose orange colour of hash code #C6790C



Figure 8


Step 7. Now click on edit from drop down menu select fill. While keeping the foreground colour selected mode normal opacity 100%. Click ok



Figure 9

Step 8. Now our menu bar has been created. To make the menu bar stylish.
Just click twice on layer 1



Figure 10

Double click will open you a new window name “Layer Style”.



Figure 11


Step 9. In this window select the “Gradient Overlay”



Figure 12

While clicking on “Gradient Overlay” with this setting click ok.



Figure 13

Your template will look like shown above.

Step 10. Now will make style for menu options.
Create a new layer as shown in Step 4. Will generate a new layer by name “Layer 2”
While selecting this new Layer 2, select a small section (approx 1 pixel) on the manu bar using “Rectangular Marquee Tool (M)”
Look like this



Figure 14

Fill the section as shown in Step 5. While choose the colour white. As the foreground colour.
Will look like this.



Figure 15

While keep selecting we have to make duplicate of the “Layer 2.”

Step 11. Duplicate the “Layer 2”

Just right click on the “Layer 2” and Click On “Duplicate layer...”



Figure 16

It will ask for the layer name keep the name that comes by default like “Layer 2 copy”.



Figure 17

While keep selecting “Layer 2 copy”



Figure 18

Press the right arrow key once it will move the selection 1 pixel right.



Figure 19

Now press Ctrl+I (invert layer) this will make the layer inverted or else just go to
Layer => New adjustment layer=>Click on Invert.
In the very next step press Ctrl+E, this will merge the two layers “Layer 2” & “Layer 2 copy” and will become “Layer 2”



Step 12. Now go to filter=>Blur=>Motion Blur




Figure 20

After clicking “Motion Blur” a new small window will appear by name “Motion Blur”
Look at these settings



Figure 21

Click Ok.

Step 13. Now from the Layer Box click on this and select “Soft light”



Figure 22



Figure 23

Menu bar will become like this



Figure 24

The Menu bar style has been successfully created.

Step 14. We have made this menu bar style for menu options. There fore have to make same for each menu options. Just same as Step 8. Duplicate the “Layer 2” and while pressing “Ctrl” key press the right arrow key. It will shift your tab right from the old tab.



Figure 25

To keep the tab spacing same use rulers or merge two layer of tab by Ctrl+E and duplicate it as shown in Step 10. Press Ctrl Button and right arrow.

Step 15. Now Create a New Layer Same as Step 4.We have to Place the texts in between the tabs.
Click on “Type Tool (T)”



Figure 26

Drag between the tabs keeping the left mouse button pressing. Appear like this.



Figure 27

Now Type in between this selected Box. Type “Home”
I choose these settings Text Type “Areal” “Bold” “Smooth” & Colour Green “0B9608”



Figure 28

Using same method make other Menu options too.
Step 16. You can add some Styles to these texts. Just Double Click on the Layer Home and same as Step 7. You can add styles like drop shadow, inner glow, outer glow Gradient Overlay etc. I used these settings. “Drop Shadow” and “Outer Glow”.



Figure 29

You have created a Cool New Template



Figure 30

Go ahead you can fill rest of the page with cool stuffs...

For More Tutorials Just Log on to Itechtalk