Internet Tip - Ultimate Paint Tips for Webmasters

Created: October 25, 2006
Last Edited: November 17, 2008
Subscribe to Internet Tips and Tools Feed
f Share
G+ Share
in Share
P in it

Here I will be discussing Ultimate Paint, which can be downloaded here: 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.

Here are a few things I like to change to get started.
  1. I don't like the ruler so I turn it off. Click on Options -> Ruler.
  2. 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.
  3. 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 icon from At 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.

Back to
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 0 comments.

Displaying first 30 comments.