How to make a banner & navigation bar

Hello and welcome to our first tutorial on AREA 1!

In this tutorial I will explain you how to make a simple, but cool, banner & navigation bar for your website.

First, open your Adobe Photoshop program and create a new file using:
Width: 935 px
Height: 145 px
See Screenshot 1.

Next, select the Rectangular Marquee Tool (or press M key), choose from Style: Fixed Size with 920 px width & 30 px height.
See Screenshot 2.

Click on your work space and you’ll see that a rectangle marked with interrupted line.
With the Rectangular Marquee Tool still selected, right click on the rectangle and choose New Layer.
See Screenshot 3.
Next, right click again on the rectangle and choose Fill (Contents: Color & Choose a color).
See Screenshot 4.
Press CTRL+D on your keyboard to deselect the area.

Next, right click on the Layer you’ve just created in the Layer Tab and choose Blending Options.
We will choose only Bevel & Emboss (settings are in the screenshot)
See Screenshot 5.
& Pattern Overlay. (settings are in the screenshot)
See Screenshot 6.
*I have used scanlines pattern.

Now choose Rounded Rectangle Tool (or press U key) draw a shape which will have the width of the previous rectangle that you have made. Then put new created layer (probably Shape 1) under the rectangle layer.
See Screenshot 7.
Change the colour and add the same pattern you added to the rectangle layer.

You should have until now something simmilar to this: Screenshot 8.

Next, make a new layer, choose a custom brush and then click on your work space. Put the new created layer between the rectangle layer (which must be first) and the shape we created above (which must be third). Choose from the layer modes: Overlay and set the opacity of the layer to 50%.
See Screenshot 9.

Now you can add some text, logo or whatever you want.

Here’s my final result: Screenshot 10.

Hope you’ll enjoy this tutorial! Please leave a comment & thanks for the visit.



You can discuss this tutorial on the forum, click HERE.

Author: Mihai Opariuc - E-mail

My name is Opariuc Mihai, I'm a graphic/web designer from Ploiesti, Romania and I'm the owner of AREA 1. I hope we can share a lot of information, tips&tricks and ideas through this website. Follow me on Twitter @area1.

SHARE ARTICLE: SUBSCRIBE:

RECENT TWEETS

AREA 1 on Twitter

• AREA 1 on #Facebook, become a fan ... Let's make 101 fans! http://bit.ly/bzb3R2 # 3 hours ago
• 50+ High-Quality #Photoshop #Tutorials For Lighting and Abstract Effects http://tinyurl.com/yh59vpr via @favSHARE # 3 hours ago
• Top 10 Free #WordPress Frameworks for Designers http://is.gd/ag1jC via @favSHARE # 3 hours ago
• 18 Beautiful and High Quality Fonts for Your Designs http://tinyurl.com/yagcmpt via @favSHARE # 3 hours ago
• 75 Photo Manipulations Art That Will Blow Your Mind http://is.gd/ag30B # 3 hours ago