How to Make an Arrow Button in Paint

How to Make an Arrow Button in Paint thumbnail
Create an arrow button to use on your website.

As image-editing software goes, Microsoft Paint is among the simplest in the business. If you have the patience, you can make some really neat art with Paint. This application really shines when you're making simple things, such as website buttons and small graphics. While Paint cannot animate these buttons, it is more than capable of creating the individual frames.


    • 1

      Open the "Image" menu in Paint and then click "Attributes." In the pop-up box, click the radial button beside "Pixels" and enter the number 61 in the box for Width and 41 in the box for Height. Click "OK."

    • 2

      Click the Magnifier tool and the largest magnification available -- typically "8x." You may need to use the Magnifier tool in the canvas area to zoom in, but more often than not, simply clicking the magnification factor will do the job.

    • 3

      Select the foreground color and then the Line tool. Draw a line from top to bottom starting at the coordinates 35,0 and ending at 35,40. Make sure that the line stays straight and unbroken.

    • 4

      Draw a line from 0,20 to 60,20; this is the center line of the arrow.

    • 5

      Draw diagonal lines from 35,0 and 35,40 to 55,20 to form a right-facing triangle with a line through its center. Using the line tool, right-click the pixel to the left of the point of the arrow (54,20), hold the right mouse button down and drag the line to the left, stopping before you hit the vertical line (36,20). You should have a triangle with a line running to the left at this point.

    • 6

      Draw straight lines along the following coordinate paths to add a rectangular back to the arrow: 35,10 to 5,10; 5,10 to 5,30; 5,30 to 35,30.

    • 7

      Use the Eraser tool to remove the line running from 35,11 to 35,29.

    • 8

      Draw lines along the following coordinates to create an outline within the original arrow: 37,12 to 7,12; 7,12 to 7,28; 7,28 to 37,28; 37,28 to 37,35; 37,35 to 52,20; 52,20 to 37,5; 37,5 to 37,12.

    • 9

      Open the "Colors" menu and click "Edit colors." Click the button labeled "Define custom colors" in the pop-up window, and adjust the slider on the right-hand side up or down the scale for a lighter or darker shade of the color you used to draw the double arrow. Click "OK" when you have a color you're satisfied with.

    • 10

      Click the Fill With Color tool and use it to fill the space between the two arrows with the new foreground color you just selected. Be careful not to click on the arrows themselves, or you'll have to click "Edit," "Undo" to correct the mistake.

    • 11

      Go back into the Custom Colors box ("Colors," "Edit Colors," "Define Custom Colors") and adjust the slider again in the same direction as before. Click "OK" when you're satisfied and then use the Fill With Color tool to fill the inner space of the arrow with the new color.

    • 12

      Find out what color your Web page's background is and use that color to fill in the white background of the arrow you've drawn. If the site background is white, you can leave it as-is. If the background is given in RGB notation, you won't have to change anything; you can plug those numbers into the Red, Green and Blue boxes in Custom Colors. If they're given in hexadecimal (1F2B3A, for example) you'll need to convert them to decimal before plugging them in. To do this, open Calculator, set the view to Scientific, click the radial button for Hex, type in a single hex pair (1F, 2B, 3A) and then click the radial for Dec to convert (1F becomes 31, 2B becomes 43, 3A becomes 58). Do this for all three number pairs in turn, then plug them into the RGB Custom Colors boxes.

    • 13

      Save the file as either GIF, PNG, or JPG format by clicking "File," "Save As" and then clicking the arrow beside the bottom drop box (the one that says "Save as type").

Tips & Warnings

  • There are hundreds of ways to draw arrow buttons, ranging from the simple one described here to monstrosities that require Flash to animate. Don't be afraid to experiment.

Related Searches
  • Photo Credit NA/ Images

Related Ads