prillalar | Simple steps to better icons

Simple steps to better icons

I am not an icon expert. But I do have some basic knowledge of a few simple things you can do to make your icons look better, especially when working with screencaps. Some of this advice is specific to photographs, as opposed to illustrations. But some is applicable to any icon.

This is a compilation of things I learned from other icon tutorials, from noodling around, and from the designers I work with.

I am using Photoshop CE, but these techniques are very basic and so should work pretty much the same back several versions.

As an example, I'll make an icon from one of the PoA trading card scans up at The Leaky Cauldron.

Here's the original image:

Cropping & Resizing

This is the crop tool:

To crop an exact square, hold the shift key down as you go. In my version of Photoshop, up in the bar just below the menus, I can preset the size of the cropped area:

width: 100px
height: 100px
resolution: 72 pixels per inch

That way, I can draw the square any size I like and when I crop it, it will automatically be resized to 100x100. Otherwise, you'll need to resize manually.

NB: don't make your image 100x95 or 100x90. People will look at it and think something is a bit odd. If you don't want to use a square, go for something like 100x60 or 100x70.

Cropping the image determines the impact that it's going to have. A good rule of thumb is that it's usually more interesting if the focus of attention isn't right smack in the middle of the icon. Off to one side is good. That doesn't mean you have to leave the rest of the area blank, but the focus -- maybe the eyes -- should be off to the side.

If you want a more concrete example, put the focus -- the most interesting part -- on one of the red dots:

But I'm usually not that exact. I'm not an expert cropper, but I'm better than I used to be.

Keep in mind: you don't have to put the whole head in the frame. Crop in closer. You can use unusual cropping to bring focus on certain features or elements. Here I wanted attention to be on Kaylee's pretty smile, so I left the eyes out altogether:

Here's how I've cropped Ron. The eyes are more or less in the top right quarter of the frame and we get a good look at his poor worried expression:

Adjustments

Usually a screen cap isn't all that great quality, so you'll want to make some changes to the levels and maybe the colour.

The first thing I do is to make two copies of the layer. The bottom layer I lock and turn off the visibility. That's just so if I screw something up later, I can go back to it.

Next apply some adjustment layers and blending options. I don't always do these in the same order.

Blending Options

Now I have two identical visible layers. On the top layer, I'll change the blending. There's a drop-down menu on the layers palette that usually says "normal". There's lots of stuff under there, though, and it all changes how the layer blends with the visible layers beneath it. Try a few and see what they do. The one I use most often is Soft Light. I find that it gives an interesting definition to the photo without making it look too much like a special effect.

I don't always use blending options. But they can be cool.

Here's Ron with the top layer set to Soft Light:

Adjustment Layers

Adjustment layers are one of the most useful things in Photoshop. You can easily change things like level, contrast, colour, etc, but since those changes are on their own layer, you can remove them later or edit them further.

The thing you'll most likely want to change is the levels. Screenshots are often rather dark and murky, so we want to brighten things up.

Select the top layer. From the bottom of the layers palette, click on the adjustment layer icon: and choose Levels.

You'll get a window with sliders, like this:

They control the light levels. I never change the output levels; I only use the input level sliders.

On the right is the highlight slider, the white one. Usually, I pull that one up to around where the black line starts.

On the left is the shadows slider, the black one. I sometimes do the same with that -- pull it to where the black starts, to make the shadows a little deeper.

In the middle is the midtones slider, the grey one. It's best to fiddle with that one last. Usually I'll bring it to the left a bit more until I think the picture looks better.

Click the preview box on and off and you'll see what a difference it makes. When you're happy, just click OK.

When I was done with Ron, my sliders looked like this:

And here's Ron with the level adjustment applied:

Play around with some of the other adjustment layers too. I often use them to adjust the colours when I think the skin is too red or too green, for example. As well, if the picture is a bit washed out, add a bit of saturation to it.

Here's Ron with a Hue/Saturation layer with +15 to saturation:

Type

Most icons have some sort of caption. Choose your text, choose your font, and add it. It often looks good to use a colour for the text that's already in the photo. I use the eyedropper tool to pick up a colour -- light or dark as appropriate -- then use the colour picker to change it a bit, while still keeping it in the same range. (Usually white or black will look good too.)

Most fonts can be set to whatever size you like. On the character palette, look for the Anti-Aliasing menu at the bottom. It gives you a choice between "none", "sharp", "crisp", "smooth", or "strong". Normally, I use strong since it gives the type a bit of a boost in intensity and can make it easier to read. But use whatever you think looks best for your type.

NB: Pixel fonts, also called bitmap fonts, like Silkscreen, or 04b, are intended to be used only at one size (often 8px) and should have the anti-aliasing set to "none". They are often much more readable at small sizes than normal fonts.

Text on an icon can be hard to read, so to set it off, you might want to add a Layer Effect such as a drop shadow, outer glow, or stroke (outline). The Layer Effect menu is on the bottom of the layers palette and looks like this: Try a few and see what looks best on your type.

For Ron, I used the font LainieDaySH. I picked up the colour from Ron's face and lightened it so it was an off-white. The anti-aliasing is set to "strong". I didn't add a shadow or a glow -- the text was readable without them.

Borders

I like borders. I think they make an icon look more finished -- it gives it closure. There are lots of different things you can do, but the easiest is just a simple stroke around the edge.

Add a new layer at the very top, then select all. From the Edit menu, choose Stroke. Set the width. I often use 1px or 2px.

Use the eyedropper to pick up a colour you want, just like with the type. I often use black or a dark colour from the photo, but sometimes a lighter colour can look good too.

Location should normally be set to "Inside". Click OK and there you go.

I added a 1px black border to Ron. Since the photo was already so dark around the edges, it doesn't stand out. But I think it makes a difference.

Sharpening

This is a very important step. Unless you are deliberately going for a blurred or grainy look, sharpening will make the photo look much more professional.

This is a little bit complicated. You could actually do this part a lot earlier, before you add text and a border and it would be easier. I usually do it last because I prefer to export the sharpened icon, but then not save the sharpened version of the Photoshop file. That way, I can make adjustments later on to the photo layers if I want to tweak the icon.

First, save your file. Then in the layers palette, select one of your visible photo layers. Link the other photo and adjustment layers to it by clicking in the blank spot next to the eye. That will add a little link icon. Don't link the text or border layers.

At the top of the layers palette, on the right side, click on the arrow. A menu will drop down. Choose Merge Linked. They will all collapse into one layer.

Make sure that layer is selected. From the Filters menu, go to Sharpen and over to Unsharp Mask. Amount should usually be 100%, Radius 0.4, and Threshold at 0 or 1. Click OK.

(Note: there's actually a formula for determining the Radius in Unsharp Mask: pixels per inch/200. When you're working with files for screen viewing, you should be at 72 ppi. So, .36, which Photoshop rounds to .4.)

I ran into a bit of a problem with Ron here, because this is a scan of a trading card, not a screen shot. It's pretty grainy and sharpening too much can make it look worse, not better. (I should probably have tried sharpening the file when I began. It's too late now. *g*) I set the Amount to 50% and that looked not bad. But maybe the non-sharpened version was better.

With a screenshot or a photo, though, sharpening often makes quite a difference.

Export your file as a jpeg. For icons, I often use a fairly high quality, like 60 or 80. For website graphics, I usually stick with 40 or lower.

Here's Ron with just text added, and then with all the adjustments and border:

And that's it. Small things that can make a big difference.

I welcome your input and/or corrections. :)

Flat | Top-Level Comments Only

Oh, this is WONDERFUL. I have to see if I can do all this with Photoshop Elements! Thank you so much. Your time spent on this was not wasted.

I'm glad you found it useful! I don't know what all you can do in PE, but most of it should be the same.

Hi! *waves*
I found you through friendsfriends and stumbled upon this. Thank you so much for taking the time to post this. :) I've added it to my memories.

Cool! I'm glad it was helpful.

This is very helpful :)

I'd probably just add a few more things.

Cropping: I tend to select the part I want from the image and paste it onto a new image and resize it. Takes a lot longer than Hal's way, but that way, I've got a new image, and I'm not tempted to press 'save' on my cropped image and losing my beautiful original photo. But I'm just dumb like that.

Colour: When picking a colour for your border (and borders often *do* look better on icons, giving it a clean, finished look), it doesn't always have to be black. Often a colour that was used in the icon works better, or try the colour you used for the text. Often people are obsessed with using only black borders when a different colour would have given a much better effect.

Same goes for text. Text does not have to be white or black. If you want to add colour to text and the only text that is legible is either white or black, attempt putting a border around the text in a different colour.

To do this, type your text as normal, then:

Layer -> Layer Style -> Stroke...

Choose a width of about 1px, in a colour that matches and voila! To choose a colour, you can also hover over your photo and you will notice a 'dropper' cursor. This will choose the exact colour from your photo.

Lastly,

When cropping your photo, Hal's pointers are very very good. Please decide whether you want to add text *before* you crop, and crop the photo accordingly. If you are going to put the subject of your icon smack bang in the middle of the icon, realise that it will be the focus of the icon, and that there is no room nor need for text.

Always a good point to remember that not all icons require text.

And here's what I came up with, using just the few steps you went through, Hal:

Yay!

and, just because I was curious, mine:

Thanks for the additional info! I always love your icons.

*taps foot* Now why didn't you post this before I started hashing up my icons?

Hee! Sorry I'm so late. *g*

As someone whose photoshop knowledge is entirely based on "Well, let's try... this!", thanks. *g*

Cool! Photoshop can be bewildering -- there's so much you can do with it.

Heh. I had no idea someone would go about this in a way that's so different from mine. But I learned Photoshop on 4.0, so I tend to do things the hard way when I shouldn't have to.

I hardly ever use sharpen, though. Or, rather, I do, but then I end up doing a blurry layer on top of it and playing with the opacity. Okay, I'm babbling. I should do one of these soon, too, just so everyone knows what I'm talking about.

Interesting! I'd love to hear about your methods. I think the whole sharpening thing depends a lot on personal preference, too. I really like a crisp, sharp photo so that's what I usually try to achieve.

For example, this icon. Sometimes, I just sit and stare at it, I love the definition of it so much. *g*

And to make a good-looking non-sharp icon, you really have to know what you're doing, so I think for beginners, it's easier to sharpen.

someone...

laurakaye, I think, had a good icon tutorial in her lj a while back as well. She uses some of the same tricks you do, but also different ones. Interesting.

There are so many different things you can do in Photoshop -- half the time, there are three separate ways to achieve the same thing. I always find it interesting to hear about other people's methods -- usually I learn something really cool.

This is very interesting!

I have an another approach that you might find useful, too - I use Photoshop CS, and I generally prefer to use Curves rather than Levels to adjust color cast and brightness. I picked up a great technique from a book on using Photoshop for digital photographers. It involves setting the three eyedrop tools in the Curves dialog box - I can't remember the settings right now, since I'm at work, but if anyone's interested I can report back later. After setting the RGB values for each eyedropper, click the "dark" eyedropper (farthest left) on the darkest point in the picture, a point that is supposed to be black, and the "light" eyedropper (farthers right) on the lightest point in the picture, as close to pure white as possible. (You can figure out the lightest and darkest points by using a Threshhold layer, pulling the slider to the left and then slowly back to the right (to find the darkest point) and then making a mark using the Color Replacement tool, and then opening the Threshhold layer again and pulling the slider all the way to the right and then slowly back to the left to find the lightest point, again marking with the Color Replacement tool).

Then click the "graypoint" eyedropper (middle) on a point in the pic that's supposed to be neutral gray. Often you can't find one of these, so I try a bunch of different spots that look vaguely grayish, undoing between each, until I find the one that gives me the best look.

Finally, grab the curve right at the center point and move the whole thing very slightly up, to brighten the entire picture.

I've found that this simple method drastically improves image quality every single time. Sometimes I might want additional effects (I like using the clone tool to get rid of annoying things in the background, for example), but this always makes it look better.

I'm a fairly recent convert to Photoshop, and man, that is one powerful tool! I can't believe the huge difference in the things I can do, compared with Paint Shop Pro, which I used to use.

One more point: I just learned another way to make borders. I used to use the method you describe, but the problem is, the border cuts off the edge of the icon - that's the effect of using stroke inside.

What you can do instead: first resize the icon to 98x98 instead of 100x100, to make room for a 1px border. Then open the Canvas Size dialog (under Image), I think. Click the box for relative. Then insert 2px for width and 2px for height (this has the effect of making the new canvas 2px wider and 2px higher than the original, allowing for a 1px border on each side). Click the color swatch and choose black (or whatever color you want), and then okay.

This method starts with the image being slightly smaller, but it puts the border outside the image, so if your picture or text extends right to the edge of the image, none of it is cut off by the border.

I usually just plan for the border when I crop. And 1px usually doesn't impinge on the rest of the icon too much. But that's a good idea if you want to be sure your whole cropped image stays in.

Sometimes I like to break the border with the text, like in this icon. I love this one for the way the border interacts with the text and with Roy's hair. Plus, it's Roy. *g*

This sounds really useful! If you have more info on the correct settings, I would be most grateful. I do a fair amount of image work at work as well, for websites, and I'm always trying to learn ways to make people's horrid photographs look better.

Okay, I'm home now so I can add in all those details ... I got this method from a book called "The Photoshop CS Book for Digital Photographers," by Scott Kelby (the editor of Photoshop User magazine). The book is full of great techniques - it's nice because it tells you what he think is the best way to do something, rather than going through every single option.

The technique:
- First choose Curves from the Image menu under Adjustments. This opens the Curves dialog boxo
- In the bottom right of the box are three eyedroppers - from left to right: Shadow, Midtone, Highlights
- Click on the Shadows eyedropper (farthest to left). A Color Picker appears telling you to "select target shadow color." In the R, G, and B values (bottom left three entries), enter 20, 20, and 20. This helps get rid of color cast by making sure the sshadow area doesn't have too much of one color, but retains sufficient shadow. Click ok.
- Click on the Highlights eyedropper (farthest to right) and enter 240, 240, and 240 in R, G, and B.
- Click on the Midtone eyedropper (middle) and enter 128, 128, and 128 in R, G, and B.
- Now you need to be able to figure out the darkest and lightest parts of your image. If the image has areas that you know are supposed to be black and white you may be able to do this by eyeballing. If not, use Threshhold levels by doing the following.
* First, exit out of Curves (and when it asks if you want to save the new target colors as defaults you can say yes so you don't have to set them every time).
* Next go to the "Layers" menu, choose "New Adjustment Layer," and pick "Threshold." When the dialog appears, drag the slider under the histogram all the way to the left so the photo is completely white. Slowly drag it back to the right. The first black areas that appear are the darkest parts of the image. Click OK to close the Threshold dialog.
* Now select the Color Sampler tool and click on the darkest area. A target appears marking the spot.
* Go back to the Threshold layer and open it (you can double click on the layer in the Layers palette to bring up the dialog). Drag the slider all the way to the right so the photo is completely black, then slowly drag back to the left - the first white areas that appear are the lightest parts of the image.
* Click OK, then click on those lightest parts with the Color Sampler tool to mark them with a target.
* Now discard the Threshold adjustment layer, so the image looks normal again but with the targets on it.
- Now go back to the Curves dialog. Select the Shadow eyedropper (farthest left) and center it in the "darkest" target (or an area that's supposed to be black if you didn't use the Threshold stuff) and click.
- Now select the Highlight eyedropper (farthest right) and center it on the "lightest" target (or an area that's supposed to be white) and click
- Now select the Midtone eyedropper. Click it on a place in the image that looks medium gray. Sometimes you can't find such a place - I usually experiment with various grayish looking areas (undoing between each one) until I find one that makes the picture look the way I like.
- Finally: in the Curves grid, click on the very center of the curve and drag it upwards a bit to brighten the midtones of the image - as much or as little as you want; usually it doesn't take much.
- Click OK. You can remove the targets by clicking Clear on the Options bar.

Like I said, I've found this a foolproof way to drastically improve images. You may want/need to do more manipulation afterwards - I usually don't do much for icons - but it's a great start, especially for photos!

Wow, that's so cool, thank you. I tried it on several photogrpahs and mostly it worked really well. On one, it seemed to make the colour pretty weird.

I also noticed that those same eyedroppers are in the levels dialogue, and you can use them in the same way. That seemed to give a pretty similar effect.

At some point, I really want to learn how to use the curves to change the colours in the image. I'm forever trying to find a better way to make skin tones look normal.

I'm glad it worked for you! It's definitely not the most tailored or specific approach, but it seems to fairly reliably significantly improve images.

You know, considering how complicated Photoshop is, it's really nice, and useful, to be able to share tips and pointers and shortcuts. Maybe you should do this on a regular basis - or maybe we should start an LJ community for icon-making and tip-sharing ....

is there anyway to do this in photoshop 6.0, do you know? the curves dialog doesn't ask for rgb settings...

that sounds really interesting-- if you have the time to add in more details, that'd be great.

I added the details in a reply to

prillalar right above your comment! Hope you find them helpful.

Thanks, Hal. I'm on the caveman version of The Diabolica so I'm missing some of these functions, but I also seem to have stumbled on a few of these techniques and I'm happy to get my "accidents" ratified by somebody who knows what the heck she's doing. And I picked up some good tips, too! Thank you!

Yay! I always learn something new when someone shares their methods with me, so I'm glad to return the favour. :)

Linked here from

quickquote, and I just wanted to say THANKS! I get asked icon how-to questions all the time, and I'm definitely going to hold onto this link and direct people here. Really concise and nicely done!

Thanks! I'm glad it was helpful to you. This is basically all the stuff I wish I'd known right from the start.

You need the output level if you're editing a picture which will later be printed on paper.. (had to learn that when I was working as chief editor for a student newspaper).

Just move the left slider a little to the right, and the right one a little to the left; that way your picture won't include any areas/elements that are a 100% white or a 100% black (the white is especially important when printing on white paper -> white on white just doesn't look good).

:)

Ah, that makes sense. I've never done any print work -- just for the web. Thanks!

Beautiful, Hal. I couldn't have done it any better myself.

Thanks, sweetie. :)

This is great. I consider myself a pretty experienced icon maker, but you pointed out a few things which I'd never realized I could or should do. Thanks!

::bookmarks page::

I'm glad it was helpful! I'm always learning new stuff from other people, too.

Linked from

quickquote.

Absolutely fantastic, thanks for posting this; your post and various comments are immsely useful. :)

*adds to memories*

Glad to hear it!

Some of this I'd learned from icon communities and my own experiments, but I never could figure out how people managed borders, and I kept forgetting to ask. Now, thanks to this tutorial, I just went back and added borders to all the icons I've made for myself. Thank you so much!

Cool! I'm glad it was so immediately useful to you. :)

(deleted comment)

I'm really glad it was helpful! And I love the colours in your icon -- so vivid.

thank you for the wonderful tutorial :D

spread the r/hr love. hehe.

I'm glad it was useful!

I just got Photoshop CS and I had this link in a group e-mail and I just wanted to say thank you so much for the help. I basically knew how to crop and sharpen in Photoshop but I didn't know anything about the other effects.

Now I just need to find how to make animated icons, and I'll be all set.

This is fabulous! I'm adding it to my memories, in anticipation of the day when I will actually master the basics of Photoshop and start making my own icons. Thanks for the great level of detail!

Flat | Top-Level Comments Only

Simple steps to better icons

Cropping & Resizing

Adjustments

Type

Borders

Sharpening

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject