Bare bones icon tutorial
Okey-dokey, here's a simple tutorial for a bare-bones icon, made using Paint Shop Pro (neat and simple for your basic imaging needs, you can find shareware versions for free and even the full thing won't break the bank). The same tips apply for all software, as long as they have decent imaging options (no, Windows Paint doesn't count). Yes, this is for you, the average LJer.
How To Create An Icon That Doesn't Hurt The Eyes:
First things first: create a simple 100x100 icon base. This is what we'll be sticking a pic and some text on. Easy enough. Remember to set the resolution for the standard internet 72 dpi, and having a transparent raster background makes it easier to spot the difference between layers.
Then pick the photo you want, here our Cockney darling Borg is doing the honours, all dolled up and ready to go--select him and copy him:
Yeah, good old Borg's makeup is larger than life and certainly larger than 100x100. Well, we all have to make sacrifices. Paste his head on the icon space yay.
To squeeze him into shape, the Raster Deform Tool is your friend. Keep the right mouse button down to scale in proportion, otherwise you'll end up with a very flat Brian Croucher. I'm sure some of you would enjoy that, but moving on...
So, now we have cut him down to size. Since it's a nice and nifty DVD grab, we won't need to enhance it, really (more on that later if you insist--just keeping it simple here). What we do want is a suitably smart-arse caption. Click on the text tool and take some time to fiddle with the text settings, size and such.
Now, I can't stress the importance of this little dialog box enough.
Antialias is your FRIEND. It's a thingy that smooths the edges of letters so they won't appear all craggy. Observe:
No antialias:
Antialias:
To be fair, Arial is ok in small sizes even without antialias and with characters like "o" and "i"; but it's always better to use antialias anyway--it just looks a lot smoother. The more elaborate your font is, the better it looks smoothed out. Because we don't really want anything like this, do we?
'cause it's not like he's saying "Oil", is he? Unless the vibro-digits need more lubrication.
Another nifty tool is the Stroke option. It puts a border of the colour of your choice around the letters--especially handy if you want the text to stand out properly and if there's a danger of it melting to the background. Unfortunately, Paint Shop Pro's Stroke is annoyingly blurry. But it's still better than nothing, eh?
As you can see, with PSP it only works with large letters and even then it's a bit dodgy. And remember, clear solid colours are the best for good text. If you've got warm colours on the picture itself, i.e. a person's face and body, STAY AWAY FROM REDS AND YELLOWS. Unless you are a 1337 artist (which I'm not) and can use lots of nifty shadings underneath the letters and the few proper shades that make the text readable. Look for a nice contrast--bluer colours for warm backgrounds, light text on dark backgrounds and vice versa. There's nothing worse than a bit of loopy non-antialiased red or yellow text going over someone's face or body, it's a strain on the eyes to try and figure out what the hell the text is all about (and if you're lucky, it might not even be an inane pop lyric).
And to save your image--the simplest way to retain most of the colours discernible to the eye and to avoid the horrid jpeg compression blur that the combo of a) 40k size limit and b) your software wants to inflict on you, is to just save the whole thing as a .gif. Unless we're talking millions of subtly shaded rainbows and shadowings going on in the image, a .gif will do just fine. Lookie.
Still fit for a night of disco dancing.
How To Create An Icon That Doesn't Hurt The Eyes:
First things first: create a simple 100x100 icon base. This is what we'll be sticking a pic and some text on. Easy enough. Remember to set the resolution for the standard internet 72 dpi, and having a transparent raster background makes it easier to spot the difference between layers.
Then pick the photo you want, here our Cockney darling Borg is doing the honours, all dolled up and ready to go--select him and copy him:
Yeah, good old Borg's makeup is larger than life and certainly larger than 100x100. Well, we all have to make sacrifices. Paste his head on the icon space yay.
To squeeze him into shape, the Raster Deform Tool is your friend. Keep the right mouse button down to scale in proportion, otherwise you'll end up with a very flat Brian Croucher. I'm sure some of you would enjoy that, but moving on...
So, now we have cut him down to size. Since it's a nice and nifty DVD grab, we won't need to enhance it, really (more on that later if you insist--just keeping it simple here). What we do want is a suitably smart-arse caption. Click on the text tool and take some time to fiddle with the text settings, size and such.
Now, I can't stress the importance of this little dialog box enough.
Antialias is your FRIEND. It's a thingy that smooths the edges of letters so they won't appear all craggy. Observe:
No antialias:
Antialias:
To be fair, Arial is ok in small sizes even without antialias and with characters like "o" and "i"; but it's always better to use antialias anyway--it just looks a lot smoother. The more elaborate your font is, the better it looks smoothed out. Because we don't really want anything like this, do we?
'cause it's not like he's saying "Oil", is he? Unless the vibro-digits need more lubrication.
Another nifty tool is the Stroke option. It puts a border of the colour of your choice around the letters--especially handy if you want the text to stand out properly and if there's a danger of it melting to the background. Unfortunately, Paint Shop Pro's Stroke is annoyingly blurry. But it's still better than nothing, eh?
As you can see, with PSP it only works with large letters and even then it's a bit dodgy. And remember, clear solid colours are the best for good text. If you've got warm colours on the picture itself, i.e. a person's face and body, STAY AWAY FROM REDS AND YELLOWS. Unless you are a 1337 artist (which I'm not) and can use lots of nifty shadings underneath the letters and the few proper shades that make the text readable. Look for a nice contrast--bluer colours for warm backgrounds, light text on dark backgrounds and vice versa. There's nothing worse than a bit of loopy non-antialiased red or yellow text going over someone's face or body, it's a strain on the eyes to try and figure out what the hell the text is all about (and if you're lucky, it might not even be an inane pop lyric).
And to save your image--the simplest way to retain most of the colours discernible to the eye and to avoid the horrid jpeg compression blur that the combo of a) 40k size limit and b) your software wants to inflict on you, is to just save the whole thing as a .gif. Unless we're talking millions of subtly shaded rainbows and shadowings going on in the image, a .gif will do just fine. Lookie.
Still fit for a night of disco dancing.