Web Graphics
The saying "a picture is worth a thousand words" is particularly appropriate in reference to the World Wide Web. It is rare to see a Web site that does not contain graphics. They add richness to your page, set the tone, explain concepts visually and add a look of professionalism. Corel PHOTO-PAINT® gives you the tools to create professional Web images, image maps, backgrounds and even animations.
In every instance, Web graphics must both load quickly and look good. For this reason, producing Web page graphics is a compromise between file size and image quality that requires specific expertise on the part of the graphic designer.
All bitmaps are constructed by assembling a rectangular grid or matrix of varying pixel color values to produce an image. Files exported from CorelDRAW® or Corel PHOTO-PAINT® in the .GIF and JPEG formats offer high levels of compression while maintaining image detail. Other options, such as a transparent background, antialiasing, dithering and interlacing, change the appearance of the pixels in the bitmap grid and must also be considered when you select the appropriate file format for your graphic.
Tips and Tricks
Internet Palette Colors
You want the image you post to the Internet to look just like the one on your screen in Corel PHOTO-PAINT®, but you also want it to be small enough so that the viewer will wait for it to load.
There are two major issues related to publishing color images to the Internet. The first takes place during color conversion in Corel PHOTO-PAINT. The second happens when your image is displayed in a browser somewhere on the Internet. Web browsers can process only a limited range of colors; this increases speed and eases file handling, but it means that your image may lose even more detail when it is displayed by a browser.
To shrink your image files to a manageable size for Internet publishing, you will have to convert them into a different color mode and compress them as well. This process always results in some lossiness, or loss of quality. The trick is to lose as little color as possible while reducing bit depth and file size.
Back to top
Converting Your Images to 8-bit Color Mode
The best way to reduce the size of your files is to reduce the number of colors in them. By converting your file from 24- or 32-bit color to 8- or even 4-bit color, you can reduce your file size by 90% or more. If you convert your image from 16 million colors to a 256 color paletted mode, you will obviously lose some image quality. However, with the right techniques and some practice, you can convert any image to 256 colors with acceptable results.
Corel PHOTO-PAINT converts colors to their closest equivalents in a palette of 256 colors or less.
Back to top
Using Custom Internet Browser Palettes
There are two browser palettes available in Corel PHOTO-PAINT—Netscape Navigator™ Colors and Microsoft® Internet Explorer Colors. These 8-bit color palettes are designed to display a range of pure colors consistently in any browser. Colors outside the range of these palettes may have unpleasant amounts of dithering. The image should be in paletted color mode before you convert it to a custom palette.
To check the image's color mode, Click Image, Info. The image's color mode information appears in the Type area.
To change the color palette to one of the custom browser palettes:
In Corel PHOTO-PAINT™
- Click Image, Mode, Paletted (8-bit)
- Click one of the Dither Type choices in the drop down box (see 4 types of Dithering Choices listed below for explanations on Dithering types)
- Click the Palette drop down box
- Choose either Netscape Navigator Colors or Microsoft Internet Explorer Colors from Palette drop down box
Back to top
Conversion to Standard Palettes
256 Colors to 16 Colors
In Uniform, Standard VGA and most of the Custom Color palettes, the range of colors is set by a broadly accepted standard, and Corel PHOTO-PAINT simply tries to get the colors in your image as close to these as possible. The advantage of this is that, because they conform to these standards, you can be more certain that colors will be consistent wherever your image goes. Also, with Dithering enabled, image quality isn't too bad. However, for most images, many of the 256 colors will be wasted because they fall outside the set colors of the palette.
Back to top
Dithering
Image dithering is a method of enhancing the appearance of photographic images that use a limited color palette. It is the randomization of pixels on devices or images that use a limited color palette to simulate continuous tone progressions.
Screen dithering is a method of enhancing the display of monitors that are capable displaying 16 bit color or less. It works by averaging the depth of pixels in a given area to create additional colors or shades of gray (depending on whether you are working with color, grayscale or black and white images). Error diffusion provides the best results by spreading color approximations over several pixels. Ordered dithering is performed at a faster rate than error diffusion because it approximates colors using fixed dot patterns.
Four dithering choices:
Ordered
Organizes the gray levels into repeating geometric patterns of black and white pixels. Solid colors are emphasized and image edges are hard. This option is best suited for uniform colors, such as those used in charts and graphs.
Jarvis
Applies the Jarvis algorithm to individual pixels. This form of error diffusion is suitable for photographic images.
Stucki
Applies the Stucki algorithm to individual pixels. This form of error diffusion is suitable for photographic images.
Floyd Steinberg
Applies the Floyd Steinberg algorithm to individual pixels. This form of error diffusion is suitable for photographic images.
Back to top
Smart Conversion
By using either the Adaptive or the Optimized options, you allow Corel PHOTO-PAINT to create a palette based on colors that appear in the original image. That way the range of 256 colors can ignore the colors that don't appear. Or, as in the case of the .GIF, you can reduce the number of colors down to 16 while retaining good image quality.
By reducing your image palette to 16 colors, your image crosses the line between the 8-bit and 4-bit color modes. As strange as it may seem, a 17-color image is substantially larger than a 16-color image.
Back to top
Text Tips
When you are working with text that is smaller than 14 points, turn off antialiasing in Text Roll Up. Applying Antialiasing with text this small will result in a "fuzzy" appearance on the text edges.
When you are working with text larger than 20 points, turn on antialiasing in the Text Roll Up. Generally, text that is larger than 20 points will look jagged without Antialiasing.
The quality of text between 14 and 20 points will vary, depending on the resolution setting of your monitor. Lower monitor resolutions will result in jagged text at smaller font sizes.
When the image is 256 colors, you will not be able to toggle the Antialiasing check box in the Text Roll Up. Convert the image to red, green and blue (RGB) Color (24 bit) to access Antialiasing text.
If you want to create a drop shadow behind your text or another object, use the DSHADOW.CSC script file found under Tools\Scripts\Run.
Because of the nature of its compression, a .JPG file format is not always suitable for images that contain text; if the results are unsatisfactory with a .JPG, use a .GIF file format instead.
Back to top
Image Maps
Image maps are graphics that have a clickable area that links the user to another Web page. By clicking on this area within the graphic, the user is automatically linked to the designated page.
Image maps provide a variety of sophisticated navigation routes for users. You can create a toolbar as a single image and create an image map that links each button to a different page. You can have a map of Europe and create a link to overview pages on each country. Any graphic can become an image map, but there are a few things to consider before you decide that you have the perfect graphic from which to create an image map.
There are two kinds of image maps—client side and server side. You can select either kind of map to create or you can create client and server maps which provide the best of both worlds.
To use an image map in your Web page, you need to do the following:
- Determine whether you need a client side, server side or client/server image map.
- Create a map file that contains the coordinates of the clickable areas and the associated links for each area.
- Add the HTML codes in the main Web page to specify the image as an image map.
- Have a Common Gateway Interface (.CGI) on the server that responds to the image map (required if you create a server side image map).
Corel PHOTO-PAINT provides click and drag coordinate definition, which allows you to use the application's tools to specify the clickable areas of the image and to generate a map file automatically for you.
Back to top
|
Copyright © 2008 Corel Corporation. All rights reserved. Terms of Use | Privacy