thought the text on a website looked fuzzy. Would you like to put text on your
site that has the quality of an image? I wanted to add a quote to my website
and decided that it would look better as a photoshop image than straight HTML.
Do you know what I discovered?...YOU DON'T HAVE TO BE A COMPUTER GENIUS TO...Create
a Text Image in Photoshop!!!
a step-by-step guide. ONE DISCLAIMER, I WILL BE DESCRIBING THE STEPS I TOOK
USING THE WEBHOSTING AND SOFTWARE SERVICES I HAVE CHOSEN. IF YOU HAVE DIFFERENT
BACK-END SUPPORT, YOU WILL HAVE TO ADJUST ACCORDINGLY.
- Windows 98
as my hosting company, using UNIX
(32-bit) for my file transfer protocol
as my web page designing software
(or Files) should always be named in small letters not CAPS!
I created a text image in Photoshop and transported it as a GIF to the
"my images" folder in Dreamweaver. I then inserted that text image
in the page and FTP'ed that page to my remote site on Web2010's servers.
- Open Photoshop
5.5. Once you launch Photoshop 5.5., go to the menu option "File"
and click "New." A new image canvas will appear called "untitled."
You'll have to designate a size in pixels or inches for your image and select
RGB if you want the text to be in color (not black and white).
- Open Swatches.
Open the "color swatches" window and click on the color you want
the text to be. The color you choose will appear in the "tools"
window in the foreground box. The other box is the background color.
- Open Typing
Tool. Click the "T" on the tool box. A new layer is automatically
created on the "layers" window. Click on that layer and the Type
Tool Option box pops up.
- Type Text.
Pick the font you want to use and the size of the text and then begin typing
the words, sentence or paragraph you want. NOTE: You must first click "OK"
or "Cancel" to get out of the Type Tool Option Box. If your text
is getting too large for the background it's on, you can resize the canvas
by going to the menu option "Edit" and clicking "canvas resize."
(Note: Do not click "image resize" by mistake. "Image"
is all of the layers and "canvas" is just the background; if you
resize the image, the letters will get enlarged proportionately and your text
will still be too long for the background it's on.)
- Shrink Canvas
to words. Before exporting the image as a GIF, you'll want to save the
image using the least memory as possible. You should resize the canvas to
the exact size of the paragraph you typed. Go to the rectangle "Marquee"
and select the text. Go to "image" and click "crop." Your
new text image should be as small as it can be.
- Export as
a GIF. Go to "Save for Web" and name your image.
- To Make Transparent.
To make the text image sit on a transparent background, you accomplish this
when you are going to export the image as a GIF. First make sure the Background
layer is not checked and what you see is your text on the checkerboard background.
Go to "Save for Web" and change to a GIF in the drop down to the
right and click "transparency."
- Insert Text
Image. When in Dreamweaver, you can insert your new "text image"
just as you would any image.
© 2000-2001 Marlene Hollander. All rights reserved.