A web banner is something we're all familiar with. It's generally the graphic at the top of a website, displaying the company name and logo, or it might be an advertisement—or a little of both, when it appears on a commercial website. A banner should be informative, attractive, and inviting—you want the casual visitor to stick around. We'll show you a few ways to do this.
Method 1 of 6: Photoshop
1
Create a new document. Define your banner size: there are a number of standard banner sizes.[1] For our purposes, we'll focus on a standard "full banner" size: 468 pixels by 60 pixels:
- Note: this is a standard size, but it's not a requirement. If your needs and requirements call for other dimensions, let that be your guide.
2
Set the background color. Fill the background layer with a color that compliments your website design.
- Click on the Foreground Color to bring up the Color Picker, and select your fill color.
- With the Paint Bucket tool, fill background layer of the banner with your chosen color.
- Click on the Foreground Color to bring up the Color Picker, and select your fill color.
3
Create a new layer. We are going to fill this with a richer color to help set off the text and logo. We want it to be proportional to the size of the banner, and centered.
- In the new layer, create a selection that is somewhat smaller than the original banner, and fill it with the desired color.
- Center the filled area. Select the entire layer by pressing CTRL-A (PC) or Command-A (Macintosh).
- From the Layer menu, select Align Layers to Selection > Vertical Centers. Repeat this step but select Horizontal Centers. This will center the contrast layer horizontally and vertically.
- In the new layer, create a selection that is somewhat smaller than the original banner, and fill it with the desired color.
4
Add your logo. Open your logo file, copy it, and paste it into your banner document where it will appear as a new layer. Resize it as necessary to fit. Press CTRL-T on a PC, or Command-T on a Macintosh, and use the handles to resize the document as necessary, using the shift key on the handles to resize proportionally.
5
Add your company or website name. Select the text tool, pick your desired font, and type it in. If it's not the right size, adjust as necessary, as described in the previous step.
6
Add extra elements. Sometimes, a logo and name is enough. Other times, adding some lines and ornaments will add the needed interest to your banner. Create a new layer to do this so that you can make any adjustments necessary without disturbing other layers.
7
Clean it up. Fine tune the placement of logo and title, and any extra elements, and then save your banner.