Anybody kind enough to hold my hand through my first web banner design?

[Gill_Keeley@adobeforums.com]

Hi there,

I have always designed for print in the past but a client wants me to produce a web banner.
They say 'O it's just like designing for print'. Some how I reckon not, but am keen to have a go! These are the initial guesses I've had...
Change my colour settings to web graphics defaults.
Use pixels instead of mm for banner dimensions.
Use web safe colours from the colour swatches.
Work in RGB not CMYK. At 72ppi not 300ppi.
Save as Gif or JPEG not TIFF or EPS.

Please could anyone advise if I'm wrong, or on other stuff I'm missing?

Many thanks
Gill

[LRK@adobeforums.com]

You're on track Gill. There are standard Web banner sizes as well. Create a new document in PSCS and choose the Web banner size from the preset menu.

At the end you will "save for Web" not just "save as" and then you will optimize. If you need help optimizing let us know.

You will use either JPEG or GIF.

[Gary_Indiana@adobeforums.com]

Gill,

The design process is basically the same. All your settings assumptions are right on the money. Use the "Save for Web" option when you save the final output - that will bring up ImageReady and allow you to optimize the image for file size vs. quality. I like to use the "4 Up" option to compare the differences.

Graphics for the web are far easier, in my opinion. The key is keeping file sizes down while keeping the quaility up.

[Buko@adobeforums.com]

Work in RGB not CMYK.




I do work for print and do all my work in RGB. I don't convert to CMYK till I know what the correct profile is and the pic is finished

[barry_gray@adobeforums.com]

I might add that using "web safe" colors is really an unnessessary limitation these days as virtually all monitors are capable of displaying 1000's if not millions of colors. I say use any rgb color you like.
Also use sRGB as your color space and you might also set your monitor to a 2.2 gamma. That way your stuff should display correctly on PC's.

[jonf@adobeforums.com]

"I might add that using "web safe" colors is really an unnessessary limitation these days"

Not entirely true. For instance, if you want a jpeg created in PS to match the color of a background created by html code in the Web browser you're still safest using Web-safe colors. Colors will almost always be designated in html pages by 6-character codes, and the entire RGB gamut is not available (to my knowledge). There are other potential issues, as well.

If all he's doing is creating an image to display as a banner ad he'll probably be happy enough with his results using any old RGB, but the Web-safe colors help make sure that his colors won't shift radically from browser to browser or platform to platform, etc.

[Dan_Neumann@adobeforums.com]

"Buko - 10:37am May 4, 2004 Pacific (#3 of 5)
I do work for print and do all my work in RGB. I don't convert to CMYK till I know what the correct profile is and the pic is finished"

Wow. Don't you run into some last minute color problems since the gamuts can be quite different?

[Paul_Hokanson@adobeforums.com]

Dan,

I work the same way as Buko (RGB till the end then convert to CMYK). If you are mindful of color gamut issues and softproof during the design and color tweaking phases by using an accurate profile of the press that will print the work, then the final conversion to CMYK shouldn't yeild too many unexpected color shifts and surprises. Without softproofing (or careful examination of the CMYK numbers when selecting RGB tints), it would be very difficult to be certain if the RGB hues you've selected will print accurately.

There are many great reasons for staying in RGB till the end... smaller file sizes and better blends (layer composites and gradations) to name just a few. The best feature, IMO, is that the file almost always has more color data than you need for press (I don't have experience with hifi printing, so some RGB gamuts might not play nice with those... others can chime in on this.). Having a larger color space as a master file will open up future repurposement opportunities that may not have existed in the past.

Like a web banner, maybe. :)

[PShock@adobeforums.com]

Work in RGB not CMYK. At 72ppi not 300ppi.




You can throw the whole "72 or 300 ppi" thing out the window as it has absolutely no meaning for web images. An image that has pixel dimensions of 500 x 500 will be EXACTLY the same size on a monitor (the web), whether it's 72 or 300 ppi. Think and work in terms of pixel dimensions - not pixels per inch for web stuff.

-phil

[jonf@adobeforums.com]

Good point. But working at 72 ppi does help you keep an idea of what that size will be, since you if you display at 100% while you're working on it, that should be (close to) the size it will display on the Web. At least on standard monitors.

[PShock@adobeforums.com]

But working at 72 ppi does help you keep an idea of what that size will
be, since you if you display at 100% while you're working on it, that
should be (close to) the size it will display on the Web.




As would an image that's 300 or even 1200 ppi. Regardless of the value placed in the Resolution field, you ARE "working" at 72 ppi as the screen resolution dictates image size. (it's like a print size that's fixed) Of course, since you have to have SOME value placed in the resolution field, 72 ppi is as good as any but it's completely irrelevant.

The reason you say it gives you a good idea of size is because you're thinking in terms of print. (inches, mm, etc) Sure, you can arrive at the same destination but it doesn't make sense when the goal is an entirely different output with an entirely different set of values. (hard copy print vs screen)

Naturally, there's no "right" or "wrong" way to do this - whatever get you there, I suppose. I just wanted to point out that the "72 ppi rule" for web images is a myth.

Me? I just change pixel dimensions. ;)

-phil

[jonf@adobeforums.com]

Maybe I'm misunderstanding what you're saying. If I place a 1" x 1" 300 ppi image onto a Website it does not display at 1" x 1" (unless I force it to with html, which is a huge waste of image size). It will display at 300px by 300px, which is about 4" square on most monitors. Is your experience different from mine?

[jonf@adobeforums.com]

I should add that I'm not disagreeing about pixel resolution being the critical point. I just think it's more intuitive to have 100% be equal to the 72 ppi of the monitor. Otherwise I have to guess at the correct magnification when viewing my work to see how it will look on the Web.

Maybe the key is that you're using pixels as your basic measurement in your Photoshop preferences?

[Ramón_G_Castañeda@adobeforums.com]

… I'm not disagreeing about pixel resolution being the critical point




The confusion stems from the unfortunate and wide-spread misuse of the term “pixel resolution” when pixel dimensions is meant.

Pixel resolution, as in ppi, is meaningless until you go to print.

When you view an image in Photoshop at 100%, you are looking at actual pixels, i. e. actual pixel dimensions. Whatever you have defined as “Resolution” (pixels per inch) in “Image > Image Size > Resolution [pixels per inch]” is absolutely irrelevant if you are looking at Actual Pixels (100%).

[jonf@adobeforums.com]

I see what you're saying, now. The 100% in Photoshop's window title describes the pixel dimensions. An "inch" on the ruler is not an actual inch on screen at that size. I was not being clear.

[Ramón_G_Castañeda@adobeforums.com]

[DELETED to avoid further confusion.] :)

[Ramón_G_Castañeda@adobeforums.com]

The 100% in Photoshop's window title describes the pixel dimensions




That's why the button on the Options Bar of the Zoom Tool reads “Actual Pixels” instead of 100%.

An "inch" on the ruler is not an actual inch on screen at that size.




Right; unless it's an image whose pixel dimensions happen to coincide with the Image Resolution and the actual resolution and size of that particular monitor on which the image happens to be displayed at that precise moment. Monitors differ, of course.