Internet Tip - Ultimate Paint Tips for Webmasters

We apologize for the interruption. However, seabreezecomputers.com has been offering free tools and downloads for many years. Unfortunately, server expenses are now starting to exceed revenue earned. If you appreciate the free tools and downloads at seabreezcomputers.com please consider making a donation.

Here I will be discussing Ultimate Paint, which can be downloaded here: http://www.ultimatepaint.com/download.php. Make sure you scroll to the bottom of the page and download Ultimate Paint Standard 2.88 LE (Freeware Edition).

Ultimate Paint is a nice program because it has many features that Ms Paint does not have. It can draw lines and shapes like Ms Paint but it can also save transparency information for GIF and PNG image formats, and it has JPG optimization.

Pros:

Somewhat small in size considering what it can do. Only 1734kb.
Screen Capture

Many graphic formats supported including transparent background for GIF and PNG.

Saves to GIF and PNG without degrading the colors unlike MS Paint.

Drawing tools such as lines, freehand, solid fill.

Crop, resize, rotate, and zoom functions.

Add background transparency to GIFs and PNGs.

Has JPG optimization features when saving.

Cons

Does not have an option to capture the mouse cursor along with the screen capture.

There is a preview for JPG optimization, but it is a small preview so you really can't tell what the image will look like.

Here are a few things I like to change to get started.

I don't like the ruler so I turn it off. Click on Options -> Ruler.
I like to see where my pointer is in the picture in pixels instead of inches. Click on Options -> Preferences -> Interface. Under Measurement Unit select Pixel and click OK.
If you load a big image Ultimate Paint likes to zoom out on the image so it fits in the screen. I like to start looking at a new image at the normal viewing size and then just use the scrollbars to view other parts of the image. Click on Options -> Preferences -> Interface. Check Fixed Zoom for new images and make sure it is set to "1" and then press OK.

Our aim here is to take an icon from a webpage on the web and turn it into a GIF or PNG image with a transparent background so we can use it as a button on our website. To do this we will need to 1. right-click on the icon and click on "Save Picture As" or take a picture of the website (screen capture) 2. crop the image to the size of the icon 3. make sure the background is all one color 4. save the image with the background color set as transparent.

1. As an example we will use the Windows Live.com icon from http://www.live.com/. At live.com right-clicking on the image does not give us an option for "Save Picture As..." so we will simply capture the screen by using the key on our keyboard labeled Print Screen.

2. Now we will open up Ultimate Paint and paste the screen capture into the program (Edit -> Paste).

To crop the image click on the Select Rectangle tool and then simply click at one corner of the icon and drag to another corner of the icon drawing a box around the icon.

Now click on Edit -> Copy. Then click on Edit -> Paste As New. You will now see an image of just your selection. Go ahead and click on the Maximize button for the window so you can see all your paint tools.

3.The dark blue background is where we want it to be transparent in our saved image. Zoom in on the image about 4 or 5 times. Select the Solid Fill tool. There are now two options we will want to set, Threshold and Transparency.

Transparency - We want a transparent background, so we are going to be painting or filling in the background with a completely transparent color. A transparency value of 0 means no transparency, and a transparent color of 255 means completely transparent. So set the transparency value to 255.

Threshold - The threshold value tells the solid fill tool how close the colors need to be in order for the solid fill tool to fill it with the selected color. If the value is 0, then the colors that we click on in the image need to be an exact match in order for the solid fill tool to paint them. A value of 255 means we would wipe out just about every color. So we have a few varying degrees of dark blue in the background. If we want to make sure we fill most of it with a transparent color we would want to set the threshold to about 240. So set the threshold value to 240

Now click somewhere on the blue background of the image. Most of the background will show a checkered pattern. This means those areas of the image are now transparent. There may still be some dark areas around the icon that we want to make transparent. To do this we will need to change the threshold otherwise we might wipe out part of the icon. Change the threshold value to 20.

Now slowly click on each little dark spot that you think needs to be transparent. If you mess up you can always undo your mistake by clicking on Edit -> Undo.

Now click on File -> Save As.... Under Save as type: select GIF or PNG. Check the box next to Transparent. (Note: If you select PNG as the file type then you must select 256 colors in order to check the transparent box.) Then type in a file name such as liveicon and press Save.

If you saved it as GIF it would look similar to this:

If you saved it as PNG it would look similar to this:

(Problem: IE 6 and below will not show the PNG transparent colors as transparent unless you change the color depth of the PNG image to 256 colors (8-bit) instead of 24-bit colors. Ultimate Paint allows you to save transparency with 32-bit PNGs, but the transparency will not display in Internet Explorer 6. Firefox will display the transparency fine, but the best way to have a transparent background on your PNG image in both browsers is to make sure you save it with only 256 colors and then check the transparent box.

So now we want to take our image and shrink it to a decent size to use as an icon in our webpage. So first we need to load the image in IrfanView, File -> Open....

To shrink the image click on Image -> Resize. Make sure Keep Aspect Ratio is checked. Change SizeX to 22. SizeY will change automatically. Now click Apply.

Now resave the image. File -> Save as.... Make sure that Transparent is checked and that the colors are set to 256 Colors. Click Save.

Now the icon should like this:

To capture a screen shot with Ultimate Paint click on Desktop -> Capture.... Make sure Hot Key is selected. The default hot key is Ctrl + A. Click on Capture.

Now go to any webpage or your desktop or a program and press Ctrl + A and Ultimate Paint will pop up with a copy of the screen. You can now edit and crop the picture and then save it.