Pin Me

How to Create Online Banner Ads

written by: S. R. Obbayi•edited by: Amy Carson•updated: 1/3/2011

Trying to create online banner ads may seem like a complicated task to many web designers. If you are a web designer you will be interested in getting familiar with the pointers outlined in this article.

  • slide 1 of 7

    Getting Started

    medium rectangle banner You do not have to be a super graphic artist to create online banner ads even though that would be a plus. Banner ads on the other hand are simply graphic images or illusions of graphic images that are displayed on websites.

    The general rule on how to create online banner ads is usually to use the standardized sizes. Though this is not a must, it gives a professional touch to your banner ads. The most common sizes, measured in pixels are Full Banner (468 x 60), Leaderboard (728 X 90), Medium Rectangle (300 x 250), Skyscraper (120 x 600) and Vertical Banner (120 x 240) among others.

    Online banner ads can be in the form of static ads, animated ads or interactive ads.

  • slide 2 of 7

    Static Online Ads

    These are ads with a single image or frame of stylized text that does not change, flicker, scroll or move in any way. This type of ad includes every detail of the message within the single frame.

  • slide 3 of 7

    Animated Online Ads

    These can be in the form of a series of related graphic images in the form of several frames. It can also include video clips, flash animations, JavaScript effects and dynamic text.

  • slide 4 of 7

    Interactive Online Ads

    This type of ad can either be a combination of static or animated ads with user interaction interfaces such as embedded online forms, mini games to unlock parts of the ad, mouseover effects to expand ads and many more as the possibilities that can be achieved with these type of ads is endless.

  • slide 5 of 7

    Tools

    To create Banner ads you need graphic software such as InkScape, CorelDraw, Corel PhotoPaint, Adobe Illustrator, Adobe Photoshop, Adobe Flash and Gimp just to name a few. Also any XHTML authoring tool or any of the top JavaScript IDEs. These applications can be used in combination with others or individually. The details of how to use each of these applications is way beyond the scope of this article.

  • slide 6 of 7

    Creating the Online Banner Ads

    full banner Using a graphic content creation software you can set the size of the image you want. Your creativity is all that is needed as you combine other images such as photographs and text to create a complete banner. Save this image as a PNG, GIF or a JPG file.

    To create an animated online banner, create several images of the same size each with a different message or graphic. To combine these you may use software such as Corel PhotoPaint to combine the individual frames into a single animated banner. This online banner must be saved as an Animated GIF. You can also create animated online banners using Adobe flash. With flash you can create complex online banners, which can be in the form of games, quizzes, expanding banner or anything you want. The final banner is exported as a SWF file.

    You can also use JavaScript to combine several single images into an animation. You can find examples of JavaScript image rotators which you can simply replace the images in the JavaScript image rotators with the several images that make up your frames.

    You can also create online banner ads using plain HTML with or without CSS. All you need is to create a DIV tag with the styled text and background colors within it and give it an appropriate border as shown in this article showcasing web page design with border ideas.

  • slide 7 of 7

    Showing the Online Banner Ads

    Showing the banner ads by inserting the <IMG> image tags in the location where you want the banner to appear. For Flash banners, copy and paste the <Object> Object tag that is generated once you publish your flash animation where you want the banner to appear.

    For the JavaScript and HTML banners, paste all the code you used to create the banner into the location of your choosing.

    These are the pointers to create online banner ads. For more about improving banner presentation you can look at these HTML Photo tricks as well.