Avatar Help Thread

[Lyonesse]

About Avatar’s
Last edited on March 7, 2005

I know there are a lot of CivFanatic’s out there that are willing to help with a “personalized” avatar. All you need do is ask! I am one of those people! I will post some of my “work” below, and hope that other’s ready, willing and able to help will do the same, or at least YELL out that they are willing to help!

Now, let’s see if I can answer some of the “FAQ’s” in “avatar making”. (If I have missed anything please feel free to ask!)

What is an avatar?

An avatar is that little picture you see under many people’s username when posting on the forum.

Choosing a Graphic of “Custom Avatar”

There are a few things to consider when deciding on the type of avatar you want. Here’s the CFC rules

You can also put a picture, or avatar, under your name. There are hundreds of Civish avatars for you to choose from. If you have 30 posts AND have registered for 30 days, you can give yourself a custom title and a custom (non-animated) avatar. The dimension limit of custom avatars is 70x70 pixels and size limit is 4 KB.

This is really is up to one’s personal taste. While most of us “creators” can work with just about anything, you need to keep in mind the forum rules!

You agree, through your use of this service, that you will not use this forum to post any material which is knowingly false and/or defamatory, inaccurate, abusive, vulgar, hateful, harassing, obscene, profane, sexually oriented, threatening, invasive of a person's privacy, or otherwise violative of any law. You agree not to post any copyrighted material unless the copyright is owned by you or by this forum.

Other things you should consider are:

Size and loss of detail

Because of the “dimension limit” some “detail” can be lost in the resizing. This is very important to remember, as while “things” may look good in a “larger” graphic it may not look as “nice” when “resized”. For example, we’ll look at an example avatar I made for Wildfire…

Original Graphic


“Resized” Graphic


As you can see the text is considerably smaller and hard to read in the “resized” version. Now if I were to remove the swords on this graphic, very little is lost in “resizing”.



The idea being, the more “large details” you add to your graphic, more of the “small details” you will lose when resizing it. My line of thinking…Keep it simple

How do I resize my avatar?

In MicroSoft Paint
For Photoshop

If you use another program and can write up a "how to resize" tutorial I will gladly add it to this page!

Transparency

Transparency basically means that there is no “background color” in the image. Think of it as a design drawn on a piece of glass. The design is there but there is no “color” behind it. Lets look at an example:

Without Transparency


With Transparency


Now some graphics will look rather nice with a “transparent” background. Others just do not. For example, the shields above, both look good, with or without a background color. BUT…look at the graphics below, while it looks good with the “background color”, when “taking away” that background (or making it transparent) too much is lost.

With “background”


Without “background” (or transparent)


The reason this happens is that some of the “outer edges” of the graphic itself are very light in color. Because there is not a “darker” color in the background it does not “stand out”. Though one CAN make “lighter” into “darker” outlines, it does take quite some time to do, and often doesn’t produce the desired “effect” (IMHO). On this forum (IMO) the outer lines of the graphic should be of a darker color if transparency is used.

How do I make a graphic transparent?

Photoshop transparency Tutor
Paint Shop Pro 4 transparency tutor. (Thank you CivGeneral!)
Irfan view transparency tutor (Thank you Paalikles!)
Anti-aliasing Your Transparent Avatars-By Plexus


”Merging” separate Graphics

Okay, so you have graphic A and graphic B and you’d like them “merged”? This is possible with “MOST” graphics, but sometimes some details can be lost when doing this, especially around the edges of the graphic. Also, it looks better when you "scale down" an image size than "scale up" as "scaling up" looks "pixelized" or "blocky". So if you only have a larger graphic(s) that will be fine for most "creators"

What information does the “creator” need before making my avatar?

Well I can’t speak for all “creators” but I will list some of what I think are important “need to knows”.

*Do you have a particular design in mind? (This is the most important, leave this one open and you may find some “creative licensing” being used, which you may not like)
*Are there certain colors you would prefer? (Likes and dislikes)
*Do you want any wording? (remember this can be tricky if you want other details as well. AND longer “names” will be harder to fit in that 65x65 box
*Do you have “sample” graphic(s)? (i.e. do you have two separate graphics you would like made into one?)
*If you do have “samples” please attach or link them in your avatar request. This makes it much easier for the “creator”.
*Would you like a transparent background? Or no? Or it doesn’t matter?
*Basically give the “creator” as much information about the desired avatar as possible. While “we” may like the way something looks you many not.


Do I have to “acknowledge” the “creator” in my signature?

While it is nice if you “acknowledge” who “made” your avatar via a small thank you in your signature, it is not required, though this does help others know who made the graphic. A lot of times just using the avatar we created is thanks enough! We’ll leave the choice up to you

Always remember those that are willing to help are sure to “actively work” with you, until you get to an Avatar that you like.

Good luck! And have fun!

How do I "apply" the avatar someone has made me?

Applying Custom Avatar (from graphic off this website)
Applying Graphic that is stored on your computer

"Stormbind's Official free downloads"

Creator's willing to help you with your avatar, and examples of their work!

Lyonesse
Raijer
Gogf
Plexus
Kdar
Mistfit
CivGeneral
Vancouver2010
Raen UPDATED!
ybbor UPDATED!
shadowdude
LLXerxes
Chukchi Husky
Reno UPDATED!

Collections

All of the following collections can be found here!

Civ Leaderheads
Tiki Collection
Final Fantasy Collection
Kill Bill Collection
Sitting Ducks Collection
"Cool Eye's" Collection
X-Men Collection
SGOTM Collection
"This Land" Collection
Pokemon Collection
NFL Logo's Collection
Star Trek Collection
NHL Logo's Collection
Basic Flag Collection
The Simpson's Collection
Lord of the Rings Collection UPDATED!
Star Wars Collection
Civ Advisors Collection
Visual Paradox Collection
Abstracts and Backgrounds
MLB Collection
Rome Total War Collection
Good to be in D.C. Collection
Album "Art" Collection UPDATED!
"Girlz" Collection
Civ 3 Governments Collection
Cartoon Network Collection
South Park Collection
Rise of Nations Collection
Sega Collection
Elves Collection
Holiday Collection
Civ Pop Heads Collection
Red Alert 2 Collection
Studio Ghibli Collection ADDED!
Scenery Collection ADDED!
Evangelion Collection ADDED!
TV Animation Collection ADDED!
"Cult" Films Collection ADDED!

NEWLY ADDED!
Studio Ghibli Collection by Reno
Scenery Collection by Reno
Evangelion Collection by Mistfit
TV Animation Collection (Pinky and the Brain) by Mistfit
"Cult" Films Collection by nonconformist

UPDATED!
ybbor's Creator Page
Reno's Creator Page
raen's Creator Page
Album "Art" Collection
Lord Of the Rings Collection Mistfit's additions added

Please note that there are a TON of graphics in this thread (and in the "Old About Avatar's and How to get one" thread), if you don't mind "surfing" a bit.

If you are a "Creator" and have added your name to the "Creator List" please be assured that your "examples" are still out there!

If you are a "Creator" and haven't yet "submitted" your examples, please just PM me with several samples of your work and a bit of information about you (what programs you use etc.) and I will get you added to the list ASAP.

I hope setting up this "Avatar Website" (with the help of the greatest hubby in the world) will make things a bit easier to find! Please check it out!

Lyonesse's Avatar Help Pages

Avatar Thread Supplement Page explained

 

[Lyonesse]

About me: I have worked with Photoshop and other programs similar to it for about 2+ years. With Photoshop there is ALWAYS things to learn, so I am always “tinkering” with it. I’ve always liked working in “arts” but REALLY LOVE working on computer graphics. While I am by no means a “pro” I do try my best to “turn out” the best work I can. I am VERY willing to help anyone with graphics/avatar, and I always try to “work” with you, to insure that you get what you really want!

Samples





This was a "Whops, wrong button", but I liked it LOL



Well you get the idea LOL! I’ll change these off and on, just so there’s “something new” up

More examples in this thread!

 

[Lyonesse]

Okay, grab your creative side and lets get going! We are going to make take this graphic…

and turn it into this one!

First we need to “set up” Photoshop (I have used 3 different “versions” of Photoshop and the process for this has stayed the same, so version should not matter!).

First you will need to go to the top “bar” and click “window” and set it to read “hide tools” (this actually makes the “tools” appear on the “desktop” in Photoshop).

Toolbar


For the sake of this project please right click on the first heart above and save the image as heart1.jpg (please put it somewhere that you can find easily!)

Now in Photoshop click “File”, “Open” and then find heart1.jpg, clicking once on the file name, and then the “Open” button. This should open the heart1.jpg for you and place it nice a neat on your “photoshop desktop”

And that’s the “set up” (Now wasn’t that easy!)

Now, because there are LOTS of “tools” in Photoshop we will only go over the one we will be using for this project.

The “Magic Wand” will be the tool you will need! The rest is taken care of by the “top bar” (sounds easy huh?)

Magic Wand Tool


The magic wand tool basically “selects” similarly colored areas, that are “connected”. For example if you “activate” (click on) the “magic wand” button then move over to the graphic and click on the red part of the heart you will see a “moving” outline. Inside that “outline” is what you have “selected” using the “wand” (if you click on the area again the “outline” will disappear). The idea being that you can select parts of an image and either make changes too, or copy the “selected” area.

Now that you have your “tool bar” set, and the graphic open lets get onto the “project at hand”!

Please note that “transparent” graphics can only be made as a “gif” file in Photoshop! Any other “file type” will show white as the background not “clear”. This means we will need to copy the graphic to new graphic (don’t worry, its easy!)

Make sure you have nothing in the graphic “selected”.
1. Go to the top bar click “Select” + “All”. This will put that “moving outline” around the entire image…



2. Now click “Edit” + “copy”



3. Now click “File” + “New” , when the box pops up, make sure that the “transparent” option is “checked”, then click “okay” This will open a “new file”.



4. Now click “Edit” + “paste” which should transfer the “copied” image to the “new file” (it will look as though you have copied over the exact image from the “original”, but don’t worry!)

5. Now we need to get rid of that white background! This is where our “magic wand” comes in! Select the “magic wand” by clicking on it in the tool bar. Now click on any part of the “white area”. This will “outline” it. Now simply hit your “backspace” button or use “Edit” + “Clear”

Cleared picture


6. Now you just need to save it and your done! Click “File” + “Save as…” Type in the filename you wish it to have into the “File name” box. Select “gif” (or “compuserve GIF” from the “drop down”, then the “save button.



This will then pop up the first of two boxes. The first box you need to set to…

Palette: Local (Selective)
Colors: 256
Forced: Black and White
“Check” Transparency
Matte: None
Dither: Diffusion
Amount: to about 75%
Preserve Exact Colors Unchecked



The next box will then pop up. All you need do with this one is make sure “normal” is selected, then click the “okay” button.

Your transparent graphic is done!

Note: If you find these directions hard to follow, or find any “bumps” along the way, please let me know so that I can change it. While its easy for me to sit here and say, sometimes the written word does not come through as clearly. Thank you! And ENJOY!

 

[Lyonesse]

Resizing in “MicroSoft Paint”


The following tutorial is taken from the "Help" menu in Paint. As I don't work with paint it may not be completely "clear". If someone out there knows an easier or better way to resize in Paint feel free to let me know, and I will add or change this page! Thank-you!

1. On the Image menu, click Attributes.
2. Under Units, click the unit of measurement you want to use for the width and height.
3. Type the measurements in Width and Height.

Notes
-You can also resize your picture by dragging the image resize handles, located at the lower-right corner and along the bottom and right sides of your picture. (You might need to maximize the window to see the square resize handles.)

-If your current picture is bigger than the new size, the picture is cut from the right side and bottom to fit within the smaller area. If your current picture is smaller than the new size, the extra area is filled with the selected background color

-OR-

1. On the Image menu, click Attributes.
2. Under Units, click the unit of measurement you want to use for the width and height.
3. Type the measurements in Width and Height.

Notes

-You can also resize your picture by dragging the image resize handles, located at the lower-right corner and along the bottom and right sides of your picture. (You might need to maximize the window to see the square resize handles.)

-If your current picture is bigger than the new size, the picture is cut from the right side and bottom to fit within the smaller area. If your current picture is smaller than the new size, the extra area is filled with the selected background color

 

[Lyonesse]

Resizing Image (pixel size and file size) for Photoshop

Please be sure you do not have any portion of the graphic highlighted for this process.

1. “File” + “Save for web”
2. To maintain the current proportions of pixel width to pixel height, select Constrain Proportions. (blue X) For avatar graphic set highest number to 65 (in the case of our example I would change width to 65). This will then adjust the entire graphic while maintaining current proportions. If you wish to have the file 65x65 then you need to do not select “constrain Poroportions”, you will then need to adjust both height and width to 65 each.
3. Enter values for Width, Height, or Percent “Red X”.
4. “Check the “optimize” box (green X) Click arrow just above “optimize”. Select “optimize to file size…”



5. To save graphic as, new box will appear. Enter 4 into the “desired file size” box (with saving for avatar graphic). Check “start with current options” and “current slice”)

[

6. Click “okay” button, and you are done!

As always if you find something missing, a mistake, or find it too confusing please let me know so I can correct it.

 

[Paalikles]

Originally posted by CivGeneral


Would it be also possible to list the step by step on how to make a background transparent?

Image viewer: Irfan View - link works !!!

http://www.irfanview.com/

1)download this picture viewer
2) load/open a picture
3) select batch conversion/rename
4) Under output format - select "Compuserve Gif" - then click the "options" button
5) Under options -> select save transparent color
6) proceed with the batch conversion of your image
7) in the next screen - choose the color you wish to make transparent


All set to go cap'n

Any problems following this - contact me via PM

 

[Lefty Scaevola]

Post here to get or give help MAKING avatars. (not about "what avatar should I use" or "what do you think about x avatar" or anything other making avatars)

Spammers will be brutally crushed.

 

[Tomoyo]

Does this qualify as a valid request?

http://forums.civfanatics.com/showpost.php?p=2186977&postcount=2026

 

[Lefty Scaevola]

Yes it is.

 

[Dease]

How's this?
the first is a simple C&P, the second is an optimized image (both are under the limit)

 

[Tomoyo]

I like the second one, thanks!

EDIT: Could you convert it to a gif or jpg please...

 

[Yuri2356]

Guess I should ask for help with my haloween Avatar. I'd Like Yuri to look a bit more demonic in this pic. Probably engulfed in colourfull flames, or darkened in colour. Nothing stupid or Cheesey like horns though.

 

[nonconformist]

Could someone make me an avatar from this, please?
http://www.moviepoopshoot.com/diatribe/images/2003/nov11/oncebronson.jpg

 

[Dease]

here's a .gif

BTW, why can't it be .png? png supports partial transparency, so it's smoother than .gif

 

[Tomoyo]

Because this website doesn't allow png avatars, I think.

EDIT: "Japav"?

 

[Dease]

Because this website doesn't allow png avatars, I think.

EDIT: "Japav"?

All mine are png
although I didn't do a good job with the transparency on the png versions, so the gif would be better to use

Japan = jap (it reminds me of japan )
avatar = av
jap + av = japav

here's a few quick attemps at noncon's request

 

[Lyonesse]

couple more attempts at Bronson

 

[MarineCorps]

Japan = jap (it reminds me of japan )

It should since it from a Japanese Anime show

 

[Tomoyo]

But why not something like "Soxav" or "Bosav"?

 

[Dease]

It should since it from a Japanese Anime show

I suspected that

But why not something like "Soxav" or "Bosav"?

Because I don't really associate a B with the boston red sox, something like this may make me think of them and I might name it "bostav" or "botoxav" or something like that

Never thought my file naming habits would come under such scrutiny!