Faith and Web

I use Adobe Photoshop every day — and I love it. While it has plenty of healthy competition that I plan to cover eventually, it’s generally considered the gold standard for photo editing. So, with no further ado, let’s jump in and talk specifics.

Here is a sample photo to work on. It’s from the front yard of my church last winter.

Using this photo, I’ll show you most of the things I do every day with Photoshop. All are easy if you know how. More to the point, you’ll get a sense of what’s a must and what’s safe to ignore when you first start using Photoshop. That’s the hardest thing about it for a beginner — knowing where to start.

Rotate

Usually I use the rotate command to swivel a photo 90 degrees. But every so often, I want to rotate one just a little. In this photo I’d like the right side of the wayside pulpit to be parallel to the edge. The command is the same whether it’s 90 or 0.1 degrees. From the menu, you select “Image,” then “Rotate Canvas,” and then in this case “Arbitrary.” I filled in 2 degrees and checked CCW (counter-clockwise). Here is the result:

Crop

There are two reasons to crop a photo. The first is to focus on the subject. The second is to make it fit in the limited real estate of the web page. In our example I’m going to focus on my church’s wayside pulpit and crop off the part of the building you can see on the left side. To do this you use the crop tool found in the tool palette on the left side of Photoshop. You can also select it by entering “c” on your keyboard. Then you drag your mouse over the portion of the photo you want to keep. You can fiddle after making the initial selection; it only will really crop when you hit return. Here is the sample photo after being cropped:

Resize

Usually this means shrinking a photo. It’s rare that you can safely enlarge a raster image. To make a graphic smaller, from the menu select “Image” and “Image Size.” Then select the size you want. Usually you’re going to want to control the width and let the length be what it will. In this instance, I shrank the photo to 180 pixels wide.

Sharpen

When you shrink a photo, it will get fuzzy. I can’t tell you how often I see fuzzy photos on the web. It drives me nuts. They are just one command shy of a full deck. The photo right above is a great example. So, this is my number one Photoshop tip. From the menu select “Filter,” then “Sharpen” and then “Unsharp Mask.” The default settings (Amount = 50%, Radius = 1.0 pixels and Threshold = 0) are usually fine, though you can play with them, watch the results and pick what looks best to you. Voilà. A defuzzed photo:

Save for Web

This photo is now web-ready — all except for being “optimized.” Optimizing graphics for the web means finding the perfect balance between the smallest file size possible and retaining image quality. This used to be a bear to do, but ever since Photoshop 5.5, it’s been a breeze.

From the menu, select “File” and then “Save for Web.” In the window that pops open, I’d recommend selecting the “4-Up” tab at the top. When you do this you’ll see your image four times. The upper left will have the original image, while the upper right is the default selection. Typically, from the panel on the right I select the dropdown right under the “Done” button and choose “JPEG High” for a photo. Then with another instance of the photo I select “JPEG Medium.” Last of all, I choose the better photo and save it to my website.

Make a transparent background

I use almost all of the same commands for illustrations that I use for photos — plus one extra. That’s saving a graphic with a transparent background. Take this pretty chalice below (created by Inga Johannesen for the UU Church of Chattanooga). How do you make it so it can shift around on a gradient background like the one on the right?

In Photoshop the first thing to do is copy and paste it to a new file, using a series of menu commands. (1) Select / All. (2) Edit / Copy. (3) File / New. (4) Edit / Paste. Over on the lower right of Photoshop, you should see the Layers palette. If you don’t, choose “Window” and then “Layers.” In it, you’ll see two layers: Background and Layer 1, which has the chalice. Click on the eye icon next to the Background layer to make it invisible. Then click on Layer 1, and from the menu choose “Select” and “Color Range.” Click in the dialog box to select the white background and then select OK. You should see “marching ants” outlining the chalice. Choose “Edit” and “Cut.” The white background will disappear and you’ll see a mottled gray background — Photoshop’s way of showing a transparent background.

Then it’s time to “Save for Web.” This time, however, from the dropdown under the “Done” button, select a GIF (e.g. GIF 128 No Dither). GIF is better for simple graphics — plus it makes transparencies possible. You can’t make parts of JPEGs transparent. Once you select GIF, the mottled gray background should show on some of the choices. If it doesn’t, click the Transparency box. If the background isn’t white or close to it, chances are you will have to adjust the Matte box too. Just click on it and select the correct background color. When you enter “Done” you will have a transparent gif, something like the below:

Rest assured: all of these techniques, even transparencies, are easy to do. Of course, not everyone can afford Photoshop. So next time I’ll try doing the same thing in Picasa. Stay tuned.