Adobe Photoshop Techniques
Adobe Photoshop is an image manipulation program design for professionals in print and web design. Because of the appeal of the program, and the fun in working with visual images, Adobe began, years ago, in cross-marketing leaner versions of Photoshop with lighter price tags, including Photoshop LE and Photoshop Elements. The techniques covered here will apply to many, if not all, versions of Photoshop, beginning with version 5, and upward.
Because Photoshop is a professional-quality, high-end program, it is impossible to become an expert overnight. It’s also impossible for me to provide every detail of what this application can do in one webpage’s worth of space. There are countless tutorials online for using Photoshop, and books on Photoshop continue to be best sellers. Anyone seriously interested in Photoshop should consult these sources. I’d recommend the series published by Adobe, as well as the “Wow!” series of books.
File Formats
Photoshop produces a variety of file formats for graphics. Among the most popular are:
- JPEG (photographs)
- GIF (animation, graphic images)
- PNG (graphic images, photos, transparency)
- PDF (contain embedded compressed graphics)
- PSD (Photoshop Document)
- TIFF (Tagged Inline File Format)
- EPS (Encapsulated Post Script)
Photoshop also allows us to edit images in two color modes: RGB and CMYK. Other color modes available include:
- Lab
- 16-bit RGB
- Grayscale
- Mono-, duo-, tri- and quad-tone
- Index
- Bitmap
The native format for Photoshop files is PSD. I always recommend saving your work in PSD format, until it is time for publication, at which time, you can re-save a copy of your work in an appropriate format. JPEGs, GIFs, and PNGs are good for the web, JPEGs being superior for photographs. The benefit of the PSD file is no compression artifacts, and the ability to save in layers and a variety of color modes. On a Mac, PSD files can now be natively opened and used in OS X, including in applications such as Preview, Keynote, and Final Cut Pro.
Most often, you will want to edit graphics in RGB color mode, which provides 24-bit color. Reserve CMYK for printing only–printing to press. Most inkjet printers, while they print in CMYK, are built to accommodate RGB-mode images for the accurate reproduction of color.
Items Covered in this Tutorial
- Creating Better Black and White Photographs from a Color Original
- Cropping and Resizing for the Web
- Creating a Web Photo Album
- Changing Backgrounds by Extraction
- Tinting and Hand Coloring
Creating Better Black and White Photographs
Because color photographs are made up of three color channels, red, green, and blue, simply telling Photoshop to make a grayscale version of a color photograph (go to Mode - Grayscale), compromises the photograph. Each color channel introduces noise artifacts, some more than others. This can leave us with a muddy-looking grayscale image. One of the best ways to get a clean, better-looking grayscale image is to use the Channel Mixer.
- Go to Image - Adjustment - Channel Mixer
- Check-on both Preview and Monochrome
- Adjust the percentages for Red, Green, and Blue
- Exit the dialog box.
Alternatively, you can add an adjustment layer, and choose Channel Mixer as the type, from the Layers palette. Either way, I tend to favor the green channel with a higher percentage: it offers the best contrast. In low-light images, the blue channel tends to have the most noise. There is no magic formula, but I tend to gravitate towards percentages such as: 35%R, 50%G, 20%B. Your eye should be the final judge, and that’s why we leave the Preview feature on.
Cropping and Resizing for the Web
While most of us think of pictures in sizes such as 3×5, 8×10, etc., web designers must think in pixels: the tiny dots that make up text and graphics on our computer monitors. I promise, it’s easier to think in pixels than it is thinking in metric! While the true resolution of our monitors differ from machine to machine, and platform vs. platform, the theoretical “screen” resolution for images on the web is 72—72 pixels per inch. Because this screen resolution is fixed, Photoshop can only show us one true resolution–72 PPI. Still, Photoshop files can have any resolution: 180-300 for printing, and even as high as 1200 PPI if we choose. Working with images with high resolution (300 PPI and higher) demands a lot of memory and hard disk resources from your computer. Remember this rule: start big, and get smaller; avoid the reverse.
Downsampling (going from a high-resolution image down to a smaller resolution image) shrinks the file size, and the apparent size of the graphic on the screen. Keep in mind, Photoshop makes images look bigger when they are higher resolution, because our screens can only show so many pixels per square inch. When working for the web, always scale down your images to 72 PPI. In fact, unless you plan on doing high-resolution printing, 72 is a good resolution for a lot of work.
Another measure of resolution is screen dimensions. 1024×768 is the resolution of many 15 inch monitors. This means that your monitor can display 1024 individual pixels horizontally, and 768 pixels vertically. This is the grid, then, that displays everything you see. Larger monitor sizes, like a 21 inch monitor, can display 1600×1200 pixels, which means you have more screen real estate to have fun in.
Knowing that many screens out there can fit 1024 pixels across the screen gives you some feel for the size of a pixel. Images destined for the web should be large enough to make out what you want to see clearly, but also, small enough to reduce download times, and small enough not to dominate a web page. One way to avoid huge sizes is to produce thumbnail images: when clicked upon, they reveal a larger, high-resolution version of the image you’ve posted.
JPEG Image, 600×400 pixels (120 KB)
JPEG Image, 400×237 pixels (100 KB)
JPEG Image, 200×134 pixels (88 KB)
Notice the differences between these three images. More detail is obviously available in the large version, but the file size for the large version is overwhelming, compared to the smallest. Switching to a lower quality setting and a grayscale color mode would have saved us significant size for all three images, as well.
When preparing images for the web, I recommend not just resizing to smaller version of a file, but also cropping-in to the most important subject, or element, within the picture. This does two things: focuses the viewer’s interest, and also maximizes the size ratio for a quicker download time.
Let’s start with an original photograph of the author, and his mother. It’s too big for inclusion in a webpage, and the size would offend modem-users visiting our site.
JPEG, RGB-color, (164 KB)
By using the crop tool, and setting our target resolution, I can accomplish two steps at once: reduce my physical dimensions, and retain the focus of interest in comparable size.
Cropping to Size in Photoshop. Make sure the target resolution is 72, and you have specified your dimensions in pixels (px).
The author, with mom, both cropped and resized (104 KB).
When significantly reducing the file size, as I have done here, it wouldn’t hurt to apply some Sharpening (use the Unsharp Mask option under Filters if you have the time, it’s more precise) to increase contrast around hard edges. This will give the photo a little tighter "focus" after downsampling.
When saving your JPEG file, you have several options with regard to file size and quality.
The quality setting is how much lossy compression is applied to the image. The higher the quality, the better your picture, and larger the filesize. The true filesize is shown at the bottom (my filesizes listed here are much higher, because Photoshop adds a "preview" icon to the picture for OS X, and this inflates the filesize). I save most JPEGs for the web between quality 5-7. Remember to save the originals, large size, in PSD format for editing later!
Creating a Web Photo Album
A web photo album is a great way to show-off your digital pictures. There are a lot of packages now that can help you with this. Dreamweaver and Fireworks offer this option, as does Apple’s iPhoto. Photoshop does it, too, and it’s easier to do than you might think.
First, collect large, full-size versions of your photographs in one directory. Have a second, empty directory ready for placing the web pages and resized graphics in, once Photoshop starts its handywork.
Choose "Web Photo Gallery…" under the File - Automate menu.
You can view my web photo album here, created using Photoshop 7. I like the Javascript option that automatically advances the pictures in a quasi-slide show fashion.
Changing Backgrounds by Extraction
By far, the most powerful aspect of Photoshop is its ability to work in layers. One popular technique is to separate the subject of a photograph, and use the subject against an alternate background. In this example, I’m using a picture of a statue from the Boston Museum of Fine Arts. Open your picture, and choose Filter - Extract.
Using the paintbrush, draw around the perimeter of your subject. Next, fill the interior with the paint bucket. You should see something like the example above. Next, click on Preview, and then OK, if you are happy with the result.
Seen above, the background has been eliminated. The checkerboard pattern is Photoshop’s way of showing us that there is transparency in our image. Next, I find a new background by opening a new image. I drag this background layer from the new document, into the original document with the statue. Then, by swapping the layer order, I have a new, composite image:
A whole world of great fun with images awaits! You can download a final version of the composite, after color correction was applied to the statue, and the background blurred to give the effect of distance between the subject and background.
Tinting and Hand Coloring
Both tinting and hand coloring are techniques borrowed from traditional photography roots, but take on new possibilities in Photoshop’s digital darkroom. Both techniques start with a grayscale image in RGB mode, exactly the type of image we’d end up with after going through the first technique in this set of tutorials.
If all you want is a grayscale image, change your Image - Mode - Grayscale, and save it. However, to do tinting and handcoloring, remain in RGB color mode.
Samples of our original, both in color, and in grayscale.
Next, go to the Hue/Saturation adjustment (Apple/Command-U) and turn on the colorize option. Next, dial up your favorite hue to be applied to the image. This is called tinting. This is the technique used to attain sepia-tone images.
Another, related technique is to apply a gradient, and map it across the 256 different grayscale shades to create, what’s called, a gradient map. In Photoshop 7, it’s located in Image - Adjustments - Gradient Map.
When just two colors are used, the effect approaches what’s called a duotone—when just two ink colors are used to reproduce a continuous-tone image. This is not a true duotone, but Photoshop can produce those too. Both using a Gradient Map and Tinting are easy, quick ways to add some significant difference to your digital pictures.
Hand coloring takes more creativity on your part—it’s time to get out the paint brush. First, start with your grayscale image in RGB mode. Next, create as many new layers as you need for the color you want to apply in the layers palette.
Notice here, how I’ve changed the color blending mode for my purple layer to Color. Do this for all three color layers you have created.
Hand coloring takes patience, but can add a whimsical touch to otherwise ordinary
photographs. What’s fun is that you don’t have to stick to the "real" colors.
Use the opacity control on the layers palette to control how much color
is added. Old black and white photographs used to be colored before color photography
had become feasible; with a digital paint brush, you can add artistic touches
to your photographs by overpainting color, giving your documents an "electric"
feel to them.
Video Tutorials
Check out my video tutorials online for Photoshop Elements 2.0
Download the picture archive for this training at VSTE 2007.