Plaque of MosaicI 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.