An Icon-Making Guide

It's April 2nd in half of the world already, might as well kickstart it.

As cool as it is to get random praise on a random day, I decided to do something useful for Icon-Maker's Appreciation Day instead of just sitting pretty. *g*

So, without further ado:


Notes:
1. This post is a work-in-progress. New links will probably be added in the future.
2. Feel free to add it to your memories, link it, whatever. No need to ask.
3. I obviously linked to the best tutorials/galleries I could find on each subject. If you think there are better ones, please, do tell me about them.
4. You can probably find a whole lot more about anything icon-related in the icon_tutorial's memories.
5. Many thanks to _jems_ for compiling most of the screencap links. :)



Index
1. Overview
2. Image Prep
3. Cropping/Resizing
4. Coloring
5. Text
6. Detailing
7. Hi-Res Screencap Links
8. Other Links



1. Overview

1.1. Icons

Icons are 100x100 pixel images that can be no bigger than 40KB in file size. Livejournal currently accepts them in 3 different formats: JPEGs, PNGs and GIFs [still or animated].

related links:
. A great article about which format is appropriate for each type of image: JPEGs, PNGs or GIFs? NEW
. How to upload your icons, from the LJ FAQ.
. merky explains how to credit iconmakers.
. teh_indy writes a Do-s and Don't-s in the icon community, both for iconmakers and icon users.
. ignited has a section on Icon Etiquette in this tutorial.


1.2. Digital Images

There are several different types of digital images. The main three are:

- Vectors graphics: use geometrical primitives such as points, lines, curves, and polygons to represent images in computer graphics. [Corel Draw and Adobe Illustrator are two vector graphics softwares]

- Raster graphics: the representation of images as a collection of pixels (dots).

- Animations: moving images. [To make animated GIFs: Adobe Image Ready comes with Adobe Photoshop, Animation Shop comes with Paint Shop Pro]

As most icons are made from scanned pictures and screencaps in JPEG or PNG format -- both types of raster images -- this guide will focus on them.

related links:
. An interesting Vector vs. Raster discussion.


1.3. Softwares

- Adobe Photoshop [PS]: the most famous of the imaging softwares, its only letdown is the expensive price.

- Paint Shop Pro [PSP]: As good as PS, and cheaper too. Jasc, the company that created PSP, has been recently bought by Corel, so we'll have to wait and see on the changes that might come.

- GIMP: FREEWARE cousin of the aforementioned programs.

Obviously, there are others: Macromedia Fireworks, Corel Photopaint, etc.

IMPORTANT: MS PAINT is NOT the right tool to make icons.

related links:
. _jems_ writes a Basic Photoshop Tutorial.
. ealias writes two basic tutorials for Photoshop: Tools and Basics and Image Adjustments. NEW
. ragingquietly writes a nifty Photoshop Glossary.
. vrya's Photoshop Not a Tutorial. [ESSENTIAL READ]
. dafnap explains why it's Better Living Through Shortcuts [PS].
. syndarys writes a Paint Shop Pro workspace guide for icon_tutorial.
. syndarys also writes Several Paint Shop Pro tutorials.


1.4. Aspect Ratio

The single most important thing about screencaptures is that they NEED to have the RIGHT proportions. The aspect ratio is what dictates said proportions. Most movies have a 16:9 aspect ratio, whereas most TV shows have a 4:3 aspect ratio [this, however, has been changing, thanks to HDTV and widescreens. It's still early to say that the 4:3 aspect ratio is dying, but it might happen in the next decade].

Proportions are mathematical relations between two quantities. They should be obeyed above all things if you want your screencaps to look human.

related links:
. I explain it further in an Aspect Ratio For Dummies guide.



2. Image prep

Scanned images and screencaps usually need some preparation before we start adding effects to them. As a rule, they'll probably need their brightness/contrast fixed, some coloring fiddling and some sharpening/blurring twinkling.

Most scanned images are too light and not well contrasted. OTOH, most screencaps are too dark and the coloring can be off -- the dark parts tend to green, the light parts tend to red. All this should be fixed before you start making your icon.

Of course, it's always a good thing to start with the best possible image. High resolution is our friend. A good scanner will go a long way in creating a crisp and clean hi-res scan. And DVD caps are better than AVI or MPEG caps.

related links:
. _jems_'s Capping Guide. NEW
. Automatic screencapping with VLC, by jadeite_icons NEW
. Layer masking/Blending for beginners.
. sinecure's Blending Tutorial.
. givinglove29 shares her image prep techniques in this tutorial.
. How to prepare screencaps discussion [be sure to read the comments!].
. _jems_ writes an Icon Prep Tutorial.
. This tutorial of mine has a big section on image preparing.
. txvoodoo writes a tutorial on using Photoshop Levels to correct dark images while preserving shading.
. sinecure writes a Lightening, Coloring, and Darkening tutorial.
. elli shows how to Prepare images with Adjustment Layers
. herdestiny writes a brilliant Curves tutorial. Curves are great for fixing/changing contrast, brightness and coloring.
. Another Image prepping through Curves tutorial, by typicrobots NEW
. tlace writes a Smooth Skin tutorial.
. Another Smooth Skin tutorial [just ignore the tip about the tanned look, please. That's wrong and scary *g*].



3. Cropping/Resizing

Since icons are so small, cropping is sometimes half of the work. Learning how to do it well [keeping the right aspect ratio while at it!] and finding the best ways to crop an image are crucial to making good icons.

related links:
. quebelly explains icon cropping.
. I start out this tutorial by talking about cropping.
. I also babble about cropping in the end of the Aspect Ratio for Dummies guide.



4. Coloring

You can do so much with colors. From using solid color layers in different blend modes to gradients and stock images and filters and Photoshop's Variation adjustment... the possibilities are endless.

related links:
. stronglikemusic writes a great Gradient tutorial [PS].
. aaskie writes about basic color theory in this Selective Color tutorial. NEW
. cooldecade teaches us how to use Gradient Map Adjustment Layers [PS].
. I talk a bit about coloring and make-up in this tutorial.
. inexorablyhere explains How to use exclusion layers
. teh_indy talks about Muted Colors.
. inxsomniax's Colorization Tutorial.
. There's a lot more about coloring in this tutorial, also by inxsomniax.
. metrosex talks about coloring with gradients in different blend modes here and here.
. sinecure explains different ways to Colorize a B&W image.
. awmp explains the Basics of Vibrant Coloring.
. LJ gradients community: icongradients



5. Text

So we're clear: Text brushes are LAZY and UNCREATIVE. Avoid them at all costs.

5.1. Anti-Alias.

Anti-aliasing techniques are used to reduce the crispiness that might affect the borders of a graphic during image compression.

In laymen terms: only pixel fonts are supposed to be crisp. They DON'T need anti-alias. Every other font EVER needs to be anti-aliased to look smooth and to blend well with the background.

ignited has visual aid for anti-aliasing in the Text section of this tutorial.

related links:
. quebelly writes an Icon making font guide.
. quebelly also writes a tutorial on How to Use Pixel Fonts.
. Text tutorial by muzakgurrl.
. Text tutorial by saava.
. Icon text tips from _jems_.
. teh_indy explains how to make Curved Text with PSP.



6. Detailing

Adding details and effects to icons is what makes them unique. Here are some of the main types of detailing we can find in most imaging softwares:

6.1. Filters

Everyone seems to know the Sharpen and the Blur filters very well, but there are many many more that are mostly forgotten by icon-makers. Noise Filters, Distortion Filters, Artistic Filters, they all come with PS and PSP and they can be incredibly useful. Be sure to play with them all to figure out how they transform your images. Just remember you shouldn't overdo them -- especially when you've just started using them, moderation is the best way to go.

related links:
. Sharpening 101. [PS]
. Photoshop Blur Filters.
. Using Filters in Photoshop.


6.2. Patterns/Textures

Patterns are great for backgrounds as well as to give texture to your graphics. Using them with PS is really simple, as they work exactly like the Bucket Fill tool. Textured images, when blended to your main picture, can give depth or change the overall look of your icon. Again, the important thing is to know how to use them moderately.

related links:
. inxsomniax offers both free and exclusive patterns/textures at Hybrid Genesis.
. inxsomniax explains How to create textures using only Photoshop Default Tools.
. vrya explains how to use Stock Images in Collages.
. hecatesknickers' Tips for using Textures and Stock Images in Icons.


6.3. Brushes

Brushes are exactly that -- simulations of real life brushes transported to graphics software. PS and PSP divide them in two main groups -- brush and pencil. As in real life, brushes are soft [i.e. anti-aliased by default], pencils are hard [i.e. NOT anti-aliased]. Both softwares come with a plethora of default brushes, but you can install as many others as you want. You can also pick the installed Brushes to use with your Eraser tool. Don't forget that.

Useful tips when using brushes:
- The Zoom tool is your best friend when using icon-sized brushes.
- Always apply a brush to a new layer.
- Play with the blend modes!
- Grunge brushes like LOW (i.e. below 40%) Opacity.
- If you have several layers, try creating a new layer between the ones you have and applying the brush there instead of on-top-of-everything. Remember you can move layers around by dragging them up and down the Layer Window.
- The eraser is your friend. Apply a brush to a new layer and then erase all of the brush that is covering whoever you're iconing. You'll have the brush effect only in the background.
- If you have a mousepen/tablet/stylus, play with *pressure* when applying brushes.
- If you change a brush's original size, it WILL lose its definition.

related links:
. teh_indy explains how to install brushes in PS7.
. teh_indy explains how to install brushes in PSP7 and PSP 8 & 9.
. heather13 explains How to create brushes with Paint Shop Pro.
. psychodragon82 also teaches How to use brushes with Paint Shop Pro.
. inxsomniax's useful Important Tools and things to remember when using Brushes.
. quebelly explains How to Create, Save and Share Brushes. [PS]
. LJ icon-sized brushes community: 100x100_brushes


6.4. Shapes

Photoshop comes with a bunch of default Shapes, and it gives you the option of creating and/or installing more. Contrary to brushes -- which are raster images by nature -- shapes are vector graphics that when applied, transform themselves into raster images. Because of that, most shapes are a combination of geometrical figures, no matter how complicated they are. And contrary to brushes, which only work perfectly when used in their original sizes, shapes can have any size you want.

related links:
. oxoniensis writes a tutorial on How to Make Custom Shapes. [PS]
. oxoniensis also explains How to Use Custom Shapes. [PS]
. Using and creating custom shapes.
. Creating custom shapes, part 2.
. Drawing basic shapes in Photoshop.


6.5. Light effects

There are several ways of working light effects into a graphic. From the Lens Flare Filter, to light-colored Gradients set to Screen/Linear Dodge, to Stock Images, etc. The important thing about these effects is that they shouldn't take over your whole icon to the point where you can't recognize the original image anymore.

related links:
. awmp has a tutorial on how to create Light effects with stock images.
. awmp gives some Tricks and Tips for Making Light Textures. [PS]


7. Hi-Res Screencap Links

Please comment with links for screencap galleries [high-resolution only] I don't list here.

. LJ screencap community: cap_it [be sure to check out their memories -- they carry EVERYTHING].

7.1. Movies

. _jems_'s caps
. adolwyn's caps @ Photobucket
. peacefully's caps @ Photobucket [be sure to read the post to get the password to the galleries]
. Anthropormophic Fruit
. Craftymonkey.com
. Disparue
. Fever of Fate
. Lora's Gallery [Old Hollywood movies]
. Lord of the Rings screencaps
. Secret Obsession
. Striped Wall


7.2. Television

24
. 24Online Image Archive

Absolutely Fabulous
. _jems_'s caps [S1, S2, S3]

Alias
. _jems_'s caps [S1]
. Alias Boards Episode Gallery [S2, S3, S4]
. Alias Media
. BCC Gallery [S1, S2 - Will focused]
. Disparue
. The Missing Frame
. Screencapiness [S3]
. Spy Caps
. Sydney Bristow HDTV Archive [S2, S3, S4 - Sydney focused]
. Vartanho's screencaps

American Dreams
. Anthropormophic Fruit [S3]

Andromeda
. andromeda-web.com NEW

Angel
. Disparue [S5]
. Faith's Solace Screencaps [Faith focused]
. Freeze Frame Network [NB: quality varies wildly]
. Screencapiness [S5]
. Angel @ screencap-paradise
. Dusk 'til Dawn Gallery [promotional pictures -- not caps]

Arrested Development
. _jems_'s caps
. Simple Obsession [S2]
. Striped Wall
. The O-P

Battlestar Galactica
. _jems_'s Mini + Season 1 caps
. bsg-caps.com NEW
. BSG Media Web Gallery
. S1 caps posted @ bsg_creative

Big Love
. Anthropormophic Fruit

Bones
. Gallery @ craftymonkie.com

Buffy the Vampire Slayer
. _jems_'s caps
. Faith's Solace Screencaps [Faith focused]
. Freeze Frame Network [NB: quality varies wildly]
. Lost Soul Galleries [Spike caps only]
. Buffy @ screencap-paradise
. Screencapiness [S6 & S7]
. Dusk 'til Dawn Gallery [promotional pictures -- not caps]
. btvs_screencaps

Carnivàle
. raven_annabelle's AVI caps

Coupling [UK]
. _jems_'s caps

Charmed
. Charmed @ screencap-paradise

CSI
. Black Glass
. Beyond Imagination

Dark Angel
. The Broken World Image Gallery
. Dark Angel Italia [caps in the respective episode page]
. Eyes Only
. Manticore Kid Caps: Season 1, Season 2
. Still Frame

The Daily Show
. tds_caps

Dawson's Creek
. _jems_'s caps [S3, mainly Pacey/Joey]
. CreekCaps.com
. Dawson's Creek DVD Caps Archive
. Joshua Jackson Network
. Katie Holmes Pictures

Dead Like Me
. _jems_'s caps
. Dead Like Me @ screencap-paradise
. Striped Wall

Doctor Who
. _jems_'s caps [Nine and Ten]
. Chaotic-Creative Gallery

The Dresden Files
. Chaotic-Creative Gallery

Entourage
. Daydreaming

E.R.
. Striped Wall

Everwood
. Daydreaming
. theperfectday.org

Farscape
. _jems_'s caps
. farscape-caps.com
. Hidden Memories

Felicity
. Daydreaming

Firefly
. _jems_'s caps
. Can't Take the Sky
. Disparue
. Gallery @ craftymonkie.com
. Facet
. Firefly Freeze Frame
. Dusk 'til Dawn Gallery [promotional pictures -- not caps]

Friday Night Lights
. heather13's caps NEW

Friends
. _jems_'s caps [S5, eps 1-15]
. Friends Cafe NEW

Gilmore Girls
. _jems_'s caps
. Gallery @ craftymonkie.com [S6]
. @ Opposites-are-polar.net [NB: quality varies wildly]
. Luminary
. Screencaps @ thirtynotes.com [S3]

Green Wing
. _jems_'s caps
. CubeShack gallery

Grey's Anatomy
. Striped Wall

Heroes
. Heroes Pictures NEW
. Striped Wall NEW

Hex
. Anthropormophic Fruit
. Hex Caps

House, MD
. Gallery @ craftymonkie.com [S2]
. Damaged [House/Cameron]

Joan of Arcadia
. amber-tamblyn.net NEW
. Not Everything Is About Science [Grace/Luke only]
. wickedripeplum's caps @ photobucket [selected episodes]
. unchallenged [selected episodes] NEW

Kitchen Confidential
. Disparue

The L Word
. raven_annabelle's AVI caps

Lost
. Ariane's Lost Site
. Lost Media

Medium
. Patricia-Arquette.com NEW

Millennium
. Millennium DVD Screencaptures @ chrisnu.com

Monk
. Monk DVD Screencaptures @ chrisnu.com

Moonlighting
. _jems_'s caps

My Name Is Earl
. Daydreaming
. Karma

My So-Called Life
. Daydreaming

Northern Exposure
. Oxoniensis Art

Numb3rs
. raven_annabelle's AVI caps

The O.C.
. Oxoniensis Art
. The OC @ screencap-paradise

The Office [UK]
. _jems_'s caps
. bellanut's caps

The Office [US]
. _jems_'s caps
. heather13's caps

One Tree Hill
. Daydreaming

Oz
. Lee Tergesen :: Annotated
. visionofblue's caps
. u16_girl's caps

Queer as Folk [US]
. KWAF
. QAF Scans [HI-quality scans] NEW
. Queer Eyes [Brian/Justin focused]

Popular
. The Novak

Prison Break
. Gallery @ craftymonkie.com

Related
. Striped Wall

Roswell
. Daydreaming
. Striped Wall

Sanctuary

. Sanctuary Screencaps NEW

Scrubs
. _jems_'s caps

Sex and the City
. Daydreaming

Smallville
. Oxoniensis Art
. Smallville @ screencap-paradise

Spooks
. _jems_'s caps
. bellanut's caps [S3, S4]

Sports Night
. _jems_'s caps
. Oxoniensis Art

Stargate: Atlantis
. Atlantica
. Atlantis, a New Beginning NEW
. Atlantis Caps
. GateWorld Gallery NEW
. Oxoniensis Art
. Stargate Caps

Stargate: SG-1
. Dedicated to Stargate SG-1 NEW
. GateWorld Gallery NEW
. Stargate Caps
. StargateFan.com

Supernatural
. Chaotic-Creative Gallery
. Oxoniensis Art
. Striped Wall
. Supernatural Caps

That '70s Show
. Daydreaming
. Disparue [S1]

Torchwood
. Chaotic-Creative Gallery
. Striped Wall NEW

Tru Calling
. Tru Calling @ screencap-paradise

Veronica Mars
. vm-caps
. Anthropormophic Fruit
. CraftyMonkey.com: Season 1, Season 2
. Veronica Mars @ screencap-paradise

The West Wing
. _jems_'s caps
. Oxoniensis Art
. The West Wing Collection [Selected episodes]

The Wire
. _jems_'s caps NEW

Wonderfalls
. _jems_'s caps
. Daydreaming

The X-Files
. _jems_'s caps
. X-Files DVD Screencaptures @ chrisnu.com
. The X-Files ScreenGrab Archive [Quality is so-so, but they have the most complete collection]

Young Americans
. Oxoniensis Art


8. Other links

8.1. Resources

. Blue Vertigo [resources links for stock photos, brushes, vector/cliparts, fonts, etc.]
. Screencaptures and movie clips links
. _jems_ [here]
. anesthezea [here]
. dtissagirl [here]
. ignited [here]
. quebelly [here]
. hermintage [here]
. teh_indy [here]

8.1. Discussions

. ignited lists her icon quibbles.
. laurakaye's icon making tips.
. littleasianpixi's icon making tips.