How to Prepare Image Files for the Web

Read Chapter Twelve (The Non-Designer's Web Book)

Do all the projects.

Complete all the Quizzes.

Instructional Video: Full Screen  Ipod Version

Topics Covered

• Create Layered Images with Paint Shop Pro
• Resizing Images
• Creating Background Images
• Creating Animated Images

Create Layered Images with Paint Shop Pro

First, open Paint Shop Pro. You will find it under the Start > All Programs > Corel Paint Shop Pro X > Corel Paint Shop Pro X.

Create a new image by going to File > New. You will see the following dialog box.

There are quite a few settings in the File New dialog, but we are only going to worry about a few of them at this time.

Most important to us right now are the Image Dimensions, located toward the top of the Dialog. We will be making several different types of images in Paint Shop Pro and it is important to get the dimensions correct.

• If we are making a header graphic to include on the top of our pages, we may want it to spread most of the way across the page. For a header graphic, typically you would create a work area that is 750 pixels wide (or less) and maybe about 150 pixels high.
• If you are creating a navigational button, you may want to start with a work area that is around 150 pixels wide and 75 high. That is what we are going to create, so I have set the dimensions to 150 x 75.

No matter what type of web graphic you are making, always set your Resolution to 72 pixels per inch. This will display safely on all computers.

After you have input the settings, select OK. You will be given the work area in a new window within Paint Shop Pro. It looks like the example below.

Paint Shop Pro, like other good imagery software, supports layers within an image. Layers are like clear sheets of plastic, each containing one element of the image. We can move each layer independently of the others and stack them in any order to show or hide specific parts of the finished image. The first step we are going to do in the creation of our navigation button is to create a new layer.

There are two types of layers available in Paint Shop Pro: raster and vector. Think of raster layers as a place to hold things like photos and painting. Vector layers are used to hold things that can be created from mathematical formulas, like geometric shapes to letters of the alphabet. We will create a raster layer for this example. You will find the dialog for creating raster layers under the Layers menu item.

Give the layer a meaningful name, like Button Background. Once you type OK, your Layer palette should show the new layer, as below. (If you do not see the Layer palette, press F8 and it should appear.)

In this example, I am going to create a navigation button that will direct the user to the Safari Page in my web site. (The same operations hold for creating headers and other graphics, just on a larger scale using a larger work area.) Since this button goes to the Safari Page, I want it to look like a safari button.

We start with the Materials palette. (If you do not see the Materials palette at right in the window, press F6 and it should appear.) The large black rectangle at he top right represents that color of any lines that are drawn and any text that is typed on the image. The white rectangle below it is the color of any new backgrounds or the fill for any objects we create. You can turn off either the foreground color or the background color by clicking the circle with the diagonal line through it at the bottom right corner of the large rectangle. This will change the large rectangle for be grey with a circle and diagonal line. We are going to select a pattern for the background of our button. Click the round, black circle at the bottom left of the large black rectangle, point at the bottom icon in the popup menu, and click the mouse. The black rectangle should now have a pattern in it. Click on this pattern and the following dialog should appear.

Click on the little arrow on the right edge of the leopard skin and a selection box will appear. We are going to use the zebra skin for our Safari Page button, so click it and press OK. You Materials palette should look like this:

Select the Fill Tool from the toolbar. (If you do not see the Toolbar on your work area, click View > Toolbars > Tools and it should appear.) The Fill Tool looks like a paint bucket with paint spilling over the top. Using the mouse, point at the work area and click the left button. Your work area should look like this:

To make our button have a little more dimension to it, we are going to go the the menu at the top of the window and select Effects > 3D Effects > Buttonize.... You can control the amount of change to the button by playing with the numbers in the dialog. Play around until you get something you like and click OK in the dialog box. With this effect applied, our button is no longer flat looking.

Next, we are going to add a plain color element to the button to give us an easy place to include text. We could put text right over the zebra skin, but it would be hard to read as it would either not contrast well with the black or the white. Since this is a button and we are going to use it to go somewhere else, I will add an arrow to it to imply direction or movement.

Start by selecting the Preset Shape tool from the toolbar. The Preset Shape tool looks like a talking bubble from a comic strip and can be seen at right. But before we add the arrow, we need to add a new vector layer to the image. This layer will hold the arrow and allow us to move the arrow to position it independently of the zebra pattern below it. (We need a vector layer instead of the raster layer we created earlier because Paint Shop Pro's preset shapes are created using math formulas, so they are vector graphics.) By going to Layers > New Vector Layer..., we can create a new layer for the arrow to reside. I chose to name my layer Arrow. After you press OK, your Layer palette should look like the example left.

When updating the image, be sure to have the correct layer selected in the Layer palette. A layer is selected by highlighting it with the mouse. In this example, the Arrow layer is selected for update, which is where we are going to add the next element to the image.

Note:

Vector images are based off mathematical equations called vectors. Using vectors to define an image makes it easy to resize up or down. However, the Internet does not understand vector graphics. It prefers raster graphics, which are based off spots of color called pixels. You will notice that there are two types of layers you can add to your image, vector layers and raster layers. You guessed it, the vector layers hold vector-based imagery and the raster layers hold raster-based, or pixel, imagery.

If you are inserting a Picture Tube (located a couple spots higher on the toolbar), you will still want to insert a new layer before adding the image. The difference is that Picture Tubes are not vector based, they are raster based. Layers > New Raster Layer... works great for inserting Picture Tubes.

With the Tool Options palette visible (if you don't see it, press F4), select the arrow (or whatever) you want to use in the image. The list of preset shapes can be seen in the Tool Options toolbar, to see additional options, clink the little arrow next to the only preset shape displayed. At right, I selected the Arrow 3. Next, I drag a box on the image to hold the arrow. The size of the box I drag defines the size of the arrow.

There are a lot of different predefined objects in Paint Shop Pro that you can use in your designs. In fact, there are extras loaded on the NIACC server that you can add to your private stock.

To add more preset shapes, follow these steps:

• Click File > Preferences > File Locations...
• Select Preset Shapes from File Types
• Press Add
• Browse to My Computer > W: > Shapes
• Click OK

Additional Picture Tubes are also available:

• Click File > Preferences > File Locations...
• Select Picture Tubes from File Types
• Press Add
• Browse to My Computer > W: > Tubes
• Click OK

By now, your work area should look something like the example at left. You can use the square handles around the arrow to resize it. You can also use the handle located inside the arrowhead to rotate the shape if you wish.

We don't want just a boring old black arrow on our button, so we will change the color. Go to Layers > Convert to Raster Layer to switch the arrow from a vector shape to a raster shape. Next, go to the Materials palette and click the Set to Black and White button to restore the Materials back to the original state. Select an interesting color from the color palette in the Materials palette and, by using the Flood Fill Tool (the paint bucket), point at the arrow and click the left mouse button to fill the arrow with the new color. Here is mine after I changed the color.

Finally, let's add some text to the button so the viewer knows where it sends them when they click it.

The Alpha tool is used to insert text into an image. Click the A in the toolbar to select the Alpha tool.

Point at the spot on the work area where you want to start the lower-left corner of a text box and click the mouse. Paint Shop Pro will automatically insert a new layer for you in the image to hold the text. You will be presented a Text Entry box like the one below.

Enter the words that you want to appear on the button. The words will also be displayed in the work area. If you do not like the size or the font, highlight the text in the Text Entry box and change the size or font in the Tool Options box. When you are satisfied with the text, click Apply.

If you need to adjust the location of the text, switch to the Pick tool. It is the white arrow in the toolbar. Moving the mouse inside the handles around the text will cause a four-ended arrow to appear. Hold down the left mouse button and move the text to the correct position.

Be sure to save your document to your U: by doing a File > Save and supplying the appropriate name to the file. Also, do a File > Export > JPEG Optimizer... and make a JPG version for inclusion in your web site.

The JPEG Optimizer is used to create web graphics. It gives you control over compression and format to help set the size and quality of the finished image.

Note that under the Before and After images there are Uncompressed and Compressed file sizes. The uncompressed size shows how large the file would be if it were to be saved as a regular file. The compressed size shows the file size of the image if it is saved as a JPEG. In our example, the JPEG is about one seventh the size because of JPEG compression. That makes download much quicker.

We will use the defaults for Quality and Format, so you don't need to worry about those. Take a look at the Download Times tab to see how long it will take your viewers to get a copy on their machines.

Below is a copy of my finished button, ready to be used on a web page.

Resizing Images

If you have a large image to display or a number of images that all go on one page, use thumbnails to keep the download time to a minimum. Thumbnails are smaller versions of the same images. Because they are smaller, they will download faster.

Here is an image that is really too large to include as is. If we make a thumbnail of this image, we can use the smaller version on the page and make it a link to the larger version. That way, the viewer does not have to wait for the photo to download unless they specifically want to view it.

Resizing the window is a pretty rimple operation. Begin by opening the full-sized image in Paint Shop Pro and select Image > Resize...

In the Resize dialog, you specify the size in inches or pixels for the new dimensions. If the Lock Aspect Ratio is checked off and the number to the right is not changed, the width and height proportions will stay the same when you update either one. This means that if I cut the height of the image in half, the width will automatically be cut in half by Paint Shop Pro.

Notice at the top of the window that the original dimensions of the image were 225 x 300. I have se thte new dimensions to 75 x 100 in the Pixel Dimensions area. Click OK to update the size.

Here is the new thumbnail version.

The thumbnail was saved using the JPEG Optimizer (as described in the previous page) and given a unique name to make identification simple. The full-sized image was called jetpack.jpg and the thumbnail jetpacksmall.jpg.

The main objective of thumbnails is to decrease the download size by decreading the file size.

To see how a thumbnail can be used to open the larger version, click on the image at left. A new window is opened showing the larger version. This is done by making the thumbnail a Link to the larger JPEG.

Creating Background Images

Background images are generally small graphics used to paint a picture or texture on the page behind the text and other graphics. When the background image is smaller than the size of the browser window, the browser will automatically tile the image to fill the space. When you think of tiling, think of the tiles used in a shower or on a floor. All of the tiles are the same and they are placed side by side to fill the area.

Good background images share two very important characteristics:

• Every tile should butt up to the adjacent tiles on all sides without visible seams.
• Background images should be of a color and texture that does not interfere with the readability of the text copy on the page.

Here is an example of a texture that tiles well and does not interfere with readability, as long as you are willing to use a light colored text:

Just to prove it tiles seamlessly, here are three tiles, each being an exact copy of the original textured background, laying side by side.

Ad advertised earlier, we will start with a 100 by 100 pixel square. That means, for example, if we use this in a window that is 500 by 400, the browser will use 20 copies of the background tiled in 4 rows of 5 tiles.

The example at left shows the File > New... dialog set to create our empty background image area. We want to create the graphic at 72 pixels per inch and a size of 100 by 100.

Clicking the Okay button will cause the File > New dialog to disappear and be replaced by an empty work space, like the one below:

This workspace is exactly 100 pixels wide and 100 pixels high.

Solid colors and some patterns work well for creating background images because they do not show seams between the tiles. Let's create a background image using a predefined pattern from Paint Shop Pro and see how it tiles.

We begin by selecting our texture from the Materials palette. If the Materials palette is not visible, click F6. The Materials palette is shown at right. (Yours may have different colors or patterns displayed by default. Don't worry about it.)

There are three tabs across the top left of the Materials palette, the left one is used to select solid colors, the middle for gradients and fades, and the right one for patterns. Avoid gradients and fades for backgrounds - they always show really nasty seams between the tiles and are often hard to read against. We will be using patterns in this example, so click the rightmost tab.

In the example at left, the red swatch was selected by clicking on the small red sample under the pattern tab. (Notice the white highlight around the color after the selection as been made.) This turns the larger foreground sample on the right side of the palette to the selected color - red.

Now, we are going to apply a little texture to our color. Point the mouse at the larger red swatch in the foreground at the top right of the Materials palette and click the left mouse button. You will get the Material Properties box shown below.

Select the Texture checkbox at the top right corner of the dialog and click on the large Asphalt swatch at the top right of the dialog. You will be presented with the texture samples below.

Scroll down and choose the Grass texture by clicking it with the mouse. This takes you back to the Material Properties dialog and now Grass appears in the Texture box at the top right. Click OK.

Select the Flood Fill tool from the toolbar with the mouse. Click inside the 100x100 workspace area we created earlier. Your area should look something like this.

If we are happy with this, we can save it for the web by going to File > Export > JPEG Optimizer.... The Optimizer dialog is shown below.

Click OK and save it with the rest of your web site.

Let's see how we did. At right is a copy of the JPEG we created in this exercise. Below is the same JPEG tiled with a couple more instances to see if there are seams.

As you can see, there are some minor seams visible between the tiles, but not too bad. There are certainly complimentary colors that can be used for high-contrast text. While the random nature of the texture gave us a pretty good background tile, we could go back and select a different one and try again, hopefully eliminating all traces of the seams.

Additional Help can be found at:  Free Seamless Background Tile Image Designs by StarFields

Creating Animated Images

An animated image is actually a series of images, with each image being displayed in a predefined sequence, replacing the previous image. These sequential images are called frames and work much like the frames in movies.

In this lecture, we are going to create the animation at left.

First we need to create the images that we're going to link together in an animation. These images are made with Paint Shop Pro, one at a time and saved as individual GIF files. For this animation, we had 11 frames. Ten of the frames are shown below as thumbnails, the 11th frame was blank.

Once we have all of the frames created and saved as individual GIF files, we start the Animation Shop. The Animation Shop is a separate piece of software that combines the frames into a single GIF file that holds all of the frames and a script that tells the browser how to play the animation. You start Animation Wizard by going to the Start button and selecting All Programs > Jasc Software > Animation Shop 3. There are some dialog boxes that pop up, a Skip and a couple OKs and they go away.

Once Animation Shop is running, we will start the Animation Wizard. The Animation Wizard will help us build the animation. Start the Animation Wizard by going to File > Animation Wizard... A series of dialogs are presented and they first group all look a lot like this:

In the first dialog, select Same size as the first image frame and click Next >.

In the second dialog, select Transparent and click Next >.

In dialog 3, select Upper left corner of the frame and With the canvas color and click Next >.

In the fourth dialog, select Yes, repeat the animation indefinitely. In this dialog, you can also set the frame display rate. By default frames advance every 10/100 (.1) second. For the animation above, the frame rate was set to 100/100 (1) second. Click Next >.

Now we need to select the images we just created. The next dialog box looks like the example below:

Click the Add Image... button and you will be presented a typical Open window. Search out the folder that contains the individual frames for your animation and select the files that you want to include. You can select the files one at a time by clicking the Add Image... several times or, by using the Shift or Ctrl keys, select all of the files in one pass through the process.

Once you have selected all of the GIF images that will make up the frames of your animation, you can rearrange them in this window by selecting the frame to move and clicking the Move Up or Move Down button.

Once you have selected all of the frame images and have ordered them the way you want them, click Next >. You will see the animation frame set pictured below.

At this point, we can test out our animation by clicking on View > Animation. A small box is opened with our gingerbread boy in various degrees of being eaten. This version is for testing only.

Before we can use the animation in our web site, we need to save the real version of it. To do this, click on File > Optimization Wizard.... The Optimization Wizard optimizes the graphics, trying for a balance between quality and download time. There will be a series of dialogs that are displayed, each telling you something about the animation.

• Optimized Output
  In this dialog, select Animated GIF... and Create a new animation... and click Next >.
• Animation Quality vs. Output Size
  Push the slider all the way to the top and click Next >.
• Optimization Progress
  Wait for the optimization process to complete and click Next >.
• Optimization Preview
  Click Next >.
• Optimization Results
  Shows estimated download times at various communications speeds. Click Finish.

Last step: save the animation. Click File > Save As... and save the animation to your disk space.