Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jan 23, 2013, 08:44 AM   #1
eclipse525
macrumors 6502a
 
eclipse525's Avatar
 
Join Date: Aug 2003
Location: USA, New York
Designing Web Banner Ads?

Hello!

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.



~Erick
__________________
..."A society with the mentality of Abundance, destroys the fear of Need."
eclipse525 is offline   0 Reply With Quote
Old Jan 23, 2013, 09:07 AM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by eclipse525 View Post
Hello!
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.

~Erick
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:
http://designerstoolbox.com/designresources/banners/

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!
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com

Last edited by SrWebDeveloper; Jan 23, 2013 at 09:12 AM. Reason: fixed link typo only
SrWebDeveloper is offline   0 Reply With Quote
Old Jan 23, 2013, 01:53 PM   #3
BillyBobBongo
macrumors 68000
 
BillyBobBongo's Avatar
 
Join Date: Jun 2007
Location: 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.
__________________
"You didn't have a bad experience with tequila, you had an experience with bad tequila!" : crushedagave
Mac Pro: 2.93GHz Quad-Core, iMac 21.5":2.7 GHz Core i5, MacBook Air: 1.8GHz i5
BillyBobBongo is offline   0 Reply With Quote
Old Jan 23, 2013, 03:09 PM   #4
eclipse525
Thread Starter
macrumors 6502a
 
eclipse525's Avatar
 
Join Date: Aug 2003
Location: 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.


~Erick
__________________
..."A society with the mentality of Abundance, destroys the fear of Need."
eclipse525 is offline   0 Reply With Quote
Old Jan 23, 2013, 06:05 PM   #5
960design
macrumors 6502a
 
Join Date: Apr 2012
Location: Destin, FL
Quote:
Originally Posted by eclipse525 View Post
Unless I'm missing something. For something more complex, I will consider creating it within Flash.
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.
__________________
TI-99/4A, tape cassette, 12" B&W Zenith
960design is offline   0 Reply With Quote
Old Jan 25, 2013, 02:50 AM   #6
design-is
macrumors 65816
 
design-is's Avatar
 
Join Date: Oct 2007
Location: London / U.K.
Quote:
Originally Posted by eclipse525 View Post
BTW, I'm always open to more tips, so anyone please feel free to expand on this subject.


~Erick
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
design-is is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Tags
banners, flash, photoshop cs6, web

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
New Banner Ads? macking104 Site and Forum Feedback 39 Apr 19, 2013 11:56 AM
iPhone: Annoying Banner Ads at top of web pages BumpyFlatline Jailbreaks and iOS Hacks 8 Mar 24, 2013 10:16 PM

Forum Jump

All times are GMT -5. The time now is 04:20 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC