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 , or Corel
PHOTO-PAINT , 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 Important Terms
Transparent Background:  On Web pages, all bitmapped graphics are rectangular and obscure
the background color of the Web page unless you create a transparent background. Saving a
graphic as a CompuServe GIF, allows you to specify one color in your graphic as a transparent
color.  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 you reduce 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 (pronounced "jiff") 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. Remember to select Identical Values in
order to preserve the original proportions of the image. 

Creating GIF files in Corel PHOTO-PAINT 7
When working in Corel PHOTO-PAINT 7, prepare the graphic in 24-bit color mode to ensure
that you will have 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. 
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. You may also set your
Interlace options here as well.  Click OK to finish saving the file.

Creating GIF files in CorelDRAW 7
If you are creating your graphic in CorelDRAW 7, click 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 you to
change your color depth, size, resolution and anti-aliasing options.  256 colors, Dithered, and
Normal Anti-Aliasing will yield the best results in most cases.  Experiment with the available
options to suit your needs.  Click OK.  The last dialog box prompts you to select a transparent
color. 

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 that you wish to become an object on a web page.  For more
information about Masking, refer to the masking exercises in the manual.
2.  Click Object, Create From Mask.
3.  Click the object with the Pick tool, and click Edit, Cut.
4.  Click File, Open.  Create a new 256 color image with a solid background.
5.  Click Edit, Paste, As New Object.
6.  Click Object, Combine, All Objects With Background.
7.  Create a transparent bitmap by following the steps in "Creating GIF file in CorelDRAW 7."

JPG Important Terms
Lossless:  The process of compressing and decompressing that does not distort the image. It is
identical to the image that you 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 offers color depths of 16 million colors displayed in either
24-bit RGB color or 32-bit CMYK color. 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.

Creating a JPG file in Corel PHOTO-PAINT 7
Prepare your graphic in Corel PHOTO-PAINT 7, and click File, Save As.  Click JPEG Bitmaps
(JPG) from the Files Of Type list box.  Click Save, and the JPEG Export Dialog box will appear. 
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
see the change in quality, the image must be closed and reopened in Corel PHOTO-PAINT, or
any web browser.

Note: It is a good idea to save a copy of your original image in the .CPT or TIF format before
experimenting with the JPG compression options.  This will allow you to open the original
uncompressed image for more experimentation.

Creating a JPG file in CorelDRAW 7
Prepare your graphic in CorelDRAW 7,  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 quality factor and progressive options, and click OK.

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.


Creating a PNG file in Corel PHOTO-PAINT 7
Prepare your graphic in Corel PHOTO-PAINT 7, 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 Interlace options, and click OK.

Creating a PNG file in CorelDRAW 7
Prepare your graphic in CorelDRAW 7,   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 Interlace options, and click OK.

Working with Animated GIF's
The Corel PHOTO-PAINT movie commands allow you to load existing animations or create new
animations that you can save 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.  Create a new file in Corel PHOTO-PAINT 7.  Enable the Create a Movie check box, and enter
the number of frames you require.  Click OK.
2.  Create the movie by adding the graphics to each frame.
Note: You must 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 commands to insert, delete or move frames.  You can also use the movie 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: 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.  Alternatively, create the animation
in 256-colors at the beginning of the process.
6.  Click File, Save As and click 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:  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 your 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 in an HTML document. When you click
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).  In CorelDRAW 7, you can create Internet objects that act as
hypertext navigation tools for your 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 7
1.  Create a graphic in CorelDRAW 7.
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 Location box on
the Toolbar.
4.  Use the Alternate Text Box on the Internet Objects Toolbar to specify the text that will appear
instead of the graphic.
5.  Follow the above procedure for each object in the file that you wish to tag.
6.  When you are finished tagging all objects, select all objects and export the graphic as a GIF or
JPEG. 


Creating an Image Map in Corel PHOTO-PAINT 7
Corel PHOTO-PAINT uses floating objects to define the hotspot areas of the image map. When
you save 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.  You can do this by either copying and pasting from another file, or Mask an
area of your existing image and click Object, Create From Mask.
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 you wish to link to in the URL box.
6.  Type any relevant notes in the Comments box.  These notes are for your 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.

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 Corel Barista 
Corel Barista  is a Java-based publishing technology that allows you to use CorelDRAW to
publish Web pages in the Java programming language. This means that you can use all the
features in CorelDRAW when publishing to the Web without the limitations of HTML. In
addition to supporting HTML features like hyperlinks, graphics and tables, pages published with
Corel Barista also enjoy richer formatting options and multi-column WYSIWYG (What You See
Is What You Get) documents.  You can view documents published to Corel Barista using your
browser. To display your Web page, save the Corel Barista class files in the same directory as the
Web page. The Corel Barista Class files are installed in the BARISTA folder when CorelDRAW
is installed.  It is a good idea to keep all your Corel Barista files in a single directory on your
Internet server or local hard drive so you only need to copy the Corel Barista class files once.

When you publish to Corel Barista, the following happens:
          A Web page, or an .HTM file, is automatically created with the filename and the location
     you specify.

          A folder with the same name is automatically created and placed with the output file. The
     page contents are stored in this folder.


Using CorelDRAW To publish a drawing to Corel Barista
1.  Create your file.
2.  Click File, Publish To Internet.
3.  Click Corel Barista (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.

Publishing to HTML (Hypertext Markup Language)
When publishing graphics to HTML, CorelDRAW creates an HTML document and a reference to
the graphic. You have the choice of specifying whether to export the graphic as a .GIF or .JPG.  
For URL objects in your 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 7
1.  Create your 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 for text off in 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 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 text.

          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.