Welcome to my humble little tutorial page, Tips for Better Icons
. I know the layout's not very fancy, but I'm not aiming for something flashy. Anyway, I created this guide on March 6, 2011 with the intent of improving the icons on Neopets. These aren't tutorials in the strictest sense, and I will not be providing coloring or cropping tutorials. I will, however, jot down little tips and tricks I use that help me quite a bit. I use Photoshop CS2
, so I apologize to any GIMP or PSP users.
If you have a question please don't hesitate to MAIL ME
DISCLAIMER! All of the images on this page belong to their respective owners. That being said, I make all of the examples on this page, every last one of them. I would not and will not EVER use someone else's work as an example to critique or criticize. That is just unbelievably rude. Regardless of whether I criticize a particular style or technique that you happen to use or favor, rest assured that I am not using any of your creations and making an example out of it.
LISTED AT: (hover for recommendation)
JULY 21, 2011:
OH HAY THAR GAIZ. Yeaaah... so I haven't added much lately. But check out this snazzy new layout. I'll get around to making everything neater.
Also took down the grammar guide. I'll replace it with something cooler. Maybe.
Q: Can I request a tutorial?
Feel free to NEOMAIL
me with any tutorials you'd like to see. I'll try my best to write one, but it really depends on what the subject concerns.Q: Why won't you write a tutorial on textures?
A: I am honestly TERRIBLE
with textures, and it doesn't help that I'm not interested in downloading texture pack after texture pack just for the sake of having some on hand. Turnip has written a very wonderful guide
on texture usage at her site, The Lunch Box. Pretty much everything she says about proper texture usage is what I believe in -- especially the "use textures to enhance the image, not completely alter it" statement.Q: One of your images is broken.
A: Please NEOMAIL
me and tell me the section that the broken image(s) is/are under. I don't check this site every day (shame on me! /karma), so I'm bound to miss something.Q: I have a question.
A: I'm all ears.Q: Can I use one of your images?
A: I don't know why you would want to, but go ahead as long as you do so with credit
. Also, using any of these images to make your own tutorial is so not cool.Q: How did you learn all of this stuff?
A: Observation, trial and error, and making mistakes. Lots and lots of mistakes.Q: Can we be affiliates?
A: No, I am not taking any affiliate requests; that's what I usually do with my guides. You are free to link back to this site in any way, though.Q: Can I list you?
A: Yes, you may. I'm not going to actively seek out listers, however. This guide is really just here to help those who find it.Q: What sites do you run?
is my icon/banner request and premades site. I wrote another guide called Manga Coloring for Beginners
. It is also long.
fading a sharpening effect (or other filter)
Usually when you crop an image (especially a large one) down into a 100 x 100 square, it loses some of its clarity. That's where the Sharpen filter comes in handy. However, I usually see a lot of icons that are over-sharpened, which isn't good. Over-sharpening makes lines look jagged and ugly, and in a worst case scenario, can potentially ruin your icon. So what do you do? Spam blurring and sharpening filters until the icon looks just right? Nope. Here's something much easier.
For this guide, I'll be using this lovely Illusen icon:
Okay, that's the base. Now, add your coloring techniques or textures:
The icon is fine, but you decide that you want it to be a little sharper. To remedy this, you sharpen the icon using the basic Sharpen filter. Your result is this:
See how the lines are jagged and unattractive-looking? You don't want to leave the icon looking like this. It's not exactly a trait of a high-quality graphic. So how do we fix this problem?Here's the solution:
Go to the Edit tab, and make sure you do this right after
you have sharpened your icon. There should be something that says Fade Sharpen...
(If it doesn't show up, use the Step Backward option under the Edit tab and re-sharpen the icon.)
As you can see, you can also press Shift + Ctrl + F to bring it up immediately. Anyway, after clicking on it, it should bring up a little box that will ask you to set the opacity. Make sure that the preview box is checked.
Each icon is different, so set the opacity until your icon looks clear and sharpened but not jagged.
You now have a beautiful and clear icon that doesn't have jagged lines!
All that stuff here.
low-quality vs. high-quality images
Always use high-quality images.
You're probably thinking "no duh!" but I see sites out there that have icons that probably came from low-quality images. You will honestly look so much better if you use a high-quality image. Not only that, they're way
easier to work with.
So what's the difference between high-quality images and low-quality ones? Let's do a little comparison. I'll be using screencaps from Final Fantasy XIII
for this example.EXAMPLE OF A LOW-QUALITY IMAGE
Well, this could technically pass for a medium-quality image, but let's examine why we wouldn't want to make an icon out of it:
If you can see it, the image is a little pixelated. In other words, there's no smoothness; you can see the blocks of colors and pixels. This is not good, as it will make any alterations to the image pretty obvious and ugly-looking.
It's a little small. Small images can be a problem if you're trying to make a 100 x 100 icon.
It's pretty blurry. And the quality of the image is such that sharpening it wouldn't do it much justice -- in fact, it might even make it look worse.
The details aren't very clear. Only obvious details really stand out.
Hopefully you can see why this image isn't a good option. If you still don't, I tried applying my standard coloring technique and general cropping to the image in an attempt to spiff it up:
Yeah, that's not gonna work.
EXAMPLE OF A HIGH-QUALITY IMAGE
Drag to address bar to see full-size. Seriously.
Oh my word. The quality of that image is so high that it almost hurts
. Seriously, drag it to the address bar if you already haven't.
Let's examine why this image is an awesome choice:
It's very smooth, with no visible pixelation.
The details are amazing. You can practically see the little nicks on the character's armor, and you can even see the individual strands of down on her impractical feather leg-warmer thing. (I don't get it either; I recommend focusing on the detail instead of clothing impracticalities.) Heck, you can even see individual strands of hair on her head!
Everything is very sharp and clear. Okay, maybe not the background, but that's because they're placing emphasis on the character in the foreground. And even still, the background is in better shape than the low-quality image.
The image is BIG. Big images are always better than small images. They're more likely to retain their quality if you do close-up crops.
I'm sure the quality of this image is obvious. For the sake of consistency, I've also made an icon out of this image, using my coloring technique and cropping. Here is the result:
Dang, that's a nice-looking icon.
SO HOW DO I FIND HIGH-QUALITY IMAGES?
The answer is simple: look around! Minitokyo has good-quality images and most respectable video game sites will post high-quality screenshots when they're available. You can't just go on Google and icon whatever: sometimes you need to look around. It might seem annoying, but it'll pay off in the end when your icons are looking pretty and high-quality.HOW CAN I TELL IF AN IMAGE IS HIGH-QUALITY?
You really can't, but the general consensus is that low-quality images will be blurry, pixelated, small, and either too light or too dark. High-quality images vary from person to person. Just remember to keep your standards high (but not too high!) when it comes to images, and you should be fine.
saturation: a lesson in vibrancy
Saturation is that awesome thing that makes the colors in your graphics waaay brighter depending on how high you set the saturation.
If you're anything like me, you love this function. You really love bright colors. But like most things in life, saturation should be used in moderation lest you burn someone's eyes out. Rest assured, visitors to your site will not be eager to return if their eyes are attacked by a kaleidoscope of vibrant colors every time they gaze upon your graphics.
Our guinea pig for this experiment is this image from Code Geass
First off, you should know how to use adjustment layers
. They're way more helpful than using the more concrete Image - Adjustments
option because they can be altered separately from the image. Does that make sense? If not, I suggest looking up how to use Photoshop adjustment layers. You will never go back.
Anyway, it's time to display acceptable use of saturation. In this guide, "acceptable" simply adheres to any image modification that doesn't completely baffle you or make you go blind. So here is the image at +30 Saturation
The colors in the image have been subtly brightened. They are now more vibrant. However, though you see a difference (hopefully), your eyes don't immediately squint at the sight of the image. That is GOOD
. You want your graphics to be more aesthetically pleasing, yet you don't want them to completely overwhelm your visitors.
Okay, so you saw how to responsibly use Saturation. So how do we irresponsibly
use Saturation? Well, I've prepared yet another example. Be warned: this image is REALLY
oversaturated. If you have some sort of adversity to brightly colored images, I suggest you look away or stop reading. Ready? This time I've upped the level to +80 Saturation
HOLY OVERSATURATION, BATMAN! Seizure city, much?
So if you're not completely blind right now, let's discuss everything that is wrong with the picture above.
It's way too bright.
It's so bright, in fact, that it's not aesthetically pleasing, nor is it anything that any sane human being would want to stare at.
The extremity of the colors is actually causing the quality of the image to drop. If you look at the image, you can see that some parts look jagged or pixelated. This is a result of oversaturation.
The ludicrous amounts of saturation are actually changing the colors of the image. See how they both look really yellow? Yeah, that's not supposed to happen.
You can also switch which colors you want to alter. Here, this screenshot will hopefully make more sense:
The Master setting obviously applies to all colors in the image, while Red will only alter reds, Yellow will only alter yellows, and so forth.
Desaturation is useful as well; if an image is too vibrant, try desaturating it a little. -100 Saturation
will result in a greytone image.
do-not-do-ever: oversaturation + dark gray multiply layer
The icon above is something of a parody of some icons flying around sites on Neo. There's nothing inherently wrong with this icon -- coloring and aesthetic appeal are, after all, incredibly subjective, which makes it a little hard to sometimes distinguish what is considered high-quality and low-quality. Simply put, one man's trash is another man's treasure, appearance-wise at least. That being said, this isn't exactly the best icon to make. Every time I see icons like the one I created above, I cringe and quickly move on to more gently-colored icons. So why
isn't this icon the best choice?
I'll first tell you how I created this icon. After cropping, I upped the Saturation to +60 -- which is REALLY
high. I made sure to put -10 for the Brightness, as less white means more color. I used a Selective Color layer to enhance the reds and manipulate the other colors to be as red and yellow as possible. I added a somewhat-light gray fill layer and set it to Multiply at 100%. I then proceeded to add Selective Color layers until the icon was neon (see also: obnoxiously) red. I then finished it off with a dark green Exclusion layer to enhance the reds.
I will now tell you why this doesn't work. First of all, the reds in the icon dominate every other color. Reds are nice for giving images a feeling of warmth and vibrancy, as their opposite (cyans) tend to subdue an image. But like all things, too much of it is not good. It is in fact very ugly. I also oversaturated it, and we have already discussed why oversaturation is a bad idea. Dulling the whites in the image with a Multiply layer (increasing the vibrancy of colors) and adding an Exclusion layer to further enhance the colors is not a good idea.
To elaborate, when you put a gray Multiply layer over an image, it has a tendency to eliminate a lot of white. Bright images will have more white in them, which in turn will slightly overpower the colors and make them appear less rich and... well, colorful. Color-loving people like me will think of this as a bad thing -- and it can be, if used irresponsibly or incorrectly
. The same can be said for using gray multiply layers or Levels to darken an image. Looking at extremely vibrant colors against a dark gray background (assuming your background is white) can eventually strain on one's eyes.
Still doesn't make sense? It's hard to explain, but I've prepared some more Code Geass
images as an example:
Notice how the image on the left has more noticeable colors, while the one on the right doesn't seem as vibrant. They both have the EXACT SAME coloring; the only difference is the gray Multiply layer. I noticed that when I stared at the picture on the left for a while, my eyes began to hurt. The image on the right is a little bright, sure, but it doesn't really have that straining effect on my eyes for some reason. (Of course, this is me personally -- it could be very different for you.)
Still somewhat confused or unconvinced? Here are some icons I made back in the day:
Stare at them for a while. Your eyes might start to hurt.
levels + brightness/contrast
Okay, one recurring problem I see is overly dark or overly light graphics. Darkness and lightness can be used skillfully to convey mood or simply make your coloring aesthetically pleasing. Going to either extreme, like most things in life, is not good.
There are several ways to adjust brightness in your image:
1) A Levels adjustment layer (again, use adjustment layers
2) A Brightness/Contrast adjustment layer
3) A duplicated base set to Multiply or Screen
Of those three options, a Levels layer
is most preferable. It has the most extensive editing abilities. They are also the most complex of the three. Brightness/Contrast layers
are your second-best option, and they can be used solely for contrast purposes. Duplicated bases
are the laziest and perhaps least extensive way of adjusting brightness.
THE LEVELS LAYER
Okay, now this is the most confusing of the bunch. If you've never used a Levels layer in your life, I'll show you what one looks like.
AUGH! IT'S INTIMIDATING! Okay, I've circled stuff and put numbers beside them. I'll explain what each one does in detail.#1
will increase the darkness of your image depending on how high you set the value. For example, typing in 10
will yield a lighter result than typing in 47
. Keep in mind that no matter what value you enter, it will still darken your image.#2
will either increase or decrease the lightness of your image depending on the value you set it at. You'll notice it has decimals. This is because you have to enter the values in increments of decimals. The higher the number, the lighter the result.
Inserting the value 1.50
will make it lighter than the original image. The lower the value, the darker the image.
Inserting the value 0.80
will make it darker than the original image.#3
will make your image BRIGHTER the lower
the value. 255 is the absolute darkest it can be; if you lower it to the value 240
, you will get a lighter result.#4
tends to add a bit of a white brightness to the image depending on how high you set the value. This can potentially wash out your image. I don't really like to use this particular action, but if you experiment with it, you'll likely discover a way to use it.#5
will make your image darker the lower
you set it. It's like adding a gray multiply layer -- which, if you read the tutorial above this one
, may not be a good idea.To see the different Levels effects in action, copy and paste the url below.
THE BRIGHTNESS/CONTRAST LAYER
This one is pretty easy. Brightness
will control the, duh, brightness of your image. It can go into the negatives, which will make your image darker.Contrast
is good for eliminating any washy-looking effects on your image while enhancing the colors. It should be used with fairly low values, such as 10 or 15. Decreasing contrast will put more gray on your image.
Short and sweet: duplicate the base layer (Ctrl + J) and set it to either Multiply
to add darkness or Screen
to add lightness. Adjust the opacity accordingly. Ta-da!
color fill exclusion layers: do's and don'ts
Color fill Exclusion layers are often used for changing, subduing, or enhancing the colors in a graphic. Depending on the color you use, Exclusion layers can have different effects. Sometimes they subdue the colors, other times they make them more vibrant, and sometimes they block out colors and manipulate them into something else entirely. There are obviously many ways to work with Exclusion layers: changing the opacity, using duplicated layers (see previous tutorial if you don't know what I'm talking about) on different blend modes to balance out the effects, and so forth. For demonstrative purposes, I'll be using Exclusion layers alone
set at 100%.
This is our test image, with no Exclusion whatsoever. I have applied coloring to it, as Exclusion layers WILL
stand out more with vibrant coloring.
This is the image with a dark green Exclusion layer. As you can see, it's not bad or dramatic and slightly enhances the colors. It does have a tendency to eliminate whites (most Exclusion layers do), so I advise that you use it with caution and implement other techniques to lessen the effects if needed.OR
...Oh my gosh, what just happened.
Something ugly, that's what. There was once a time when this was actually popular, and 'tis a very depressing time indeed. Personally, I find the results very unpleasant to look at. Anyway, let's reveal the colors used to create such results, and why said results are bad:EXAMPLE #1 - DARK BROWNISH-YELLOW COLOR:
The color used for the exclusion layer in Example #1 was a vomit-y brownish-yellow color. When set to Exclusion, it produced a color effect that I can best describe as washed-out, faded dark neon blue that replaces basically all the whites in the image. The effect also enhances the reds, which in turn gives the wishy-washy blues more emphasis, which in turn makes the image a little eye-straining. As you can see, not only does the subject of the graphic look sick from all that blue light, she also looks like she's stuck in a room with very bad lighting. If you've ever been stuck in a room with bad bluish lighting, you'll know that it starts to hurt your eyes after a while.EXAMPLE #2 - DARK GRAY:
Example #2 uses a dark gray color instead of a vomit-y brown one, but it's really not that much better. Though Exclusion layers can be used to subdue colors, they shouldn't really make your graphics look faded and washed-out. The dark gray layer makes it harder to see the colors in the image. There's a difference between subduing colors and making them harder to see, and that difference is that the former does it without straining the eyes. Again, the coloring used makes it look like the subject is in a room with some terrible lighting. If you're like me, and you've been stuck in a room with bad gray lighting, you know full well that your eyes will start to hurt after a while.
While you could argue that the non-recommended techniques could be used to convey atmosphere, it is still ultimately more important (in my opinion) to create aesthetically pleasing graphics, especially if you are catering to a very broad audience. There are ways to create atmosphere AND still be aesthetically pleasing — it just takes creativity
Another thing: if you set the Exclusion layer's color fill to #000000
, you've basically done nothing. Even at 100% opacity, a black Exclusion layer does nothing to the image, which means it's basically just sitting there in your layers, taking up space.
Conversely, I wouldn't try to use an Exclusion layer with a color fill set to #FFFFFF
. That color is white, and it gives your images a very x-ray-ish and trippy appearance.
Don't let this deter you, however. There are plenty of other colors for you to work with; just remember to choose ones that won't strain on anyone's eyes after a while. People don't like to look at things that strain on their eyes. (Okay, maybe they find it pleasing for like 10 seconds, but you probably want people to look at your graphics with their mouths open, amazed to the point of speechlessness. Something like that, anyway.) That sounds really obvious, but people create eye-straining graphics all the time. I spend a lot of my time squinting at graphics. I don't like squinting just so I can see a 100 x 100 square.