North and South pictures, icons, and avatars—Richard Armitage, Daniela Denby-Ashe, Elizabeth Gaskell, BBC miniseries. Sig files, avatars, graphics.

How to make a graphic signature or avatar using Photoshop Elements—fix a too narrow screencap.

From squished to fabulous—fixing up an image in Photoshop Elements, Page THREE.

<< Back to page TWO of tutorial | << Return to page ONE of tutorial

Applying text to your image

Photoshop makes it really easy to add text to your image. Click on the "T" symbol on the sidebar—circled in blue in the illustration below—or press "T" on your keyboard. This will activate the Text tool. Then simply click on your image (nearer to where you want your text to be is best, but anywhere will do). You will then see a blinking cursor (similar to what you see when you start to type in any text box or word processing program). In addition, Photoshop also creates a new layer for your text.

Choose the type of font you wish to use (top of menu—circled in green in the illustration) and the font size. As you type the desired word or words, you will see that the text is underlined (circled in red in above illustration). This is a feature of Photoshop—the text will not show as underlined in the finished graphic.

If you want to make your text larger, or a different size, highlight it and change the text size or style. If you wish to change the color of the text (for instance, make the text light-colored to show up on a dark background) click on the Text Color menu (circled in pink in below illustration) and pick a new color with the color picker that pops up.

You can edit your text at any time. Just click anywhere on the underlined text and a blinking cursor (orange arrow in above illustration) will show up. Add, remove text—whatever! Photoshop makes it very easy to do.

Move the text around to just the right spot on your graphic by clicking on the Move tool (looks like an arrow—at the very top of left-hand side menu). Your mouse cursor will turn into an arrow shape with a small four-headed arrow next to it. Drag the text anywhere you wish on the graphic. Release your mouse button and the text will remain in its new spot (until you move it again!).

I decided that the white text I used on my graphic was just too white. I wanted to dull it down a little. So, I lowered the opacity of the text by using the opacity tool (pictured above), which appears as a drop-down slider at the top of the Layers Palette. By the way, altering opacity in any layer (not just a text layer) is something you should learn—there are so many reasons to tweak and change the opacity of one or more layers of your images!

Layer Styles: Photoshop offers many "Styles" (more sophisticated effects which can be automatically applied to your text or images, found in the "Styles and Effects" menu). In Photoshop Elements, Layer Styles are more limited (compared to the full version of Photoshop), but some customization and tweaking is possible ("Layer >> Layer Styles"). However, the good news is that many people design additional "Styles" (which you can use in Elements), some which are very sophisticated and lovely and ready to use without further adjustments. Do a search on the Internet for free Photoshop Styles—there are many available out there!

An example of text enhanced using a Photoshop Style. This particular "style" (along with many others) is available in the bundled CD that comes with the Photoshop Wow! books.

Resize and finish the graphic.

Now that the text has been added to the graphic, it's time to save the original document one more time (you have been saving it after each major change or step you have made, right?) and then resize it to a smaller size. Then, go to "Layer >> Flatten Image." After you do this, all the layers you had before will be gone—all flattened into one layer.

Whatever you do, do NOT save the file again (unless you have renamed it) after you flattened it and resized it to a smaller size. You will overwrite the larger-sized file and lose all the layers and extra detail. In addition, remember this cardinal rule—always, ALWAYS save a copy of your unaltered original graphic, and give a new name to any file which you tweak and alter in Photoshop. You never know when you might want to go back to the original file and do something different with it.

To change the size of your image, go to "Image >> Resize >> Image Size." The "Image Size" menu will pop up. Make sure to keep "Scale Styles," "Constrain Proportions" and "Resample Image (Bicubic)" checked (circled in green in above illustration). When the "Constrain Proportions" checkbox is chosen, you will see little locks (circled in purple in above illustration) by the size menus.

When you type in the new height or width of your image, you will find that the other dimension (either width or height) will also adjust to a new size—thus keeping the proportions intact (assuming that you have the proportions locked).

After resizing the graphic, immediately go to "Filter >> Sharpen >> Unsharp Mask." Whenever an image is resized, it loses a little clarity. The "Unsharp Mask" filter is the best one to use to sharpen it back up a little. Apply the Unsharp Mask filter more than once if you feel the graphic could use it. If you go too far, press Apple + Z (Control + Z for Windows) to undo the last sharpen.

Optional Border: Sometimes a little border around a graphic avatar or signature is a nice touch. There are a lot of ways to make borders, but I'm going to show you an old-fashioned (but very versatile) method.

First, make a new layer ("Layer >> New >> Layer"). Then press Apple + A (Control + A for Windows). This will select the whole outline of the new layer. You'll see animated, dashed line (it's often said to look like "marching ants") all around the outside edge of your image.

"Marching Ants"

Making sure that the blank, new layer that you just created is active (remember, it will have a paintbrush image by it and will be highlighted in blue), go to "Select >> Modify >> Border." You will be asked how many pixels wide you want your border to be. You might want to choose a single-digit number if your graphic isn't very large (say, less than 600 pixels in length or width). Click "OK."

Whether or not you can see it, there will be a small border (in my case I think I chose a 6 pixel border) of "marching ants." Now you want to fill in this border with a color. Go to the color picker (pair of overlapping squares at bottom of left side menu). Click on the colored square that is on top. A color picker menu will pop up. Choose the color for your border (I chose an off-white).

Now, find the Paint Bucket tool or press "K" on your keyboard. Your mouse arrow will turn into a mini paint bucket. Zoom in on your graphic (choosing the Zoom tool on side menu, which looks like a magnifying glass) to make sure you aim for inside the border. Click once, and now the border of marching ants should be filled with the desired color. If your aim was bad and you didn't click inside the border (but instead made the whole layer a new color) press Apple + Z (Control + Z for Windows) and try again!

Press Apple + D (Control + D for Windows) to "deselect" (get rid of) the marching ants. Now you have a border around your graphic. You can leave it as-is, or you can blur it, apply some sort of other filter to it, or change its opacity. In my graphic, I blurred the border a little, which I think looks very nice.

Saving the file for the web: After you have resized the graphic and applied all other filters or features you wish to have on it, you will need to prepare it for your web site or blog. Go to "File >> Save For Web." Photoshop will offer you many different options for your graphic. Do you want it to be a GIF file? Or a JPG? You will see a drop-down menu that will allow you to save your file as JPG, GIF, or even PNG (this is also a good file format, but less standard at this time). The safest route at this point is probably JPG.

If you choose the GIF file format, however, you will have to make other choices—like, how many colors the graphic can use (between 2 and 256) and whether or not "transparency" is enabled. You don't need to worry about any of these options for the sort of graphic you have created in this tutorial. Unless you have a special reason for doing so, stick with JPG. Choose a quality setting of 50% or above if possible.

The finished graphic: Unsquished, resized to smaller proportions, special "arty" filters added, and with a subtle border.

Mr. Thornton (Richard Armitage) from the 2004 BBC Miniseries "North & South."

It's time to try these techniques yourself, using Adobe Photoshop Elements!

Software from the Adobe Photoshop family (either the full version, or the less expensive Photoshop Elements) are an excellent choice for creating graphics. Photoshop has a prestige that other graphics programs—no matter how nice they might be—simply do not possess. More books, tutorials instructional videos and other resources are available for Photoshop products than for any other competing graphics program. Photoshop is the "industry standard" and the automatic choice for most serious (and not-so-serious) digital graphics work. When deciding to invest in graphics software, Photoshop is the way to go—and the price of Elements is as affordable (or even more so) than other similar programs.

There are several versions of Photoshop Elements available. I've used an older version (Elements 2) with good results. Photoshop Elements 4 is the current "latest" edition of the software, but as with everything, a new version is bound to come out soon! Don't hesitate to use version 3 (which is what I used in this tutorial) or even version 2 of this software. You can get some great deals on older or used versions of Photoshop.

Get Photoshop Elements 3 for Macintosh.

Get Photoshop Elements 4 for Windows.

An excellent manual for learning Photoshop Elements.

The limitless potential of Photoshop Elements: Some examples of simple and more creative uses of Photoshop to make signature graphics or avatars.

From the old '80s series "Moonlighting" with Cybill Shepherd and Bruce Willis.

A pretty straightforward graphic with a border and text. The background was deliberately blurred, however, to bring more focus to the couple.

Gerard Butler as Johnnie Donne in the BBC miniseries "The Jury."

This sig graphic was a mini piece of artwork (sort of!). I used a lot of layers, painted over parts of the image, tweaked colors and adjusted lights and darks. A liberal use of filters were applied to portions of the picture as well.

From "Phantom of the Opera."

Like with the "Moonlighting" graphic, the background has been de-emphasized. The colors in the background are muted and darkened, to emphasize the people in the foreground.

<< Back to page TWO of tutorial | << Return to PAGE ONE of tutorial

North & South Sigs, Icons and Avatars >> >>

Misc Fan graphics, icons and avatars (Richard Armitage and Gerard Butler) >>