Creating an icon by combining parts from library

Log-in or register.
rsrc/cpic.png image

How to compose icon from parts?

March 27th 2006

This tutorial explains how to make an icon by composing multiple images from a library of icon parts in RealWorld Icon Editor.

Step 1: Prepare the environment

This tutorial assumes that you have already downloaded and installed image pack of parts called Vista by Kudesnick - Round. If you do not have this library, please download and install it before continuing.

Media packs section on the Online page
Find the Media packs section on the Online page in RealWorld Icon Editor

To download an image pack, open RealWorld Cursor Editor and go to the Online page. Then find the Media packs section rsrc/red-border.png image - you may either close the sections above it or simply scroll down. Finally, click on the Download link next to Vista by Kudesnick - Round and wait until the download finishes.

Step 2: Create a new image

Although our ultimate goal is to create an icon, we start by creating a raster image. Switch to the Create page, select New raster image wizard, set image size to 256x256 pixels and click on the Create button.

Media library panel uses tags
Open or close the media library panel from the main toolbar.

Click on the Media library button rsrc/red-border.png image in the toolbar to display panel with media library. Then click on the Activate tag rsrc/blue-border.png image button and choose VbK-round in the menu.

Step 3: Compose and customize

Double-click the 1-Background-Blue.png file in the media panel. Notice that a new layer containing the blue sphere was added. Alternatively, you can drag and drop the image from the media library onto the layer list or onto the raster editor. If you drop it on the raster editor, it will be added as a floating selection rather than a layer.

Do it again, this time with 2-Gradient-BlueDouble.png. Note that the second image is drawn on the top of the first one. You can adjust properties of the new layer such as opacity or blending mode.

Add third file - 3-Symbol-Home.png. Because the images are added as layers, you can apply effects to them. Simply click on Colorize in the Effect menu and change the color of the symbol to yellow. You can apply effects to any layer at any time.

Applying effect on layer
Colorize effect is being applied to the selected layer.

Add three more images: 4-Effect-HilightDouble.png, 4-Effect-ReflectionRounded.png, and 5-Frame-Metal-2.png.

Step 4: Create an icon

Simply click on Create icon button in toolbar or in Create menu. New window opens and allows you to select sizes to generate. The defaults should be OK, so just click OK.

A little extra

The icon looks fine, but let's add a projected shadow to the largest image. Switch to Projected shadow tool rsrc/red-border.png image and drag with your mouse as indicated by the red arrow on the following screenshot. Experiment with the properties of the Shadow tool to get the results you like.

Adding projected shadow to an image
Switch to Projected Shadow tool and drag with your mouse as indicated by the green arrow to create a projected shadow.

If you followed the steps of this tutorial, your icon will be similar to the following one:

rsrc/composed-home.png image

I have cheated a bit and actually moved the large icon by few pixels up to have more space for shadow ;-). Feel free to do the same.

Summary

Creating icons from parts is matter of minute or two. While combining images does not offer the same level of freedom as manual icon design does, it is a viable alternative and has many applications.

When combining images, feel free to use all other features of the application. Remember that you can apply filters like Motion Blur or rotate parts of the final image to customize the resulting icon. When creating small versions of icons, consider using operation Remove Empty Border and applying a shadow during image to icon conversion to get different and possibly better results.

Recent comments

- show all comments
user icon Anonymous on February 24th 2007

Was looking for a good and inexpensive icon editor, found your website, browsed some of these excellent articles, downloaded and tried the evaluation and, after a few minutes, hit the purchase button! No more searching for an Icon Editor! I've just found "THE" Icon Editor! Thanks.

user icon MadMax registered user on February 25th 2007

One more comment (adding to my last one of 2007-02-24):
You can further improve this with 3 things:
1) Proper ICL support and creation;
2) Layered Icon creation (preferably in a way similar to what was done here but creating and saving layers so that one can more easily change just one layer, e.g., when creating folder of XXX icons, one could create one such icon with 3 or more layers and later just change the layer where the XXX is placed, instantly changing a folder of pictures into a folder of sounds or folder of flash files.
3) In the ICO editor view, allow to resize the left panes so that one can properly see the full length of the Vista Icons in the 4 simultaneous views. I have a 1680x1050 display and could use that extra space to view those icons better instead of only 1 at a time or scrolling the views with the 4!

Keep up the GREAT work: it's a great program but you can always make it even better!

user icon Vlasta site administrator on February 25th 2007

Thanks for the suggestions, they are always welcome.
1) ICL support - this is the first time someone actually asked for it, we'll pay more attention to ICLs.
2) Layers - doing layers properly is not easy, but it is in a long term plan.
3) It is already possible to make the panes resizable. The Customizing Application tutorial (built-in) deals with this topic, but it might be hard to find the right checkbox in the configuration. Send me an email and I'll explain it a bit more if you cannot find it.

user icon [OMG]Kevinicons registered user on January 27th 2008

Thats Easy!

user icon Anonymous on February 9th 2008

FreezEO 5000 (2008-02-09):This too easy :-)

user icon Anonymous on February 11th 2008

hello my name is bob

user icon Anonymous on October 22nd 2009

Hello Bob :-)

user icon Anonymous on January 28th 2011

I just want to concatenate the images into one long image so that site mapping will allow me to navigate the image but it will load faster

user icon Anonymous on May 21st 2012

Manolo muito bom, mais como baixa O negócio? Troll Faces!!!!

user icon Twe registered user on November 8th 2012

Some more things, you can also download "Vista by Kudesnick - Triangle" and "Vista by Kudesnick - Shield"!

user icon Anonymous
Vista & Win 7 icons
Select background