How to Make an Image Map Layout in Microsoft Paint

Most professional web designers usually do not use Microsoft Paint, but for beginning web designers like you (and broke college students like myself), it is often the only image program we have to work with. That said, this tutorial will help you make a masterpiece with MS Paint---yours will be just as good as anyone else's, and you won't have to spend 600 bucks to get software to do it for you.

Note: The notes in parentheses during the steps are my special tips for you, so that you avoid designing hardships later on in your craft. Click on the small pictures for a bigger version in a new window.

Step 1. Open Microsoft Paint. You're faced with the white blankness of an empty canvas.

Step 2. Pick a color for your background.

(At this point, since you probably don't have a way to translate a specifically-generated color into HTML code, you're better off sticking with the general colors that Paint gives you.)

As you can see, I went with the rather deeply-pigmented true blue for my background.

Use the Bucket tool and dye the whole image in your chosen color.

Step 3. Pick another color, a color that contrasts sharply with the background color. This will be your text color for your image map.

(Your second color choice is completely up to you, but think about what colors you like to see used together in a website before you decide. Your favorite color may not always be the best choice. For MS Paint, it is not good to pick white for a text color, because the text box will also be white, and if you try to color back over the whiteness of the text box, it will destroy your text in the process. If you've chosen a dark background color, you can choose a lighter text color in the same shade or similar colors. Lighter background colors work best with darker text in shades of the same or similar colors.)

As you'll see in the next example, I chose a light blue for my text.

Step 4. Start placing the text for the title of your site--make a text box wherever you want the title, and then, even before you start typing, right-click on the text box. A little menu should come up with an option called "Text Toolbar" at the bottom. Click that option, and it will take you to the text formatting toolbar--you can pick what font you want, how big you want it, and whether you want it in bold, italics, or underlined.

In my example, I used a font I downloaded from DaFont.Com called Marriage-Script, set at Bold and 35-point.

Type in your title. When you're done, your text will be in a white box amidst the background color.

Bear with me, I know the image looks quite awful right now. We will fix it in the next step.

Step 5. Choose your background color again, and click the Bucket icon to fill in and around the text (to get rid of the white boxiness). Don't forget to click inside the spaces in the letters (like in the e's, p's and b's, for instance) to get rid of all the white. Yes, I know, it still won't look as nice as hoity-toity anti-aliased text, but don't sweat it--it'll be good enough.

Step 6. Make another text box---this one will be for multiple words, and will be your site's navigation (after all, this is why you are doing an image map, right?). Don't forget to select your font, size, and style by right-clicking the horrid white box and clicking "Text Toolbar." Do this step before even typing a word.

{You can choose the same font as the title or not---it is completely up to you. The same font on title and navigation can keep a site looking uniform and professional, but a different font can pop and draw users' attention to the navigation. Your choice!}

I chose Verdana, size 18, for my navigation.

Once you've placed and formatted your text box, start typing the words that you want your users to click on, pressing Enter/Return after each word.

(Don't worry if you've made the box too big---the box in my example is also too big for the navigation. We shall fix that as well, with the handy-dandy Bucket tool armed with your background color.

Step 7. Go through with your bucket tool and rid the text of the horrid whiteness again. It'll be a little more work than the first time, but it's worth it!

As you can see in my example, the Bucket tool makes a LOT of difference!

Step 8. Now for the actual creation of the image map. Set your cursor to the "Polygon Select" or the "Square Select" option--something that won't do something horrendous to your work if you accidentally click. Now, hover your cursor (DON'T CLICK) just to the top left of your first navigation word. See the numbers in the bottom bar of MS Paint?

Right there? Those are the coordinates of that point. Remember graphs in math? Yep, they're back again [no fun for us non-math people, lol]. The first number is how far from the left side of the image your cursor is placed; the second number is how far down from the top your cursor is placed. (First number= x coordinate, second number=y coordinate.) These coordinates work with the HTML code of an image map to tell viewers' computers where the links on an image are located. They are vital for an image map--if the coordinates are wrong, the "hot spots" or links will be in the wrong places on the image.

Write down the exact coordinates you see displayed on the bottom bar for the TOP LEFT of the navigation word. You want the cursor to be as close to the word as possible, but not actually on the letters.

Now, position your cursor at the BOTTOM RIGHT of the same navigation word, and write down those coordinates as well.

(Why do you only need the top left and bottom right? In an image map, the shape of your link will most likely be rectangular, and the web browser only needs two reference points to make a rectangular link.)

Cool! Now you've got your first word done for your image map. Do the same thing (top left, bottom right) for each word in your navigation, and make sure to write them down. Label each set of coordinates so you don't forget which word they link to.

Once you've done the last word in your navigation, you're done with the graphic portion of making an image map layout with MS Paint! YAY! Click on "Save As..." and then click the drop down menu beside "Save As Type" underneath the filename box. Choose to save your image as a JPEG or GIF--these files transmit the easiest over the Web. Name your file whatever you wish to remember.

Now, trot on over to the HTML section to find out how to code this image map.

Step 9 (EXTRA). You can leave the layout the way it is if you are going to do a transparent iframe or divided layer on top of the image. If you want a little more contrast or a different color for the iframe or div layer, you can add a rectangular box in a different color for the iframe. In my example, I added a big box in a bright teal to show you what it might look like. I've also added a white border around the teal box just to demonstrate other changes you could make to the image.