Text Images Tutorial

You Don't Have to be a Computer Genius to...
Create a Text Image in Photoshop!!!

Previous Article<<<

Next Article>>>

Have 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!!!

Here's 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.

My Tools:

Windows 98
Web2010 as my hosting company, using UNIX
WS_FTPLE (32-bit) for my file transfer protocol
Dreamweaver as my web page designing software
Photoshop 5.5
REMEMBER...Directories (or Files) should always be named in small letters not CAPS!

Summary:
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.

Step-by-Step:

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.