This tutorial explains some of the basic concepts associated with publishing images to the Internet. You will learn how to create transparent .GIFs, image maps, and backgrounds, and how to save your image as a .GIF or .JPG.

Select a topic:

Learning the basic concepts of Internet publishing

Creating a transparent .GIF

Creating an image map and saving your image as a .GIF or a .JPG

Creating a tiled background

Learn the basic terminology and concepts involved in publishing to the Internet.

Select a topic:

Learning about Web servers

Learning about Web browsers

Learning about Hypertext Markup Language (HTML)

Learning about Uniform Resource Locators (URLs)

Learning about different file formats

The computers that store Web documents and run software that make the documents available are called servers.

To publish documents on the Internet, you need a server that stores the HTML documents and relays information to browsers that make requests for your documents. When someone points their browser to your Web document, the browser talks to your server to get that document and then display it.

A browser is software that displays HTML documents and graphics. It reads the HTML documents and renders the information between the tags according to the tag specifications.

To create a document that Web browsers can read and display, you need to create an HTML document. To do this, you can type the HTML codes manually in any text editor, use a Web authoring tool such as Corel Web.DESIGNER, or use software such as CorelDRAW that has filters to automatically insert HTML codes when you save your file in a certain format.

HTML (Hypertext Markup Language) is a system of tagging information. If you're familiar with assigning styles or tags in word processors, you'll have no problem with the concept of assigning tags to text.

An HTML document is a text file that contains special tags that explain how the text in the document is to be displayed, where graphics go, and where links to other documents (such as graphics files) occur.

For example, the tag you assign to a title looks like this:

<TITLE>My Web Page </TITLE>

The tag is made up of an open angle bracket (<), characters that describe the tag's action, and a closing angle bracket (>). Most tags occur in pairs. In the previous example, the beginning tag, <TITLE>, turns the property on, and the ending tag, </TITLE>, turns the property off.

A URL (Uniform Resource Locator) is an address on the Internet where a Web document resides. It is made up of four components:

http://www.corel.com/news/index.htm

  1. http - identifies the protocol to use
  2. www.corel.com - indicates the server to connect to
  3. news - indicates the path
  4. index.htm - indicates the filename

A URL is also associated with image maps. An image map is a graphic with a hyperlink. When a user clicks your image map, they are linked to the document that the URL points to.

The two most common image file formats for the Web are Graphics Interchange Format (.GIF) and Joint Photographic Experts Group (.JPG).

Generally, .GIF format is considered the best choice for line drawings and graphics with few colors or sharp edges. The .GIF format also offers transparency, interlacing, and animation capabilities.

The .JPG format is the preferred choice when saving images with broad tonal ranges, such as photographs or scanned images. JPGs also tend to use more disk space than .GIFs.

The .PNG file format is relatively new and was developed as an alternative to .GIF and .JPG files. Your Web browser may require that you install a plug-in filter in order to support this format.

Click here to learn more about publishing images to the Internet.

Learn how to make part of your image transparent when saving to the .GIF file format.

Click here to open a sample image.

Select a topic:

Finding out more about .GIF images and transparency.

Creating an image with areas that will become transparent when viewed in a Web browser.

When saving your image to the .GIF file format, you can make portions of your bitmap completely transparent.

The image you have currently loaded shows an airplane against a white background. You can make the white background transparent when viewed on a Web page.

Images saved to the .GIF file format must be in paletted color mode. You will now convert the 24-bit image to a paletted image.

  1. Click Image menu, Convert To, Paletted (8-bit).
  2. Click Yes when the message, "Merging all the objects with the background may give a more accurate conversion. Do you wish to flatten the image?" appears.
  3. In the Convert To Paletted dialog box, choose Optimized from the Palette list box.
  4. Click OK.

Note

The color palette includes only those colors that are found in the image.

Go to next page

You are now ready to save the image as a .GIF.

  1. Click File menu, Export.
  2. Choose CompuServe Bitmap (GIF) from the Save As Type list box.
  3. Choose a folder in which to save the image in the Save In list box.
  4. Type a name for the file in the File Name box and click Save.

Go to next page

The GIF Export dialog box opens. You can use it to make an area of your image transparent in a Web browser.

  1. Click the Image Color button.
  2. Enable the Interlace check box.
  3. Click the Eyedropper tool.
  4. Position your cursor over the Original window, and click the white background (the color you want to make transparent).
  5. Click OK.

Tip

Only the Index color you choose will be transparent. Therefore, if the background is multicolored or of a non-continuous color, you may not achieve the desired effect.

Click here to learn more about publishing images to the Internet.

You can create an image map by assigning URLs to objects in Corel PHOTO-PAINT.

You can also create your own image map using a sample image and an object.

Click here to open a sample image.

Select a topic:

Find out about image maps.

Set up your own image map.

There are two stages in creating an image map:

Tagging is the process of assigning URL addresses to objects in your image. When the final image map is clicked, these addresses point browsers to destinations on the Internet.

The second stage involves saving the tagged image in a Web-friendly file format, e.g., .GIF file format, or .JPG file format.

Go to next page

When you assign a URL to an object in your image, you define a hyperlink address for it. This means that when it is clicked it will link to a site, usually a Web page.

Click on the following to learn about the different parts of a URL address:

http://

/www.corel.com/

/corelWeb/index.htm

In order to create your image map, you must first save your file to one of the Web-friendly formats: .GIF files must be in an 8-bit color mode; JPEGs are generally in 24-bit RGB.

Select a topic:

Converting your image to 8-bit (256 colors) in order to save it as a .GIF.

Converting your image to image to 24-bit RGB (true color).

Tip

To verify the image's color mode, click the Image Information button on the Standard toolbar, or click File menu, Document Info.

Convert the image to an 8-bit color mode.

  1. Click Image menu, Convert To, Paletted (8-bit).
  2. Click No when the message, "Merging all the objects with the background may give a more accurate conversion. Do you wish to flatten the image?" appears.
  3. In the Convert to Paletted dialog box, select a Palette Type from the Palette list box.
  4. Choose a Dither type from the Dithering list box.
  5. Click OK.

Go to next page

Convert the image to 24-bit RGB color mode (true color).

Click Image menu, Convert to, RGB Color (24-bit). If this command is grayed out, your image is already in RGB color mode, and you can skip this step.

Go to next page

Now that your image is in the correct color mode, you can assign URLs to the objects in your image.

  1. Select the object "walker" with the Object Picker tool.
  2. Click File menu, Publish To Internet.

Go to next page

At the top left of the Tag WWW URL dialog box, you'll see a list of the objects in your image. By clicking one of these, you select it as the object to be tagged.

Use the arrow keys to scroll through the list of objects. As you do, the objects will appear as thumbnails to the right.

Click the following for more information on the Tag WWW URL dialog box controls:

URL box

Comments

Define Area As

Go to next page

Now we will assign URLs to the object in the sample image:

  1. Click the name "walker" in the Objects list.
  2. Type a hyperlink address in the URL box, e.g., http://www.corel.com
  3. Type any comments in the Comments box.
  4. Choose Polygon (Follow Object Shape) as the clickable region shape from the Define Area As list box.
  5. Click OK.

Go to next page

Now that your image map is tagged, you can save it in one of the Web-friendly file formats:

  1. In the Export An Image To Disk dialog box, choose CompuServe Bitmap (GIF) or JPEG Bitmaps (JPG), from the Save As Type list box.
  2. Choose a folder in which to save the image in the Save In list box.
  3. Type a name for the file in the File Name box and click Save.
  4. This warning appears: objects will be merged with background.

Go to next page

After you click OK, another dialog box appears. The one that appears depends on the file format you have chosen.

Click here if your image is a .GIF

Click here if your image is a JPEG

When saving as a .GIF, the GIF Export dialog box allows you to define a transparent color. To enable .GIF transparency:

  1. Click the None button.
  2. To use interlacing, enable the Interlace check box.
  3. Click OK.

Go to next page

When saving as a .JPG, the JPEG Export dialog box allows you to choose a quality level for your image. The higher the quality, the larger the file size.

  1. In the JPEG Export dialog box, move the Compression slider to the left to select a high quality image resolution, or to the right to lower the image resolution quality.
  2. Move the Smoothing slider to the left to create a higher quality, smoother transition between pixels of different colors, or move the slider to the right for a lesser amount of smoothing.
  3. Enable the Progressive check box if you want your image to appear gradually from a lower resolution to a higher resolution in a Web browser.
  4. Click OK.

Go to next page

Now that you have saved your image in the .GIF or .JPG file format, you continue by setting the image map save options.

  1. In the Save Map File dialog box, type a name for the map file in the File Name box.
  2. Choose an image map type from the Save As Type list box.
  3. Type a name in the Map Name box.
  4. Enable the Default URL check box and type a URL address in the box to make any part of the image that is not clickable link to that URLs Web page (optional).

Click here to find out about File Header Options.

Go to next page

After you click OK in the Save Map File dialog box, Corel PHOTO-PAINT automatically creates the .HTM and .MAP files that you use on the Internet.

If you chose the Client-Side image map type, an .HTM file is created; the .MAP file is embedded within the .HTM file.

If you chose the Client-Server NCSA or the Client-Server CERN image map type, both an .HTM and a .MAP file are created.

If you chose the Server-Side NCSA or the Server-Side CERN image map type, a .MAP file is created.

You have now learned how to create a clickable image map.

Note

For all image map types (except for Client-Side) you must give the .MAP file to your Internet Service Provider.

Click here to learn more about publishing images to the Internet.

You can create a seamless tileable texture from rock, wood, and other materials that you can use as a background for your Web page.

To do this, you will use a program called Corel TEXTURE. This program is available as a Custom setup option when you install your CorelDRAW 8 software. If you have not installed Corel TEXTURE, run the Setup program before continuing.

Go to next page

You will also learn how to control the shape and intricacy of the texture and enhance its appearance by adding color and lighting effects.

  1. From the Windows desktop, click Start, Programs, CorelDRAW 8, Graphics Utilities, Corel TEXTURE 8.
  2. When the application has opened, click File menu, New.
  3. Click the Texture Wizard button.
  4. Click the New button to open the Texture Wizard.

Note

The Texture Wizard will guide you through a series of steps to produce a unique tile that will be used to create the tileable background texture.

Go to next page

When you have completed the steps in the Texture Wizard, do the following:

  1. Click Preview menu, Test Tiling to view the background texture you have created.
  2. Click anywhere on screen to close the preview.
  3. To make this texture into a seamless tile, click Texture menu, Generate Tiling Image. This option automatically ensures that the edges of each tile will line up with the edges of the next.
  4. Click Preview menu, Test Tiling to view the seamless background.
  5. Click anywhere on screen to close the preview.

Go to next page

To save the tile texture, use the Render To File command. This may take a few moments.

  1. Click Texture menu, Render to File to save the background.
  2. In the Render To File dialog box, choose a folder to save the tile in from the Save In list box.
  3. Choose JPEG (*.jpg) as the file format for the tile in the Save As Type list box.
  4. Type a filename for the tile in the File Name box, and click Save. The rendering process may take a few minutes to complete.
  5. Click File menu, Exit to close Corel TEXTURE.

Go to next page

You can also use the tile you have just created as a texture fill in CorelDRAW and Corel PHOTO-PAINT. To do so, open either application and follow these instructions.

  1. Click here to open a new image.
  2. Click Edit menu, Fill.

Go to next page

In the Edit Fill And Transparency dialog box, do the following.

  1. Click the Current Fill button
  2. Click the Bitmap Fill button.
  3. Click the Edit button.
  4. In the Bitmap Fill dialog box, click the Load button.
  5. Choose the folder and file name of the bitmap you just created in Corel TEXTURE.

Go to next page

To use the tile you created in Corel TEXTURE as a Web page background pattern, use the following HTML code in your .HTM file.

<BODY BACKGROUND="file name.file extension">

Example: <BODY BACKGROUND="tile.jpg">

Click here for more tutorials.