Here we will create a simple navigation menu bar that can be displayed on a web site.
Create a new image from File -> New and give the width and height as shown below,
Step 1 : Fill the background layer with “3E3E3E” colour.
Step 2 : Create a new layer (name it as “Menu”) and using the Marquee tool draw a box and fill the box with “BDBDBD” colour.
Step 3 : Right click the Menu Layer and select Blending option, you get the screen as shown below,
a. Click Drop Shadow (you don’t have to do anything on this window)
b. Select Inner Glow (you don’t have to do anything on this window)
c. Click OK
You get a screen like this,
Step 4 : Lets add some text to it,
a. Select the text tool and give a text “Home”
You get the screen like this,
Keep adding the text’s that you require to show on your web page. I will add some naviagtion text and this will somehow be shown as below,
Steps 5: Your navigation bar is almost over, lets add some dividers between the texts. Create a new layer and select the Marquee tool (or press M) and draw a small line and fill with some colour that you desire (I have chosen white) something like this in the screenshot shown below,
Steps 6: Now duplicate this layer (the line) and place it in between all the texts. So then your screen look like this,
Steps 7: You can make the colour of your Home text to be shown different so that it makes the user feel that he is in the Home page. So just change the text colour of Home to red. Now your Navigation Bar looks like this,
Steps 8: You can now save this as a jpg image (refer saving image in different format in Photoshop) and used it for your web page.
Related articles:
- How to create simple website/blog header using Photoshop Here are some simple steps where you can create a...
- Simple Web Photo Gallery using Photoshop We will see here how to create a simple web...
- Making a simple Mirror effect in Photoshop Let’s get on with making a simple mirror effect in...
- Photoshop Tips: Designing frames for your favourite images Step 1: Create a new image with width of 600px...
- How to make a Simple Birthday Banner using Photoshop We learnt how to install new fonts and use them...