» » HTML-INTRODUCING TRANSPARENT IMAGES

0
A+ A-

INTRODUCING TRANSPARENT IMAGES


Here is Smiley without a transparent background: 
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 GIFimage 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 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 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 link:

Paint Shop Pro

Photoshop


CREATING A TRANSPARENT COLOR USING PAINT SHOP PRO

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 Manage window.
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.
  1. 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.
     
  2. 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.
     
  3. 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 folder.
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:
  1. 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 Asdialog 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, 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 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 theInterlacing section, Noninterlaced should already be selected. 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. 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 Before window 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.
  8. 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.
  9. 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).
  10. 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.
  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. 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.
  13. 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.
  14. To see your image with the transparent background, simply load it into your browser or try it out on a web page.

SCREEN CAPTURES USING PAINT SHOP PRO

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:

  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 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. 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:

     
  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 Areatype capture.
  6. 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:
  1. 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.
  2. 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).
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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 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. This will generate a help section in your browser on the topic of screen captures.

Share to:

Post a Comment

THANKS for comment!!!!

Subscribe to: Post Comments (Atom)
 
Top