Image Enhancements
~~
Creating Text as an Image
To alleviate the problem of font face tags not being recognized by the viewer's computer, create the font as an image.
Font creation sites:
Eminds Text Generator
http://www.eminds.se/generator/
Allows you type the text, select from over 30 font faces, size the
text, and select a color or type in a color code.
Cool Text
http://www.cooltext.com/
Creates text images from various templates. Select a template, type in
the text, select from over 25 font faces, size the text, and select a
color or type in a color code.
Flaming Text
http://flamingtext.com
Over 100 types of fonts to choose from with over 30 different font
looks.
IqAuto text generator
http://www.iqauto.com/bdy.html
Free Font, Graphics & Banner Web Sites
http://www.uforesources.com/banners_free.htm
GifWorks and 3D TextMaker
http://www.gifworks.com/
Banner Generator
http://www.coder.com/creations/banner/
Image Tools and Text Generators: Links
http://members.tripod.com/~Momp54/WebTV2/imagetools.html
In addition to creating fonts online, you can create fonts using WORD or WORD PERFECT. These are a bit more difficult to bring over to the web correctly. These require saving the item as a web page, bringing the item up in WINDOWS 98 PAINT, a photo editor, or other imaging software to crop and convert.
Return to the Top
Image Enhancement Tips
Most web pages contain graphics of some type - images, drawings, or clip art. But too many graphics becomes overwhelming. Graphics should enhance, not detract from your page.
Images should:
- Convey a message about your website
- Design a visual theme to your page, similar to writing a paragraph. Your first sentence summarizes the rest of the sentences, which support and enhance the first sentence. Overall, they fit together.
- Draw your viewers' eyes to a particular location on the image - through image size, colors, and background…
- Avoid clutter
- Strive for balance but not symmetry
So, what's the difference between a GIF image and a JPG image?
GIF files can go up to 256 colors and look better when the visual size of the image is small and is not a photograph. JPG images can go up to 16.8 million colors and look better when the visual size of the image is mid-to-large and its content is photographic.
What is JPEG?
JPEG (Joint Photographic Expert Group) is a method for compressing color bitmapped images that allows for variable compression. JPEG compression is referred to as a "lossy". JPEGs were developed for photographic-type images. You can select compression setting for each image. In Photoshop, select from Low, Medium, High, and Maximum quality settings. For the most accurate image quality, select the Maximum quality setting for the lowest compression factor. That is, the higher the compression factor, the larger the amount of data removed from the image.
For each photographic image on your Web site, determine the relationship between sharpness and color accuracy to download speed.
When your content is fine art or photography, your images need to be as high quality as possible. Save these in JPEG at the maximum quality setting (lowest compression) for the sharpest and most accurate color.
Use JPEGs for photographic images, but not for line drawings or for images with large areas of flat color.
Designers keep in mind that even though JPEG can display over 16 million colors, viewers with only 8-bit color (most users) will still see the image at 256 colors at best and more distortion shows up at 256 colors. In addition, each browser will interpret the color differently.
Even when a JPEG is smaller than a GIF, the JPEG can take longer to load. The JPEG decompresses in the browser. So a smaller JPEG file with more colors might take longer to download and decompress than a bigger GIF file with fewer colors.
What is GIF?
CompuServe's GIF (Graphics Interchange Format) is considered the industry standard for Web pages. CompuServe® developed GIFs for its online service subscribers.
With GIF, you can move color, gray scale, or bitmap images between platforms. GIF files support only 8-bit, or 256 colors. (In Photoshop, your image must be in Indexed Color in order to save in 8-bit
color.)
It's important to understand how GIF compression works in order to decrease GIF file sizes. GIF files use LZW compression, which is referred to as "lossless" compression. This means that the images stay true when compressed. GIFs compress by looking for repeating patterns of color along each horizontal line and compressing the pixels. For instance, a GIF scans across your image and looks for pixels that are the same and then compresses each similar pixel with the initial one. The images that get compressed the most contain the most repeating patterns along the horizontal.
As you reduce the number of colors, the image will become slightly chunkier. The file size, however, changes significantly.
What is PNG?
Portable Network Graphics is intended to replace GIF because of LZW patent problems and GIF's 256 color limitations. Most graphics programs already allow you to save as PNG.
What is TIFF?
Tag Image File Format is generally how graphic artists save master copies of photos that have been scanned. TIFF files are very large and are generally converted to GIF or JPEG.
What is Bitmap?
Bitmaps are images that created and edited in a paint or photo program. Bitmaps are made up of pixels. Each pixel is a single color, and the arrangement of the pixels creates both the shape and color of the bitmap.The number of pixels in a bitmap determines its resolution. Images with a high resolution appear sharp, while those with a lower resolution can appear more indistinct. Resolution is measured by dots per inch (dpi), the number of pixels found in one inch. Thus, the higher a bitmap's dpi, the higher its resolution.
Once a bitmap is created, the number of pixels it contains is fixed. When you resize a bitmap, the same number of pixels are either stretched over a larger area, or condensed into a smaller one. This stretching and condensing results in poor image quality. Bitmap images are best displayed at the size at which they were created. BUT, bitmaps take up an enormous amount of memory.
Because the number of pixels in a bitmap is fixed, the resolution of the image is tied to the size of the printed image. If you print the image at a small size, the pixels are tiny and the resolution is high. Print the image at a large size, and the pixels become enlarged and coarse looking, resulting in a lower resolution.
A higher resolution allows for more detail and smoother color transitions
than a lower resolution, but also results in a much larger file.
Base your image resolution on what your output will be. If you are going to print your image, keep the resolution low. It is pointless to create a 600-dpi image to print on a 300-dpi printer. If you are going to display your image on screen, you can generally choose a lower resolution.
Grayscale image is a type of bitmap used for black and white pictures. A grayscale image is made up of 256 shades of gray, offering a higher picture quality than a standard black and white image.
Vector graphics use mathematically defined curves and line to represent shapes, rather than using pixels. Clipart is an example of vector graphics. Clipart is created by placing different vector objects together to form a picture. Regardless of how much you resize a vector graphic, it retains its crisp, smooth lines. Corel Photo House or Corel Draw use vector graphics. Victor graphics may end in extensions CDR, CMX, and WMF.
Return to the Top
- If images are available from another site (not copyrighted), download the image. Don't link to images on another website.
- Check the size of your graphics. Keep the total size of all images to less than 30K. Full-screen 640x480 24-bit color images require 900K of memory. An 8-bit image takes one-third the time to load as a 24-bit image does. Reducing a 320 x 240 image by as little as 5 pixels on each
axis saves you 2775 pixels. With a good connection, that saves nearly 6
seconds for an 8-bit image. If you're using 24-bit color, the time
saving is tripled.
- Minimize the number of colors displayed. Work with the 256 color palettes and then try to limit to 50 colors. Choose colors from a non-dithering palette. At 256 colors, the 900K image above becomes 300K. RGB (true color) use 8 bits (0 to 255) for each Red, Green, and Blue value to form a 24-bit pixel (8+8+8) palette.
- Reduce resolution to 72 dpi as your last step.
- Use "alt" tags to assist those that are blind.
- Minimize dimension and maximize cropping.
- Optimize. With proper compression, the 300K image can be reduced to 45K or 30K. However, the more compression you do, the more sharpness you loose. This will speed up the download time of your image. Optimizing will also reduce the color palette of your GIF file several times.
- Interlace. Images load into the browser gradually rather than loading from top to bottom. Interlacing doesn't change the image appearance on the page. Instead, it affects how the image is saved and its appearance while it is being loaded.
The image will load into the browser gradually rather than loading from top to bottom. The effect is as if the image is appearing from a distance and becoming clearer as it loads. In saving the image, an interlaced GIF is saved in several "passes" - the first pass saves every eighth row starting from the first, the second pass saves every eighth row starting from the fourth, the third pass saves every fourth row starting from the third one and then the remaining rows are saved. As the image is displayed on the web, the "parts" of the image load in the order they were saved. This creates a blurry or blocky effect as it is initially loaded, thus becoming clearer as the image is "filled" in.
Interlacing is used primarily for large images that take time to load.
-
Dithering. To display a full-color image on a 256-color computer, the computer simulates colors it can't actually display. This is done by dithering - combining pixels from its 256-color palette into patterns that approximate other colors. Up close, these colors look speckled. In order to avoid dithering, create images that use the colors specified in browser-safe colors.
- Anti-Alias. Smoothing out the outside edges of an image. This inserts pixels of a color between the image and the background to blur the edge. Note that the jagged edges will still be visible if the color contrast is strong (ex: black image on white background).
- Transparent. To keep edges from showing around your image, you can take out a color to allow the page background to show through. Often, white web pages have graphics with white backgrounds showing through. This can be done with only one color per image. (Note: this is for GIF only.)
Transparent GIFs also seem to float on the page.
When making a GIF transparent, you select a background color to match the page background. Shading and fading are not impossible, so be careful! This is not for every GIF! Select a transparent color in the image that is close to or the same as the background you will "lay" the image over. Ex: If you have a green plant that will be on a gray background, make gray the background to your image. Then the green plant will blend into the gray, creating a softer edge. You choose the surround gray to be transparent. A common mistake is to select a color that doesn't match the final background.
Be careful that the color you are taking out isn't used extensively in the image itself - those parts of your image will become transparent also!
You can use TransWeb (http://www.mit.edu/transweb.html) which will select a background color for you.
Keep records of each graphic you create:
- Name
- Color
- Font size and face
- Special effects: cropping, airbrush, cutout for text
Return to the Top
Scanners
Scanners prices vary primarily by speed and options.
Features to look for:
- compatible with Windows 95 and Windows 98.
- work with digital images, OCR (scan a document and edit it)
- edit and enhance all types of images (TIFF, BMP, GIF, JPG…). Additionally, you may want to scan photo negatives and slides.
- print - landscape and portrait
- scale/resize/zoom/crop
- convert from one type of image to another
- image viewer
- undo
- delete and rename files
- maintain a master and make copies for conversion purposes and editing purposes
- color palette
- toolbar with multiple editing features
- determine image resolution
The scanner should have TWAIN capability: video cams, cameras, digital pictures…
Each scanner comes with different software packages. It will install under your PROGRAMS listing. Look for the software name.
When you scan a photo, you create an image file on your disk. The amount of memory taken up depends on the size and complexity of the photo plus the resolution you use when scanning it. If you scan a 5x7 photo at a resolution of 600x1200 dpi, you have just taken up 74MB of memory. Also, the higher the resolution, the slower it will take to load the image. The 74MB image alone will take more than 2 minutes to load.
Generally, 300 dpi gives you enough detail. However, if you scan a small image and enlarge it, use the highest resolution possible.
Example: 4x6 color 24 bits pixel 300 dpi 6.5 MB
4x6 color 24 bits pixel 72 dpi 360 KB
Color mode determines the range of colors and tones that are visible in an image. It is usually measured by the number of colors displayed (e.g., 256 colors). When choosing a color mode, consider the purpose of the image. If it is to be used to fill an entire page, use the highest possible color mode. If the image is going to be small, a lower color mode may give you good results and saves file size.
As you decrease the color mode, details in darker areas may be lost. Use a higher color mode for detailed images even if it has a small color range.
Increasing the color mode of an existing image (converting a 16-color image to a 16 million-color image) does not improve the appearance of the image.
Additional Sources of Information
How to Buy & Use a Scanner
http://www.find.com.au/tutorials/computerhardware/scanners/
http://www.aarp.org/comptech/learning/howto/howto013.html
Scanning Tips
1. Once the picture has been placed on the flatbed of the scanner, click PRESCAN. This allows you to preview the image:
- check for proper placement and alignment on the flatbed
- to adjust scanning time:
- crop the image - cropping trims away unwanted areas of an image. It creates a smaller image and a smaller file
- eliminate the "white space" and rest of flatbed space from being scanned. Do leave some white space around the image as a "margin of error" for editing.
- adjust the attributes of the image: brightness, contrast, color levels.
2. Scan at 300 dip (dots per inch) and in true color mode. You can reduce color later.
3. Set scan size to 1½-2 times larger than the expected final size of the image.
4. Enlarge the picture to fill up the entire viewing screen prior to scanning.
5. SCAN. Save one copy as a master. Edit additional copies.
6. You should now be able to SELECT/CROP…add TEXT…RESCALE/RESIZE… Make any adjustments to color, contrast, etc. Resize to the smallest acceptable size.
7. SAVE/COPY as GIF or JPG
Return to the Top
Image Editing Software
There are hundreds of image enhancement software packages in existence.
Consider the following features when evaluating image-editing software:
- Cost
- Hardware requirements - amount of memory and hard disc space required
- Operating system
- Functionality - type of image formats supported (BMP, GIF, JPG…),image size capability, number of "undo" levels, palette support, storage space for works-in-progress, ability to handle more than one image at a time…
- Ease of use
Review sources:
About http://www.about.com
Look under Image Editors: Freeware, Free Web Tools, Assorted Specialty Freeware
Dave Central http://www.davecentral.com/
Tucows http://html.tucows.com/
PC World Magazine http://www.pcworld.com/
CNet http://builder.cnet.com/
Download.com http://download.cnet.com/
ZDNet http://www.zdnet.com/downloads/
GNRT http://www.terena.nl/libr/gnrt/providing/graphicsapps.html
Shareware http://shareware.cnet.com/
Completely Free Software http://www.completelyfreesoftware.com/graphics_programs_w95.html
Image Tools and Text Generators: Links
http://members.tripod.com/~Momp54/WebTV2/imagetools.html
Freeware:
MyImager http://www.myimager.com
Online image editor. Will accept images from web pages or from a disc. Resize, crop, rotate, text editor, button-maker, color contrasts, transparency, invert, supports GIF/JPG optimization
GIFWorks 3.0 http://www.GIFworks.com/
Online image editor (for GIF only)
Resize, crop, transparency, text editor, color enhancements
20/20 http://www.hotfreeware.com/2020/2020.htm
Image editor, crop, resize, color enhancements, text tool, create
thumbnails
Square Image http://www.trivista.com/products/asquareimage/
Simple image editor, crop, resize image to a square shape.
Image Forge 2.7 http://filedudes.aveiro-digital.net/win95/imageedt/imforfw.html
Image editor, color enhancements, crop, resize, rotate
Albumatic http://www.basepath.com/Albumatic/
create thumbnails, crops, reverses, rotates, and add captions.
The Gimp http://www.gimp.org/
Image editor, color enhancements, paint program, photo retouching, and
batch processing program.
GIFBot http://www.netmechanic.com/accelerate.htm
Reduces amount of memory for GIF and JPG, transparency, GIF animations
ImageSite Pro http://www.xequte.com/imagesite/index.html
Adjusting the Image Size Through Cropping
1. Open Paint.
2. Click on EDIT/PASTE AS NEW IMAGE. Your image should appear in the
Paint window.
3. Click on SELECT and select your drawing shape. Hold down the left
mouse button to "draw" around the shape you wish to keep.
4. When finished drawing, click on EDIT, then COPY.
5. Click on FILE, then SAVE.
Changing a BMP to GIF/JPG
Microsoft invented the bitmap format. Thus, BMP images work on Explorer
But not on Netscape.
1. Open up the image in an image editor (Paint…)
2. Click File - Save As
3. Select GIF/JPG as the type. Change the "name" extension to match.
4. Click "OK"/"Save"
Pixel Shim
A wedge of pixels that realign or create space as needed on a web page.
These are often used to organize your table layout so you can various position objects on the screen.
1. Create a 1 pixel by 1 pixel GIF image. Note: you can add color
2. Insert as an image.
3. Attributes: height width align="left" align="right"
The pixel shim is "stretched" via WIDTH and HEIGHT attributes to create invisible chunks of space.
For additional information on the uses of pixel shims and a free pixel shim you can download as an image: http://webreview.com/wr/pub/1999/05/14/tag/index.html
Return to the Top
|
