Internet Tip - Ms 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.

Learn to take advantage of the zoom tool when adding fine touches to pictures or when creating small icons.

When I need to create a small graphic or icon for a website I usually just use Ms Paint. I zoom in as far as I can go which is 8x with Paint. Then I draw an object.

As an example, one time I needed to make VCR type rewind and fast forward buttons. This was easily done in Ms Paint.

First I set the size I wanted the icon to be by clicking on Image -> Attributes. I set the width to about 50 and the height to about 25.

Next I used the Magnifier (Zoom tool) to set the magnification to 8x. Then I used the "Rounded Rectangle" tool to draw the shape of the button. I used the color gray to draw the button shape. For some reason Paint's filled in rounded rectangle doesn't draw a nice shape so I used the default mode of just drawing the outline. With the "Rounded Rectangle" tool selected I clicked on the upper-left corner of the drawing board and dragged the mouse to the lower-right corner.

Then I had this:

Then I filled in the rectangle with the "Fill with color" tool .

Then I had this:

Then I used the "Line Drawing" tool to draw a line straight up and down and then I drew another line next to it but one dot shorter on both sides. And another one next to that, and so on until I made a triangle.

Ex:

I next used the "Select" tool to draw a box around the arrow so I could copy it for the next arrow in the VCR fast forward button. After drawing the box click on Edit -> Copy to copy the arrow to the clipboard. The click on Edit -> Paste to paste a copy of the arrow on the drawing board. Then you can move the copy to another place by dragging it and placing it in front of the other arrow.

Ex:

The arrows were not centered on the button so I used the "Select" tool again to copy and move both buttons to the center. I then drew a grey filled-in rectangle over the old image of the arrows.

Now I had this:

This was all very easy with the Magnifier (zoom tool) but would be very difficult without it. Oh, and it is easy to make the Rewind button, just flip the image. Click on Image -> Flip/Rotate. Select Flip horizontal and click on OK.

Our aim here is to take an icon from a webpage on the web and turn it into a GIF or PNG image and make sure the background is all one color so we can use it as a button on our website.

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 Ms Paint and paste the screen capture into the program (Edit -> Paste).

To crop the image use the Select tool . However, since we just pasted an image the Select tool is already selected. If you try to click on the screen while the Select tool is selected it will just move around the image we pasted. So first select another object such as the pencil and the click on the select tool again.

Then 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 -> Copy. This puts our selection into memory. Then click on File -> New. If it asks if you want to save changes you can click on "No" because we don't want to save the whole screen we captured. If the current width and height of our new drawing board looks bigger then the size of the icon you will want to change the drawing board to a smaller size: Click on Image -> Attributes.... Change the Width to 1 and the Height to 1. Make sure Units is set to pixels.

Now click on Edit -> Paste. Our small icon will now be pasted in the paint window.

We want to take the blue background, which has various colors of blue in it and turn it all white. So zoom in as far as you can by clicking on the zoom tool and then select 8x.

Change the drawing color to white by clicking on the white square down in the color palate. Then select the "Fill with Color" tool . Now start clicking on all the 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.

If it takes too long with the "fill with color" tool then you can also try using the pencil or the eraser. Be careful to only turn the background white and not to erase the icon. Now that you have the background all one color you can save the image.

4. 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).

Now the image looks like this:

Now we want to take our image and resize it to a proper smaller icon size. This is easy in Paint. Click on Image -> Stretch/Skew. Change the Horizontal to 50% and the Vertical to 50%. Then click on OK.

That will make our image half the size:

There is no screen capture tool built-in to Ms Paint, so to capture the screen you will have to use Windows built-in screen capture function, the Print Screen key.

Go to any website, your desktop, or a program and press the Print Screen key, then open Ms Paint and click on Edit -> Paste.

Tip: When you first paste an image into paint, paint selects the image with the select tool so you can move it around the drawing board. If you want to start editing the image or selecting another part of the image, make sure you turn off the current selection by either selecting a different tool on the Tool menu or by pressing the ESC key.

Back to www.seabreezecomputers.com