# 6025- Producing Web-Ready Graphics Overview The emergence of the World Wide Web as a communication medium for individuals and institutions has created a demand for graphics that load quickly while rendering good visual quality to the viewing screen. Producing Web page graphics is a compromise between file size and image quality, and 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. For optimum results exporting from CorelDRAW™, Corel PHOTO-PAINT™, or CorelXARA™, the .GIF and JPG formats offer high compression capability while reducing file size and maintaining image detail. Other options such as a transparent background, anti-aliasing, dithering, and interlacing change the appearance of the pixels in the bitmap grid, and must also be considered when selecting the appropriate file format. CompuServe (.GIF) The CompuServe .GIF file format should be selected when a transparent background is required to hide the rectangular bitmap grid found behind an irregular shape. Most Web page graphics are constructed by selecting the Custom page size with a setting of 150 by 150 pixels or less and selecting the industry standard resolution of 96 DPI. This resolution is the best trade-off between image quality and file size. Remember to select Identical Values in order to preserve the original proportions of the image. Prepare your graphic in 24-bit color mode. You will not have access to all effects when working with images that are less than 24-bit RGB color. The final steps are to combine all objects with the background if necessary, resample to the desired dimensions, convert the image to 256-colors, add the text objects, and save as a ..GIF file. A transparent .GIF is a 256-color image. Click Image, Convert To, and click 256 Colors (8-bit). From the Bitmap Export Dialog box, click the Optimized color palette with no dithering. From the Color list box, click 256 Colors to achieve the best color rendition while maintaining a small file size. For transparent bitmaps, the RGB value of the color which is intended to be transparent can be determined by sampling the image in Corel PHOTO-PAINT. Click the Eyedropper tool from the toolbox, and place the cursor over the area of the bitmap which is to be made transparent. The RGB color value will be displayed as an index number in the status bar at the bottom of the screen. Click File, Save As, and click CompuServe Bitmap from the Files Of Type list box. Graphics with a transparent background are created in the Transparent Color dialog box which appears next. Click the 89a format and click Transparent Color. From the color index , click the intended transparent color, or manually enter the index number. Click OK. Example - Create a Transparent .GIF In Corel PHOTO-PAINT 6 The following steps demonstrate the creation of a .GIF image with a transparent background. In this example, we will use the APPLE.CPT file found in the PHOTOPNT \SAMPLES folder on the hard drive. 1. Open the APPLE.CPT file in Corel PHOTO-PAINT 6. 2. Click Image, Convert To, 256 Colors (8-bit). This color palette is required by the .GIF filter. 3. Click Optimized for the Palette type, and click None for the Dither type. 4. Click the Eyedropper tool from the toolbox and place it over the white color in the image. 5. On the Status Bar the Index value will be displayed. In this case, the value is 0. Remember this number because you will reference it later in our exercise. These values will vary, depending on the color you wish to make transparent. 6. Click File, Save As, and click CompuServe Bitmap (.GIF) from the Save As Type list box. Type a name for the file and click Save. 7. Click .GIF89a as the Format, and click the Transparent Color list box. Enter the Index value in the Index list box, and click OK. 8. Open or import the transparent .GIF file into a web browser or into CorelDRAW 6. Hiding A Background With Multiple Colors If your image contains a background with complex colors which cannot be hidden by a single transparent color, you can mask the area of the bitmap you want to remain visible, and create an object from that mask. To do this, perform the following steps: 1. Mask the area of the bitmap to become an object on a web page. You can learn how to do this by practicing the masking exercises in the Corel PHOTO-PAINT section of the manual. 2. Click Object, Create From Mask. 3. Click the object with the Pick tool, and click Edit, Cut. 4. Click File, Open, and create a new 256-color image with an empty background. 5. Click Edit, Paste, As New Object background. 6. Click Object, Combine, All Objects With Background. 7. Create a transparent bitmap by following the instructions in the example exercise above. Exporting a .GIF From CorelDRAW For best results, export the image from CorelDRAW as an RGB Color (24-bit) TIF. Open the image in Corel PHOTO-PAINT and click Image, Resample to reduce it to the desired dimensions. Do not change the DPI values, since they will change to 96 DPI once saved as a .GIF. If there is text in the object being exported from CorelDRAW, you may want to export it with larger than desired dimensions so that the resampling process in Corel PHOTO-PAINT will smooth rough edges on the text objects. Example - Creating a Transparent .GIF from a .CDR File The following steps will help you convert a .CDR file into a ..GIF file with a transparent background while maintaining image quality. In this example, we will create two rectangles with some text on top, and make the inner rectangle transparent for the final output. This example assumes you have a basic understanding of some of the common CorelDRAW 6 tools. 1. Create a 2" by 4" rectangle with a blue fill. 2. Create a second rectangle 1" by 3" in size, with a white fill, and center it on top of the blue rectangle. 3. Type TEST using Artistic Text. Use a 72-point font and a red fill. Center the text on top of the white rectangle. 4. Marquis-select all objects, click File, Export, and type a file name, click TIF Bitmap (TIF) from the Save As Type list box, and enable the Selected Only check box. Click Export. 5. In the Bitmap Export dialog box, click 16 Million Colors, 1 to 1 in the Size list box, 150 DPI, in the Resolution list box, and enable the Anti-Aliasing check box. Click OK. 6. A TIF Color Space dialog box will display, there is an option to Save in CIE Lab. This option is not needed for this example, so leave it disabled, and click OK. 7. Open the new TIF file in Corel PHOTO-PAINT 6. If the image is larger than desired, you can resample the image. This procedure will also help to smooth out any jagged edges in the image. Click Image, Resample. Enter the new dimensions, and click OK. Follow steps 2 through 8 in the "Create a Transparent .GIF In Corel PHOTO-PAINT 6" example. The resulting .GIF file, when displayed with your web browser or imported into CorelDRAW 6, should have a transparent center rectangle with the word TEST centered in a thick, blue border. Joint Photographers Expert Group (JPG) File Format Select the .JPG file format if a grid-shaped matrix is appropriate for export and the image contains complex colors. The Bitmap Export dialog box offers color depths of 16 million colors (24-bit), and CMYK color (32-bit). Clicking the CMYK color depth will export the file with maximum image definition, however it will result in the largest file size. CMYK is useful for retaining color depth information when printing, however, it is of no value in an image intended for RGB monitor display. Click File, Save As, and click .JPG Bitmaps (JPG) from the Files Of Type list box. Click Save, and the JPEG Export dialog box will appear. For file compression format, click Interchange Format (JPEG/JFIF) with the Standard (4:4:4) sub-format. The Quality slider bar allows an adjustment in the amount of compression being applied to the file. While it may be tempting to maximize the amount of compression to produce the smallest possible file size, remember that the lossy compression used with .JPG files will drop pixel information from the image when it is set to its maximum. Experiment with this setting to find the smallest file size possible while maintaining an acceptable compromise to final image quality. Image quality may be assessed by opening the image into Corel® WEB.DESIGNER, Corel PHOTO-PAINT, or any web browser. Text Tips When working with text that is smaller than 14 points, turn off anti-aliasing for text, in the Text RollUp. Using Anti-aliasing with text this small will result in a fuzzy appearance around the text edges. When working with text that is greater than 20 points, turn on anti-aliasing in the Text RollUp. Generally, text that is greater than 20 points will look jagged without anti-aliasing. The quality of text that is 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 anti-aliasing check box in the text RollUp. Convert the image to RGB Color (24-bit) to access anti-aliasing options. If you wish to create a drop shadow behind your text or any other object, use the DSHADOW.CSC script file found by clicking Tools, Scripts, Run. Due to the nature of its compression, .JPG is not always a suitable file format to use for images that contain text; if the results are unsatisfactory with .JPG, use .GIF instead. Glossary of Terms Interlacing is an option which speeds up the on-screen drawing when the image is opened in a web browser. This is achieved by re-drawing the entire image in incremental stages starting with a low-resolution thumbnail, and finishing with a high-resolution rendering of the image. The Dithered option converts or blends the pixel color values so that the graphic more closely resemble the original image. Use this option only if the image is losing detail, since dithering will increase the "pixilated" look of the graphic. It is applied to the entire image. Anti-aliasing blends or smooths the transition between two adjoining colors. It can improve the appearance of text, and create better definition on the edges of the visible area of a transparent bitmap.