Arts >> Art >> Other Art

How to Design an Animated Banner

Animated banners are appealing and eye-catching images used on the Internet. They can be used as a signature on forums and message boards, or they can advertise a product or service. Most online stores feature animated banners as marketing tools to grab the attention of prospective consumers. With the right graphics programs and some skill, you can make your own animated banner.

Things You'll Need

  • Computer
  • Adobe Photoshop (versions CS2, CS3, CS4 or CS5)
  • Animation Shop (optional)
Show More

Instructions

    • 1

      Open Adobe Photoshop CS2, CS3, CS4 or CS5.

    • 2

      Create a new document by selecting "File" and "New Image." Choose the width and height of the banner. Select white for the background color in the "Background Contents" tab. Make sure the resolution is set to 72, which is the appropriate and standard resolution for web images.

    • 3

      Click "Layer," select "New." Click "Layer." This process will create a new layer for your image, which is needed for adding a gradient.

    • 4

      Click the circle icon that is fourth in the row of tiny icons at the bottom right of the screen. Select "Gradient" to add a gradient to your image. Keep "Linear" selected in the box that appears. Click "OK."

    • 5

      Select two colors from the color palette at the top right of the screen. Two colored, overlapping squares will appear. Click one to choose a color. Repeat for the other square.

    • 6

      Click the "Horizontal Type Tool," represented by a "T," in the tool palette to the left of the screen. Select a font from the dropdown menu in the top left of the screen. Click inside the image to type the desired word or phrase.

    • 7

      Highlight the word or phrase you typed. Click the color box at the top middle of the screen to select a font color. Choose one that will show on the background gradient. Adjust the font size to your liking.

    • 8

      Duplicate the image by clicking "Layers" and then "Duplicate." If the animation involves more than one message on your banner, change the wording for the duplicate images,

    • 9

      Add effects by clicking "Filter" and choosing any type of effect you want, such as "Blur," "Noise," "Sharpen" or "Texture."

    • 10

      Click "Window" at the top of the screen. Select "Animation." Arrange each of the images in the order you want them to appear in the animation. Click "File," "Save for Web & Devices." Select "GIF" to save the banner.

Other Art

Related Categories