Faith and Web

A year ago, Church Marketing Sucks posited that Stock Photography Sucks. There was heated (and interesting) debate, plus a follow-up poll on how much congregations used it. The majority fell into the same camp as me: “We use original when we can and stock when we need to.”

Actually, I used to avoid stock photography at all costs. But then one day I found the perfect photo on a free stock art site — and moderated my stance. While I still don’t use it extensively, now I’m glad to have it in my toolbox and use it every so often. I don’t use it on critical parts of the sites I maintain, such as their home pages, but I do use it here and there — including on this blog.

Assuming some day you too will need it, here are my favorite free or inexpensive stock art sites. Enjoy. There are some real treasures to be found here.

• stock.xchng (free)
• morgueFile (free)
• Yotophoto (free)
• iStockphoto (costs a little, but has a wonderful repository)

No Comments »

In my quest for the best graphic resources for church webmasters, Scott Wells directed me to The GIMP (short for GNU Image Manipulation Program). 36 hours later I emerge – impressed, but wrung out – and with some significant reservations. My one sentence summary is if you can get it to run and overlook its geekiness, it’s a great alternative to Photoshop.

I’m hopeful Scott will blog about it, since it has so much potential for a major niche – i.e., those needing a good graphics program who can’t afford Photoshop. Meanwhile, here are my more detailed thoughts on it.

Installing the Blasted Thing

Installation woes are more than a stumbling block. They basically constitute a “No Entry” sign for the non-geek. I ended up trying to install it on three machines.

On a PC running XP I had to install something called “GTK+ 2 Runtime Environment” (heaven help mere mortals) before I could install the actual application. Then it gave me DLL warnings, which scared the daylights out of me. But it ran. And so far, all my other apps still seem to run (blessings on my stalwart Dell PC). The good news is, as I looked around, I started to fall in love. I found commands like “Zealous Cropping” and “Script-Fu.” I’m a pushover for articulate geeks, not to mention it may go beyond Photoshop in some areas.

Next up was a Mac running OSX 10.4 (Tiger). Forget it. There were, by my count, five different ways to install it – and none of them worked for a time-pressed diva like me. I spent what felt like an eternity dealing with the fact that I didn’t have something called X11 for Mac OSX. I found scads of advice to “just” retrieve it from my OSX installer disk. Well, like many other people I don’t have the OSX installer disk for that machine. Why Apple doesn’t just put the thing on the web for download evades me.

Machine number three was an eMac running OS 10.3 (Panther). By this time I was in high dudgeon and nothing was going to stop me. Who cared if my machines were permanently damaged by these weird pieces of software? Gentle reader – this is an ill-advised mind state for working with your computers. Pamper them. Don’t do as I do. Do as I say – and if you are concerned that software might damage your machine, trust your instincts.

In the end, thank heavens, it didn’t damage my trusty old eMac. In fact I got it to work. If you are running 10.3, you can download X11 here and then get the GIMP app itself from here. But be warned: just because you can successfully install it, that doesn’t mean it runs like other OSX software. You must first run X11, found in the Utilities folder of Applications (where it installs itself without telling you), and only then can you open the GIMP. After that be prepared for weirdness in the way it responds to both mouse and keyboard commands. For example, you have to use Control-Z (instead of Apple-Z) to undo a command.

How It Measures Up To Photoshop

Suffice it to say, I did put it through the paces of my six basic commands, but if you’ve gotten so far as to install the GIMP successfully, I suspect you won’t need my hand-holding to figure out how to do these things. Or maybe I’ll recover in a few days and give you the specifics. Or maybe Scott can.

The Cliff Notes version is that it does do all these things quite well, with the exception of “Save for Web,” which it does well (if obscurely) for jpegs and adequately for gifs.

All-in-All

I have the distinct impression the developers of GIMP are more interested in other geeks than they are in graphic artists or poor-as-church-mice webmasters. If you can get past the major barriers of installing and opening it, you will probably (like me) love it. That said, I certainly can’t use it in my professional life. Just the fact that it doesn’t do “Save for Web” seamlessly creates a workflow issue for me. But in my church web diva life? I think it’s such fun I may just use it routinely – in solidarity with others who can’t afford Photoshop. Maybe I can even influence the developers to pay attention to mere mortals. I suspect it would be a win/win.

7 Comments »

Mr. Web Diva, who happens to be a first-rate photographer, has been using Google’s Picasa for a year or so now and has been quite happy with it. So I thought I’d try it out and see how it would work for my graphic needs as a church webmaster. Specifically I looked at how it would perform the same six functions I covered for Photoshop.

To begin with, I had to use his PC, because Picasa doesn’t run on Macs. I suppose Google’s logic is that Mac users have iPhoto, which covers much of the same territory. However, this in itself rules Picasa out for me. Nevertheless, for those of you on PCs who can’t afford Photoshop, I persevered. Here’s how Picasa performed on basic graphic needs for a church webmaster.

Rotate
To rotate a photo 90 degrees, you simply click the icon near the bottom of the screen. Small adjustments are done using the “Basic Fixes” tab and selecting “Straighten.” As is generally true of Picasa, it’s easy and intuitive.

Crop
Also under “Basic Fixes,” select “Crop.” If you then select the manual mode, you have as much control as in Photoshop.

Resize
Shrinking a photo is done at the point you save it. Click the “Export” button and then adjust with the “Image Size Options.” Unfortunately it only lets you adjust the longer side of the photo. In my example used for Photoshop, I’d have had to guess or do some serious arithmetic to figure out how to get the width to 180 pixels.

Save for Web
In the same export panel used for resizing, there is an “Image Quality” dropdown with five choices (including “Custom”). “Normal” seems to be what I would call web-optimized. “Custom” makes fine tuning possible, but it’s like Photoshop before version 5.5 – you’re flying blind; there is no preview.

Sharpen
If you have a fuzzy photo to start with, before you export it, select the “Effects” tab and then sharpen. Fine-tuning isn’t possible. Also, I gather when you resize a photo (during the export), Picasa automatically sharpens it for you.

Make a transparent background
Picasa is strictly a photo editor. It saves files as jpegs, not gifs, and so it can’t be used for a transparent background.

All-in-all, Picasa is wonderful for its intended purpose – photo management. It’s intuitive and you can’t beat the price. It particularly shines if you want to create a web photo album. However, no church webmaster (whether with PC or without) is going to be able to rely on Picasa for all of their graphic needs. It’s not a Photoshop replacement, nor is it meant to be.

The good news is that in the comments on my previous post, Scott and Lance both recommended GIMP, which is free and open-source. I know Scott and Lance and respect their opinions. GIMP runs on all major platforms, so next up I’m going to give it a whirl in hopes that it’s a better match.

Comments Off

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.

4 Comments »

I remember the first time I ever saw a browser and website. It was 1994, and what won my heart was the little NCSA graphic. Goodness knows it wasn’t anything fancy. As I recall it was just one lonely picture – but it was a revolution. In those days, I was one of the few who saw online resources routinely (typically Westlaw and Lexis in my case), but they were text-only. Graphics made the text sing.

Graphics remain close to the heart of a web, and thus are a core skill for someone who runs a site. The good news is you still don’t have to use many graphics. Even better, you don’t have to be an artist to do a decent job.

But you do have to master a few basic concepts and techniques if you want to not only create, but maintain, a great website. It’s wonderful to have the world of digital photography at your fingertips, but so what if you can’t translate those great big files into tidy, small elements that show up in just the right place on your site?

So this is the first in a small series of posts about basic graphics skills. I’ll get to specific techniques in later posts, but today I’ll just focus on the first step – laying a foundation.

The foundation boils down to five key concepts, which all good webmasters, including church volunteers, need to know.

1. Understand the difference between raster and vector graphics

The labels are off-putting if you ask me, but the concept is essential and simple. In one type of graphic (vector) the size doesn’t matter, because it’s a mathematical, geometric construction. You can resize them as much as you want and it won’t affect the quality. In the other (raster) size does matter, because they are just a lot of dots (pixels) smashed together. Make a raster graphic smaller and you lose dots, typically making it look blurry. Make it bigger and who knows what color dots will fill the void, making it look worse than blurry. Raster graphics are also called bitmaps – a somewhat better name, I’d say, though still a bit clunky.

If I were queen of the graphics universe I’d rename them stretchy (vector) vs. dotty (raster). In any event, this affects everything about how best to use and manipulate them.

Also, it’s critical to understand that all of the web’s primary formats currently are raster. While the original graphic you work with can be vector or raster, in the end you will create a rasterized (dotty) version of it. Speaking of which….

2. Know the main graphic file types

No matter what file type the graphic was originally, to use it on the web you have to save it as one of three types: jpeg, gif or png.

Jpeg is the classic format for photos. Chances are you’ll get your photos as jpegs and after you’ve edited and optimized them, you’ll save them as a jpeg. It’s also good for busy graphics and for gradients.

Gif is the main alternative. It’s best for simple graphics with not too many colors (e.g. most logos) and for images with transparent backgrounds.

Png is up and coming. Actually, it should have replaced the gif long ago, since pngs do what gifs do, only better. However Internet Explorer (IE) didn’t handle pngs correctly until the most recent version (IE 7). Since many users still have IE 6 as their browser, using png is a risky choice. The simple solution is don’t do it. One tidbit, though. Png is the native graphic format for PowerPoint. When doing graphics for PowerPoint, if you have a choice of formats, go with png.

There are quite a number of other graphic formats, including ai, eps, pdf, and psd. While it’s helpful to be familiar with these, the only critical web skill is being able to open them when you get them. Then you convert them to jpeg, gif or png.

3. Be choosy; not all photos are created equal

I’m excruciatingly picky about graphics, especially photos. Many, many photos are just plain bad. Of course, that shouldn’t be a problem in this digital age. It’s one of the reasons Delete is my favorite key.

But even when photos are good, there are many other reasons you may not be able to use them. I frequently can’t use good landscape photos because the space on the page is too narrow. So here’s a tip: in general, portrait shots are more useful for the web. Another common problem is that the figures may be too tiny once resized. Or the action can point the user’s eyes away from the text. Etc., etc.

My favorite strategy is to tell people up front that I’m very picky about photos. Then we strategize about what photos are most needed and how to get them.

4. Respect the logo

If your congregation has a logo, chances are you’re going to have to use it. Hopefully you love it, and if that’s the case, wonderful. However, in my experience most people (particularly those who aren’t graphic artists by profession) don’t like the logos they have to work with.

I used to be one of those people. But as I’ve gained experience, I just think of them as one more core element to work with. While I may not like a logo per se, chances are I don’t dislike it either. More to the point, I understand it’s my responsibility to contextualize it – to make it work in the overall scheme of the site.

Of course, there are some truly dreadful logos out there. If this is the case, or if it’s clear almost everyone in the congregation loathes the logo, then of course you need to do something. Don’t use it or better yet, if the powers that be want it, have a professional design you a new one. They don’t usually cost much for congregations – typically between $100 and $500.

5. Play nicely with professionals

It’s true that with a few simple skills, most web professionals can do a decent job with graphics. That doesn’t mean, however, that we are all graphic artists. There comes a point where you need to know your limits and find a graphic artist.

A good example is the graphic of me in red glasses in this blog’s header. Even though I’m decent at graphics work, I knew I’d be better off with help. So I asked a good friend who is a professional and talented graphic artist – and I love the result. It’s much better than anything I could have done, though I did know how to work with the raw file once she had done her magic.

Similarly, while it’s fine, even good, to be picky about photos, this must be balanced by the art of not offending photographers. Better yet, build a partnership with them. I would say the essence is first finding people who are good photographers and then communicating clearly with them. Let them know what works well for the site and let them know how much you appreciate them. Credit them whenever possible. And ask their opinion about the site, what’s needed and so on. It all helps.

That’s it for basic concepts. In posts-to-come, I’ll cover the fundamental techniques, tips and online resources. So stay tuned. Same bat website, same bat RSS feed.

3 Comments »