The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Interface Banner

Interface Banner


Step 1

Open up a new document, size 700 by 160. Color the background 333333. Create a new a  new layer leave it as layer one. Grab the rectangular marquee tool, and select a rectangle inside the document leaving one pixel opened for stroke. Then follow this image.

Click to enlarge
Click to enlarge

Step 2

OK now that you have that grab the pen tool and draw what you see in the image. Then rasterize the image and you should have what you see in the image.

Click to enlarge
Click to enlarge

Step 3

OK now click on that layer that you just made with the pen tool. Then put in the blending options , that you see in the image.

Click to enlarge
Click to enlarge

Step 4

Now your going to duplicate that layer. And your going use the pen tool to cut out the place where the menu buttons are going to be. See what I did. After you made the shape with the pen tool make it selectable by going to windows/paths/ then right click select and backspace. In the image you will see the steps to this.

Click to enlarge
Click to enlarge

Step 5

Now go on that top menu bar layer, and change all the settings to the ones on this image.

image 5

Step 6

This is what you should have so far.

Click to enlarge
Click to enlarge

Step 7

OK now duplicate that menu bar. Your going to use that pen tool to do the same thing we did before but this time with this shape. Were going to cut it in half, but make sure the edges are round. Then remove the stroke and make the color white. Then put its opacity to 14, if you don't know what I mean this is what you should have.

Click to enlarge
Click to enlarge

Step 8

Now write out across that whole banner, the menu buttons you would like to have. I used the default font with the size 14. After you wrote everything Go to place it on top of all the layers. Then put it on top of the menu bar. Its not right though because its straight. So that's why your going to go to edit/transform/ rotate. Then rotate it along the menu bar. See this is what I came up with.

Click to enlarge
Click to enlarge

Step 9

OK now click on that first layer, and duplicate it, then once you done that remove the stroke and make it the color 333333. Then make a selection like you see in the image, and press backspace to delete it. After you've done that make the opacity of it to 44.

Click to enlarge
Click to enlarge

Step 10

Ok now there you could put a logo of some type, and on the bottom put some text or something, and your done. Good luck with your banner, this is what Iv created.

Interface Banner Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: Imgry.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Interface Banner"

Only registered users can write comment

Reader's comments