Designing Web Banner Ads?

Discussion in 'Web Design and Development' started by eclipse525, Jan 23, 2013.

  1. eclipse525 macrumors 6502a


    Aug 5, 2003
    USA, New York

    I'm in the process of designing some web banner ads and although Photoshop and Flash are the first obvious choices for designing them, I'm not sure what is the best choice. I've created simple animated GIFs with Photoshop but the client might be looking for something a little more complex as far as animation.The requirements for these ads are below and don't know if this limits what I can and can't do and/or application to use or not use.

    728x90px ad, no larger than 80kb, .jpg or .gif format
    300x100px ad, no larger than 80kb, .jpg or .gif format

    I would love some feedback as to best practices. Thank you in advance.

  2. SrWebDeveloper, Jan 23, 2013
    Last edited: Jan 23, 2013

    SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    As to those specific specs:

    They don't call them requirements for nothing. You need to create for this client banners that match those specs - The GIF format only supports a palette with 256 colors while JPG's palette supports 16 million colors and transparency which is how you determine which to use based on the banner graphics. The size constraints are common and are likely intended to fit within wells or columns based on the site template or stylesheet design. Be sure to use software that OPTIMIZES when you save for web, so that the file size meets the client specs. I would be using Adobe Photoshop which has fantastic optimization and compression capabilities not to mention design tools, but to each their own. If you get stuck, come back here for help or hire a front end person who specializes in this and is familiar with graphic design, working with layers, web optimization and JPG/GIF formats.

    Now with that said, generally speaking as everyone you ask will offer their opinion, Flash should no longer be used on any site as many of the mobile devices don't support it and it requires a plugin that must be maintained. It also is not necessary to do things like dynamically display random banners, enable fancy rotating ads, track hits or analytics, etc. which can all be done client side (i.e. jQuery) or server side (PHP/Ajax or even SSI via Apache) and still be widely supported. There are others out there who will disagree with this, but Flash is slowly becoming a deprecated format as it loses support in the wireless market.

    Banner size does depend on the layout but common sizes and formats are:

    468x60 - full
    728x90 - leaderboard
    336x280 - square

    PNG is very popular with graphic designers as alpha transparency is easy to achive (and finally, well supported by MSIE 7+) as is compression. Otherwise JPG followed by GIF or BMP would come next depending on the image attributes (transparency, number of colors, etc.)

    This is a helpful site for both image and Flash common banner formats:

    I want to repeat this is just one point of view and the advice is based on modern browser engines, displays and W3C recommendations. Special note that Flash is not deprecated, it is just in disfavor by many professional designers for the reasons I stated -- but of course, the client has a say too!
  3. BillyBobBongo macrumors 68020


    Jun 21, 2007
    On The Interweb Thingy!
    Great advice from SrWebDeveloper, as always.

    Thought I'd just chip in a wee bit on animated GIFs, and how you can keep those kilobytes down. One great trick is to assess the GIF when you've finished creating it and remove any unnecessary frames. I tend to always build my banners in Flash, that means that when the client requests (and they always do) a Flash version I have that ready to go, and then I export the file as an animated GIF.

    You can get a good overview of the Frames used in the animation in either Fireworks or Photoshop. If you find that frames are repeating, remove them. You can set a delay on each frame to make the animation longer and cover this. Always review your animation before your start considering sacrificing image quality to meet that kilobyte quota.

    e.g. If you've got a fade in and then the subject matter stays in frame for a few seconds you don't need a whole lot of frames with the same image, that's going to cost you kilobytes. You remove all the identical frames and set a pause on the remaining frame which will achieve the same result.
  4. eclipse525 thread starter macrumors 6502a


    Aug 5, 2003
    USA, New York
    Thank you for all the advice. For this current project, given the constraints, I am going to create a simple animated GIF with Photoshop. I really can't so much within 80Kb so Gif it is.

    I suppose I can create banners within Flash and just publish as a GIF but creating the animation in Photoshop just seems to be a lot easier. Unless I'm missing something. For something more complex, I will consider creating it within Flash.

    The advice was very insightful as always. Thank you!

    BTW, I'm always open to more tips, so anyone please feel free to expand on this subject.

  5. 960design macrumors 68030

    Apr 17, 2012
    Destin, FL
    Flash mobile is no longer maintained by Adobe ( late 2011 ) and should not be used for any future development.

    Just in case you missed it.
  6. design-is macrumors 65816


    Oct 17, 2007
    London / U.K.
    Is animation a requirement of your brief? If not, I'd recommend a simple jpg.

    A well designed static advert can be far more effective than an animated gif, with your message diluted between frames and a limited amount of available colours. To make a gif worthwhile/interesting you need to get a lot into it which will no doubt push it above your file size limitations.

    There's also the attention span of the user to consider. A glance at an advert is often all you can hope for and to risk having your marketing message on a not-current frame is something you need to carefully consider.

    Though if you only want to add the slightest movement to catch someone's eye, the toss up is mainly movement vs better colours.

    All just my opinion though, of course :)

Share This Page