Main / How to: Creating Digital Images
Follow the tenets of good composition for any image you are putting on a web page. If anything, this is even more important for web page images as visitors may be scrutinizing them in more detail as the images download.
As you are reading these sentences, a dramatic image is downloading in the space below. When an image fills a large portion of a web page segment -- as is the case here -- always give viewers something to read either above or below the image. If not, your viewers view only a blank screen during the download process, they may grow impatient and quit your site.
Photos continue to be one of the most compelling types of web content. If your pictures are beautiful, chances are your web site will be beautiful as well.
Notice how the image above follows good composition rules. It has been set up so the rainbow clearly stands out and draws your eye to it. The trees frame the image and provide perspective.
It has been said that a picture is worth a thousand words, however a poorly composed picture might be worth only two hundred. By following some simple guidelines you can create exciting images that inspire the mind.
Tried and True Photograph Composition Tips
. move in close
. have a strong center of interest, colorful subject
. choose a simple background
- Control the placement of subject within the frame
. have subject off center
. use lines to lead viewer to subject
. use foreground to frame subject and add depth
. try unusual camera angles
- Add energy and depth
. use dramatic lighting, early and late in the day, sidelight and backlight - strong shadows
. diagonal lines and patterns can fill an image with energy
. use foreground to build depth and perspective
Images are great but they can bog down a page. Use lots of images, but spread them out over several pages. Use links to move from page to page, loading images as you need them rather than all at once.
A Few Web Composition Tips
- Crop even tighter than usual to keep file size small
- Keep pictures small
- Use tables with borders to create an HTML "picture frame"
- Horizontal photos load faster
- Crop images to the shape that best displays the subject
- Consider using a fine border around images to offset from the background
Capturing the best image quality
When you capture images with a digital camera or scanner, use the highest resolution setting possible. The resulting image files will contain the most "information", giving image-enhancing software the most data to work with and resulting in a final image of the best quality.
Before you begin enhancing images, set them up in an optimal fashion:
- If you are opening an image from a Photo CD, choose the 512 x 768 size. This size helps you see effects of any enhancements you make and can be easily sized down to fit your web page. Generally speaking, try to work with an image larger than your end size.
- With other image editing software, open digital images in RGB (the color standard used for television and computer screens), and set the pixels per inch to 72. (this matches the dots-per-inch rate on your computer screen and at a 1:1 ratio (matching the original size).
- Using image enhancement software, optimize the image, following this basic order:
- crop to preferred dimensions
- adjust brightness, contrast, color
- save a "beautiful" master * Note: Do this without compression in case you ever want to generate a different size version.
- resample to smaller size (i.e., generally the smallest acceptable size)
- sharpen as needed - often when re-sampling a large image to a smaller size, sharpening will help
- Once editing is complete, save the image in JPEG format, choosing an option that gives you an acceptable compression to file size ratio. More information about this process is also found in Lesson four: Keep image file sizes small.
You can enhance web page images using a variety of software tools. While some require a fair amount of time and experimentation to learn, others can be mastered rapidly. One such product, KODAK Picture Easy Software , ships with some Kodak digital point-and-shoot cameras and personal scanners. It lets you fine tune images with a variety of tools, and helps make the task easier.
Seeing the many possibilities is really an easy way to "feel" your way to a good image. Enhance By Example helps do that by offering many options.
Variation in the Touch Up menu helps do that by offering many options. Below are two images taken by a casual photographer. On the left is the original image. The photographer wanted to enhance the rosy pink tones of the flowers. On the right is the image after changes made with PhotoDeluxe's "variations" method. With this method, seven different examples of the image are shown - here we chose one that brought out the pink tones.
Digital imaging tools and resources
An effective way to obtain digital images is to capture them yourself using a digital camera. Or, if you are using a traditional camera and film you can scan images using a desktop scanner, or bring them to a service provider to have them transferred to KODAK Picture Disks (US Only Dealer Locator), or KODAK PHOTO CD discs, or transferred to PhotoNet Online. Commercial CDs, in a variety of price ranges, are also on the market. These contain many images, most center around a certain theme. Shopping around to find CDs that feature themes relevant to your web page will give you a library of images to select from. You might use them "as is" or combine them with your own images to make them more relevant.
Tutorial source: Digital Learning Center