Anonymous
on October 27th 2006
Excellent! Have never seen such an easy way of creating so nice looking icons. Brilliant! I'm going through all your tutorials now, trying to create some own icons...
Creating an icon by combining parts from library
 | 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.
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 
- 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.
Open or close the media library panel from the main toolbar.
Click on the Media library button in the toolbar to display panel with media library. Then click on the Activate tag 
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.
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 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.
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:
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
Anonymous
on October 27th 2006
Anonymous
on December 27th 2006
I went to download.com and found Real World Icon Editor. I found this resource, followed the steps, and created professional-looking icons in literally one minute. Really slick!
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.
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!
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.
[OMG]Kevinicons
registered user
on January 27th 2008
Thats Easy!
Anonymous
on February 9th 2008
FreezEO 5000 (2008-02-09):This too easy 
Anonymous
on February 11th 2008
hello my name is bob
Anonymous
on October 22nd 2009
Hello Bob
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
Anonymous