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
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.
Create of Copy any image
you want to use for a button and paste it to your image editor.
Move the duplicate to
another location, off to the side of your work area.
Select it and note its
Use the drawing tools to
create a new shape the same size as the button image.
Use the cutout tool to
erase the contents of the image you just created, to make it
transparency, and move it to the side, just like you did with the
button image in step 3.
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.
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
Type the text for your
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!
Select the new text image
and the transparency you created.
You will now use them as layers.
Center and group the text
and transparency layers.
Be sure the text image is on top.
Duplicate the new group
(just in case!).
Center the grouped
text/transparency over the button image.
Duplicate the new group.
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.
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!
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.
on this web site
New | More How-To's