Tutorials Map Use the text navigation at the bottom of the page if you cannot see the map
Graphics Tutorials Map Use the text navigation at the bottom of the page if you cannot see the map
Web Graphics
Now that you've gotten familiar with the Tools you have on your Desktop it's time to apply that knowledge into making a Text graphic. Don't forget that it's best to have Photoshop open in another window and toggle back and forth while you work your way through these tutorials.

Select the Type Tool Type Tool, place the Cursor in the middle of your Canvas and click

You can now select your Font, Font Size and make any decisions about making it Bold or in Italics. You can also adjust the Leading (which is how close lines of type appear). This window also allows you to decide if multiple lines of text are Centered, Aligned Left or Right

You should make sure that you have the Auto Kern and the Anti Aliased boxes checked.

Once you've made those decisions, place your Cursor in the area at the bottom of the window and type the text you want.

When you are finished click OK and the Text will appear on your Canvas.


Use the Move Tool Move Tool to position the Text on your Canvas.

Color Selecton
To change the color of the text you will have to choose a Foreground color. If you look on the bottom of the Tool Bar you will notice two colors selected. The one on the top is the Foreground color and the one on the bottom is the Background color.

Color Palatte
To change a color use the Eyedropper Tool Eyedropper Tool to select a color from the Swatches palatte

Color Palatte You can refine your color choice from the Color palatte.
Or if you double click on the * Foreground/Background colors, the Color Picker window will appear. You can choose a color by moving the 'circle' in the window. Color Picker


Once you have picked the color of your text, and placed your text on the Canvas it's now time to Crop the image to the size that you want.

Marquee Tool Click on the Marquee Tool and change it to the Cropping Tool Cropping Tool

Draw a box around the text with the Cropping Tool place the cursor in the middle and click to crop your image. If you need to resize the box you can do that by clicking and dragging on one of the Handles *.

You now have a cropped text image.


Before you save this image you will need to Flatten the layers.



Now go under Image and change the Mode from RGB to Indexed Color.

You're almost done! Under File Choose Save As... and then save your text image as a .gif


You should choose to save this image as Web Palette.

You now have an Text Image for your Web page!


Export If you wish to make the background of your image Transparent you will need to Export this image as a gif89a


Pick up the Eyedropper on the GIF89a Export and click on the background color. This color will now be transparent in a web browser.

Congrats! You've now created a text image for your web page!

Web Building tutorials: Intro | Fonts | Backgrounds | Lists | Layout | Tables | Graphics | FTP
Photoshop tutorials: Getting Started | Text | Backgrounds | Filters | Icons | Photos & Scanning
Fireworks tutorials: Getting Started | Paths, Objects | Fills, Strokes, Effects | Text, Effects | Import/Export | Image Map | Slicing | Behaviors | Putting it all together

© 2005 Interactive Mystery Productions Ltd.
A Company Limited by Guarantee
Registered in England & Wales No. 4792272
All Rights Reserved