Intro to Digital Photography
It's difficult to think of an electronic gadget that's
changed the way I look at the world more than my digital
camera. I held off from buying one at first, but after a
year of researching and one particularly hefty tax return
from Uncle Sam, I made the plunge. Roughly US$500 later and
I was staring down a convex lens at my life. Suddenly, every
sight was a picture waiting to be taken! Every scene a
perfect composition begging to be snapped up and stored on a
memory card. After some advice from my pro photographer
friends and a whole lot of practice, I officially became the
annoying guy with the camera at the crowded party.
The truth is that digital photography is actually rather
difficult. Not the taking pictures part, that's easy. It's
the creation of a perfect end product that's the sticky
part. Taking a raw JPEG or TIFF file and crafting a digital
image that looks beautiful on all the different monitor
types is a process that transcends art and borders on
science. Some photos turn out almost perfect from the get go
� never underestimate the power of good natural light! � but
most of your snapshots are going to need some gentle
persuasion in the right direction before they are ready to
wow the New York gallery scene.
Don't panic, because Webmonkey is here to impart advice
on creating that sharp, bright, and well-balanced image that
you can show off on your site, your blog,
or anywhere on the Web. We'll be using some tools and
techniques that will be familiar to you if you've ever spent
any time messing around in Photoshop. I'll also be covering
some basic rules about file handling, monitors, and display
options.
To get the most out of this tutorial, you're going to
want to play along at home. Of course, this means that
you'll need (at the very least) a digital camera and a copy
of Adobe Photoshop. I'm going to assume that you have at
least some experience in using Photoshop. If you are totally
unfamiliar with the program, I'd recommend a Photoshop how-to for an introduction. I'd also
recommend that you gain access to at least two different
computers on which to view your photos as you work on them.
Ideally, you should find one computer with a flat-screen
display and one with a plain old CRT. You won't need
Photoshop on both computers, just Web browsers, but the more
computers with different video cards and display
configurations you can use, the better.
Colorful Language
My girlfriend and I recently went on a trip to the
Hawaiian island of Oahu to attend a friend's wedding. If
you've never been, it's an amazing place � I highly
recommend it! Maybe viewing some pictures of our journeys
there would give you an idea of just how amazing it is.
Well, it turns out that the weather didn't exactly cooperate
with our plans. Sometimes it was dark and stormy, and
sometimes it was bright and sunshiny. Consequently, some of
my digital photos are darker than I expected, and some of
them even show a blue-green tint for some reason.
Several factors can alter color representation on a
digital camera � the optics, the pixel depth, the type of
compression the camera uses, and most of all, the quality of
the available light. Plus, if you're like me and you take
pleasure in pushing the limits of your camera's aperture and
shutter speed settings, you can get some funky results that
may need a little cleaning up.
There are dozens of ways to alter the brightness, color
saturation, and overall presence of your digital photos in
Photoshop. All of the tools we'll be using live in the Image
-> Adjustments menu. Using a combination of adjustments with
the Levels, Color Balance, and Curves tools usually yield
the best results.
Brightness and Contrast
The Levels adjuster is most valuable image correction
tool I've encountered in Photoshop. This is the tool I use
most often, and in some cases, it's the only tool I'll need
to produce a sharp-looking finished photo.
When you open the Levels tool, you'll see a histogram showing you
all of the pixel information in the file. The histogram,
when read from left to right, shows you how much dark
(shadow), midtone, and light (highlight) information is in
the photo. A photo that's very dark to begin with would show
a taller "peak" on the dark, or left, end of the histogram.
At the bottom of the histogram live three triangular
Input sliders. On the left is the black shadow slider, on
the right is the white highlight slider, and in the middle
is the gray midtone slider. Moving the highlight slider
towards the center of the histogram makes the image lighter.
Experiment a little and you'll get the feel for it.
The most common use for the Levels tool is adjusting the
brightness and contrast of your photos. Some folks would
tell you that the best way to futz with these settings is to
use Photoshop's Brightness/Contrast adjustment tool.
However, in my experience, I've found that the
Brightness/Contrast adjustment tool is a bit harsher than
the Levels tool � the fine adjustments are more difficult.
Try them both out and you'll see that the Levels tool simply
affords more flexibility.
If I'm working with a darker photograph, I usually begin
my image correction by increasing some of the highlights in
the photo. To do this, I move the highlight Input slider
towards the middle of the histogram until it's just barely
touching the first significant "spike" of information. This
increases the amount of brightness in the photo, so the next
step is to balance out the contrast between the highlights
and shadows. To do this, move the gray midtones slider to
the right just a bit. You'll notice that this cancels out
some of the brightness that you just added to the photo, but
it also gives the colors more "oomph" and makes the photo
look a little more saturated.
Also try moving the shadows Input slider towards the center, and
then balance out the brightness and contrast with the
midtones slider yet again. You'll see those colors start to
come to life. Keep them natural, though. Don't make your
colors look too rich, or else they start to look
fake. And remember to hit OK when you're done!
Check out these photos of Honolulu at night. The original
(on the left) looks OK to begin with, but notice how
adjusting the levels brings it to life.
Get a closer look at the
before and
after photos.
Even when they are taken during the daytime, most digital
photos from my camera tend to come out on the darker side.
However, if you have a camera that produces
lighter-than-average pictures, the same technique can be
used � just move the shadows slider first to make the image
a little darker, then balance it out by adjusting the
midtones.
Most pictures you take are only going to require a little
nudge on either side of the Levels histogram to clip out the
most extreme lights and darks and get the brightness and
contrast setting just right. When you're done, both the
highlight and shadow Input sliders should be moved just a
touch towards the center of the histogram. Most importantly,
you should be satisfied with the results.
Adjusting Color
Now that you've succeeded in taking that dark or
washed-out photo and making it nice and vibrant, you may
notice that the sky looks a little... yellow? And why is the
ocean so green? Whatever the reason for such unnatural
oddities, Photoshop offers several tools you can use to
bring those colors back to reality.
The first technique to explore is the use of the Color
Balance tool. This is a simple tool that can be used to add
or subtract certain shades from your photos. When you open
the Color Balance tool, you will see three radio buttons
underneath the sliders. For the best results, only bother
with the midtones setting. Feel free to experiment with the
highlights and shadows settings, but notice how they cause
digital artifacts and "hot spots" to develop in the lightest
and darkest parts of the photo. Arty, but rarely desirable.
The Color Balance tool is easy to figure out. Just move the
sliders away from the colors you are trying to tone down. If
your photo has an overall yellowish hue, move the bottom
slider away from "Yellow" and toward "Blue". This may cause
your other colors to fall out of balance, so the key here is
to think small � make tiny adjustments, and make as few
adjustments as possible until the photo looks natural.
Using Levels to Adjust Color
If you only have one portion of your photo that looks
off-color, such as the sky or the ocean � both of which are
commonly degraded by digital cameras � the best tool to use
may be the handy Levels adjuster.
At the top of the Levels tool, you'll see a Channels drop-down
menu. The default is RGB, which is a combination of all
three screen display channels, red, blue and green. Click on
the drop-down and you will see choices for each individual
channel. If your sky looks a little green, select the green
channel and move the Input sliders to the right. You can
also produce the same results by selecting the blue channel
and moving the Input sliders to the left. Reducing the
presence of one color is always going to make another color
stand out. Again, the keys are small adjustments and a
willingness to experiment.
Here is an example of a color adjustment that I made
using the Color Balance and Levels tools. The original
photo, on the left, has a blue tint because it was shot in
low light on a cloudy and snowy Vermont winter afternoon.
Garvey, looking
a little blue, and then
just right.
Curves
The last color tool I'm going to show you is the Curves
tool. This one is a beaut � it combines the Levels tool, the
Color Balance tool, and the Hue/Saturation tool into one
device. However, it's also the most difficult to get the
hang of.
The trick to using the Curves tool effectively is to place one
or two points on the diagonal line that bisects the grid and
move them on the x/y axis. Moving the curve toward the upper
left makes the image lighter, and moving the curve to the
lower right makes it darker. Using two points, you can
create an S-curve which changes both the brightness and the
contrast at once.
In the Levels tool, you are only adjusting the Input
values when you move the sliders underneath the histogram,
but the Curves tool automatically adjusts the Input and the
Output channels in tandem, so the changes you make are more
drastic.
In order to get the most out of the Curves tool, you need
to calibrate the gamma settings of your monitor and work with small
adjustments. Sense a general rule of thumb developing here?
Auto-Adjusting
When you first clicked on the Image -> Adjustments menu, did
you happen to notice those "Auto" options? Specifically,
Auto Levels, Auto Color, and Auto Contrast? Hmm, well, let's
talk about those.
Adobe's auto-adjusting tools are pretty helpful most of
the time. I've used the Auto Levels tool many, many times to
quickly make a no-fuss adjustment to a dark photo. However,
as smart and helpful as these tools may be, they aren't
smart enough to always please the human eye.
The Auto Contrast and Auto Levels tool are the best of
the three. If you're working on a photo that needs a little
nudge here and there, they can clean it up in less than a
second. However, if the photo needs some work, then these
tools are more trouble than they are worth. The Auto Levels
tool especially seems to over-saturate the darker shades of
the color spectrum. Your best bet is to try an
auto-adjustment, and if you like it, keep it. If you don't,
Control-Z your way back to the original state and adjust the
photo manually.
The Auto Color tool is rather finicky. No matter how hard
I try to figure it out, I never know what it's going to do
next. It seems to enjoy botching up skin tones repeatedly
for hours. Then, all of a sudden, it gets one photo just
right. The problem is that the tool isn't smart enough to
weigh all of the colors in the photograph according to
importance. So, instead of trying to teach it, give it a
whirl and if it doesn't work, correct the color manually.
This is a photo I took of my great aunt Rita standing in
front of a seafoam green wall. On the left, I've
color-corrected her manually. On the right is the Auto Color
tool's result. Rita, you look a little pink! You should eat
something! I've got a lasagna in the freezer, have a seat!
Cropping and Resizing
Now that your photos are all clean and bright-looking,
they're ready for their close-ups!
To my eyes, the two most important steps in producing a
stellar photo are the first and last steps: Framing the
photo in your viewfinder and framing the final version with
your computer. That's right, I'm talking about cropping.
Cropping isn't just useful for getting rid of that little
bird that snuck into the corner of the your
otherwise-perfect composition. The choices you make when you
crop can improve the artistic and emotional impact of your
photo. I know, I know, maybe I'm stretching a little, but
consider the visual presence of the photos at the last art
exhibit you went to. The photographer made some difficult
choices about how the subjects were framed within the four
sides of the picture, and not all of those choices were made
when artist clicked the shutter. Look at the work of Nan
Goldin or Tina Barney for some nice lessons on inventive
composition.
Photoshop's crop tool is the easiest and best way to crop
your photos. Drag the crop tool across the photo and you'll
see a framed rectangle � the cropped photo is everything in
the middle. You can reshape the selection by dragging the
handles on the sides or in the corners of the crop box. If
you want to keep the same dimensions for the crop box but
you want to make the selection larger or smaller, hold the
Shift key while you drag one of the corner handles.
When you've framed the crop box over what you want to
keep, either double-click your mouse or hit the Return key.
All of the shaded stuff on the outside of the box will be
dumped, and you will be left with a tightly composed image.
The crop tool is also useful for resizing your photos.
You can specify the pixel dimensions that you want for your
final image by entering them in the tool settings at the top
of the workspace. When you set pixel dimensions and make
your crop, Photoshop will automatically resize the photo
based on the specified pixel width and height. Notice that
the crop box will also retain the dimensions you asked for
as you move it around and resize it.
So what's a good size for photos on the Web? At screen
resolution, which is 72 pixels per inch, a good range to
shoot for is somewhere around 300 pixels wide for smaller
photos and between 450 and 600 pixels wide for larger ones.
If you are building a collection of photos for a Web
gallery, it's important to keep all of your photos
relatively the same size � it's easier to manage the
gallery, and it doesn't disorient the viewer. Consider this:
When you order physical prints at the store for real film,
they come to you as either four inches by six inches or
three and a half by five inches. That's a good ratio to
apply for your digital photos as well, because it's the most
common ratio for photography, and it's what your viewers
will subconsciously
expect to see. So if you have an image that's 500 pixels
wide, the height should be around 350.
That's not to say that you should stick to one ratio all
the time. Go ahead and experiment! Who am I to hold you
back?
Size Matters
At this point, your photos are almost finished. But look
at that file size! Beach picnic photos are no picnic to
download when they're 381 kilobytes. The last step in
preparing a photo for display on the Web is making it
Web-friendly. So let's talk file optimization.
What's the right size for speedy downloads? Well, you
don't want to make your photos too lightweight,
because over-compressing them can make them look like
garbage and effectively ruin all of the hard work you've put
in up to this point. Also keep in mind that the brighter and
more colorful your photo is, the larger the file size is
going to be no matter what.
So, there's no one answer to the question of "how big."
However, a good range to shoot for is between 30K and 70K.
This ensures that your download times won't be massive, but
also that your photos will still look relatively nice. Also,
with smaller file sizes, you can fit more of them on your
server. If all of your photos are 50K, that's around 20
photos per megabyte of storage space.
I like to use Photoshop's "Save for Web" feature. This
feature lets you select the type of compression you want,
move the sliders to adjust the amount of image compression,
and even see the results on the fly. Select a photo to
optimize and choose File -> Save for Web.
On the right-hand side of the screen, you'll see several
different drop-down menus. These menus change based on which
file format you choose. Most digital photography on the Web
is displayed using the JPEG format � it produces clean
results and preserves color saturation while keeping your
file sizes low. Select JPEG as your file format (choose it
in the upper-left hand menu) and you'll see the Quality menu
appear on the right. You can change the value by entering a
number between 1 and 100, or by moving the little slider. As
you change the value, look at the status bar at the bottom
of the screen. That's a download calculator � you can see
the file size and estimated download time increasing and
decreasing. I prefer to save my photos with a Quality
setting of 50 or 60. Sometimes, I nudge the slider a little
bit higher if I'm saving a photo that doesn't have a whole
lot of color information in it, or lower if it's a rich
photo with gobs of bright colors.
At the top of the Save for Web window, you'll find tabs
marked "Original", "Optimized", "2-Up" and "4-Up". Use the
2-Up tab to get a side-by-side comparison of the original
and the optimized files. The 4-Up tab will allow you to view
four different optimization options at once. When you've
arrived at a setting that you like, click Save and name the
photo something Web friendly. They usually come out of the
camera as "DSC000134.jpg" or something, so now is a good
time to save it as "
hawaii01.jpg"
Making Thumbnails
If you're worried about placing more than one or two
images on a single Web page because of the download time
required, you should be. There are several ways to present
your photos on your website, and all of them require just a
little bit of coding.
The best way to present multiple images is by making a
gallery. You've probably seen a thumbnail gallery before; a
Web page will have several rows of thumbnail images, maybe
four or five images across. The thumbnails are linked to the
full-size images � click a thumbnail and the full image
loads. A slideshow gallery loads the full-size pictures one
at a time, either by a mouse click or by a timed script.
Thumbnail galleries can be built in pure HTML, or you can
enlist the help of a programming language like
PHP or JavaScript.
Slideshows and other auto-loading galleries are worth
exploring (and I encourage you to!). There are a few
software programs out there that will build a slideshow for
you, but building one yourself is more rewarding. Even so,
that probably deserves its own article. Powerful development
suites such as Dreamweaver and GoLive can also generate different kinds of image
galleries.
There is a useful tool in Photoshop that generates a
quality HTML-driven thumbnail gallery on the fly. It's
called the Web Photo Gallery tool, and it's accessed via the
File menu under File -> Automate with the other batch
process functions.
You pick the folder where your images live, the folder
where you want to save your thumbnails, the colors and fonts
you want to use on the HTML pages it generates, and a host
of other parameters. If you want it to, this tool will also
take your image files and correct their levels, auto-resize
them, and compress them. However, the Web Photo Gallery tool
uses the same engines employed by the Auto Levels, Auto
Color, and Auto Contrast tools which, as we've discussed,
are better left to the amateurs. But I've found the Gallery
tool handy when I need to create fifty-nine thumbnails,
something that's an incredible hassle to do by hand.
If you're only creating ten thumbnails or so, try using
the Save for Web feature again. This time, click on the
Image Size tab on the right side of the screen and shrink
your image down to thumbnail size before saving it.
My favorite size for thumbnails is 75 pixels across, just
over one inch wide when displayed on most computer screens.
Also, you don't need to worry about optimization settings as
much with thumbnails. They're just place markers that aren't
intended to look good, so go ahead and squeeze the heck out
of them.
One more tip: Create a separate folder called
"thumbnails" and dump your thumbnail images in there. It's
important to keep thumbnails separate from your full size
images.
Move Over, Avedon
We've come awfully far today, but there are a few
reminders and pieces of knowledge I'd like to drop on you
before turning you loose:
- Always resize last. Make your adjustments to
brightness, contrast, and color while you still have the
most pixel information. Cropping and resizing should be
your final steps.
- Look at your work on as many different monitors as
possible. LCD screens run hotter than CRTs, so check your
work on both. Eventually, you'll learn to trust your eye
for the correct amounts of brightness and saturation.
- Most digital photos won't need any cleaning up, but
some will. Fix those blemishes with Photoshop's healing brush and the rubber stamp tool.
- Avoid using the flash if you can. Natural light is
best, and flashes produce brightness imbalances that are
difficult to fix. Experiment with the aperture and shutter
speed setting on your camera.
- Study the work of others. Look at professional
photographers' sites and pay particular attention to the
way they display their photos and arrange their galleries.
- The best way to learn the capabilities of your toolset
is to experiment! Try making art, adding filter effects, and
playing with color saturation.
Hey, look at you! By now you've learned how to fancy up
your digital photos and prepare them for viewing by all.
There are a few topics that I may have breezed over, but
that's just because there's much to learn and only so much
time.
Hopefully, I've given you enough of a head start to dig
in and begin showing off some great-looking pictures. Maybe
we've even fired up your inner artiste, oui?
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
