|
Here I will be discussing IrfanView version 3.98 which is free and can be downloaded here: http://www.irfanview.com/ or here: download.com. (Note: Be careful, during installation it tries to install Google Toolbar for Internet Explorer and Google Desktop Search. Be sure to uncheck these during installation). IrfanView is a powerful program for viewing and slightly editing some graphic images. |
Pros:
Cons
- Small in size. Only 884kb.
- Screen Capture with mouse cursor in the capture area
- Many graphic formats supported including transparent background for GIF and PNG.
- Saves to GIF and PNG without degrading the colors unlike MS Paint.
- Crop, resize, rotate, and zoom functions.
- Add background transparency to GIFs and PNGs.
- Has JPG optimization features when saving.
- Tries to install Google Toolbar and Google Desktop Search during installation.
- No painting tools such as line drawing, paint fill, etc.
- Does not have preview for JPG optimization.
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 IrfanView and paste the screen capture into the program (Edit -> Paste).
To crop the image simply click at one corner of the icon and drag to another corner of the icon drawing a box around the icon. Don't worry if your box isn't even around the icon. You can resize the box by clicking on an edge and dragging it.
Now click on Edit -> Crop selection.
3.The dark blue background is where we want it to be
transparent in our saved image. So lets do a test and save it
and see if that blue background is all one color. Click on
File -> Save As.... Select GIF in Save as type:.
Over on the right you will see some options. Under GIF: check
Save transparent color and then check Choose transparent
color during saving. Type in a file name such as liveicon
and click on Save. Now it will show us a zoomed in image
of the icon and we can click anywhere on the blue background to
set the transparent color. You will notice however that the
background is not just one solid color. Go ahead and click on the
blue color that you see the most.
So now if we use our image in our web page it looks like this:
That won't do at all. So we will have to make the background
all one color. There are three ways to do this, a slow way and a
fast way and a way with PNG. The two first ways use free programs,
but one program you already have included in windows (Ms Paint)
and the other you have to download (Ultimate Paint).
Click on the plus to see the slow way to make the background
of the image all one color using MS Paint.
Click on the plus to see the fast way to make the background
all one color using Ultimate Paint.
Or click on the plus to see the way to make the background
all one color using IrfanView and saving as PNG.
Now we want to take our image and resize it to a proper smaller
icon size. This is easy in IrfanView. Click on Image ->
Resize/Resample.... Make sure Preserve aspect ratio
is checked. Under Set new size: make sure Pixels is
selected and change the width to 25. The height will be changed
automatically. Now click on OK.
Now if we save the image and display it in a web page it looks
like this: 
[+]
[+]
[+]
Oops. We forgot to decrease the color depth to 256 colors and
it is still too big. So now I will shrink it to a width of 22 and
decrease the color depth to 256 colors:
|
User Comments
|
and click
on the color blue that you see the most of in the background so
that we will be painting with that color. Now select the "Fill
with Color" tool
. Now start clicking
on all the other colors of blue on the background so that you
will be making it all one color. Be careful not to click on any
of the colors in the icon itself, however if you do you can always
click on Edit -> Undo. This is a slow time-consuming
process, but it is free. Now that you have the background all one
color you can save the image. Click on File -> Save as....
Ms Paint likes to save the extension with uppercase letters (GIF)
so I like to type in the whole file name like: liveicon.gif
so that file extension will be lowercase (gif).
As you can
see I missed a few of the blue dots because I got lazy. So I will
have to go back into Ms Paint and get the again.
