Copyright: Copyright (c) 1996, Ulead Systems


Welcome
Mastering The Web with PhotoImpact

The Web just got a little easier now that you have PhotoImpact. No matter whether you write your own web pages or simply enjoy reading those that are already available, PhotoImpact has many useful features to help you as you explore the Internet. This complete imaging package is loaded with features to make creating and reading web pages easier than ever. And there are also a few things you can do with PhotoImpact to make reading and recalling what you saw easier too. Here are a few of the things you can do now:

Create unique backgrounds for your web pages

Seamlessly blend images into your web pages with transparency

Put hot spots in images for enhanced navigation

Optimize all your images so they appear faster and more consistently when viewed on line

Enhance your images for a more professional look and feel

Create interesting, three dimensional looking buttons for your visitors to click on

Add a sophisticated image viewer to your web browser as a helper application

Automatically track and catalog the images you download, assigning keywords and visual cues to remind you why you liked them.

And a whole lot more! Read through this help file to see what's possible, and find out how you can do it.


What can I use The Web for?

The World Wide Web offers you one of the greatest opportunities that ever existed to make your message known to a wide audience. Here are some of the things you can do on The Web:

Résumés Don't just mail your resume out, let potential employers come to you!

Family Home Page Keep your friends and relatives informed about your family by giving them your home page address. Now you only need to write once to reach many!

Newsletters Save printing and mailing costs by putting your newsletter on-line.

Real Estate Give potential home buyers a grand tour of your best properties without requiring them to leave their homes.

Museum Pieces Show and share your favorite artwork and collectibles with others.


Dos and don'ts for images on Web pages: Image size
Dos and don'ts: Image size

Don't make your images too big! Remember, your image is only good if it gets seen by the people visiting your page. And keep in mind that even though faster modems and ISDN phone lines are allowing data to flow faster, it still takes some time do show an image. Experienced Web travelers are becoming less patient with Web pages and sites that take forever to appear. So, keep your images small and optimize them for The Web.


Dos and don'ts for images on Web pages: Resolution
 Dos and don'ts: Resolution

Do use images with 72 dpi resolution. Remember to design your pages for the standard screen resolution of most web browsers. You may be running at 1024 x 768, true-color, but your visitors, most likely, are not. Assume that everyone that looks at your home page is doing it with a screen resolution of 640 x 480.

Also, consider why you are putting the image on the page. Chances are, it is there for reading on-line. If so, there's no point in exceeding 72 dpi for the image. That's because that is the standard resolution for most displays when showing a Web page on-line.  If you create an image with a higher resolution, chances are the image will be too small when displayed on the screen unless you use a frame in your HTML document. And if you do use a frame,  the web browser is going to have to do some heavy duty calculations to resize the image to fit. And that means time. If you want to give your visitor a higher resolution image, (say, for printing), why not link it to the low resolution image to a higher resolution image and let your visitor decide whether to download it?


Dos and don'ts for images on Web pages: Data types & formats
 Dos and don'ts: Data types & formats

Do use the proper data type and format for the images on your pages. If you want to show a photograph, the  JPEG or PNG formats are probably the best to use. They support true color data types and offer good compression. If you are placing icons, logos, or other "hand-drawn" images, GIF is better. It only allows you to use up to 256 colors, but you probably won't need any more than that. Furthermore, with the transparent features the GIF format offers, you can seamlessly blend these images into your documents.

For best performance with GIF images, you should try using the standard palette for Netscape. This reduces your palette down to 216 colors, but it ensures that all images on your screen appear consistently, and saves a little download time also.


Dos and don'ts for images on Web pages: Meaningful images
 Dos and don'ts: Meaningful images

Do make sure your images add more than just color to your pages. Is a picture worth 1000 words? Actually, it might be worth a whole lot more...in terms of file size. And that means they take longer to load on web pages. Also, they use up valuable real estate on the screen. The biggest mistake Web authors make is trying to be too splashy with their images. Instead of astounding and inviting their visitors to read on,  they do the opposite. People get incredibly frustrated waiting for all the images to appear.

Remember, the key to good graphics is to look cool and enhance understanding at the same time. If you achieve one without the other, you haven't achieved anything. Nothing motivates your visitor to travel elsewhere more than a web page that takes forever to download or is impossible to read. So be smart; think before you decide to place an image. And then think again.


Creating Backgrounds: Overview

  Overview	  Textures	  Custom

Did you know you can control how the backgrounds of your home pages appear? A single line in your HTML document will fill your page with an image to appear behind the text and other graphics. But wait a minute! A graphic THAT big must take forever to download, right? Well, surprise, it doesn't have to. Just tile a small image and you can fill a page of any size in an instant.

PhotoImpact offers you two ways to create great backgrounds.

Textures

Custom

 	How to place a background in your HTML Document


Creating Backgrounds: Textures

  Overview	  Textures	  Custom

	The Magic tab of PhotoImpact's Texture Gallery contains over 100 unique patterns that you can use for backgrounds in your web pages. The background in this procedure was created with Magic Texture MT 103. Here is how you can use magic textures to do your own backgrounds: 1. Open a new 72 dpi true color image with dimensions greater than or equal to 640 x 350. 2. Open the Texture Gallery from the EasyPalette and click the Magic tab. 3. Find the texture you wish to use as a background and drag it to the image. 4. Look up the tile size for the selected texture in the Magic Texture Tile Size Cross Reference. (See below) 5. Click the Standard Selection tool and enter the tile size in the Fixed Size boxes in the Attribute toolbar. 6. Right click on the image and choose Merge from the Object popup menu. 7. Click in the image where you want the top left corner of your texture to begin. Then drag the selection to an empty spot in the PhotoImpact workspace. 8. If the standard tile size is too large for effective use as a background, from the Format menu, choose Dimensions. In the Dimensions dialog box, define the new size for the tile. 9. From the Format menu, choose Brightness and Contrast. In the Brightness and Contrast dialog box, increase the brightness and reduce the contrast so that text can appear clearly over the texture. 10. From the Format menu, choose Data Type: WWW Browser Optimized. To preview how your texture will look as a background: 1. Right click on the corrected texture and choose All from the Select popup menu. 2. Press "T" and drag the corrected image back to the original. When the texture looks the way you want it to appear in your web page, save it as a GIF 89a file. (Remember, it must be an indexed-color image to be saved as a GIF.) Custom Texture Tile Size Cross Reference


Creating backgrounds: Custom;Neat stuff;Creating;Fancy
Creating backgrounds: Custom

  Overview	  Textures	  Custom

	You may want to fill your background with an image you created, such as a corporate logo, a curtain, or your pet turtle.  Here's how: 1. Open the image you wish to tile as a background and convert it to true color, 72 dpi. (Remember, this image must be tileable to produce good results.) 2. From the Format menu, choose Photo Properties to find out the image size. 3. If necessary, from the Format menu, choose Dimensions and resize the image to make it smaller. 4. From the Format menu, choose Brightness and Contrast. Increase the brightness settings and reduce the contrast so that text can appear clearly over the background. 5. From the Format menu, choose Data Type: WWW Browser Optimized. To preview your background, 1. Create a net 72 dpi true color image with dimensions greater than 640 x 350. 2. Right click on the optimized image and choose All from the popup menu. 3. Press "T" on the keyboard and drag the optimized image to the original image When the background is the way you want it, save the optimized image as a GIF 89a file. If you wish to shift the starting point of your texture, use the preview image as a source and follow the Textures procedure.


Buttons: Overview

  Overview	  Simple	  Colorful	  Artistic

Buttons are an important part of any web page. They provide quick and efficient access to information and are easily recognizable. With PhotoImpact, anything that you can think of can be a button. All you need to do is to isolate the portion of an image that you want to create as a button and then enhance it so that it looks three-dimensional. Look below as we add shading and highlights to an image to create a button.

Original	Highlights	Shading
Here are some buttons you can create with PhotoImpact. Click below for instructions.

Standard Buttons	Colorful Buttons	Artistic Buttons


Simple buttons

  Overview	  Simple	  Colorful	  Artistic

Creating simple buttons is easy in PhotoImpact, in fact, you don’t have to do anything. All you need to do is run PhotoImpact Capture and then capture any of the buttons or check boxes you see in any program on your system. Once captured, you can then edit them in PhotoImpact to change the title or resize them to better suit your web page.

1. 	Run PhotoImpact Capture and ensure that the Source is Selected Object and the Destination is PhotoImpact. (In most cases, you will want to capture in Grayscale and use the display resolution.)

2. 	Open the dialog box which contains the button you want to use.

3. 	Place your pointer over the button you want to capture and press F7. (A marquee appears around the button indicating that it is selected.) Click your mouse to capture the button. It now appears as an image in PhotoImpact.

Note: Don't use buttons or icons that are protected by a copyright. If you are unsure whether it is legal to use an image created by someone else, don't use it.


Colorful buttons

  Overview	  Simple	  Colorful	  Artistic

This procedure uses a standard OK button captured from a PhotoImpact dialog box. For more on how to do this, see the topic “Simple buttons”.

1. 	From the Format menu, choose Data Type: True Color to convert the OK button to a True Color image if it is not one already.

2. 	Select the highlighted and shaded area of the OK button and then drag the selection into the Object Library in the EasyPalette. (This saves the selection and its contents which we will use later to add the 3-D effect to our button.)

3. 	Now go to the image you want to use as a button and copy it to the clipboard.

4. 	Activate the OK button image and use the Standard Selection tool to select the entire button, except for the black border.

5. 	From the Edit menu, choose "Paste: Into Selection." This pastes the clipboard image inside the selection area. (You can freely move the image in the selection to position it.)

6. 	From the Object Library, drag the highlighted and shaded object from step 2 onto the OK button. It now covers the image.

7. 	 Right click on the OK button and choose Properties to control the transparency of the object.

8.	In the Object Properties dialog box, change the transparency to 50% and click OK. The highlight and shadow object now reveals part of the underlying image, creating the impression of depth.


Artistic buttons

  Overview	  Simple	  Colorful	  Artistic

This procedure takes an image and then uses the Quick Color Controls as well as the Light filter to produce a more pronounced 3-D effect for the button.

Note: This procedure uses selection techniques outlined in earlier button creation procedures.

1. 	Open the image you want to create as a button and convert it to true color if necessary.

2. 	Place a 1 pixel black border around it.

3. 	Now select the entire image (except the black border) and then subtract the selection so that only a 3 pixel selection border appears inside the black border. This will be the area where we will apply the highlights and shadows.

4.	Drag the selection to the Object Library and store it as a selection.

5.	Select the Lasso tool and subtract the bottom and right areas from the selection.

6.	Click several times on the "up" brightness Quick Color Control to gradually highlight the selected area.

7.	Drag the original selection from the Object Library back to the image.

8.	Now subtract the top and left areas from the selection.

9.	Click several times on the "down" brightness Quick Color Control to gradually darken the selected area.

10. 	To better enhance the feeling of a light source, use the Light filter to place a diagonal light source on the image moving from the top left to bottom right.


Creating transparent images: Overview

  Overview	  Canvas	  Explicit

	Making parts of images transparent allows them to blend into your web page more smoothly. There are two ways to make your image transparent:
Use the canvas

Explicitly define a background color in the image


Creating transparent images: Canvas

  Overview	  Canvas	  Explicit

The easiest way to make an image transparent is to use the Frame and Shadow command from the Standard toolbar. It's biggest advantage is that you can do the whole thing in one dialog box and you don't need to explicitly define a transparent color. The disadvantage is that it makes your file a little bigger. Here's how:

1.	After you finish editing your image, click "Data Type" in the Status bar and choose WWW Browser Optimized.

2.	Click Frame and Shadow from the Standard toolbar.

3.	Set the frame and shadow settings to 0.

4.	Select a solid color for the canvas to represent the transparent color. (This color will be transparent everywhere it appears in the image.)

5.	Set the canvas size settings to 1.

6.	Click OK and save the file as a GIF or PNG image.

When you define the image as a transparent image in your HTML code, the canvas color will appear transparent wherever it occurs in the image. (Note: Some HTML readers do not support showing transparent bitmaps.)


Creating Transparent Images: Explicit

  Overview	  Canvas	  Explicit

This method may be a little more involved, but it offers two advantages: The files can be smaller and others who download the image immediately identify the image as a transparent image and where the transparency areas are:

1.	Choose a color to represent transparent areas for your image and set that color as your background color. Note the RGB color value for future reference.

2.	When you finish your editing, click "Data Type" in the status bar and choose "Optimize for Web."

3.	Save the image as a GIF or PNG image. In the Save As dialog box, click Options to access the save options for the desired format.

3a	For GIF images, select GIF 89A for the type and click the color square to define the transparent color. In the Color Picker dialog box, enter the RGB values you obtained in step 1 directly into the R, G, and B text boxes.

3b.	For PNG images, click the color square to define the transparent color. In the Color Picker dialog box, enter the RGB values you obtained in step 1 directly into the R, G, and B text boxes.

4.	Click OK and then Click OK again.

Now that color will be transparent as long as your visitor is using a program that supports showing transparent bitmaps.


Cropping

To crop means to remove any excess areas of an image that you do not want to display or have no interest in retaining. Apart from keeping only the subject of your image in view, cropping also helps reduce file size making your images display quicker over the “Net.”

1.	Use the selection tools to select the area you want to keep.

2.	Press Ctrl+R or choose Crop from the Edit menu.

PhotoImpact deletes all unselected portions and automatically resizes the image to the selected area. (Any parts of the resulting image that were not part of the original selection that remain are filled with the current background color.)

Before and after


Resizing

Although you can use HTML code to size images on your web pages, a better way to make images appear the way you want them to is save them at the correct size. Resizing the actual image instead of having the web browser do it offers two distinct advantages: First, by making the image physically smaller, (reducing the number of pixels in it), the file size becomes smaller. Second, the web browser does not need to calculate the corrections to make in order to display the image properly.

Besides simply resizing an image that is already too big for your page, another reason for resizing is to use a small image to preview a larger linked image.

This procedure explains how to reduce an image to half of its original size.

1. 	Open the image you want to resample and from the Format menu, choose “Dimensions.”

2. 	Select User Defined, and ensure that the Unit combo box is set to Percent and that Keep Aspect Ratio is also checked, and then type 50% in the Width combo box. The height also changes while the Preview image changes accordingly. (If you want the image to fit within an exact size, such as 120x240, then set the Unit to pixels and type in the respective pixel values in the Width and Height combo boxes.)

3. 	Click OK. The dialog box closes and PhotoImpact resizes the image.

Note: Remember that resizing images with the Dimensions command alters data. If you make the image smaller, some image data is irretrievably lost. PhotoImpact adds information to an image when you increase the dimensions.

Before and after


Changing resolution

Changing resolution is important for making sure your images are the right resolutions for their purposes. A good reason to lower the resolution is when you have a high resolution image (say 300 dpi) you want to put on your web page. Since most displays only show images at 72 dpi, a lot of that image may not appear properly when shown on-screen. Change it to 72 dpi, then you can link the image to the high resolution original to let your visitors download it if they wish to have a higher resolution version for printing. To change resolution, from the Format menu, choose "Resolution". In the resulting dialog box, enter the desired resolution for the new image.


Mapping an image

A popular feature of web pages these days is to have a large image which contains a number of hot spots. By clicking on these hot spots you then jump to another HTML document. Creating image maps is easy, and as long as you understand HTML level 2, you should have no problem. All you need to do is create your master image, complete with the graphics that you want to appear as hot, and then enter the coordinates of those graphics in your HTML document. Click above to find out the coordinates for this image.

Now, to find out the coordinates for mapping your images:

1. 	Open the image you want to map and select the Standard Selection tool.

2.	Move your mouse over the image to the top left corner of the area you want to make hot.

3. 	Note the values that appear in the left side of the Status bar. These are the current x and y coordinates of your cursor.

4. 	Now move to the bottom right of the graphic and take a note of the coordinates. This signals the end of the hot spot

5.	Repeat steps 2 and 3 for each area of the image you wish to make hot.

HTML Tags for identifying mapped hot spots on web pages


Enhancing images

No matter where you get your images from, or why you want to use them, you are sure to want to ad your own personal touch to them for added appeal. This is where PhotoImpact shines with its diverse, powerful, and easy to use tools, effects, and filters. Look at the images below to see some of the things you can do with the EasyPalette and one or two clicks. Then read on for other hints and suggestions to help you edit your images effectively.

Original	Emboss	Watercolor	Invert
Hue & Saturation	Ripple	Puzzle	Color Balance


Using Guided Workflow to create images

When you are in a hurry, PhotoImpact has a unique feature to make obtaining and enhancing your images quick: The Guided Workflow Tools™ in the Standard toolbar take you through all the essential steps for acquiring and enhancing an image:

First, click the Scan button to import an image from any printed source.

Then click the Auto-process button and choose the automatic enhancements to fix up the image. Is there an unwanted border? Auto-Crop will get rid of it. Did you scan the image a bit crooked? Auto-straighten will align it properly. Is the image too dark? Auto Brightness can bring it back to life. And there are other options too, such as Auto-remove moiré, auto-contrast, and auto-something else.

Click the Color Balance button to define a neutral gray or tint.

Click Brightness and Contrast to make the colors stand out.

Open the EasyPalette and apply any special effects or filters to the image.

Finish off the image by adding a frame and shadow.

Finally, save the file by clicking the Save button. Remember, if the image is a photograph, use P-JPEG or PNG for the file format. Otherwise, optimize it for The Web and save as an indexed 256-color GIF.


Filters and effects

Add extra flair and feeling to your images with the  wide range of filters and effects PhotoImpact offers. They are easy to use because you always have a preview of what will happen next before you apply any change. PhotoImpact offers you two ways to apply filters and effects. All of them are available from the Format or Effect menu, but a better way to do it is to use the EasyPalette. The easy Palette contains a huge number of preset filters and effects in its galleries. Each gallery provides thumbnail images portraying how the change will affect you image. And by clicking the Try! button, you can replace the default EasyPalette thumbnails with one of your current image. And the My Gallery allows you to add new settings to the EasyPalette for future use. Enhancing your images was never easier.


Style Gallery

If you want a one stop, no fuss editing shop, then the Style Gallery is just for you. Here you can drag-and-drop effects, styles, textures and gradients to any image, instantly enhancing it. No fine tuning, pixel-level adjustments needed here, simply “pick-and-apply”. Below are some of the examples you can create using the various galleries available in the Style Gallery.


Shadows: Overview

  Overview	  Basic	  Halos

To make images on web pages look their best, add some shading to them. Shading can be as subtle or as strong as you want, and, although it sounds simple, is one of the hardest imaging techniques to master. Click on one of the graphics below to see some examples of shading and how to do them.

Basic Shadows	Simple Halo	Diffused Halo


Shadows: Basic
Shadows: Basic shadows

  Overview	  Basic	  Halos

This is your standard type of shading and can be done incredibly quickly in PhotoImpact.

1. 	Select the area on the image that you want to have a shadow.

2. 	Right click on the image and choose “Convert to Object” from the pop-up menu. The selection is now an object floating above the image.

3. 	Right click on the image and choose “Add Shadow” from the right mouse button pop-up menu. The Add Shadow dialog box appears.

4. 	Check the first Direction radio button and ensure that the X and Y Offset values are set at 10 pixels. Also make sure that the Transparency is set to 50% and that Edge Blending is set to 10.

5.	Choose a color for the shadow by clicking on the Color square.

6. 	Click OK. The dialog box closes. PhotoImpact creates a shadow object and groups it with the previous object.

7.	Right click on the image and choose "Merge All" to merge the objects with the base image.


Shadows: Halos

  Overview	  Basic	  Halos

If you have traveled around several Web sites or seen various CD titles, you have seen that many of shadows are not necessarily offset. Instead, they appear as if a spotlight is shining straight down on top of them, resulting in a halo effect, or a shadow on all four sides. In PhotoImpact you can create such a shadow using a single command, or use a number of tools for even more refined work.

Simple halo (This creates a shadow of equal diffusion.)

1.	Open the EasyPalette and select the Object Library.

2.	From the Object Library menu, check Store Image.

3. 	Select the area on the image that you want to give the halo shadow and drag it to the Object Library. (You will use this later to add to the halo shadow.)

4. 	Return to the image and select a painting tool.

5.	From the Effect menu, choose “Paint on Edges”.

6. 	Now drag the previously stored object from the Object Library back onto the image. It falls in the exact same place it was taken from, with the halo shadow appearing behind it. To better merge this object and the shadow, you can blend the edges of the object using the Object properties dialog box.

Diffused halo

1. 	Follow steps 1-3 from the Simple Halo procedure above.

2. 	Right click on the image and choose “Soften” from the pop-up menu. The Soften dialog box opens.

3. 	Enter 20 as the Soften width and click OK. The dialog box closes and the selection marquee changes to reflect the new soft edge.

4. 	Select a painting tool and paint over the entire selection. Notice how the areas around the softened edge appear more diffuse.

5. 	Now drag the previously stored object from the Object Library back to the image. It falls in the exact same place it was taken from, with the halo shadow appearing behind it. To better merge this object and the shadow, you can blend the edges of the object using the Object properties dialog box.


Adding text to an image

Text in web images may be most important feature of any graphic, as it states clearly (in most cases) what the graphic represents and also sets to establish the identity of your Web site by its use of font and style. In PhotoImpact, you have incredibly powerful tools that allow you to not only create text, but to shape it in any way you like. Here’s how:

1. 	Select the Text tool.

2. 	Move to the image where you want to apply the text and click. The Text entry box appears.

3. 	Enter in the text that you want to appear on the image and click OK. PhotoImpact applies the text to the image.

4. 	In the Attribute toolbar, specify the correct style that you want for your text. (PhotoImpact automatically updates the text.)

5. 	In the Attribute toolbar, change the Mode to Path. Control points appear on each corner of the text block.

6.	Drag the control points to change the text shape. You can drag freely on any control point to create any type of shape.

7. 	Change the Mode setting back to Object. PhotoImpact fills the text with the color shown in the text color box in the Attribute toolbar.

8.	If necessary, drag the text to the desired position on the image and merge it.


Gradient fills

You probably won't have much call for gradient fills on your web pages; they are usually used in images that would probably be too large or demand too high a resolution. But when you do need them, PhotoImpact offers you the greatest flexibility of how to create them:

Color Ramp Select how colors shift in your gradient.

Styles Choose linear, elliptical or rectangular fill patterns

Magic Gradients Create outstanding backdrops for your images with unique gradients such as star burst, highway, swirls, and others.


Load low-res images before high-res ones

Give your visitors a quick glimpse of your images by loading a low resolution image before the high resolution image loads. That way, your visitors can decide quickly whether to wait for the image to develop. Here's how:

1.	Create a low resolution copy of each high resolution and true color image you wish to include in your web pages with the Data Type: WWW Browser Optimized command in the Format menu.

2.	Use the following in your HTML document to place the images:

<IMG LOWSRC="lowres.gif" SRC="hires.jpg">

When loading, your visitor's web browser loads the GIF very rapidly with interlacing and then slowly fills in the 24-bit color with the JPEG file.


Reducing the indexed color palette size

If you are creating images for The Web that only require a few colors, make sure you save them to an indexed color format, GIF or PNG. And then, to really let your images fly, reduce the size of the palette to only include the colors you need.

1.	Create the image using as a true color image. This gives you full range of all the colors in the spectrum for your image.

2.	When you finish editing, from the Format menu, choose Data Type: Indexed 256 color.

3.	In the True-Color to 256-Color dialog box, select Optimized.

4.	Enter 0 into the start value box.

5.	Enter the total number of colors you wish to include in the image (up to 256) in the Max number of colors box. (For best results, use values of 16, 32, 64, 128, or 256.)

6.	Experiment with the dithering options to find the best one for your image. As a rule, try diffusion if you started with a photograph. If you hand-drew the entire image, or its original source was already an indexed color image, None will probably be better.

7.	Save the converted image as a GIF or PNG file.


The GIF file format

This is a popular indexed color format invented and made famous by Compuserve. In the early days of on-line services, it was widely used for storing and transferring good quality reproductions of photographs. Now it is best suited for original artwork such as drawings, buttons, and other screen components for your home page.

Some other features that GIF files offer are:

Transparency You can specify a color in a GIF image to be transparent. By doing this, you can create the appearance of a non-rectangular image. This also enables you to blend your graphics seamlessly into the rest of your web document.

Interlacing By interlacing a GIF file, your visitors can obtain a quick representation of the image before the finished image appears. This allows them to decide faster whether to wait for the entire image. The downside to interlacing is that file size increases, and the total time for the finished image to appear is longer. It's your decision.

Color palettes Each GIF image can have its own unique color palette, however using a unique palette increases the amount of time most web browsers require to download the images. For this reason, you should try to use the standard 6-6-6 color palette for most of your GIF images. Another way to reduce the time required for downloading is to use a smaller palette. If you are doing buttons or icons, you probably don't need more than 20 or 30 colors, (maybe even fewer). So, reduce your palette down to only those colors you need. Then see how much faster your web page appears.


The JPEG file format

This is a true color format with excellent compression. Use it to show photographs on your home page. The JPEG format supports both progressive and non-progressive opening. We recommend you always use the progressive options for your JPEG images because:

It allows your visitors to see a representation of the image faster.

The file size is smaller

You can preview the image without opening it in programs that support image preview information, (such as PhotoImpact).


The PNG file format

This format was developed as an alternative to the GIF file format caused by proprietary concerns. It is an extremely versatile format that offers good  lossless compression for true color images, and often better compression than the GIG format for indexed color. Like the GIF format, it also supports transparent colors, progressive opening, and custom palettes.

Be careful about using the PNG format, while it may have good future ahead of it, presently only a few web browsers support this format for on-line display.


Using Album to collect images

When you are traveling around The Web, you come across an incredible number of images. And you may frequently come across ones you want to keep for future reference or use. Rather than using valuable on-line time to save or rename the images, why not let album collect al the images you view automatically. Then, after you disconnect from The Web, go through the album and save, rename, and assign keywords and other data to the images you want to keep. Here's how:

1.	Open Album and from the File menu, choose New.

2.	Choose a template and assign a title for the new Album in the New dialog box, then click Customize.

3.	Click the Advanced tab and enter the name of the folder your web browser uses to write information to in the Folder text box. (For Netscape, this is usually the \\netscape\cache folder.)

4.	Choose the file formats you wish to monitor from the File types drop down list. As a minimum, you should select GIF and JPEG, but you might also include PNG and HTML.

5.	Click OK.

Next time, after you finish with The Web, open this album and look over all the files you collected. Remember, many web browser automatically delete files after they reach a certain age on your hard disk, so if there is an image or file you wish to keep, you should move it to a different directory. Album can help you do that too.


PhotoImpact Viewer as a helper

Your web browser does a decent job at presenting information the way the web page authors want you to see it. But if you want a more detailed look at a graphic, you usually have to wait until after you disconnect to open it in another program for viewing. By adding PhotoImpact Viewer as a helper application, you can view in-line and downloaded graphics while on-line with much greater flexibility.

Here is how to add PhotoImpact Viewer to Netscape as a helper. Other browsers may have similar procedures:

1.  From the Options menu, choose General Preferences.

2.  Click the Helpers tab.

3.  Select an image/xxxx file format you wish to display in Viewer, (for example, image/tiff) and select Launch the Application option.

4.  Click Browse and select viewer3.exe from the UPI folder.

5.  Repeat steps 3 and 4 for all formats you wish to associate.


Adding a file format to your web browser

Here is how to add a new file format to Netscape. Other web browsers may have similar procedures.

1.	From the Options menu, choose General Preferences.

2.	Click the Helpers tab.

3.	Click Create a new type and enter "image" in the MIME Type box.

4.	In the MIME Type box, enter the type of file you are adding, (for example, image).

5.	In the MIME Subtype box, enter a classification for the image, (for example, Portable Network Graphic).

6.	Click OK.

7.	In the File Extensions text box, enter all accepted file extensions, separating each with a comma, (for example, PNG)

8.	Select the Launch the Application option.

9.	Click Browse and select viewer3.exe from the UPI folder.


Magic Texture Tile Size Cross Reference

Use this table to find the tile size for a magic texture you wish to use as a background. If you intend to do a lot of backgrounds, print this page out and keep it as a handy reference.

Note: These textures are located in the Magic tab of the Texture Gallery. PhotoImpact Album also contains an album of all these textures named Magic Textures.

Texture	Width	Height	Texture	Width	Height	Texture	Width	Height
1	200	200	37	54	180	73	60	60
2	182	203	38	70	70	74	120	60
3	160	160	39	140	70	75	88	44
4	84	84	40	196	70	76	132	66
5	150	150	41	196	70	77	66	66
6	175	175	42	140	200	78	60	60
7	160	160	43	112	112	79	84	35
8	80	120	44	108	108	80	72	30
9	120	120	45	72	72	81	72	72
10	168	168	46	72	72	82	21	21
11	128	128	47	160	160	83	40	40
12	96	96	48	40	40	84	40	40
13	105	175	49	150	150	85	40	40
14	7	140	50	100	100	86	40	40
15	160	160	51	60	60	87	80	160
16	80	80	52	45	45	88	32	128
17	60	60	53	60	60	89	120	120
18	150	150	54	60	60	90	120	120
19	36	150	55	120	120	91	192	96
20	36	180	56	120	120	92	260	140
21	50	50	57	120	120	93	280	105
22	50	150	58	80	80	94	200	200
23	140	140	59	70	70	95	200	368
24	210	210	60	70	70	96	241	50
25	7	210	61	150	150	97	200	200
26	4	50	62	100	100	98	132	66
27	66	66	63	140	140	99	200	200
28	160	160	64	160	80	100	200	200
29	160	160	65	160	100	101	200	200
30	20	48	66	140	140	102	40	40
31	20	48	67	140	140	103	108	72
32	64	96	68	56	56	104	120	120
33	160	160	69	64	64	105	120	120
34	20	100	70	56	56	106	210	210
35	100	120	71	150	150
36	108	108	72	24	48


Keep your first page short

Probably the biggest cause of home pages not being read is that they take too long to load. Write your home page so that it can load quickly. Include only information and images you consider essential for engaging your visitors and motivating them to explore more. Try to minimize the amount of scrolling they have to do early on. It is likely that if they do not see what they are looking for quickly, they will look elsewhere.


Obtaining images

One of the biggest strengths of PhotoImpact is that it offers you practically unlimited resources for obtaining images.

You can scan them in from photographs, books, and other printed materials with any TWAIN device.

You can capture images from the screen using PhotoImpact Capture

You can use PhotoImpact CD Browser to find Kodak PCD images and then edit and convert them to GIF, PNG, or JPEG images for The Web.

You can take images from any of over 35 vector, bitmap, and metafile image formats and edit and save them as GIF, PNG, or JPEG image for The Web.

And don't forget that you can download an almost unlimited quantity of images from The Web for your own pages also.

No matter where you are getting your images from, PhotoImpact offers the tools and flexibility for perfecting your images for The Web


Copyright cautions

Unless you personally created an image, never assume that no copyright exists for it. If you scan images from printed material for publishing on The Web, make sure the creator has given permission for you to use, and/or alter the image for your use. When you travel the Net, you will come across an endless supply of images. Most web pages will state whether you may use the images on those pages for your use. If no statement exists, try contacting the author to ask for permission before you start using his or her image.

Above all, NEVER assume that no copyright exists on any material you find on The Web. Unless you have explicit permission to use what you found in your own documents, don't use it.


Dos and don'ts for images on Web Pages:  At a glance
Dos and don'ts:  At a glance

Here are some key ideas to keep in mind when creating images for your web pages. For more information about each concept and tips on how to implement them, click below.

Don't make your images too big.

Do consider the resolution of the web browser when creating images.

Do choose the best data type and file format for the image.

Do make your images meaningful.

Do respect the intellectual property rights of others.

Do keep your first page small.


Resolution tips

Remember to design your pages for the most common screen size used by web browsers. You may be running at 1024 x 768, true color, but your visitors, most likely, are not. Assume that everyone that looks at your home page is doing it with a screen resolution of 640 x 480.

The standard resolution for Windows (large fonts) is 72 dpi. For small fonts, the resolution is 96 dpi. These are probably the best resolutions to use for your images.

True color is nice, but a lot of your visitors may still be using 256-color displays. Keep this in mind when you do your images.

Use the Resolution command in the Format menu to quickly change the resolution of your images. Changing the resolution does not affect the file size or clarity of your image. It just changes the physical dimensions when printed.


Image sizing tips

Use the Dimensions command in the Format menu to resize images.

Try to use indexed color instead of true color for your images.

When using indexed color, optimize your images for The Web with the WWW Browser Optimized command in the Format:Data Type submenu.

If you don't need 256 colors, use a smaller custom palette. The Indexed Color command in the Format:Data Type submenu allows you to customize the palette size.

Don't use HTML code to size images on web pages. Use the Dimensions command in the Format menu to edit the image to its proper on-screen dimensions. This enables the images to appear faster because the web reader does not need to calculate and resample the images while downloading.


Data type and format tips

Always use the progressive option when saving JPEG files. Not only does this make the image smaller, but it also allows your visitors to get an idea of the image's appearance faster.

Consider whether you want the entire image to load faster or give an idea of the image content faster when deciding whether to interlace GIF images. Interlacing makes GIF files load more slowly, but allows your visitors to get an idea of the image content faster.

If you have a GIF that uses fewer than 256 colors, consider customizing the palette to make it smaller and allow the image to load faster.


Meaningful images tips

Use buttons to point out areas to click on to go to another page.

Use a nice logo or image to give your page or topic visual identity.

Create backgrounds to add texture to your page.

Use a mapped image to centralize the navigation aides on your page.

Use a simple image to give your visitors a preview or idea of things to come.


Placing a background into an HTML document

Use the <BODY BACKGROUND> tag at the beginning of your HTML document to place a background.

For best results, set the background color to match the background color of the image you are using. Here is an example:

<BODY TEXT="#FFFFFF" BGCOLOR="#000000 BACKGROUND=/images/bckgs/texture/mybkg.gif>


Backgrounds tips

Keep your backgrounds light. Use the Brightness and Contrast command to make high contrast and bright images more suitable for placing text above.

Remember, you want your visitors to READ the text on your page. Don't make your background image so strong that it distracts the reader.


Transparency tips

Use the Magic Wand and Mask Brush to define transparent areas for your images.

Try adding a soft edge around the borders of your transparent area to blend the image more smoothly into the background.

Make sure all your transparent bitmaps have the same transparent color.

For best results, define the background color of your web page to be the same as the transparent color for your image.   (Sample Code:  <BODY BGCOLOR="#000000> )

To create transparent area for use in multiple images, create the area and then save it with the Save Selection command in the Edit menu.


HTML tags for identifying mapping hot spots on web pages

To add the hot spots to your Web page, use the Area Shape HTML tag. You may create rectangular and circular, irregularly shaped, and single point hot spots:

Rectangular Identifies the upper left and lower right corners.

(Sample code: <AREA SHAPE="RECT" COORDS="21,22,182,122" HREF="http://www.url/~path/document"> )

If you use  a map file, these shapes are also available.

Circular Identifies the center and any point on the circle's edge.

(Sample code: circle http://www.url/~path/document 65,65 65,10 )

Irregular shape Identifies each point (up to 100) where the edge changes direction.

(Sample code: poly http://www.url/~path/document 40,10 60,30 40,50 20,10 )

Point Identifies only the point.

(Sample code: point http://www.url/~path/document 25,50 )


Placing images tips

Use interlaced GIFs with only 256 or 16 colors and low resolution for the LOWSRC files

Use progressive JPEG files for high resolution SRC files.

Show the dimensions for JPEG images before they load so that the accompanying text can appear faster. This also helps your visitor to decide whether to wait for the image or move on.


Resume

	Name: Ian McClure Age:  30 Nationality: Canadian Address:  1920 Galt Ave., Sherbrooke PQ, Canada Education: B.A Sherbrooke U. Languages:  French, Hebrew, English Experience Company: Dominion Goods Limited Duties: As head data-entry clerk my duties included writing the company newsletter, inputting sales and marketing figures, creating spreadsheets, taking inventory every month, and managing a team of three data-entry clerks.


Family Page

	Our Family Home Page Welcome to the Kimball family home page! To find out about our family history, click here. This home page is updated regularly and contains stories about family members around the world.  If you would like to find out about your family history, click here to register. Family News The Third Annual Family BBQ Johnny Got Into Upstate University Laura's Getting Married!


Newsletter

	AUTONEWS Welcome to this month’s edition of AutoNews, the complete guide to buying, selling, and maintaining your car. Don’t miss the Hot Tips section where everything you need to know about engine care, body repair, fuel efficiency and more is available at your fingertips. In past issues we’ve featured articles by our readers such as “Snow Tires: Myth and Reality”, “Life and Times of Henry Ford”, and “Car Songs of the Fifties”. This month's feature looks at safety standards in the car industry.  Detroit and Japan: Safety Issues  Departments Hot Tips Classic Corner FAQ Reader's Forum Automobile Maintenance Test drive the Jupiter 8 here!


Real Estate

	A quiet stroll on the beach at night, or maybe a quick hike up the mountain before breakfast -- whatever your pleasure, we’ve got it! Over one thousand dream homes in exotic locales around the world! Take a look at our selection of exquisite homes in our Dream Realty Showroom. To view a home just click below. You'll see information about property taxes and values, tourists spots and scenic routes, and more! Country Cottage . . Seaside Retreat Olde Castle . . Family Home Hunting Lodge . . Skiing Getaway Click here to arrange a personal visit


Art Display

	Welcome to the Midwest Gallery! Feel free to browse around any section of the gallery and check out the archive and chat rooms for information on upcoming and past exhibitions. To view or download an image, click on the one you want. It might take a few minutes depending on your connection speed. JPEG (20 KB) TIFF (900 KB) JPEG (19 KB) TIFF (850 KB) Click here to register as one of our patrons. We'll send you regular updates of new acquisitions and interesting articles about our museum history and its art.


Cropping: before and after

Before	After


Resizing: Before and after

Before	After (50%)


The coordinates for this spot are (17,40   53,74)

The HTML code would be:

<AREA SHAPE="RECT" COORDS="17,40,53,74" HREF="http://www.url/~path/document">


The coordinates for this spot are (17,82   53,114)

The HTML code would be:

<AREA SHAPE="RECT" COORDS="17,82,53,114" HREF="http://www.url/~path/document">


The coordinates for this spot are (17,121   53,155)

The HTML code would be:

<AREA SHAPE="RECT" COORDS="17,121,53,154" HREF="http://www.url/~path/document">


The coordinates for this spot are (17,162   53,199)

The HTML code would be:

<AREA SHAPE="RECT" COORDS="17,62,53,99" HREF="http://www.url/~path/document">


The coordinates for this spot are (101,72   234,88)

The HTML code would be:

<AREA SHAPE="RECT" COORDS="101,72,234,88" HREF="http://www.url/~path/document">


The coordinates for this spot are (114,97   244,110)

The HTML code would be:

<AREA SHAPE="RECT" COORDS="114,97,244,110" HREF="http://www.url/~path/document">


The coordinates for this spot are (130,119   251,133)

The HTML code would be:

<AREA SHAPE="RECT" COORDS="130,119,251,133" HREF="http://www.url/~path/document">


The coordinates for this spot are (143,142   264,160)

The HTML code would be:

<AREA SHAPE="RECT" COORDS="143,142,264,160" HREF="http://www.url/~path/document">


The coordinates for this spot are (156,244   243,177)

The HTML code would be:

<AREA SHAPE="RECT" COORDS="17,40,53,74" HREF="http://www.url/~path/document">