Icon... Fail?

[avocado_love]

Well I couldn't sleep last night and I tried my hand at making some icons. In the process, I learned a few things:

1) Making icons is harder than it looks.
2) It's hard to find Sokka scowling or Zuko being goofy for the time frame I wanted.


Since I'm in an IHS kick, I made that the theme. Here they are, in order from first to last.

     



What do you think? Any hints on how to...er... improve myself? I'm not gifted with the visual arts and usually have to learn things by route. I use MSPaint (which I'm great at) and PSE editor (which I'm still learning).

Edit: And of course, they're sorta out of focus for some bizarre reason. *head desk* Help?

Comments

[lynati-1.livejournal.com]

I like them, but I can see them confusing anyone who isn't familiar with the story. (Although, since you have the title in there on each, if they're paying attention they might figure it out.)

What dpi/ screen resolution and size are you saving them as? Is it the same as what you're doing the in initial work in?

[avocado-love.livejournal.com]

Yeah, you're right in that it would be confusing for anyone who wasn't familiar with the story. These are mostly tests I'm using for myself. Later on, I plan to make more with different themes.

I'm scaling them down to 100X100 and then editing them from there, using my photo editor. Maybe I'm getting the problem when I do the initial shrink to get the screenshot to fit the tiny size. When I save them, I am clicking on "maximum resolution".

[lynati-1.livejournal.com]

It just has generic options ("maximum resolution"), not something that specifies what that resolution is?

Also, you're scaling them down to 100 x 100 at what dpi? Is it 72? And what size and dpi are you scaling them down *from*? (If you're starting with low-quality images, saving them bigger or at maximum res isn't going to improve the quality, since it can't add back in the information that has already been stripped.)

Do you still have the original, unedited screenshots? I might be able to... weird, deja vous. Anyway, if your photo editor keeps giving you trouble, I can see if I have any better luck with shrinking them in photoshop.

[attackfish.livejournal.com]

I want to see them animated together. actually...

[avocado-love.livejournal.com]

*Grin* You know, I totally didn't think of that. Those might make an interesting animated gif. I'll consider it!

[sharkflip.livejournal.com]

For lack of a better place, I'll say here that I *so* ship Yue/Agni, which is so unoriginal it hurts, and yet I ship it.

$20's worth

[sharkflip.livejournal.com]

And re: graphics. This is all opinion, but I've gotten fairly good at applied desktop publishing.

Sans-serif fonts (verdana, calibri, arial) work better for icons, I think, than serifed ones (times, georgia, courier, etc).

I tend to make sure that there's a neutral-space border around text to define its position. It looks like in most of these, there's just one pixel between the text and the edge/graphic; I'd say that you want a minimum of three and even five to give it some spacial definition.

For text this small, I prefer caps or small-caps; makes it cleaner to my eyes, and evens out the line-height.

The underlining in 4 & 5 is unnecessary and makes it too busy.

Borders are good, even just small subtle ones.

You've used arbitrary black/white text in these; I find it easier on the eye to select a dark color and a light color from the featured graphic and use those for text/borders/etc -- it keeps the theme better.

Careful of anti-aliasing text too much or too little -- it can look fuzzy or pixely if its not the right balance.

Beware multiple .jpg saves -- the compression process degrades the image each time you save, and it ends up looking grainier and grainier. For the cleanest look, work on it in a photoshop format and then export to .jpg or .gif when you need the finished file.


So keeping this in mind, here's how I'd do this one:

   

Subtle things I did:

Double border: I sampled a dark green from Zuko's robe and a light neutral from his neck for the two colors there; they're one pixel wide each.

"Sokka is Concerned" text: it's using the same dark green. I tried several different font faces; Calibri sucks for this small, verdana seemed too wide, I finally went with Tahoma because it seemed the right vertical/horizontal balance. Then I played with sizes and weights; it turned out that 10pt bold all-caps worked best for this in my eyes. Then I positioned it; I tried to make it equi-distant between the border and the graphic, and eased it up and down before settling it in that position; it seemed most balanced there. It seems a little fuzzy, especially on the very bottom; if I were being really picky, I'd touch it up by hand.

"In His Shoes" text: I sampled an almost-white from Zuko's eye and used that, then used the same Tahoma font in 12pt bold and italic. I'm ambivalent about the italic, but it's okay. I decided to use sentence case rather than caps to separate it from the "sokka is concerned" part. Then I moved it back and forth and decided that a two-pixel space between it and the border looked best and kept it fairly legible. It also kept a nice visual border between the text and the edge of his shoulders, and the slant of the "I" is echoed in the slant of the gold part of the robe. I might have bumped it a pixel or two to the left, looking at it more, but it doesn't bother me enough to go in and modify the file again.


I'm working Corel Photopaint from 1997, the easiest basic photo editor I've ever worked with; I have gimp/photoshop on my computers for the fancy stuff, but corel is the best one for just basic maneuvers. I've never used mspaint.

[avocado-love.livejournal.com]

LOL. Awww, that's cool to hear. Better for Yue I think than shipping her with dead Zhao, which I've seen in places.

[yukinoomoni.livejournal.com]

AHAAHAH ME TOO!

[engelen.livejournal.com]

There isn't much you can do with MS Paint actually... I suck at making icons, because I have never really focused on making 'em, but if you really wanna learn stuff, you should:
1) get your hands on some photoshop or paint shop pro (which is more rudimentary, but still useful... I have the installer for the later + a crack code in case you're interested)
2) look for tutorials on effects and stuff
http://community.livejournal.com/danceof_flame/22668.html?mode=reply
there's a font tutorial you might wanna look into :3

[engelen.livejournal.com]

ALSO!
NEVER
NEVER
USE COMIC SANS

[sharkflip.livejournal.com]

THIS


I have an overbearing volunteer who keeps making unauthorized signs and flyers in COMIC SANS. It's like a STAKE through the HEART every time.

[engelen.livejournal.com]

the worst thing is seeing book covers with that font
T____T
It's like "WHY THE FUCK ARE THEY PAYING THESE PEOPLE!?"

[lynati-1.livejournal.com]

Book covers I can understand, but I've never had a problem with it for LJ icons. Then again, I don't get the hate-on for Papyrus, either; is it just that they've been so overused for so much?

[engelen.livejournal.com]

no... it's just that they're hideous

Wait, maybe you *shouldn't* look at this icon then...

[lynati-1.livejournal.com]

The font is hideous? Seriously? The font in this icon *points* is so bad it's like being staked through the heart? ...I just don't see it. But I'll try something different for future icons if I'm inadvertently causing such distress to people. o.o

[lynati-1.livejournal.com]

(meant more or less seriously, and not in a bitchy tone, since such things aren't always clear on the internet. *cough* )

[engelen.livejournal.com]

oh then I'm sorry for my snappy comment.
I've been in a foul mood all day long... Especially right now.
Sorry bb <3

[lynati-1.livejournal.com]

It's okay, it wasn't all that snarky to me. Besides, it's the internet, one has to expect a certain level of that. (And of miscommunication.)

Look, tonight's new icon! And it's Action Man, not Comic Sans! And maybe might give you a brief moment of laughter on your bad day. (Or possibly you'll think Action Man is equally ugly, they're sorta similar fonts. Ah well.)

[engelen.livejournal.com]

but serioulsy, I'm sorry. I forgot about the "internet civility code" back there.

Actually, Action Man is MUCH better than comic sans :3
It actually makes it look cooler :3
I'm gonna be like that girl in The Devil Wears Prada where she is holding two similar-looking turquoise belts and says "I don't know which one to pick, they're both so different..." (I watched that movie yesterday) Because Action Man and Comic Sans look pretty different to me... HAVE I TURNED INTO A FONT SNOB ALREADY?
BUT I'M NOT EVEN A PROFFESSIONAL DESIGNER!

Re: Wait, maybe you *shouldn't* look at this icon then...

[engelen.livejournal.com]

It's not so much that it's like being staked through the heart, it's more like no one will take you seriously design/academic-wise if you use that font. Because it's an ugly font, period.

Re: Wait, maybe you *shouldn't* look at this icon then...

[sharkflip.livejournal.com]

And the stake through the heart comment was a specific and very personal instance for me, when I've been hired to professionalize the promotional materials for an institution and have been trying to do things like establish logotypes and such, and Ms I-Don't-Have-A-Life keeps making "posters" on the photocopier using comic sans (I'm trying to establish Georgia and Calibri as part of our logotype) and way, way, way too many logos and clip art.


I like your icon. It is an appropriate use of comic sans, in that it is a speech bubble in comic format, which shows you grasp the strengths of the font. <3

Re: Wait, maybe you *shouldn't* look at this icon then...

[engelen.livejournal.com]

but Comic Sans SHOULD NOT BE USED FOR COMIC LETTERING D:

that font, is a big fat lie.

Re: another random comment on the font conversation

[lynati-1.livejournal.com]

Yeah, that one I did figure out when I was *trying* to use it and things didn't look right. Hence the long random search that eventually led me to Action Man and a couple of others.

Feedback on the small details is good, and explanations as to why-something-is. I'm pretty much always on the lookout for ways to improve whatever it is I am doing.

Re: Wait, maybe you *shouldn't* look at this icon then...

[lynati-1.livejournal.com]

I'm glad you like the icon. : ) And yeah, if you're going for professional logo stylings and such... comic sans works well when it is small, band sucks at the size most things are meant to be read in. : P

[sharkflip.livejournal.com]

Papyrus is gorgeous, but has been overused to death, which is sad because it's such a nice font.

[avocado-love.livejournal.com]

Thank you!!!!! And never use comic sans... I had no idea it even mattered or bothered people! But I won't anymore.

[engelen.livejournal.com]

it's more that it's an ugly font

[thistle-chaser.livejournal.com]

Edit: And of course, they're sorta out of focus for some bizarre reason. *head desk* Help?

They look clear and sharp to me. Maybe something's off on your end? Or on mine!

[avocado-love.livejournal.com]

They do? Oh that's good news. It may be my hyper-sensitivity to my own work as well. hehe.

[suzukiblu.livejournal.com]

Really man all I can say to solve your iconning issues is "GET PHOTOSHOP" (personally I am currently using Photoshop CS for all my editing and arting needs, and it is SUPER EASY to do things like kill blurring with). The rest will come to you as you futz around with the program and accidentally click things that were never meant to be clicked.

Seriously, MS Paint is not meant for pretty-making. D:

[yukinoomoni.livejournal.com]

*impressed*

By the way, I love how you're doing this.

...*goes to the archives and starts from the beginning again*