Adobe Photoshop/Making a Web Banner
Photoshop can use photos or other images for a banner background.
To this you can add text and enhance its appearance with shadows and so on.
You can even include simple animations in the banner, using animated GIF elements.
Basic Banner Design
Open a new document window using File>New.
This dialog box will appear.
Take the following steps to define the banner
- Name it: "Banner"
- Set the length. Preferably 800 pixels. You may need to change the measurements from inches or cm to pixels.
- Set the width. Preferably 150 pixels.
- Set the resolution. The default is 72 pixels/inch. This is OK.
- By default the color is set to RGB and 8 bit. This is OK.
- Set the background content. The default is "white" but you may also use "transparent" if you want any background of your web page to bleed through. For example a banner like this is transparent...
You will decide later what file format to save the image in. See below Options for Banner File Type.
The blank banner may then be modified and edited using the tools of Photoshop.
- Adding shapes, textures, etc.
- Placing images.
See example:
Adding and Enhancing Text
Text is added with the text toolbar and appears as a separate "layer" or object on the image.
- For help on using text see Adobe Help on Text.
Text is enhanced using the styles and options selected from "blending options" selected from a right-mouse menu of the text "layer".
- For help on using text see Adobe Help on Styling Text.
Adding Animated GIF Elements
Animations like this can be included on top of a Banner in this way.
See Adobe Photoshop/Making Animated GIF for how to make the animation.
Options for Banner File Type
The above banner was saved as a GIF so that the animation would show.
Normally you would save a banner either as a PNG or JPG file.
PNG files may be larger than similar JPG files and are generally more like photo quality in their image.
To save the banner for a web site, use File>Save for Web or Devices...
See "Saving & Converting..." in Photoshop for more details
Other Resources
For specific advice from Adobe on web images created by Photoshop: Go Here!
For ADOBE TV tutorials on Photoshop: Go Here instead...
For an official Adobe Manual on Photoshop: Download This!