This tutorial will show you how to design a futuristic and clean banner that works great in layouts. If you are looking for a nice, simple banner for a good layout, this is a great place to start!
1. When designing websites, it is important not to distract your viewers with flashy graphics everywhere. It is actually usually better if you keep your layout as clean and simple as possible to make navigation easy, content more accessible, and reading the content less distracting. Because of this, many sites try to make a simple banner, but still something that looks attractive. This tutorial will show you an example of how to make an attractive and simple banner for your own site! First, we need a foreground and a background color. I am going to use a light grey (#E1E1E1), and medium grey (#B2B2B2).
The color on top is the foreground color. Likewise, the one below is the background color.
2. Create a new document. Typically, designers try not to make banners to large, so we will make ours 400x100. In a real layout, your width will probably be much larger than this (700x100), but I will keep it smaller for loading purposes
3. Select the gradient tool from the toolbar. You can get to the gradient tool by holding down on the Fill Tool, and selecting the button that fades from right to left (You can also press G for a shortcut):
The Gradient tool will blend multiple colors together depending on the users selection of colors.
4. In the top left corner of Photoshop, you should see a gradient editor. Click this once to bring up the gradient editor box:
5. When the box pops up, select the foreground to background gradient (typically the first gradient):
6. Click OK to close the box. While holding shift, Drag a line from the top of your document to the bottom of your document. By holding shift, you will create lines in 45 degree angles:
7. Create a new layer:
The new layer button lies to the left of the delete layer button (the trash can icon).
8. Select the Rectangular Marquee tool (M for shortcut):
9. Drag a selection around the bottom of your document:
10. Select your gradient tool again (G), and drag a line while holding shift from the bottom to the top of the selection:
11. Press Ctrl+D to deselect. Right click on this layer, and apply the following blending options:
Drop Shadow Settings
Bevel Settings
Click OK
12. Select your Horizontal Type Tool (T):
The Horizontal Type tool lets you incorporate text in your documents.
13. Press anywhere in your document to start typing. Use the tool shown at the top of Photoshop to edit how your font looks:
14. Apply the following blending options to the text:
Bevel
Gradient Overlay
15. To add more to you banner but still keep it simple is very easy. Simply duplicate your text layers, enlarge the text, and change the color to a light grey:
That's it! Good Luck!
