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.
Maybe one day we'll be able to use a GIF to
create a QR code with QR code
software that is more unique and personalized.
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
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:
The image background should be a single color.
The color designated for the background should not be used elsewhere
in the image or used extensively elsewhere in the image.
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
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
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 X4
(version 14) which is the version used in these lessons. In these lessons, we will simply
refer to Corel Paint Shop Pro Photo X4 as Paint Shop Pro.
If you do not have a paint program, you can download one now by clicking on the appropriate
If you do not have an image to work on, just save Smiley at the top of
the page with the red background. To do this, click on Smiley with the
right mouse button and then from the pop-up menu, choose Save
Image As, or Save Picture As (one of these choices or a
similar choice should be there). You can then choose a folder and
save the image. Note that the image is named smile.gif.
Now Open Paint Shop Pro. When you do this, a "Getting Started"
window opens up. You may wish to study the options in this window but for this
lesson you can ignore this window so click on the Close button located in the
lower right corner of the window. Note: If you don't want to see this
window open up each time you open Paint Shop Pro, check the little box in the
lower left corner beside the statement Don't show this window again. If
you want this window again, you can always get it back by choosing Help -->
Getting Started --> Workspace.
Note the three tabs at the top of the window.
They are Manage, Adjust and Edit. We are currently in the
Now load the image that you
want to create a transparent color for. I will use our Smiley image named
smile.gif as the example. In this Manage window, you have a choice of
three different methods to load our smile.gif image.
Choose Open from the File menu (File --> Open). This
will display the Open dialog window. Browse to the folder
containing the gif image named smile. Click on the image name and
then click on Open. The image should now appear in the image editing window.
The second method is to use the Navigation panel located on the
left side. It is also known as the Navigation Palette. The
Navigation panel has two tabs. One is called Collections and the
other is called Computer. The default view is the Collections
tab. The Collections tab displays your folder structure. If you can't
see the folder that Smiley is in, click on Browse More Folders (or
simply click on the plus sign (+) beside Browse More Folders).
This will display the Browse For Folder dialog window. You can then
browse to the folder containing your image. When you click on the folder
containing the image and click on OK, the contents of the folder
will appear at the bottom in the Organizer Palette. Should you lose the
Organizer Palette you can get can it back into view by choosing View -->
Palettes --> Organizer. So, the Collections list in the Organizer only
lists folders while any images in a folder is displayed along
the bottom in the Folder Display window.
You can also locate an image by clicking on the Computer tab
located beside the Collections tab. You can then use this tab to locate a
We do not want to Manage anything at the moment and we do
not want to Adjust the Smiley image. We do, however, want to Edit our
Smiley image so click on the Edit tab. Smiley now appears in the Edit
window and also in the lower Organizer Palette. This whole Edit
tab is your work area
for editing pictures. 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.
There is also a Learning Center on the right side which you can
close. You can do that by clicking on the little X close button on
the Learning Center Title bar. This makes for a larger editing area. You can also
close the Learning Center
window by choosing Help --> Learning Center. That is, click on the
Help tab located on the menu toolbar and from the drop-down menu, choose
Learning Center. When you do this, you will remove the
checkmark that you see beside the name Learning Center. Removing the
checkmark beside Learning Center indicates that it is closed. If you want
the Learning Center back in view again, just choose Help --> Learning Center
again to bring back the checkmark.
You can also choose your Workspace Color. To do this, click on the
View tab. Note at the bottom of the drop-down menu, is the choice
Workspace Color. Move your cursor over the words Workspace Color
and another menu pops up with the choices Medium Gray, Light Gray
and Blue. Note that Dark Gray is the current theme as indicated by
the dot beside the name. Take a moment to experiment with these choices and then
decide on which one you wish to use.
To illustrate changing a color into a transparent color, I will
use Smiley as the example. Here are the steps:
With Smiley displayed in the Paint Shop Pro editing window, choose Save As from the
File menu (File --> Save As). This will display the Save As dialog window.
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.
Now click on the Options button located below the Help button.
This will display the Save Options dialog window which is:
In the Version section, Version 89a should
already be 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
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, Noninterlaced should
already be selected.
Smiley is a small image and so there is no need to display it interlaced.
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.
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. This rectangle is called the
Color Swatch. 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:
When you move the cursor over the original Smiley
image (smile.gif) in the Image Editing window (not the one in the
GIF Optimizer window),
it turns into an eye-dropper.
Note: if the GIF Optimizer window is covering the Smiley image in
the Image Editing window so that you can't see Smiley, simply drag the GIF
Optimizer window until you can see Smiley. Now on the Smiley image, click the
eye-dropper on the color red and that color is immediately transferred to the box
beside the words Areas that match this color. That is, the
color swatch displaces the color you picked. This color will then be
the transparent color. At the top of the GIF Optimizer dialog window are two large
Preview windows, labelled Before and After. The
on the left displays the current image and the After window on the right
displays the resulting image with the transparency added. Note that the color red in the
Before window has been replaced with a light colored
checker board background in the After window. The checker board background will not be displayed in a browser.
The checker board indicates the parts of the image that are transparent.
In the GIF Optimizer dialog window, leave the Tolerance setting at
1 as shown in the above picture. 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, pixels of more similar shades of the color become transparent.
All the other settings in the Transparency tab can also be left as is. If we
were to save the image now, it will appear with a black background. We
don't want that to happen so click on the Partial Transparency tab. Note
in the section titled, Would you like to blend the partially transparent,
Yes, blend with the background color is selected. Note also that the
Blend color is black. That is what is giving our black background. If
your web page has a white background, click on the Blend Color box and
from the pop-up color palette, choose the colour white. White is the
little rectangle in the bottom right corner (R:255; G:255, B:255).
Note: you can also 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 options. If you want to learn more about what
is involved in these tabs, click on the Help button at the bottom
of the GIF Optimizer window. The Paint Shop Pro Help is very good and gives
a good understanding of the various options in these tabbed pages.
When ready to proceed, click on OK and the
Save Copy As dialog window is displayed.
If you want to change the folder, you can now browse to the folder where you want
to save the new image. 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.
Click on Save and the image is saved with the transparent
color. If you gave the transparent image its own name, you can see both the
original smile.gif image and the one with the transparent background in
the Organizer palette at the bottom of the screen.
To see your image with the transparent background, simply load it
into your browser or try it out on a web page.
Paint Shop Pro's Screen Capture function takes a picture of all
or part of the screen and opens it in Paint Shop Pro. These pictures, called
screen captures, can be a part of a screen or of the entire screen.
You can capture an active window, or part of the contents of an active window.
You can capture a part of a picture or all of a picture. You can
also capture the controls of a program, such as a toolbar.
For this lesson, I captured parts of Paint Shop
Pro, saved them as GIF images, and placed them where
I needed them in the lesson.
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:
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):
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.
In the Activate capture using section, you need to select
a method to activate a screen capture. The choices are:
Right mouse click
Most people will choose either Right mouse click or Hot key
to activate the screen capture. Choose Hot key.
You now have to indicate which Hot key you want to use. 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 the F11
function key. This is what you should now have:
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.
You can now activate the screen capture function from this dialog window by clicking
on the Capture now button, or you can close the dialog window without activating
the screen capture by clicking on the OK button. Paint Shop
Pro will save your settings when you click on OK. 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:
First 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. Display the page or image that needs to be captured.
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 page or image you want to capture from (the one you
opened in step 1).
Press F11, our Hot Key. 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.
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.
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.
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.
You can now save the image by choosing Save As from the
File menu and following the procedures described in the above
sections. The default file type is jpeg. 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
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.
This will generate a help section in your browser on the topic of screen