| Sign in: |
| Members log in here with your user name and password to access the your admin page and other special features. |
|
|
|
|
|| SportsShooter.com: Member Message Board
Three questions regarding web design/color management
Mark Davis, Student/Intern, Photographer
 |
Santiago | CH | Chile | Posted: 1:31 PM on 05.26.06 |
->> I am currently working on my website and have run in to a couple of questions that have halted my progress. I have done some research, but I wanted some "real world" feedback.
First, most sources indicate that the standard size for a web page should be 800x600 pixels. Take away the pixels for the scroll bar and a 12 pixel bumper for the edges, and you come up with 729 pixels. I am working on a 17" screen with a 1680x1050 display, and so the same design that appears full screen on a lower resolution screen, appears quite small on mine. I guess my question is whether or not 800x600 is outdated, or if it still remains the sweet spot to facilitate all users.
Second, I have read that I should embed my photographs with the sRGB color profile for use on the web, true or false?
Last question: I am using CS2 to prepare my images for the web, using the working space sRGB IEC61966-2.1. When I select "save for web" and the photograph is put into Image Ready the saturation is altered, pulling it down considerably, and I lose the vibrance of the colors. It doesn't actually save it like that, it just appears like that. Then when I pull it up in Photo Mechanic it appears correct, and when I take off the color profile (upper right hand corner) it appears like it did in Image Ready. Any insights to this and should I be concerned?
Thanks for your help. |
|
Tim Gasperak, Photographer
|
San Francisco | CA | USA | Posted: 3:09 PM on 05.26.06 |
->> Mark-
1) 800x600 as a baseline is most likely outdated at this point, but it really depends on your audience. Yahoo! has started using a base width of approx. 950 px. Most laptops for the last 4-5 years have supported at least 1024x768 or greater resolution.
2) Yes, use the sRGB color space for screen display. Most display devices can't render a color space bigger than sRGB anyway, and any images with colors that fall outside of that gamut will get remapped and could create unexpected color shifts.
3) I'm not 100% sure what going on in your last scenario, but it could be that ImageReady isn't or can't display the image with the correct color space. Rest assured you're doing the right thing, though, by embedding the sRGB color profile into your web-friendly images. You might check to see if ImageReady has a color settings preference like Photoshop and Illustrator. Adobe's CS2 suite now includes an option to synch your color settings across applications in the suite, so I would suspect ImageReady has a color settings preference somewhere. But I could be wrong. |
|
Allen Murabayashi, Photographer
|
New York | NY | USA | Posted: 3:32 PM on 05.26.06 |
->> i'm gonna guess since i'm not positive as to what's happening. but you're shooting in adobe RGB, then you select your working space as sRGB, but your "save as" might still retain the adobeRGB profile, which photo mechanic can read, but most browsers cannot.
in CS2 under the image menu, there is a "convert to profile" option, which will definitely convert the sucker.
here's some additional info with links on the color space and the web:
http://www.photoshelter.com/blog/archives/000023.html |
|
Mark Scheuern, Photographer
|
Grand Blanc | MI | USA | Posted: 3:40 PM on 05.26.06 |
->> Yes, make sure you convert to sRGB if you shot in Adobe RGB, not just use it as the working space. Image->Mode->Convert to profile... . Otherwise, you're just sticking an sRGB tag into an Adobe RGB image and you'll get that flat, desaturated look you describe.
Mark |
|
Chuck Steenburgh, Photographer
|
Lexington | VA | USA | Posted: 9:27 AM on 05.27.06 |
->> Here's what is happening in the last observation:
Tim is correct. The 'save for web' previews are not color managed so they don't display colors correctly, unfortunately. Some plug ins have this issue as well.
When you "take off" the color profile info, yes, you are basically losing the benefits of having saved it with the sRGB profile.
So...it's like the guy who went to the doctor. "Doc, it hurts when I do this." "Well, don't do that."
Convert to sRGB. Save for web with the ICC profile. You're golden. |
|
Greg Ferguson, Photographer
|
Scottsdale | Az | USA | Posted: 11:15 AM on 05.27.06 |
->> And, here's what's missing in the previous replies...
To save for web with the ICC profile, open the "Save for Web" dialog in PS. In the little pop-up list at the top-right of the image preview select "Use Document Color Profile" and PS will embed the information.
The document colors should look good as long as you're using sRGB, and the browser is honoring the embedded info. Unfortunately, not all browsers do that so your results still might not be what you want, but at least you'll be doing the right thing.
In web design, we never know what size screen the user will have (wide-screen vs. VGA/XVGA vs. web-TV vs. palmtop), unlike graphic design where you know the size of the paper. And, in web site user-interface design, the user is supposed to be in control and be able to adjust the display (font-face and size) in order to work for their eyesight. These limitations and varying types of output for web put us at a disadvantage when trying to make a site that looks good under all conditions. So, the smart thing to do is make a design that degrades gracefully.
Don't assume you have a minimum screen size or font availability, and check your pages by resizing the window to allow the elements to reflow to see how things change.
One of my favorite web-design sites is the Yale C/AIM Web Style Guide. You can search for that and find several co-hosted/archived versions of the original on the net - it's very nicely done. Or, you can go directly to their new 'n improved site...
http://www.webstyleguide.com/ |
|
Chuck Steenburgh, Photographer
|
Lexington | VA | USA | Posted: 11:43 AM on 05.27.06 |
->> Nothing missing; he already indicated he was checking the color profile box in Save for Web.
If sRGB is set as your working color space, and your color preferences are set to convert to working color space when there is a profile mismatch, you don't have to convert via the menu.
But IMO, that setup is backwards. Set Adobe RGB as your working color space, do all of your manipulations in that color space, then convert to sRGB as your last step. Generally speaking, that will produce the best results. |
|
Greg Ferguson, Photographer
|
Scottsdale | Az | USA | Posted: 1:39 AM on 05.28.06 |
| ->> A really useful tool for webpage development (or general web snooping) is the "Web Developer" plugin for Safari. One of its options is to resize the window to various sizes. And, yes, by default it comes with an 800x600 setting. |
|
Return to --> Message Board Main Index
|