Tutorial on saving icons
This is just a very basic, quickie tutorial on how to save icons in Photoshop (these screenshots are from PS 7.0 for the PC, but apply to some other versions too) so that you don't lose quality or compromise the image colors.
I'd like to add that a reason why some icons haven't won in our contests is that they were poorly saved. Everyone falls prey to it sometimes; my eyesight isn't perfect, personally, so I miss bad compression sometimes, but it always helps to know what you did wrong!
So, make yourself an icon of some sort. I played around with a still of Jill Valentine, personally. ^_^ When you're ready to save, go to File > Save for Web... (Or hit Alt/Shift/Ctrl/S, which is basically like mashing all the modifier keys in the corner of your keyboard.)
If you look in the upper right of the window that pops up, you'll see some fun buttons and such.
Choose whether you want JPG or GIF--you want GIF if you have transparency or loads of red; for everything else, though, you want JPG. (Animated gifs are another deal entirely, for a future tutorial.) The next most important thing is the quality slider. For icons, I've yet to find one where it was so big that the quality needed to be lowered, so I keep that at 100 all the time.
However, when you're saving a large image and need to keep the size down--for submitting to sites that have size limits, for instance--look at the lower left area.
My icon is 11.32K big. (LJ icons must be less than 40K, for reference.) If you fiddle with the quality slider, you can see how much that affects this number.
Here's how much quality can be affected--on the left is my icon saved at 100 quality, and on the right is the same icon saved at 0 quality.
The right one is smaller, but uck! Look around Jill's silhouette, especially to the left of her. Seems like there's some sort of outline, a ghosting of the image. This is a very, very badly saved image.
And as a note, when I did a Save As and chose JPG for that same base image (and saved it at full quality), it was 10K larger and looked identical to the icon saved with Save for Web at 100 quality. I didn't notice any shift in the color, but some hues can be really strangely affected.
So, hopefully I overexplained things. But if you have any questions, please let me know! I'm also preparing another basic tutorial on how to save animated GIFs with PhotoShop's partner program, ImageReady; therefore, it'd help me write it better if I know I've been confusing in this tutorial. I do teach for a living, but my strength is in explaining rocks, not computers. ^_^
- FAQ, rules, and other info in the userinfo.
- Request here.
- See the memories for older icons/bases.
- Get your icon critiqued by us.
- Comment and we'll love you forever!
I'd like to add that a reason why some icons haven't won in our contests is that they were poorly saved. Everyone falls prey to it sometimes; my eyesight isn't perfect, personally, so I miss bad compression sometimes, but it always helps to know what you did wrong!
So, make yourself an icon of some sort. I played around with a still of Jill Valentine, personally. ^_^ When you're ready to save, go to File > Save for Web... (Or hit Alt/Shift/Ctrl/S, which is basically like mashing all the modifier keys in the corner of your keyboard.)
If you look in the upper right of the window that pops up, you'll see some fun buttons and such.
Choose whether you want JPG or GIF--you want GIF if you have transparency or loads of red; for everything else, though, you want JPG. (Animated gifs are another deal entirely, for a future tutorial.) The next most important thing is the quality slider. For icons, I've yet to find one where it was so big that the quality needed to be lowered, so I keep that at 100 all the time.
However, when you're saving a large image and need to keep the size down--for submitting to sites that have size limits, for instance--look at the lower left area.
My icon is 11.32K big. (LJ icons must be less than 40K, for reference.) If you fiddle with the quality slider, you can see how much that affects this number.
Here's how much quality can be affected--on the left is my icon saved at 100 quality, and on the right is the same icon saved at 0 quality.
The right one is smaller, but uck! Look around Jill's silhouette, especially to the left of her. Seems like there's some sort of outline, a ghosting of the image. This is a very, very badly saved image.
And as a note, when I did a Save As and chose JPG for that same base image (and saved it at full quality), it was 10K larger and looked identical to the icon saved with Save for Web at 100 quality. I didn't notice any shift in the color, but some hues can be really strangely affected.
So, hopefully I overexplained things. But if you have any questions, please let me know! I'm also preparing another basic tutorial on how to save animated GIFs with PhotoShop's partner program, ImageReady; therefore, it'd help me write it better if I know I've been confusing in this tutorial. I do teach for a living, but my strength is in explaining rocks, not computers. ^_^
- FAQ, rules, and other info in the userinfo.
- Request here.
- See the memories for older icons/bases.
- Get your icon critiqued by us.
- Comment and we'll love you forever!