Adobe Photoshop/Making a Web Banner

From WSU Technology Knowledge Base
Jump to navigation Jump to search

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

Photoshop banner new dialog.png

Open a new document window using File>New.

This dialog box will appear.

Take the following steps to define the banner

  1. Name it: "Banner"
  2. Set the length. Preferably 800 pixels. You may need to change the measurements from inches or cm to pixels.
  3. Set the width. Preferably 150 pixels.
  4. Set the resolution. The default is 72 pixels/inch. This is OK.
  5. By default the color is set to RGB and 8 bit. This is OK.
  6. 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...

Transparent banner.png

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: Banner photoshop sample 1.png

Adding and Enhancing Text

Blending Options

Banner photoshop sample 2.png

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!