Images, Enhancing Images & Text Generators
Text Generators & Image Editing Software ~ Logo Examples ~ Logo Portfolio
Logo Inspirations
Image Locators & Clip Art Galleries
Kinds of Images ~ Graphic Tips & Terminology ~ Paint Tutorials
HTML Coding ~ Saving Images from the Web
Creating Text as an Image (Text Generators)
To alleviate the problem of font face tags not being recognized by the viewer's computer, create the font as an image.
- Flaming Text
http://flamingtext.com
Over 100 types of fonts to choose from with over 30 different font looks. - Interactive Text Creator
- 3D TextMaker
http://www.gifworks.com/
Stationary or animated logos... variety of font faces and styles. You do not need to fill in every box! - Cool Text
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. - Banner Generator
- YourGen Text Generator
- SparkLee Text Generator
Image Editing Software:
- Photofiltre* (download)
- Photofiltre Free Tutorials
- Image Forge Free Photo Editor (download)
- Gimp (download)
- JPhotoBrush Free Photo Editor (download)
- MyImager Free Image Editor (online)
- Top Free Image Editors
Image Info
Images certainly enhance a Web page. However, too many can clutter a Web page.
Ask:
- Does it add to the theme of the page?
- Does it make the text easier to understand?
Web pages are actually made up of text (your HTML file) and image files meshed together. That is, if your web page has 4 graphics on it, the page consists of a text file and 4 image files.
Web images can be drawings, clip art, scanned pictures or graphics. Not all images are free - check to make sure an image is freely available to use before adding it to your web page. Give credit to the image source if requested to do so. NEVER LINK to a graphic - always download!
Kinds of Images
Most browsers display images in GIF (.gif) or JPEG (.jpg) formats. GIF stands for Graphics Interchange Format. JPEG stands for Joint Photographic Expert Group.
GIFS:
- text art
- cartoons
- poster art
- line art
JPEGS:
- photographs
- 3D
- paintings
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?
JPEGs (Joint Photographic Expert Group) were developed for photographic-type images. You can select a compression setting for each image - Low, Medium, or High. For each photographic image on your Web site, determine the "balance" between desired quality and download speed. The higher the quality, the slower the download speed.
Use JPEGs for photographic images, but not for line drawings or for images with large areas of flat color.
What is GIF?
CompuServe's GIF (Graphics Interchange Format) are used for simple line drawings or logos.
What is PNG?
Portable Network Graphics was 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 are created and edited in a paint program. Bitmaps are made up of pixels, with each pixel a single color.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 blurry.
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.
When you resize a bitmap, the stretching causes poor image quality. Bitmaps take up an enormous amount of memory.
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.
Graphic Tips & Terminology
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.
If images are available from another site (not copyrighted), download the image. Don't link to images on another website.
Keep records of each graphic you create:
- Name
- Color
- Font size and face
- Special effects: cropping, airbrush, cutout for text
Images should:
- Convey a message about your website - design a visual theme to your page.
- Avoid clutter
- Strive for balance but not symmetry
- Load quickly on the page -
- Check the size of your graphics. Keep the total size of all images to less than 30K so they load quickly on the page.
- Reduce resolution to 72 dpi.
- Use "alt" tags to assist those that are blind.
- Be Optimized. Optimizing compresses your image - that balancing act between quality and download time. However, the more compression you do, the more sharpness you loose. Websites that will compress for you:
Terminology
- 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 the image. (Note: this is for GIF only.) Transparent GIFs seem to float on the page!
How can you tell how much memory is being used by your text and images? Click Start - Programs - Windows Explorer -on left side, select folder where your web page is located -right side displays the contents and KB of each file.
Background Images
A background image repeats itself both horizontally and vertically. That is, background images will "tile" -- appear in the background at whatever size the image is and then reproduce itself over and over until the page is filled. So, you can use a small image for the page background and still get full-page coverage.
Complex backgrounds are more difficult to view.
Browsers load the background last. A memory intense background will slow down connection to your page -- viewers may tire and leave your page before the actual content is loaded.
Non-background Image Coding
- img = image
- src = source
- alt = alternative text for those visually handicapped
| HTML Coding | Browser Display |
| <img src="images/books.gif" alt="stack of books width="85" height="47" /> |  |
Saving Images from the Web
- Click with the right mouse button.
- Click on Save Image As… or Save Picture As…
- Place the image on your disk.
- Accept the default name for the image or change to a name of your choice. Do not change the extension (.jpg or .gif)!
- Click "OK"
Paint Tutorials on the Web
In addition to creating fonts online, you can create fonts using PAINT! Paint is installed on all computers. Check out these examples of logos made with Paint.
- The Paint Toolbox
- Using the Paint Toolbox
- Paint Toolbox & Examples of How to Use Each Tool
- Creating with Paint (nice examples)
- More Advanced Work with Paint
- Animation Created with Paint
Sizes for the Web*
Full banner 468 x 60
Half banner 234 x 60
*Interactive Advertising Bureau