Add Text to a Button Image

You are here: 

  Add Text to a Button Image

from "Sandra's Corner of the web"

I tried to write this little tutorial being as general as possible, to apply to any image editor you may be using.

Before After

I had Image Composer in mind, when I wrote this, but that's just because that is the editor I happened to have handiest. If you are familiar with a different image editor, such as Photoshop, the steps will be the same, but specific command naming or terminology may differ slightly. Just be sure to save intermediate steps, (all the "duplicate" I have you create) so you can reuse your creation steps for additional buttons or for tweaking along the way.

-- Sandra

Here's How

  1. Create of Copy any image you want to use for a button and paste it to your image editor.

  2. Duplicate it.

  3. Move the duplicate to another location, off to the side of your work area.

  4. Select it and note its dimensions.

  5. Use the drawing tools to create a new shape the same size as the button image.

  6. Use the cutout tool to erase the contents of the image you just created, to make it transparent.

  7. Duplicate the transparency, and move it to the side, just like you did with the button image in step 3.

  8. Choose the color you want for your text. Usually, select a dark color if your image is light, a light color if your image is dark.

  9. Use a font that will allow your text to fit over the button (usually, 10 or 12 points is the largest you will use, but clarity depends on the font you choose).

  10. Type the text for your button.
    Tip: After typing the text, click away from the text, then re-select it to apply special effect to it as an image. Remember to duplicate the image, and set to the side, before making changes. You can always delete a copy, if you don't like what you see, but its no fun to start over, from scratch, if you mess up, so make copies of intermediate steps, just like you back up files before making big changes!

  11. Select the new text image and the transparency you created.
    You will now use them as layers.

  12. Center and group the text and transparency layers.
    Be sure the text image is on top.

  13. Duplicate the new group (just in case!).

  14. Center the grouped text/transparency over the button image.

  15. Group the text/transparency/button.

  16. Duplicate the new group.

  17. Does it look good? Is the text bright/dark enough to be easily read?
    You will require more contrast when placing text on a textured image, so now is the time to ungroup to lighten or darken.

  18. Make sure the button image, transparency, and the text are all selected, then save the selection as a .gif or .jpg image. This will "flatten" all three layers together, and the image will no longer be editable. That's why we saved copies of all the parts created along the way!

  19. You can use the "parts" you set aside during this process to create additional buttons with text. Just be sure to save the whole thing in the "native" file format of your image editor. In other words, DO NOT save all the parts in either .gif or .jpg format, otherwise you will have an uneditable mess.

More on this web site

Home | What's New | More How-To's