Tips & Tricks - The Technical Side of Signatures & Avatars

18 Jul 2010 - 18:28
The Technical Side of Signatures & Avatars
There are stacks of tutorials on the web that guide you through the process of making signatures and avatars. Most of them focus on the design side of things - how to pull off that effect? How to add this face? How to blend the colours? Considerably fewer detail what I consider to be the technical side of the creation - how to work out the right dimensions? Achieve the right file size? Keep it active and visible on a community? And the mysteries of saving to the right format? In this tutorial I'm going to provide answers to all those technical questions, and others along the way. This is your guide to the stuff you need to know before even thinking about getting creative.

First of all, what's a signature, avatar?

Signatures are used on the web mainly to sign off communications such as emails and forum posts. In the early days they would consist of formatted text, maybe a motto, or a statement, or even just your name and location. They added a little bit of style at the end of a message, and although wouldn't verify the true identity of a poster, they would make it easy to recognise the same poster over and over again. These days signatures have evolved, instead of simple text formatted into an array of colours, fonts and sizes, they consist of images; small, exciting images that (where permitted) lighten up the post and act as a miniature portfolio demonstrating exactly what you're capable of. That's where Photoshop comes in. To create a signature in the form of an image you need an image editor, and a touch of creativity.
 
 
Avatars are also small graphical representations of you, but instead of sitting at the end of a post or message, they sit next to your post in an area designated specifically for them. That's where the differences end however, as they are also small image files that leave your mark on your post.
 
I have added an example below, copied from the 3photoshop forums, to show you what I mean. The avatar on the left is one I made and added using the 'My Account' tab of the site. I haven't actually got an automated signature, and I don't allow graphical ones on this site, however, if I did I'd upload one using the 'My Account' tab and I've indicated below where it would appear.
 
What is an Avatar?
 
Although I write in this article about signatures and avatars, my advice relates well to other small, fragile web graphics such as, well, er - most of the images that make up the web!

How do I get off to the right start?

The first thing I'd recommend you do before starting work is ensure the guidelines of the site in question allow you to have a graphical signature and avatar in the first place. Many sites that don't allow graphics have the HTML option turned off so it's impossible to embed or upload your own. Even if this option is available, and the site does allow graphics, check out the user guidelines of the site to ensure what you are posting is permitted at that site. Excessive violence, nudity, vulgar language and advertising are often frowned upon by respectable communities and the last thing you want to do is create a signature or avatar that's deleted for violating guidelines. It will get you off to a bad start with the administrators, moderators and users alike - if in any doubt just ask!

How can I get the right size?

Again, the first thing to do is check out the community guidelines. Many sites feature maximum dimensions on the admin pages where you would embed or upload a signature, make sure when you're creating the graphic in Photoshop you use those dimensions in the new document dialogue box. When designing for the web, resolution doesn't mean a thing, image size is everything - and the only unit that means anything is pixels. That's right, when working with web graphics, centimetres, millimetres, inches, miles, light-year’s, none of them have any value whatsoever. If a community only accepts a maximum of 300x200, then that refers to 300x200 pixels, and that's what you should enter into Photoshop. I have a tutorial that may help you gain a greater understanding of the 'image size' world - it's called Image Size and Resolution and it is available here for free. Meanwhile, I've added a screenshot of the New Document dialogue box below-
 
New Dialogue Box
 

What if I'm starting with an image that's larger than the allowed dimensions?

Sometimes you may want to incorporate some artwork you've created or photographs that you've taken, and quite often those images will be larger than the size of the signature you've set about creating. In these circumstances you have two options - crop or resize. Cropping means to cut part of the image out, a bit like taking a pair of scissors to it in the physical world and cutting away areas that you don't need, or you feel you must lose to trim the image down to size. If the subject of the photo is a person and you've taken them in a park with trees and wildlife around, cropping will give you the ability to cut squarely around the person, and throw the rest of the image in the bin. To learn more about cropping check out my video tutorial Crop & Straighten an Image. The latter, resizing, is to maintain the whole image but make it smaller by removing the sheer volume of pixels you're using. The image will still look the same on screen (depending on how much you reduce it by) but it will fit better inside your signature. The secrets of resizing and resampling (that is the process of removing or adding pixels) can be examined further in my video tutorial Resample Vs Resize. Mission control for this operation is the rather technical domain of the Image Size dialogue box which I've included a screenshot of below.
 
Image Size Dialogue Box
 
If the element you want resized is already in your signature and on its own layer then the Image Size option won't work since that makes changes to the image as a whole. To resize a single layer you'll need to use the transform controls which I explain more in the next question.

What if I'm starting with an image that's smaller than the allowed dimensions?

My first piece of advice would be to double check your math. Signatures and avatars are by their nature very small and to start with an even smaller image is unusual unless it's something you've previously designed for the web or some kind of element/icon you've downloaded with the express purpose of using it in a signature or avatar. If you're correct and the image you want to use is smaller, then you have two obvious options. Firstly, leave it as is. If it's an element that isn't suppose to be covering the entire signature or avatar then there's no need to make it larger. Secondly, make it larger but bear the first point in mind. Making an image larger through a process known as upsampling will make it more blurry and pixelated because you're asking Photoshop to add new pixels which it has to generate from an average of the pixels that are already there. Once again, this is quite a technical subject but for more information check out my video tutorial on resampling and resizing. If increasing the size of the image is the way you want to go then once again this can be achieved in the Image Size dialogue box or by transforming.
 
One thing to know about the Image Size dialogue box is that it affects the whole image, so if you already have the smaller graphic in your signature then you'll need to transform it instead. Transforming is easy and very convenient as you get to see what's happening on screen as you make it larger. In every version of Photoshop I've ever used the keyboard shortcut is CTRL + T (CMD + T on the Mac). Make sure you have the correct layer active and hit the keyboard shortcut to transform the object, simply move the handles of the object to increase or decrease its size. One more tip on that, hold down the SHIFT key while transforming to keep the proportions in check. Also, try to carry out your transformations in a single edit; multiple transformations can have a detrimental effect on the quality of the image.

How do I animate my signature or avatar?

Both Photoshop and Photoshop Elements are capable of making animated files, although the latter is more restricting with its options. I have two great tutorials on the subject, one called Basic Animation dealing with building and outputting a basic animated web graphic in the full version of Photoshop, and another called Flashing Text which outlines the process for creating a block of flashing text and outputting using Photoshop Elements. I'd highly recommend checking both of those out if you want to know the ins and outs of animated graphics. Also, remember to double check the guidelines for the site you're adding too, some of them allow graphics but not animated images, so worth looking at before you spend vast amounts of time building the prefect animation.
 

What's the best way to save my signature or avatar?

Selecting Save for WebIf you're designing for the web then you have to keep file size in mind. Usually you want a good balance of a high quality image and a low file size to ensure the signature or avatar looks good but loads fast. The best place to find a solution to that age-old problem is in the Save for Web dialogue box found in the File menu. If your signature contains photographic elements consisting of gradually changing colours and shades, special effects such as glows and drop shadows, and complicated patterns and fills then it's worth looking towards JPEG - to learn more check out my tutorial 'Save a JPEG'. If the image contains fewer colours, sharp transitions, transparency, large areas of the same colour, and animation then I'd suggest looking towards GIF - to learn more check out my tutorial 'Saving a GIF'. The alternative to these formats is the slightly newer and well supported PNG, which comes in two varieties - PNG-8 and PNG-24. PNG-8 is similar to GIF, is slightly more efficient with file size at the same quality level but does not support animation. PNG-24 is more similar to JPEG, although the relative file sizes tend to be larger because PNG-24 does not support lossy compression, where as JPEG does. It also supports transparency, and ensures all the details inside the image are retained. I have a tutorial you may find helpful exploring the two PNG formats here.
 
I hope that gives you some clear and helpful pointers towards creating signatures and avatars using Photoshop, if you think anything should be added, or have a question of your own, please post it and I'll include the answer in the tutorial itself.

 

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p>
  • You may quote other posts using [quote] tags.
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.
To prevent automated spam submissions leave this field empty.