Icon creation methods

Log-in or register.

Icon creation methods

Creating icons in raster editors

There are many raster editors available. Some of them - Photoshop, GIMP, Paint Shop Pro - are very complex, with a lot of functions. Others, like the ones integrated in some icon editor applications, are very simple.

A raster editor represents the picture as a raster image (a matrix of pixels). Some editors support layers - they allow multiple raster images of same size laying one above the other, combining them using specified operation. User is free to modify the individual layers in any order.

Picture is created in raster editor by drawing shapes and applying image filters and effects. The drawn shapes and effects change colors of individual pixels.

Pros:

  • Icons themselves are based on raster images, hence a raster editor is the first choice.
  • Raster editors are relatively easy to use, almost everyone can use tools like pencil or rectangle intuitively.
  • There is a large number of various image filters applicable in raster editors (although their usefulness in icon design is limited).

Cons:

  • Drawing tools and filters in raster editors usually do not work well on small pictures. Large pictures scaled down are not optimal.
  • It is nearly impossible to make changes to a drawn shape or to an applied effect at later stage.
  • Author(s) must manually define and synchronize colors, gradients, lighting effects and viewing positions to create multiple icons with consistent look.

Summary

Being able to create professional icon in a raster editor requires a lot of practice and talent. Tutorials explaining how to make an icon in raster editors are usually extremely long and hard to follow. Making changes to a complete icon is difficult and re-usability of created objects is limited. Icon created in raster editors often do not look good at small size, because it is hard to fine tune the icons. In order to avoid the downsides, it is recommended to use layers and layer styles as much as possible to be able to modify your work by just re-creating one layer or changing layer effects.

Raster editors should be used for very simple icons (when the Pencil tool is the main contributor) and for creating icons from photographs (discussed later).

Creating icons in vector editors

Vector editors, such as Corel Draw, Adobe Illustrator or InkScape, differ substantially from raster editors in the way they represent the image. Instead of storing colors of individual pixels, they keep the information about the drawn shapes.

For example if a line is drawn, the editor keeps its starting point, end point, width, color or filling style, cap style, dashing, etc. These properties can be relatively easily changed later.

A picture is created by adding shapes to the image and setting their properties. Some vector editors allow application of effects and filters on the shapes.

Pros:

  • Individual components of an image can be modified later.
  • Vector editors are relatively easy to use, although they require understanding of basic geometric concepts, like symmetry, tangent, polygon, etc.
  • Created components can be reused.

Cons:

  • Author(s) must manually define and synchronize colors, gradients, lighting effects and viewing positions to create multiple icons with consistent look.
  • Finalizing icons (changing color of a single "pixel", regional sharpening) is hard in vector editors and must be done elsewhere if needed.

Summary

Vector editors give authors more maneuverability offering them the possibility to adopt a trial and error style. The object re-use rate is also higher than with raster editors. It is a well known fact that smaller icons require relatively larger outlines or more intense contours. Vector editors make it possible to adjust these properties with ease after the icon was completed.

Vector editors are a good choice when creating professional icons, especially when the objective is to create smooth cartoonish non-photorealistic icons. The trial and error method makes the icon creation possible for authors without a lot of experience.

Creating icons in 3D graphics editors

3D graphics editors (3D Studio, Blender, Unicorn3D) do not create pictures directly. Instead, a 3-dimensional representation of an object's surface is defined and a picture is obtained by rendering a scene (3D model+lights) using selected 3D->2D projection.

3D models are similar to vector images in the way they are storing information. The use of 3rd dimension allows application of more complex transformations (rotation around arbitrary axis), non-trivial depth-based visibility processing, realistic surface lighting and perspective projection.

Pros:

  • Realistic surface material properties (lighting, reflections).
  • Effortless perspective projection.
  • High level of re-usability.
  • Possibility to modify objects at any time.

Cons:

  • Higher complexity of created data and limited I/O devices (2D display, 2D mouse) make the creation of 3D models non-trivial.
  • The path from 3D to icon requires multiple different steps and is not obvious for newbies.
  • Finalizing icons (changing color of a single "pixel", regional sharpening) is impossible in 3D editors and must be done elsewhere if needed.

Summary

Icons often represent objects from the real world, where these objects are lit by natural light and human eyes transform the 3D objects to 2D shapes using perspective projection. The 3D modeling method of icon creation mimics these techniques and provides naturally looking, easy to recognize images. The additional effort needed to create a 3D model instead of just a 2D picture is in most cases outweighed by the flexibility provided by the method.

3D editor is a good choice when creating icons with photorealistic look and feel, especially in larger quantities and with similar theme. It is also a good method for people without artistic training or talent, the technology takes care of correct projection and lighting for the author.

Other methods

Composing icons

Instead of creating icons from scratch, an icon is composed from prepared parts. This allows you to create icons with similar style, although limited flexibility. This method of creating icons from prepared components was popularized by Axialis.

Pros:

  • An easy and fast method.

Cons:

  • Artwork created by someone else is needed.
  • Limited flexibility.

Summary

If you have a suitable set of parts and a stock look is what you want, pick this method.

Creating icons from photographs

When creating an icon from a .jpg photo, the hardest task is usually to remove the unwanted background. Occasionally, people add frames instead of removing the background.

This task is best performed in a raster image editor with the correct tools.

Recent comments

user icon Anonymous
Select background
What about ICL files?