Other Sites
Aside from rest, the other great thing about returning from a vacation is sharing it. Before I've even unpacked, I have my film being developed at the local drugstore. I'm the adventurous Hiner, you see, so I tend to go places no one else in my family has. The photos I bring home are always something new to them, and I enjoy showing them off. The question is, how can I do this without lugging the photo album around or developing multiple copies to mail out? I've got one word for you (well one word and an adjectitious letter)...iTools.
iTools has been around for a while, so I'm somewhat embarrassed I haven't taken advantage of it earlier. It's simple to use, it's surprisingly powerful, and it's free. Can't argue with that. Apple has some pretty good tutorials for setting up your iTools account, and we'll get to those in a future article. This time, I'm going to focus on the pre-show warm up.
Being a web designer by day, digital cameras have become the bane of my existence. I'll blame it on the camera marketers, I suppose, as too many of our clients feel that just because they've taken their photos with a nice digital camera, they're 100% ready for web use. Wrong. Wrong, wrong, wrong, wrong, wrong. Without the proper attention, good photos quickly become bad on the web, and bad photos become evil.
Unfortunately, with the variety of tools and methods available to Mac users, I cannot provide a full tutorial on how to capture images and prepare them for the web. There are entire books dedicated to that subject. Instead, I'll assume that through either digital photography or through a scanner, you've got your images sitting on your hard drive. At this point, I'd normally fire up PhotoShop and have at them. Not everyone has or needs PhotoShop, however, so we'll look at another handy little program that will work just as well for web use; GraphicConverter.
GraphicConverter from Lemke Software is an incredibly useful graphics tool that should be on every Mac user's computer (even if you already have PhotoShop). With the ability to open about 145 file formats, I defy Mac users to find a graphic file they can't open with Graphic Converter. And with the ability to export to around 45 formats, you'll be able to ensure your graphics are readable by everyone. So take those Windows bitmaps and metafiles from your friends and save them the way the good Lord intended...as TIFFs or PICT files. Or just throw them out like I do. Whatever works for you.
Now that you've downloaded GraphicConverter and paid the $30 registration fee, you're ready to clean up your images. The first thing we'll want to do is correct any heavy color casts that may have appeared. Digital cameras have a nasty habit of making photos too red or too blue, and scanners often don't fare much better without adjusting the settings up front, but it's not too hard to compensate for this.
Once the photo is open in GraphicConverter, head immediately to the Picture>Levels tool. See that graph that looks like a mountain? We're going to start there. Does the mountain reach all the way to the far ends of the slider bar, or is it all bunched into the middle? If it's in the middle, the photo is not using the full range of color. At the left and right ends are sliders; shadow values on the left, highlights on the right. Pull the triangular slider on the left of the mountain graph in to just about the base of the left side of the mountain, but definitely not past. Now do the same with the slider on the right, pulling it in to the right of the mountain. This creates brighter highlights and deeper shadows and expands the colors in between, giving the photo more color depth. The middle triangle adjusts the midtones for an overall lighter or darker appearance. Feel free to experiment with this, but it's best to make only slight alterations here; too much midtone adjustment can quickly wack out a photo.
Oh, and about the level adjustments...brightening the highlights and darkening the shadow values results in a loss of detail in each. Creating brighter skies, for example, can wash out the clouds. It's a trade off, and only by experimentation can a good compromise be achieved.
Now that we've got a more dynamic image, let's take a look at removing that color cast. Many of the outdoor photos I took on vacation seemed to have a blueish hue. This it not a rare occurrance, and electronic prepress professionals everywhere make quite a nice living correcting problems such as this. Luckily, because we're correcting our photos for web use, we don't have to be nearly as meticulous. After all, with the variations in platforms and monitor settings, there's no telling how color will be displayed on the user's end. We just need to touch it up a bit to give the user's monitor the best possible image with which to work.
Before we go any further, remember that monitors display color in three channels; red, blue and green (RGB). Every color you see on your screen is a percentage mixture of any these three colors. There's really no need for most to understand anything beyond that. Just understand that when adjusting the color of a photo, you have three individual channels with which to work.
Open the Picture>Brightness/Contrast tool next. We're presented with four sets of tools here: Brightness, Contrast, Hue and Saturation. We've taken care of contrast already, so there's no need to worry about that here (unless you're starting to feel more comfortable and prefer the increased control of adjusting the channels individually). The hue tools are a little too awkward to use, so we're going to focus on brightness and saturation.
There are two ways to tackle color casts here. If the photo appears too blue, we can simply move the Brightness Blue slider to the left. This, however, darkens the image. Not always a good effect (keep in mind that because Windows monitors are set to a darker gamma, images on them almost always appear darker than on your Macintosh). The other option is to move both the Brightness Red and Brightness Green sliders to the right, thereby minimizing the blue by increasing the other colors. See how this is all working? Continue making slight adjustments with these sliders until the image starts to look a little more lifelike (clicking the Full Screen Preview button will show the results in your photo before you've commited the changes, but can slow down the program). If the colors seem flat, a simple adjustment of the Saturation slider can correct this. Not too much, though. Too far to the right and the image will look like a bad oil painting, too far to the left and it'll be...well...grayscale.
Now it's time to sharpen that image up. Keep in mind that sharpening an image is really just a trick of the eye. The tool finds edges and creates false contrast around them. Have you ever seen a newspaper photo in which the subject seems to have a white halo around his head and body? That's because the photo was over-sharpened, and it's what we want to avoid here.
Graphic Converter simplifies the sharpening process (called "unsharp mask" in the world of pre-press) by again using only a slider. They also provide a valuable hint, "Usual is a value of 15% for diaganol and 90% for normal." Let's take their advice and set the image to 90% normal. Does the image suddenly look too spotty? Are halos appearing around the edges? Then slide it down a bit. If the image still needs to be resized, though, it's okay if the edges are a little too sharp at this point. They will be blurred a bit when we resize.
And that brings us to the final step. It moves me to tears when I come across web pages with graphics that slow the page down to a crawl. 80% of the time, this is because the images were uploaded with a too-high resolution. You see, monitors contain only 72 pixels per inch, or 72 ppi. (Also referred to as dpi, or dots per inch, a printing term. Why? Ask the print industry...I'm tired of that battle.) Basically, anything beyond this just doesn't get displayed, but the file size remains the same. If we're working with a 96 ppi or 150 ppi image, all those extra pixels are making the file size larger but aren't adding any value to the onscreen image. Throw them out. We don't want them, and neither do our site visitors.
As we do this, lets make sure the image itself will fit properly on the screen. Remember, we're working in pixels here, not inches. The smallest monitor resolution used these days is still 640x480 pixels, so it's good to use that as a guide. I've found that pictures set to about 300 to 350 pixels wide are large enough to see good detail on a monitor, but not so large that the file size becomes annoying when loading them one at a time. If you intend to put many on a page, it's better to create thumbnails. But, as we'll learn in the next article, iTools will do this for you automatically.
Using the Picture>Size>Scale tool, Graphic Converter allows us to take care of both the ppi and the file dimensions in one dialoge box. First, make sure that both "Keep Proportions" and "Scale Picture" are checked. Then, if the "X-Resolution" and "Y-Resolution" fields do not read 72, switch them. See how the dimensions changed? That's fine, because we're going to change them again anyway. If the new width is around 300 to 350 pixels per inch. Leave it. If it's further off, adjust the "Width Dimension" accordingly. If the "Scale Picture" box is checked, the "Height" will adjust accordingly. The "X-Resolution" and "Y-Resolution" will remain at 72 ppi.
Now, all we have to do is save it. For photos, JPEG format is almost always the way to go (PNG can be a good alternative, but it's not yet as widely accepted). Select File>Save As, then choose "JPEG/JFIF (*.JPG)" in the format field. Click on the "Options" button and find the "Quality" slider at the top of the new window. Obviously, the higher the quality, the larger the file size. If you turn on the "Calculate File Size" button, you'll be able to see how large the resulting image will be. For a file the size of the one we just created, a quality of 60 is a fair trade-off. There's really no right or wrong here, depending upon your target audience. If you're showing off artwork or your photography portfolio, it may be better to make people wait for a higher quality image. For our large number of vacation photos, however, medium quality will suffice.
Hint: If the "Show this dialog before saving JPEG files" button is checked, GraphicConverter will automatically ask for this information; no need to click "Options" in the "Save As" diaglog box.
And finally, make sure your photos are properly named for the web. Be sure there are no spaces or funky characters in the name, and that the file name is followed by the proper suffix; .jpg in our case.
And there you have it; a better-looking, lower file size image ready to impress your friends and family. It's always a good idea to practice with GraphicConverter and play around with its other features, some of which can be used to create pretty wild effects. Just be sure to make a copy of your original file first in case you cause irreparable damage...which even graphics professionals often do.
Next time we'll take a look at how to use iTools to get your photo album online, and from there we'll move on to some higher end tricks with panoramas and video. So until then, be sure to pick up a funky key chain for me on your trip.
Tags: Blogs ď Hands On Mac ď
