Tutorial: Using an Avatar

Home | Forum | SimRTK | History | Games | Graphics | Writing | Products | Links | Site Map

Kongming’s Archives – Avatar Tutorial

You are here: [ Home –> Avatars –> Tutorial ]

I am often asked questions like, “Just what is an avatar?” “How do you make an avatar?”, or “My avatar doesn’t work at <name> forum, can you fix it for me?” I have decided to write this little tutorial, which I shall dub “more than you ever wanted to know about avatars” to alleviate the e-mail answering process, help you save time, and maybe even teach you a useless fact or two.

Select an option from the menu below and continue to that appropriate section. If you are lucky (or unlucky, who knows) I will take some time out soon to create a tutorial on the action creation process. Not all images in this tutorial are full-scale.

Just what is an avatar, anyway? (top)

An avatar is a small image you (and other people) choose to represent yourself in certain online environments; this helps to define your identity inside an online community. The most common use of which is on forums. Because avatars are most commonly used in forums, I will now explain the basic elements of a posted message (or “post”).

Example Post from the-scholars.com
  1. User Name: this is the name you use to represent in a forum. You choose this name when you sign up and members usually can’t share names.
  2. Title: many forums have titles. Some forums use titles to help members see the difference between moderators, admins, and other members. You may be able to choose your own title, or it may be decided for you in advance.
  3. Title Images: linked to titles, these images tend to be used to help members determine seniority and duties of other members. Sometimes they are based off a custom system (as in the example above) and they may or may not make sense. It all depends on how intelligent the forum adminestrators are. In the example above, Scholars of Shen Zhou, images are only given to Administrators and Moderators to describe their positions.
  4. Avatar: This is an image used to distinguish members from each other and to establish identity. The avatar is also the focus of this tutorial. You probably won’t have an avatar until you upload or link to one. You can usually use your own custom images as an avatar. All of this will be explained below.
  5. Member information: depending on the forum, different types of information will appear here. Most of it you set in your user profile (there will be a link with a similar name on the main page of the forum). Common information includes the date you joined, how many posts you have made, and your location (people tend to use this space for other things).
  6. Post Information: general information about this specific post. Usually includes a post date and subject (if they include one with the new post).
  7. Action Buttons: use them to take actions related to this specific post. The buttons above are Quote (see #8), Edit (change the message; only visible if your account has authorization), Delete Post (again, only with account permission), and IP Address (almost always only visible to moderators/administrators).
  8. Quoted Message: this is a message posted by another member that has been quoted as a reference for the current message. Use the Quote button to quote a message.
  9. Current Message: the original message posted, sometimes in reply to an older one. You may be able to include images, hyperlinks (like above) or more depending on the forum.
  10. Signature: a message that the poster has chosen to include at the bottom of every post they make. In advanced forums you may change your signature dynamically. There are usually many limitations to user signatures.
  11. User Information: each button provides you with information about the posting user. Common buttons include Profile (information about them), Private Message (send them a personal message over the forum), Chat Clients (handles for various chat clients like AOL Instant Messenger, not shown above), and WWW (user website).

Your avatar will appear next to your message in a fashion similar to the example above. Avatars are also used for other things (e.g. During a chat over AOL Instant Messenger, in some chat rooms, or even on a web site updates page.

Great, what else should I know about them? (top)

Although many forums allow avatars, they tend to come with rules attached (I bet you aren’t surprised). The forum is not always capable of making you follow all the administrators’ rules, so it is important to check the forum information before proceeding (to make sure you don’t break them). Here are some common rules you can expect to see.

I want a nice avatar now, where can I find one? (top)

There are many high-quality avatars just waiting to be found on the Internet (and many more ugly ones), but if you are not familiar with search engines it can be a real trick. I have prepared a pre-defined search at Google for you to use (with some options from the advanced search to filter out some trash). You can add words to the search (you will see them in the Google search field) to narrow your search (e.g. ‘fantasy’, ‘dragon’, ‘”star wars”’) without fear of loosing the advanced settings. Before long you should be able to find what you are looking for.

You can also make your own avatar in an image editing program like Adobe Photoshop (Adobe Elements for those of you that don’t want to pay more for professional capabilities) or PaintShop Pro, just remember to export the final image in .jpg or .gif format for proper display on the Internet (we may make an avatar creation tutorial in the future if people seem interested).

Here at Kongming’s Archives we also have a large collection of attractive avatars (or so I like to think), edited/created by my own hand for your viewing pleasure).

I need to upload my avatar to the Internet, how do I do this? (top)

If you made your avatar yourself, found it on a site that does not allow remote linking (again, make sure you have permission to link before using someone else’s avatars, they have copyright control over things on their web page), or if the forum you want to post at does not allow avatar uploads, you will need to find a host.

There used to be many online services that allowed free upload of avatars and signature images, but because people have abused these services they aren’t found anymore (here is a Google search for you to double check). Failing that you have a few more options. You can (usually for a small fee) register with a web host specifically for images (here is another nifty Google search for this). If you know someone that has remote link enabled web space you can ask him or her. Sometimes there is someone at the forum that will do this for you, do not be afraid to ask. And just to save you the time, don’t ask us, we don’t swing that way.

Most free web space providers (e.g. Geocities, AngelFire) do not allow remote hosting and they use scripts to prevent dishonesty. If you see a broken image icon, or an ugly image that reads “AngelFire” on the forum, you know why.

Once you have your image online make sure you have the Internet address (e.g. http://address.com/image.jpg), you will need this to enable the image in a forum. To get this information from a web page right-click the image, open it in a new window, and copy the address from the browser, or right-click and select image properties. You can get the address from this output screen. Kongming’s Archives does not allow remote linking to images on the site, but you are welcome to upload them to your own Web space (see below for details).

Great, now how do I enable my avatar in a forum? (top)

To use an avatar in a forum the forum must know where it is. There are usually two ways to do this. At many forums you can upload your avatar directly from your hard drive (this is the best option). If that is not available you must upload your avatar to a web server on the Internet. If the avatar you want to use is on a server that allows remote linking to image files, you do not need to worry about this.

Depending on the forum these options may or may not be available. Furthermore, the ways in which you do this depend on the forum in question. I will use two major online forums as examples for these tutorials. One of which is vBulletin 2.x (online example) and the other is phpBB 2.x (online example). Other forums on the Internet function in a similar way (and usually have less features), the descriptions below should be adequate.

vBulletin 2.x Tutorial: How to set up your avatar. (top)

vBulletin is, basically, the best online PHP forum available on the Internet at the time of writing this. Unfortunately, it is very expensive and not much better than the free phpBB forum. For this reason you will not see it everywhere. Regardless, many of the best forums on the Internet use this software, so we will explain the avatar process in this forum.

Too change you avatar in vBulletin you must first register, this process is self-explanatory. Once you have registered you will have a profile. There will be an image or link (usually near the top of the page) that says “user cp” or “profile”. Click on this option to open your profile (you must be logged in).

You will see options along the top (e.g. “My vB Home”, “Edit Profile”, “Edit Options”), select the third one, “Edit Options”. At the bottom of this page you will see an option called “Avatar” with a link below that says “More Info…” (see image below).

vBulletin “Change Avatar” Option

This is an example of the avatar option at the bottom of the “Edit Options” menu. If you have already made an avatar available you will see it in the menu on this page, if not you will see nothing. You can click “More Info…” to learn more, or click the “Change Avatar” button to edit.

After you click the “Change Avatar” button, you will be taken another interface specifically made for changing your avatar. Here is another example image.

vBulletin “Change Avatar” Menu Interface

As you can see the Edit Avatar menu has a good amount of options. Depending on what the administrators have enabled you may or may not see all of these options, but we will present them all here, of course.

From top to bottom, we will explain the options available in this window.

  1. “Use Avatar”: Default is yes. If you do not want to use an avatar at all in the forum, but still want to retain your avatar information, set to no. Otherwise don’t worry about this option.
  2. “Use Custom Avatar”: If you want to use a custom avatar (the object of this tutorial) and the option is enabled, make sure this is set to yes. It may default to no if there is a default gallery of avatars available (you will see an option for this if the administrators have enabled it, basically, it lets you choose your avatar from a gallery of avatars that have already been uploaded).
  3. “You can enter an URL of your avatar”: If your avatar is on a server, this is where you want to enter the Internet Address we talked about earlier. These addresses are called URLs. Copy the URL from your web browser or from the place you recorded it, verify it to make sure there is no white space, and then click “Submit Modifications”. Your avatar should now be visible by your posts. (“I get an error”). Notice that the file size and dimension restrictions are visible on this page.
  4. “You can upload an avatar from your computer”: If the avatar you would like to use is on your hard drive and it is stored in .jpg or .gif format (and fits the file size and dimension requirements) you can upload the avatar directly to the server. This means that you do not need to worry about finding a remote host. You can type the local hard drive file path directly into the entry space, or you can click the “Browse” button to open your operating system’s file browser. After you select the image from the file browser (which auto-populates the field with correct information) or enter the path manually, click “Submit Modifications”. Your avatar should now appear by your posts. If you are told that you did not choose a valid .jpg or .gif file, you will not be able to use that image (changing the extension to .jpg or .gif does not actually change the file type). If you get another error it will be because your image does not meet the file size or dimension requirements.
  5. If the administrator(s) enabled an avatar gallery a new link will be available in this menu. Click on the link and a window will open with all the available avatars. Choose an avatar from that menu, submit the changes, and that image will now appear as your avatar in the forum.

There are two common problems that people encounter when uploading or linking to an image with vBulletin. If you upload an image and it tells you that the file is too large, but you know it was small enough while on the server, it is probably because you drag and dropped it from your browser window. When you do this most browsers add more information to the image (e.g. icon, preview) and this increases the file size. Go back to the image on the web site, right-click, and save it to your hard drive using this method. Upload the new save and it should work. Failing that, you will need to recompress it in a program like Adobe Photoshop (no tutorial available on this yet).

On some forums using specific versions of vBulletin a problem may manifest when trying to link to off site avatars. Rather than completing the avatar link you will get a message saying that the file you linked to was not a valid .jpg or .gif file, even though the file really is (I have had more than a few encounters with this annoying problem). Here is a sample screenshot of this error.

Not a valid GIF or JPG file Error

Sometimes you will get this error because the file you linked to or uploaded was not a valid .jpg or .gif file, just like it says (remember that changing a file extension does not actually change the file type). You can re-export these images using an image editor to make them .jpg or .gif files.

If you are certain that the image in question is a .jpg or .gif, and you are trying to enter a link to a remote avatar, you may have encountered a vBulletin bug. In this situation you will not be able to link to the external image, please contact a forum administrator for more options. If the forum has the ability to take uploads from your hard drive you should be able to upload the avatar this way. We will not be able to help you further with this problem. If the site owner is using a legitimate copy of vBulletin they should upgrade.

phpBB 2.x Tutorial: How to set up your avatar. (top)

phpBB is a very well made, efficient, and relatively bug free forum that is nearly as good as vBulletin. Unlike vBulletin, phpBB is free and we recommend it to anyone that does not need mandatory technical support and can instead live with a forum of experts (at the phpBB website).

Too change you avatar in phpBB you must first register, this process is self-explanatory. Once you have registered you will have a profile. There will be an image with the text “Profile” (near the top of the page unless the site designer changed the default templates). Click on this option to open your profile (you must be logged in). At the bottom of your profile page you will see the avatar options, see example below.

phpBB “Change Avatar” Menu Interface

As you can see the options for phpBB are much more basic than those presented by vBulletin. You are also less likely to encounter errors while trying to upload, but we will explain more about this below.

From top to bottom, we will explain the options available in this window.

  1. At the top you will see a brief explanation of the forum avatar requirements. This description will tell you the maximum dimensions for an uploaded avatar along with any file size limitations. To the right, if you have uploaded one, you will see your current avatar. There will be a button that reads “Delete Image” below it. To delete your current avatar (and have no image below your name in the forum) check this box and then click submit (at the bottom of the page). If you have no avatar you will only see a description of the forum’s avatar requirements.
  2. “Upload Avatar from a URL”: If your avatar is on a server, this is where you want to enter the Internet Address we talked about earlier. These addresses are called URLs. Copy the URL from your web browser or from the place you recorded it, verify it to make sure there is no white space, and then click “Submit Modifications”. Your avatar should now be visible by your posts. Notice that the file size and dimension restrictions are visible on this page. After submitting the changes the image will be copied to the forum hard drive, if you can see both “Upload Avatar from a URL” and “Link to off-site Avatar” choose to upload.
  3. “Link to off-site Avatar”: The steps for this are the same as those mentioned for “Upload Avatar from a URL”, but instead have a different result. Instead of copying the files to the forum server hard drive, it links to the image on the remote server at all times. If “Upload Avatar from a URL” is available you should always choose it instead of “Link to off-site Avatar”. If the image host does not allow remote linking to images, you should not choose the link to off-site avatar option.
  4. “Show Gallery”: If this option is available you can click on it to display a full gallery of pre-uploaded avatars that are available to all members on the forum. Select an avatar from this pop-up gallery and submit the changes to make that your primary image.

phpBB does not always stop you from linking to an avatar that breaks the forum rules (described on this page, see the preview for an example). If you want to save the forum administrators work make sure you follow the rules carefully (otherwise they will contact you after you change your avatar to have you fix it, not the best start). Click here to see example avatar sizes.

Avatar Tutorial Information. (top)

Version 1.0. If you see any errors in this tutorial please report them to the Webmaster. This tutorial may not be duplicated or edited for display on other sites and is an original creation of Kongming’s Archives. Webmasters, please feel free to link to this page without permission (same with any other .html or .php files on this site).

Copyright © 2001–2010 James Peirce
About | Accessibility | Submissions | Validate



Artistic »

Games »


March 7, 2014