You may read the following sections in their entirety
or use these choices to go directly to a section.

| Introducing transparent colors | | Creating a transparent color using Paint Shop Pro | | Screen captures using Paint Shop Pro |

Here is Smiley with a transparent background:

Often an image will look better with a transparent background. A transparent background simply means that you cannot see the background color of the image in your browser. There is a background color but it isn't visible on the web page. In actual fact, the background color of the web page (no matter what color it is) simply replaces the background color of the image.

You can make any color in the image transparent, but most often it is the background color. You can only designate one color as being transparent. An image with a transparent color is called a Transparent Image or a Transparent GIF. It has to be a GIF image. The image does not have to be a GIF image to begin with, but it has to be saved as a GIF image.

If you want to designate the background color as being transparent, then the background of the image must be a single color, not a combination of colors since only one color in the image's color map can be designated as transparent. The background color should not be used anywhere else in the image because it too would become transparent thus possibly distorting the image.

If you find that another part of the image also seems to disappear on the web page, it could be because one of the colors in the image is also the same color as the background color of the web page. For this reason, it is recommended that you control the background color of your web page with the BGCOLOR attribute. This will override any default background color in a visitor's web page and so ensure the results you want.

SOME POINTS TO REMEMBER WITH TRANSPARENT IMAGES:

1. The image background should be a single color.
2. The color designated for the background should not be used elsewhere in the image or used extensively elsewhere in the image.
3. Not all GIF images have solid or smooth colored backgrounds. You may have to load the image into a program such as Paint Shop Pro to change the background into one solid color before making the background transparent.
4. Photographs do not work well as transparent images since it is hard to define a single color.

In order to make a color transparent, you need a program that will do it for you. Examples are Paint Shop Pro for Windows, and Photoshop for Windows and Macs. I like Paint Shop Pro because it is easy to use and it is also a great image editor. The owners of Paint Shop Pro have made a significant effort to include a host of photo tools. It states on their website that "Paint Shop Pro is filled with one-of-a-kind photo tools sure to please even the most discerning photographer, Corel® Paint Shop Pro® Photo is the ideal choice for people who want extraordinary photos. With a built-in Learning Center to help first time users get started, it's the easiest way to get professional-looking photos - fast!"

Paint Shop Pro is reasonably priced and you get a lot for the money. What I like about the makers of Paint Shop Pro is that on their website is a learning center containing over 100 short tutorials on the power of Paint Shop Pro. For example, if you have a digital camera and are into digital photography, or like working with scanned photographs or portraits, there are over 60 easy to follow digital photography tutorials. These tutorials cover every conceivable adjustment to a photograph using Paint Shop Pro. There are also many Web Design Tutorials and Art Resource Tutorials - all designed for Paint Shop Pro.

However, Photoshop is also another very popular image editor that many people use.

I will be illustrating transparent images using Paint Shop Pro which was developed and owned by a company name Jasc Software Inc. Jasc was acquired by the Corel Corporation in 2004. Corel must have liked what Jasc was doing because now they own the company. Photoshop, another great product, is owned by Adobe.

If you do not have Corel Paint Shop Pro or Adobe Photoshop, you can download a fully functional copy for 30 days after which a decision to purchase must be made. The current version of Paint Shop Pro is named Corel Paint Shop Pro Photo X2 (version 12) which is the version used in these lessons. In these lessons, we will simply refer to Corel Paint Shop Pro Photo X2 as Paint Shop Pro.

If you do not have a paint program, you can download one by clicking on the appropriate link:

Paint Shop Pro

Photoshop

Now Open Paint Shop Pro. When you do this, the main program window appears. This window is your work area. It contains the commands and tools you need to create, edit, print and export your images. We will deal with these items as we get to them in the lessons. Note that the workspace theme you are seeing is called the Graphite Workspace Theme. It is the default theme. If you click on the View menu at the top of the Paint Shop Pro screen, you will see a checkmark beside Use Graphite Workspace Theme indicating that this is the active theme. If you would rather work in the classic Paint Shop Pro workspace theme used in previous versions, just choose View --> Use Graphite Workspace Theme. This will disable this graphic workspace theme and display the classic theme. This will also remove the checkmark beside Use Graphite Workspace Theme indicating that it is no longer active. To go back to the graphite workspace theme, just choose this menu item again.

After you have opened Paint Shop Pro and decided on the display theme, load the image that you want to create a transparent color for. You can do that in two ways:

1. Choose Open from the File menu (File --> Open). This will display the Open dialog window. Browse to the folder containing the image such as smile.gif. Click on the image name and then click on Open. The image should now appear in the working window.
2. Near the bottom of the screen, just below the main working window, is the Organizer window. It shows some of your folder structure. Double click on the option named folders. This will bring up some more folders. If you do not see your folder then click on the Browse More Folders option. This will display the Browse For Folder dialog window. Browse to the folder containing the image. To choose this folder containing the image, just click once on its name and then click OK. Your image should now appear in the folder display window to the right of the Organizer window. To copy your image to the main working window, just drag the image to the window. That is, click and hold down the left mouse button over the image and while holding down the left mouse button, drag the image to the working folder. Release the left mouse button and the image is placed. Note that the picture of the image is still in the folder display window so we have not removed it from its folder..

To illustrate changing a color into a transparent color, I will use Smiley as the example. Here are the steps:

1. With Smiley displayed in Paint Shop Pro, choose Save As from the File menu. This will display the Save As dialog window.
2. In the Save as type box, make sure it reads GIF Graphics Interchange Format (*.gif) as we are saving a GIF image. If it does not say this, click into the box and choose this GIF file type. If you choose to save the image as a jpeg image, you will not be able to choose a transparent color.
3. Now click on the Options button located below the Help button. This will display the Save Options dialog window which is:

   

4. In the Version section, make sure that Version 89a is selected. This GIF format was standardized in 1989. There was a list of format standards and transparency was the first part of the list - thus the "a" part. GIF89a supports animation as well as single color transparency. 87a is the earlier version of the GIF format and does not support transparency or animation. 89a adds support for transparency and animation and is the more recent version of the GIF format. For more information on these formats, just click on the Help button located under the Cancel button.
5. In the Interlacing section, an interlaced image loads on a web page first as a low resolution image, then slowly becomes clearer. This is also known as the Venetian Blind load effect. An interlaced image allows viewers to get an idea of what the image looks like before it is finished loading. Only GIF images can be interlaced. Often interlaced images are used in displaying larger images that take a little longer to completely display - but not for displaying a background image. Thus if you have a larger image, you may want to choose interlaced. Non-interlaced means that we do not want the Venetian Blind load effect. Non-interlaced images are best for small images because small images load quickly. So in the Interlacing section, select Noninterlaced. Smiley is a small image and so there is no need to display it interlaced.
6. Now click on the Run Optimizer button. This will display the GIF Optimizer dialog window which looks like:

   

   Note that this window contains four tabbed pages where you control the transparency, the color, and the format options. The fifth tab displays estimated download times of the image at various modem speeds and is for your information only. You can also use this tab to decide if there needs to be any further compression.

7. In the first tab, the Transparency tab, (which is the one being displayed in the above image), there are a number of choices. Note that you can choose to save your image as a GIF file without a transparency. In this case, you would choose the None option. Note also that the color red is displayed in the rectangle beside Areas that match this color. Make sure that the radio button beside this option is selected as we want to make this color transparent. Here is how you choose the color that you want displayed in the box. That is, here is how to choose the transparent color.
8. When you move the cursor over the original Smiley image (smile.gif) in the main working window, it turns into an eye-dropper. Click the eye-dropper on a color and that color is immediately transferred to the box beside the words Areas that match this color. This color will then be the transparent color. At the top of the GIF Optimizer dialog window are two large Preview windows. The preview window on the left displays the current image and the preview window on the right displays the resulting image with the transparency added. Now click somewhere on the color red in the smile.gif image in the main working window, and you will see the color red immediately displayed in the box beside Areas that match this color. Note also that the color red in the resulting preview window has been replaced with a light colored checker board background. The checker board background will not be displayed in a browser. The checker board indicates the parts of the image that are transparent.
9. In the GIF Optimizer dialog window leave the Tolerance setting at 1. However, you can change this setting to a tolerance factor that indicates how closely colors much match the selected color before they become transparent. At lower settings, only pixels of very similar colors also become transparent while at higher settings, more pixels become transparent.
10. All the other settings can also be left as is. Note: Click on Use Wizard if you would like to use the Wizard to guide you through the steps in making the red background transparent. You should take some time to click on each of the other four tabs to see these other pages. If you want to learn more about what is involved in these pages, click on the Help button at the bottom of the GIF Optimizer window. The Paint Shop Pro Help window is very good and gives a good understanding of the various options in these tabbed pages.
11. When ready to proceed, click on OK and the Save Copy As dialog window is displayed.
12. If you want to change the folder, you can now browse to the folder where you want to save the new image.
13. In the File name box, give the transparent image a new name if you want to preserve the original image. Otherwise you will be replacing the original image with the transparent image.
14. Click on Save and the image is saved with the transparent color. If you save the transparent image in the same folder as the original image and choose a different name for the image, you will now see two images in the Organizer window -- the original image and the transparent image. You will also note that the transparent image now shows a black background. This black background indicates the transparent part.
15. To see your image with the transparent background, simply load it into your browser or try it out on a web page.

After you select your preferences for screen captures, you can then make screen captures while working in another program. So before we can use the Screen Capture function, we need to select the type and method of capture in the Capture Setup dialog box. You can then make a capture immediately or activate it later as needed. To setup the screen capture, here are the steps:

1. Choose File -->Import --> Screen Capture --> Setup. This will display the Capture Setup dialog window which looks like (this picture was created with a screen capture):

   

2. In the Capture section we select the type of capture.
   • Area - lets you control the size of the capture area.
   • Full screen - lets you capture the entire screen.
   • Client area - lets you capture the workspace of the active window.
   • Window - lets you capture the entire active window.
   • Object - lets you capture a feature or group of features.
   The Area option gives the most flexibility so leave this choice selected.
3. In the Activate capture using section, you need to select a method to use to activate a screen capture. The choices are:
   • Right mouse click
   • Hot key
   • Delay timer

   Most people will choose either Right mouse click or Hot key to activate the screen capture. Choose Hot key.

4. You now have to indicate which Hot key you want to use. The choice that is displayed is F10. If you click into this box, you will see that there are a lot of choices. Let's choose the F11 option. Thus our Hot key will be F11. This is what you should now have:

   

5. In the Options section you can include the cursor in the capture and also include multiple captures. Note: You cannot include the cursor in an Area type capture.
6. You can now activate the screen capture function from this dialog window by clicking on the Capture now button or close the dialog window without activating the function by clicking on the OK button. Note that you can again receive more information on all these options by clicking on the Help button. We will not do a capture at this time, so click on OK.

MAKING A SCREEN CAPTURE

Here are the steps to create a screen capture:

1. First, open Paint Shop Pro.
2. Now Open the application program from which you need to capture something - whether you want to capture a full screen or just part of a screen.
3. Next, switch back to Paint Shop Pro. To initiate the capture, choose File -->Import --> Screen Capture --> Start. When you do this, you will be immediately switched back to the application program you want to capture from (the one you opened in step 2).
4. Press F11, our Hot Key setup. The mouse pointer turns into a cross-hair. If you chose Right mouse click to activate screen capture, then you need to right-click instead of pressing the F11 key.
5. Now click once with the left mouse button at the point you want to begin the capture. That is, move the cursor to where you want to create a corner of the screen capture and click with your left mouse button. This action starts the actual screen capture.
6. Next, drag out the area you want to capture. That is, move the cross-hair cursor to create a rectangular outline of the capture area. Note that the pixel size of your image increases as you drag out the area.
7. When you have finished dragging out the area to be captured, click again with the left mouse button. That is, left-click the mouse to end the screen capture. As soon as you do this, the screen captured image will be displayed in Paint Shop Pro.
8. You can now save the image by choosing Save As from the File menu and following the procedures described in the above section on saving an image. The name assigned by Paint Shop Pro will appear in the File name box and will have the extension .pspimage indicating that the file type is a Paint Shop Pro image. You can change the file type to another format such as GIF by clicking into the Save as type box and choosing GIF Graphics Interchange Format (*.gif). You can also change the image name or use the one assigned by Paint Shop Pro.

There is also a very good Help section on Screen Captures. To see this Help section, just choose File -->Import --> Screen Capture --> Setup to display the Capture Setup dialog window, and then click on the Help button located beside the Cancel button.

| Back to the top of the page |

| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Fifteen |

The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2009 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca