How to Take Pictures for Online Use

Whenever you can, take photographs with a digital still camera, as opposed to a digital video camera or a regular camera. You will be able to turn the image into a Web-ready format more quickly and you’ll get a better quality picture than if you used a digital video camera or took screenshots from a digital video. or a camera phone?

Getting Familiar with Web Graphics

Only two image formats — GIFs and JPEGs — can be used completely safely on the Web. Sometimes, the PNG format is also used, but is not fully supported by all Web browsers.

Preparing Images and Photos for the Web

Here are some guidelines for making your images download quickly and display correctly.

Checking and Changing Resolution

Open an image in Photoshop and let’s try setting the resolution.

Getting Familiar with Photoshop

You can use Photoshop to create new graphics that can range from elaborate illustrations to what appear to be simple text headlines.  This section will give you a tour of the toolbox and how to use these tools to create your graphics.

Getting Familiar with Photoshop, Part II

Foreground and background colors, editing modes, jumping to Image Ready.

Working with Layers

If you have ever drawn an illustration with pencil and paper, you’re familiar with the limitations of drawing an object on top of another object. When you change your mind later about it’s placement, the "topmost" object must be erased – and when you erase the top object you also erase what’s underneath. 

Creating Web-formatted Images

If your image is at 72 dpi and you’ve made all your edits (color correction, cropping, resizing), you’re ready to save it as a JPEG or GIF.

Creating Transparent Images

All digital images must be rectangular in shape, but sometimes you may want to create the effect of an irregular outline. You can do this by matching the background color of your image to the background color of the Web page it is displayed in or by creating a transparent area in the image through which a Web page background will be visible.

Editing Photographs

Most digital cameras take photographs that can be put onto your Web site just as they are — without being touched up. Some photos, however, will be greatly improved if their color and contrast are tweaked.

Creating Animated GIFS with Image Ready

Small animations can be created directly in Photoshop by using animation tools provided in Image Ready, a tool created by Adobe so Web designers can create animated GIFs.

Using Photoshop Slices

When Web design became a significant part of a Photoshop user’s job, Adobe added Slices to its arsenal of design tools. Slices can be used to save changes as you create graphics for the Web. Essentially, you will use Slices to divide up a Photoshop document. Each “Slice” gets saved as a different image when you Save for Web.