 |
|
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.
This guide is intended for people with basic knowledge about RealWorld Icon Editor. It is recommended
to go through the tutorials embedded in the application prior to reading this one.
Step 1: Prepare the environment
This tutorial assumes that you have already downloaded and installed library of parts
called Vista by Kudesnick.
If you do not have this library, please download and install it before continuing.
Open Windows Explorer and browse to the folder with unzipped files. Then go to Circle folder
and switch to Thumbnails view mode as demonstrated on the left screenshot.
Finally, create a new raster image in RealWorld Icon Editor, set image size to 256x256 pixels.
Browse to folder with images and switch to Thumbnail mode using main menu or context menu in Windows Explorer.
|
|
Use New Raster Image template, set image size to 256x256, and enable alpha channel.
|
Step 2: Compose image parts
Arrange windows on you screen and then drag and drop file 1-Background-Blue.png on raster image
editor. The image appears as a floating selection in RealWorld Icon Editor.
Drag image file from Explorer to raster editor in application window.
Drag and drop another file - 2-Gradient-BlueDouble.png. Note that the second image is drawn
on the top of the first one, but you may change active blending mode using buttons
in upper right area of the window. Feel free to experiment with these modes now, but be sure
to return to the initial "Paint Over" mode, because that one is needed in our case.
Add third file - 3-Symbol-Home.png. If there is a floating selection, most of the commands
in "Image" and "Filters" menus work with the selection only. Let's change the
color of the symbol using "Colorize" filter. Click Colorize in Effects menu, choose orange
color in the dialog and then click OK.
Note: the filter uses scripting and may take few seconds to finish.
If there is a floating selection, filter will be applied to that selection only. Run colorize and select orange color.
|
|
After you drag and drop last three images, you will end with this image.
|
The rest is very easy, just drag and drop these files:
4-Effect-HilightDouble.png,
4-Effect-ReflectionRounded.png, and
5-Frame-Metal-2.png
Note: you may select all these files and
drag them all at once, but make sure you select them in correct order, because the order of
blending influences the result.
Step 3: Create an icon
Click on "Create Vista Icon (no shadow)" button in toolbar or in "Icon" menu.
New window opens and displays your new icon.
A little extra
The image looks OK, but let's add a projected shadow. Switch to "Projected Shadow" tool
and drag you 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 red arrow to create a projected shadow.
|
The final icon
If you followed the steps of this tutorial, your icon will be similar to the following one:
We have cheated and moved the large icon up by few pixels to have more space for shadow ;-).
Resources
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
|
Index
Software
Gallery
Tutorials
Forums
Users
Del.icio.us
Digg it
StumbleUpon
Yahoo MyWeb
Furl it
on June 6th 2006
on October 27th 2006
on December 27th 2006
on February 24th 2007
on February 25th 2007
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!
on February 25th 2007
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.
on January 27th 2008
on February 9th 2008
on February 11th 2008
on October 22nd 2009