iHerr

Anyone who maintains a website has probably wrestled with how to create quality graphics inexpensively, yet at the same time, have them look professional. There are several techniques you can use to create graphics for your website that add a level of sophistication and visual appeal. This page outlines some of these techniques.

Step 1: Take a picture

If you want to use photos, you’ll need either a digital camera or a film camera and a photo scanner. There are photo techniques you can use to make your images more professional-looking. You don’t need a super expensive camera to take photos for use on webpages. A good quality 2-3 megapixel camera, such as the Canon Powershot A40 or A70, will do just fine.

• Lighting
  Make sure the lighting on the subject is adequate. If you are photographing indoors, add lighting if possible by opening the window shades to let sunlight in, and turn on the lights in the room. Make sure the light is not glaring off of the subject or the background. If you are taking an outdoor photo of people, try to do it in a location where the sun is not shining in their eyes and making them squint. The best time of day to photograph people is just after dawn or just before dusk, when the sun is low in the sky. This gives people a nice radiant “glow.” If you are taking a picture at night or in other low-light conditions (which will probably require more exposure time), put your camera on a tripod or a firm, flat surface to prevent camera shake (and set your camera to take a time-delayed photo so that it doesn’t snap the photo while you are pressing the button). Make sure you use the flash if your subject is in motion.

Indoor Lighting Examples
Poor Lighting	Good Lighting
Outdoor Lighting Examples
Poor Lighting	Good Lighting

• Focus
  Make sure the subject is in focus. If you are taking a close-up photo of an object, make sure you set the camera to “macro” mode if it has it. This is usually indicated by a flower icon. Setting your camera to macro mode allows the camera to focus at objects very close to the camera that would normally be outside of its focusing range. A trick for taking close-up photos is to stand a little further back than the minimum focusing distance, and then zoom in so that the object fills as much of the frame as possible. On a digital camera, there is usually an indication of whether the object is “in-focus” or not when you hold the shutter release button halfway down. Until your object is in focus, don’t press the button all the way.

  If your camera refuses to focus on the object you want to photograph (possibly because of low-light conditions, or you want to photograph something behind glass), then a trick you can try is to aim the camera at another object the same distance away, press and hold the shutter release button halfway until the focus indicator is lit, and then carefully re-aim the camera at the desired object (without releasing the button) and press the button all the way to snap the picture.

Camera Too Close to Subject	Further Away, Macro Mode & Zoomed In

• Depth of Field
  You can play with depth-of-field to make your images more professional-looking. If you want your subject to really stand out, you can set the camera to use a larger aperture and a shorter exposure time. This causes the depth-of-field to be very shallow, so that only the subject is in focus, and the background is blurred. There are ways to simulate this later using software, so if your camera doesn’t do this very well, see the section below that talks about blurring backgrounds in Gimp.
• White Balance
  If your camera has a white balance setting (only applies to digital), then make sure you have the white balance set appropriately. Usually the automatic setting is fine, but there might be lighting conditions that confuse the camera, such as mercury vapor lights. Unless you want everyone in your group shot to turn out green, make sure you correct for the color of the available light.

Step 2: Apply digital effects

After you’ve taken your photos, then scan them in (if you’re using a film camera) or transfer them to your computer (if you’re using a digital camera). If you can afford to purchase a copy of Adobe Photoshop or Photoshop Elements, then by all means, do so. If you are on a tight budget, however, there is a free tool that can do many of the same things. The Gimp program is a cross-platform program for Windows, Mac, and Linux that has many powerful features. Below are some suggestions on how you can improve your photos digitally.

• Gaussian blur the background
  Once you have imported your photos into your computer and installed Gimp, you can simulate a shallow depth-of-field by drawing a selection around the subject using a bezier curve, then inverting your selection (so that everything besides the subject is selected), and then applying a gaussian blur to the selection. This is an amazing way to make your subject stand out.

  Before	After Gaussian Blur

• Change the colors
  You can change the colors in many ways using Gimp. You can increase the saturation to make the colors brighter, you can apply a color gradient map to the image to make the image look like a “stock” photo, you can increase the brightness and contrast, etc. You are limited only by your creativity.

  Before	After Gradient Map

• Crop, resize, cut out the background, add drop-shadow
  Once you are finished changing the qualities of the image itself, you’ll want to crop and/or resize it to fit the part of the website you are creating. In addition to making the image fit a certain rectangular area, if you decide you only want the subject and no background, you can cut out the background by doing the following:
  1. Draw a bezier curve selection around the subject/object
  2. Copy
  3. Paste as new

  This is nice because the object then sits directly on whatever color background you are using on your website. If you want to add a drop-shadow to your image, simply choose Script-Fu -> Shadow -> Drop-Shadow… and then click OK.

Before	After Paste as New	After Adding Drop-Shadow

This tutorial has just barely scratched the surface of what you can do using your digital camera (or film camera and scanner) and some free software. Feel free to experiment. The Gimp is a very powerful program and should be more than enough to allow you to create professional-looking webpages with your images.