Everybody's heard of Photoshop; it's the world's gold standard when it comes to image editing software. Part of this is due to its age, and part to its capability. The web is a graphical medium, so it makes sense for people who run web sites to have a basic understanding of Photoshop.
There are two "standard" complaints about the application: it has a steep learning curve ( in part because it's so powerful - there are simply "too many" options for new users, who tend to feel overwhelmed ) and its price. In US Dollars, Photoshop CS 3 is $650, while the extended version goes for $1,000. This is mainly of use to people who need to manipulate images in 3D space, or movies on a frame-by-frame basis.
Photoshop Without Photoshop
Because of the high cost, we should start by looking at some alternatives to Photoshop. These run the gamut from open source freeware to closed source commercial applications - the competition - and, ironically, trimmed down versions of Photoshop itself. For the web designer on a budget, some other software to consider is:
- The Gimp - Probably the world's leading open source imaging app, and Photoshop's strongest competition among serious imaging professionals. The user interface is far more cumbersome than Photoshop, though, at least in this writer's opinion. Still, The Gimp is about as powerful as you can get ( in some cases more so than PS itself ), and open source. Price: Free.
- Paint.net - An open source editor ( written in C# ) with features about halfway between PS and MS Paint. The interface is deceptively simple, and the application is in fact powerful enough for most web related graphics work. The main problem I've noticed is the program refuses to open very large files. Price: Free.
- Paint Shop Pro - A "little brother" version of Photoshop, a commercial application, and probably the most popular among paying amateurs. The software boasts support for layers, alpha channels, transparency, shapes, gradients, and most anything to tickle a web designer's fancy, if the two above don't work for you. Price: $60 to $100.
- Photoshop Elements - Ironically, the gold standard of photo editors competes with itself. "Elements" is a limited version that often comes with a digital camera or scanner. It has much of what's in the "full" version, minus some niceties like the "curves" adjustment ( of little use to most webmasters, especially when the application keeps "levels" ) and automation. This could be more of a problem; the more expensive version is able to do just about anything you would like to a folder full of images ... for example, reduce them all to web size, sharpen them, and if need be, throw a frame around them, saving the results in a different folder. Price: ~$100
Another alternative for people who own an older copy or Elements is to upgrade; this is typically less than half the price of a brand-new license. Students can get an academic license for a fraction of what the general public would pay, and surprisingly, Adobe honors the license even after you stop taking the class you needed Photoshop for, at least as of the date of this writing.
Image Editing - The Basics
All of what follows is general do-it-yourself advice meant for web developers who need to spice up their page layouts. Because much of what we're talking about is conceptual - we'll skip the advanced photo editing - these tips apply to any of the software recommended above.
- Color matching: Color obviously plays a big role in web design. This is no different than any other type of graphic design, from a magazine, to ancient paints. We have a new tool to work with, though; Guttenberg couldn't match color in the way we can today. Almost all image editing packages give two options in this regard: an info window that allows you to hover the mouse over any pixel in the image and get its RGB values, and a color picker, usually with an icon like an eye dropper. This sets the current color, from where you can "borrow" the color's hex code.
- Frames: Photoshop has three levels of interactivity: a person can do everything by hand, use actions, which are much like Excel macros, or use a fully automated plug in. The Gimp and Paint Shop Pro use different terminology to describe the same concept. In any case, a built in set of actions includes the famous drop-shadow, wood and metal outlines with bevel and embossing, and other goodies. For do-it-yourselfers who want to avoid using actions, adding a frame to an image is simply a matter of enlarging the canvas by an equal height and width, keeping the image centered, then using styled layers to create the mat, frame, and shadow effects. While this is usually better accomplished in CSS, you'll need images to build your stylesheet around.
- Text: You can find any number of tutorials on creating a particular text effect on the web. All of them boil down to using the text selection tool rather than the text tool. This creates a selection outlining where the wording you wrote should go; from here you copy the selection to a new layer, where you can edit it independently from the rest of the image. From metallic water effects to simple watermarks, this little known tool is the key. Out of the box, you'll need to right click on the text tool to call up the menu that activates this tool.
- Sharpen: Everybody knows how to resize images, and we know to avoid enlarging them if we can get away with it. Part of this is because whenever you resize an image, a Gaussian blur is applied behind the scenes, to prevent digital ugliness. Even after shrinking an image, you should sharpen it. This isn't just for photographers who forgot their tripods...
This example uses three of the techniques outlines above: GeoLand.org uses a pure white background, making the drop shadow easy to blend with the site, a frame created by expanding the canvas, then applying a drop-shadow and stroke layer effect, and, finally, the text selection tool. Notice you can see the background beneath the copyright sign, and the tree behind the C in the last name. (Photo by Forrest Croce; used with permission.)