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?
Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.
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.
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.
"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.
"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?
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.
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.
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.
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.
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?
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?
Â… 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%).
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.
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.
Aside from all this other confusion in web work try different antialiasing options for some objects – small text is clearer with out antialiasing – Verdana at 9pt is a good example. Also look at using specialised pixel fonts for use in small text Mini 7 and Standard 07_53.
Also some thin linework can look cleaner drawn with the pencil tool rather than the brush which ‘smoothes’ the edges.
As far as the 72ppi thing, here is where IMO it comes into play, when working with other people and specifing text sizes for on screen – Mini 7 (a standard small screen font) is designed to be used at 5px high at 72dpi which is = to 7pt type, hence the name? There is no way to set fonts to pixel sizes in Photoshop therefore we need a res to work to as Points are relative to printing and therefor inches/mm as well.
Sure in reality ppi doesn’t mean much on the web (anyone doing this should hopefully realises dimensions are more important) but at least it’s some kind of standard to make working between people easier, no?
Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.
Related Discussion Topics
Nice and short text about related topics in discussion sections
