# 3465- Producing Web-Ready Graphics Overview The emergence of the World Wide Web/Internet 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. All bitmaps are constructed by assembling a rectangular grid or matrix of varying pixel color values to produce an image. From CorelDRAW™, or Corel PHOTO-PAINT™, export using the GIF and JPG formats. Both 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. This document provides brief instructions for working with web graphics. For more information, please consult the CorelDRAW / PHOTO-PAINT documentation or online help. CompuServe® GIF Important Terms Transparent Background: On Web pages, all bitmapped graphics are rectangular and obscure the background color of the Web page. Saving a graphic as a CompuServe® GIF, allows one color to be specified as transparent in the graphic. Each pixel that has that color value is rendered transparent, allowing the background color of the Web page to show through. Note that transparency cannot be achieved with HTML tags. Anti-aliasing:The filtering of a bitmap image to remove jagged edges. Anti-aliasing fills in jagged pixels with intermediate colors or shades of gray, to smooth the transitions between colors. Dithering: The process of approximating pixel colors when reducing the color depth of an image. Dithering can improve transitions between colors when a 24-bit image is reduced to an 8-bit format. Interlacing: A method of having the image appear on-screen in its entirety, but at a low, blocky resolution as soon as the image appears on-screen. As the image data loads, the image quality improves from unfocused to clear. CompuServe GIF File Format Originally developed by CompuServe, GIF's are designed to take up a minimum of disk space and to be easily read and exchanged between systems. This format is commonly used for publishing images of 256 colors or less to the Internet. 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. Select Identical Values in order to preserve the original proportions of the image. Creating GIF files in Corel PHOTO-PAINT 8 When working in Corel PHOTO-PAINT 8, prepare the graphic in 24-bit color mode to ensure access to all of the available bitmap effects. After preparing the image, combine all objects with the background if necessary, resample to the desired dimensions, and convert the image to Paletted (8-bit). To convert the image, perform the following steps: 1. Click Image, Convert To, Paletted (8-bit). For best results, click the Optimized Palette Type and Error Diffusion for Dither Type. Also, depending on the color variation in the image, try experimenting with the number of colors setting by choosing a lower number. This can reduce the resulting files size but will have an impact on the final image quality. Some common numbers of colors used are 2(1 bit), 8(3-bit), 16 (4-bit), 64 (6-bit), 128 (7-bit) and 256 (8-bit- maximum color depth possible for GIF files) Use the preview window to see the resulting image, prior to applying. 2. Click File, Save As, and click CompuServe Bitmap from the Files Of Type list box. In the dialog box that follows, choose a Transparent Color. Manually enter the index number, or choose a color from the image by clicking on the color with the cross hair cursor. If desired, set the Interlace options here as well. Click OK to save the file Creating GIF files in CorelDRAW 8 Select the graphic with the Pick tool, and click File, Export. Enable the Selected Only check box, and click CompuServe Bitmap from the Files of Type list box. Type a file name and click export. The second dialog box allows the color depth, size, resolution, and anti-aliasing options to be specified. 256 colors, Dithered, and Normal Anti-Aliasing will yield the best results in most cases. Experiment with the available options to suit the needs. Click OK. In the next dialog box, select a transparent color if required. To do this, either click on the desired color directly on the preview window using the Eye Dropper found beneath the Preview button, or select the color from the displayed palette. Note: the resolution of the GIF image will default to 72DPI. Specifying greater values for the resolution will result in a larger sized image. Hiding A Background With Multiple Colors If the image contains a background with complex colors that cannot be hidden by a single transparent color, mask the area of the bitmap to remain visible, and create an object from that mask. To do this, perform the following steps: 1. Within PHOTO-PAINT 8, Mask the area of the bitmap that is to become an image on a web page. For more information about Masking, refer to the masking exercises in the PHOTO-PAINT 8 manual. 2. Click Edit, Copy. 3. Click File, New From Clipboard. 4. Click Object, Combine, All Objects With Background (the background will become the current paper color) 5. If the image is not currently a paletted 8-bit image (256 colors), click Image, Convert To, Paletted (8-bit), select the palette and dithering options and click OK. 6. Click on File, Save As, select CompuServe Bitmap (GIF) from the Save As Type list box. 7. Enter a filename and click Save. 8. Using the Eyedropper tool located beneath the Preview button, click on the background color in the Original preview window, or select the background color from the displayed palette and click OK. Another similar method is as follows: 1. Within PHOTO-PAINT 8, Mask the area of the bitmap that is to become an image on a web page. For more information about Masking, refer to the masking exercises in the PHOTO-PAINT 8 manual. 2. If the image is not currently a paletted 8-bit image (256 colors), click Image, Convert To, Paletted (8-bit), select the palette and dithering options and click OK. 3. Click on File, Save As, select CompuServe Bitmap (GIF) from the Save As Type list box. 4. Enter a filename and click Save. 5. In the GIF Export window enable the Masked Area option and select the desired background color by clicking the Color Table button, or enter the RGB values directly, then click OK. Using the last method, the multi-colored image background becomes the solid selected color. JPG Important Terms Lossless: The process of compressing and decompressing that does not distort the image. It is identical to the image that was originally created. Progressive: A method of having the image appear on screen in entirety, but at a low, blocky resolution. As the image data loads, the image quality improves from unfocused to clear. Joint Photographers Expert Group (JPG) File Format This format is an international standard for compressed photographic images; it offers compression with almost no quality loss at ratios up to 20 to 1. Because of the lossless compression and small file size, JPEG's are widely used in Internet publishing. Choose the JPEG file format, if a grid-shaped matrix is appropriate for export and the image contains complex colors. The Bitmap Export dialog box in CorelDRAW offers color depths of 16 million colors displayed in either 24-bit RGB color or 32-bit CMYK color. Selecting a CMYK color depth will export the file with maximum image definition and the largest file size. CMYK is useful for retaining color depth information when printing, but is not effective for an image intended for RGB monitor display. Creating a JPG file in Corel PHOTO-PAINT 8 Prepare the graphic in Corel PHOTO-PAINT 8, and click File, Save As. Select JPEG Bitmaps (JPG) from the Files Of Type list box. Click Save. The Quality Factor 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 JPEG 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. To preview the change in quality, click the Preview button in the JPEG Export dialog box. To see the change on the actual image, the image must be closed and reopened in Corel PHOTO-PAINT 8, or any web browser. Note: It is a good idea to save a copy of the original image in the .CPT or TIF format before experimenting with the JPG compression options. This will allow future changes to the original uncompressed image. Creating a JPG file in CorelDRAW 8 Prepare the graphic in CorelDRAW 8, and click File, Export. Click JPEG Bitmaps (JPG) from the Files Of Type list box, and enable the Selected Only check box. Click Export, and the JPEG Export Dialog box will appear. Set the color, size, resolution, and anti-aliasing options, and click OK. Choose the desired quality factor and progressive options, and click OK. When enabling the Progressive option, the image loads progressively. It appears on-screen in entirety, but at a low, blocky resolution. As the image data loads, the quality improves from unfocused to clear. Note: not all web browsers or image editors support the progressive JPG format. PNG Important Terms Paletted-based Graphics: Paletted image mode is an 8-bit color mode that stores and displays images using up to 256 colors. Converting a complex image to Paletted color mode is useful for reducing file size, especially in preparation for Internet publishing. Portable Network Graphic (PNG) File Format PNG is a relatively new format developed as an alternative to CompuServe GIF files and should soon be supported by Internet browsers and graphics software packages everywhere. PNG supports true color as well as Paletted-based graphics. It uses an advanced lossless compression system and also supports full transparency. Note: not all web browsers currently support PNG transparencies. Creating a PNG file in Corel PHOTO-PAINT 8 Prepare the graphic in Corel PHOTO-PAINT 8, and click File, Save As. Click Portable Network Graphic (PNG) from the Files Of Type list box, and click Save. The PNG Export Dialog box will appear. Select the desired Interlace options, and click OK. Creating a mask on the image prior to saving it will allow the area outside the mask to be treated as transparent. Creating a PNG file in CorelDRAW 8 Prepare the graphic in CorelDRAW 8, and click File, Export. Click Portable Network Graphic (PNG) from the Files Of Type list box, and enable the Selected Only check box. Click Export, and the PNG Export Dialog box will appear. Set the color, size, resolution, and anti-aliasing options, and click OK. Select the desired Interlace options, and click OK. Working with Animated GIF's The Corel PHOTO-PAINT 8 movie commands allow existing animations to be loaded or create new animations that can be saved as GIF Animation files. Animations consist of one file with multiple frames. Each frame contains a different image: displaying the frames one after the other in rapid sequence simulates motion. Creating an Animated .GIF 1. In Corel PHOTO-PAINT, click on File, New. Enable the Create a Movie check box, and enter the number of frames required. Click OK. 2. Create the movie by adding the graphics to each frame. Note: Combine all floating objects with the background before proceeding to the next frame. Objects become part of a frame once they have been combined with the background. 3. Use the Movie menu commands to insert, delete or move frames. Use the Movie menu VCR Controls to view the movie. 4. When the movie is finished, click Image, Convert to, Paletted 8-bit. 5. Choose a Palette and Dither type, and click OK. Note: When converting an animation to Paletted (8-bit), using an Optimized or Adaptive palette will use the current frame for creating the optimized palette. To minimize color loss, ensure that the current frame contains the most colors used in the animation or select a fixed palette. Alternately, create the animation in 256-colors at the beginning of the process. 6. Click File, Save As and select GIF Animation from the Save as Type list box. 7. Choose a destination folder, and type a filename. Click OK. Image Map Important Terms URL: A Uniform Resource Locator is a unique address that defines where a document is found on the Internet. An example of a URL is http://www.corel.com/visitors/welcome.htm. HTML: Hypertext Markup Language is the World Wide Web authoring standard. HTML is comprised of markup tags that define the structure and components of a document. The tags are used to tag text and integrate resources (such as images, sound, video, and animation) when creating a Web page. Hot Spots: The hotspot is the area that the navigator of the document can click to access the information it is linked to. Creating Image Maps An image map is a hypergraphic that is linked to a URL for an HTML document. When clicking on an image map, the browser displays the HTML document named in the URL. An image map is made up of a bitmap (the image) and a series of coordinates describing the location of the hotspots on the bitmap (the map). CorelDRAW 8 allows the creation of Internet objects that act as hypertext navigation tools for the HTML documents. Internet objects are image maps or graphics with hotspots that link to other Web documents (Web sites). Creating an Image Map in CorelDRAW 8 1. Create a graphic in CorelDRAW 8. 2. Click View, Toolbars and enable the Internet Objects Toolbar. 3. Click a graphic object with the Pick tool, and type the location URL in the Internet Address Box on the Toolbar. 4. Use the Internet Bookmark box on the Internet Objects Toolbar to specify the name of a bookmark on a particular page. (A bookmark is similar to a hyperlink; it is a hyperlink to a specific location on an html page, rather than that standard hyperlink which would jump to the top of the page that the hyperlink is set to). This bookmark will then be available to select under the Internet Address Box when setting up a hyperlink and will appear with a "#" in front of the bookmark name . ie. #bookmarkname 5. Follow the above procedure for each object to be tagged in the file. 6. When finished tagging all objects, select all objects and export the graphic as a GIF or JPEG. To save the image map, click File, Publish To Internet. The .HTM file will contain both the graphics and the URL links. If there are problems with using Publish To Internet, ensure to obtain the most current update of CorelDRAW 8 from customer service or at ftp.corel.com. Creating an Image Map in Corel PHOTO-PAINT 8 Corel PHOTO-PAINT uses floating objects to define the hotspot areas of the image map. When saving the image, the map coordinates are stored in a separate map file, and an HTML file is created referencing the image map. 1. Create an object. Copy and past an image from another file, or mask an area of the image and click Object, Create, Object: Copy Selection. 2. Click the object with the Object Picker tool. 3. Click Object, Tag WWW URL. 4. In the Objects list box, click the object to make a hotspot area from 5. Type the URL to link in the URL box. 6. Type any relevant notes in the Comments box. These notes are for information only. They do not affect the image map. 7. Choose a hotspot area shape from the Define Area As list box. 8. Repeat the above procedure for additional objects. To save the image map, click File, Publish To Internet. The .HTM file will contain both the graphics and the URL links. Note: The WWW Clickable Region Attributes area provides information about the clickable area coordinates in relation to the image as a whole, as well as the width and height of the clickable area. All measurements are listed in pixels. The map and HTML files are created once the final image is saved. Publishing to HTML (Hypertext Markup Language) When publishing graphics to HTML, CorelDRAW creates an HTML document and a reference to the graphic. Specify whether to export the graphic as a .GIF or .JPG. For URL objects in the drawing, CorelDRAW creates a reference to the graphic in the HTML document, and automatically generates HTML codes that contain all of the information necessary to match the position of a pointer click to a specific URL and a tag in the HTML file that tells the browser that the graphic is an image mapped graphic. Publishing to HTML using CorelDRAW 8 1. Create the Graphic. 2. Click File, Publish To Internet. 3. Click Corel Image Map (HTM) in the Save As Type list box 4. Choose a destination folder, and type a filename. Click Export. 5. In the Export Bitmaps As dialog box, click GIF or JPEG. 6. Click OK. Tips for Working with Text When working with text that is smaller than 14 points in Corel PHOTO-PAINT, turn anti-aliasing off under the Tool Settings (Text) RollUp. Using Anti-aliasing with text this small will result in a "fuzzy" appearance on the text edges. When working with text that is greater than 20 points, turn anti-aliasing on in the Tool Settings (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 the monitor. Lower monitor resolutions will result in jagged text at smaller font sizes. Due to the nature of its compression, JPEG is not always a suitable file format to use for images that contain text. If the results are unsatisfactory with JPEG, use GIF instead.