I. Graphic File Formats
A. Pixel-based (bitmap, paint, raster) vs. Math-based (object-oriented, draw, vector)
In bitmapped file formats bits of information are mapped to individual pixels on the screen. In vector file formats, a mathematical formula defines the object. If you can smudge colors and erase pixels, or if the application you are using has the word "photo" or "paint" in the name, you are using a bitmapped graphics program. If you can grab a handle to change the object's size, or if the application has the word "draw" or "illustrate" in it, you are using a vector graphics program.
B. GIF (Graphic Interchange Format) files
Developed specifically for the web.
Cross-platform
Compressed
Lossless
Uses indexed-color (maximum of 256 colors)
Advantages:
Transparency of one color (allows background of web page can show through)
Interlacing (allows the image to appear on a web page in stages)
Animations
When to choose:
Use for buttons, banners, logos, cartoons -- any image with large areas of flat color.
Small photos (less than 1.5 inches)
C. JPEG (Joint Photographic Experts Group) files
Cross-platform
Compressed
Lossy (data is removed from the image to make the file size smaller each time you save it)
No portion can be transparent
Not interlaced ("progressive JPEGs" are interlaced)
Advantages:
Contain up to 1.7 million colors
When to choose:
Use for photographs, watercolor images, pencil or charcoal drawings -- any image which has a subtle transition of color.
II. Getting your image into digital format.
A. Option One: Use a digital camera or send your photos for digital processing.
B. Option Two: Scan your image
1. Choose a scan resolution. Select 72 dpi if you do not plan to edit your image in Photoshop or another graphics software package. Select 100, 133, or 150.
2. Scan the image. If you plan to edit it in Photoshop, crop it to slightly larger than the size you wish to display.
3. Save the image as a TIFF (Tagged Interchange File Format) file or, if you scan using Photoshop, as a Photoshop (.psd) file.
4. Select "millions of colors" if you are scanning a photo and 256 to "thousands of colors" if you are scanning anything else.
5. Edit your file as you wish in Photoshop. Before you save your image as a GIF or JPEG, make it the size you will want it to appear on your web page. You can determine the size at which your image will display using HTML code; however, if your image is larger than it displays, your download time will be longer than it need be. If your image is smaller than it displays, the image may not look very good.
C. Create your image in a graphics program such as Photoshop.
III. Shape Tools, Type Tool, and Special Effects for Type
A. Shape Tools
Rectangle
Rounded Rectangle
Ellipse
Polygon
Custom
Line
You can set a number of preferences in the Options bar using the Geometry Options drop-down dialogue box.
B. Type Tool
C. Warp Text
You can create unusual text effects using the Warp Text command. From the Layer menu choose Type, then Warp Text. Your text warping alternatives include the following:
Arc, Arc Lower, and Arc Upper
Arch, Bulge, Shell Lower, and Shell Upper
Flag, Wave, Fish, and Rise
Fisheye, Inflate, Squeeze, and Twist
D. Layer Styles
Your layer style options include the following:
Drop Shadow
Inner Shadow
Outer Glow
Inner Glow
Bevel and Emboss
Satin
Color Overlay
Gradient Overlay
Pattern Overlay
Stroke
IV. Cropping Tools, Selections Tools, Editing Tools, and Filters for Images
A. Cropping Tools
Crop
Rectangular Marquee + menu
B. Selection Tools
Lasso, Polygon Lasso, Magnetic Lasso
Marquees (Rectangular, Elliptical, Single Row, Single Column)
Magic Wand
Pen
You can invert your selection by choosing Inverse from the Select menu.
C. Editing Tools
Smudge
Blur
Sharpen
Dodge
Burn
Sponge
D. Filters
Your filter options include the following:
Artistic
Blur
Brush Strokes
Distort
Noise
Pixelate
Render
Sharpen
Sketch
Stylize
Texture
V. Tips
A. Buttons
Store all the layers for your buttons in one file. Put the background of the button on one layer and the words for each button each on a separate layer. Turn visibility on for the background and words needed to create the button you desire. Export these layers together as a GIF file. Repeat this procedure for all the buttons until you have created your complete set.
B. Backgrounds
Create a background that displays a bar down the left side of the page by creating one wide (1000 pixels) but short (20 pixels) file. Select the left side of the image with the rectangle marquee tool; fill the area with the color you desire for the bar. Invert your selection and fill the right side of the image with the color you desire for the body of the page. If you wish, select a small rectangle where the two colors meet to create a highlighting stripe between the two colors. Export the file as a GIF. Define it as the background in the HTML code when you write your page.
Create a textured background by making a file of the desired color and added Noise to the image. Go under the Filters menu and select Noise.
Create a background of one large image by creating a file that is 700 x 500 pixels. An image this size will display once in a 640 x 460 browser window.