Create your first icon

Windows and Macintosh icons

Using IcoFX you can create icons for the Windows operating system and also for the Macintosh operating system. IcoFX allows you to draw your own icons. Using many drawing tools and more than 40 effects you can draw your icons easily. An icon file contains multiple images of different size and format. The operating system will automatically choose the appropriate image to display.

Create the image

To create an icon using IcoFX follow these steps: 1. Start IcoFX. 2. Create a new empty image using the "File/New image..." menu item. 3. On the New Image dialog select the size 256x256 and the data type True Color + Alpha channel

4. Draw your icon.

Create the icon from the image

5. Your image contains only one image format. Use the "Icon/Create Windows Icon From Image..." menu item to create an icon from the image and add all the needed image formats to the icon. The default settings on this dialog will do in most cases.

Use the "Icon/Create Macintosh Icon from Image..." menu item if you would like to create a Macintosh icon. 6. If you would like to create Windows Vista compatible icons with PNG compression then make sure that there is a 256x256 sized image in your icon and that the "Options/Preferences/Options/Compress 256x256 images for Windows Vista" option is checked. 7. Save the icon using the "File/Save As..." menu item. On the save dialog choose the desired output format in the "Save as type" combo box. For more information about the New Image or Create Windows Icon dialog consult the help file of IcoFX.

Create icons from image objects

Image objects Create the icon Tips and tricks o Change the background color o Change the symbol color o Stronger/lighter texture o Symbol with gradient o Fadeout texture o Get additional image objects

Image objects
Image objects are premade images that you can use to create icons. You can make icons simply by combining the image objects.

Combining Image Objects

IcoFX comes with a lot of preinstalled image objects. The image objects are located in the "Objects" subfolder of the IcoFX installation folder. You can quickly access the image objects using the Explorer panel. Pressing the home icon on the Explorer's panel toolbar will take you to the folder with the image objects.

The Explorer Panel Showing The Image Objects

The image objects contain background images, borders, shadows, reflections, textures and symbols for easier icon creation. The image objects are ordered in the following sub folders:

Circle - Contains circular image objects for creating icon backgrounds Rectangle - Contains rectangular image objects for creating icon backgrounds Symbols - Contains the symbol images

You can get additional image objects from here.

Create the icon

IcoFX has a special workspace set up for easier handling of image objects. It is called "ImageMixer" and gives you quick access to the Explorer panel and the Layers panel. You can select it using the "Window/ Workspace/ ImageMixer" menu item. You can create the image by combining the available image objects. To add new image objects to the image just drag the image object from the Explorer panel to the Layers panel or to the sidebar of the Canvas window. Each image object will become a new layer of the image. You can reorder the layers on the Layers panel by simply dragging them to the desired position.

Drag the image objects to the Layers panel or the sidebar

Follow these steps to make your first icon using image objects. After this tutorial you will have a good knowledge about the usage of image objects. 1. Make sure that the "ImageMixer" workspace is selected. You can select it using the "Window/ Workspace/ ImageMixer" menu item. 2. Create a new 256x256 image. This image will be used to combine the image objects. To create the new image use the "File/ New/ New Image" menu item. On the "New Image" dialog select 256x256 as size and make sure that the background color is set to transparent.

New Image Dialog

3. On the Explorer panel press the Home toolbar button. This will select the "Objects" folder where the image objects are located. Select the "Circle" sub folder. You can see the available circle image objects in the Explorer panel.

Select the Circle folder

4. In this step we will drag the image objects to composite the image. The screenshots will show the canvas window and also the Layers panel for easier overview. Drag the "Shadow06.png" image to the Layers panel. This will be the shadow of the icon.

The shadow of the icon

Drag the "Circle - Blue Radial.png" image to the Layers panel. This will be the background of the icon.

The background of the icon

Drag the "Reflection09.png" image to the Layers panel. This will be the reflection effect on the icon.

The reflection of the icon

Drag the "Border Silver2.png" image to the Layers panel. This will add a border around the icon.

The border of the icon

5. In the Explorer panel select the "Symbols" folder. Drag a desired symbol image to the Layers panel. In this example we used "Cars Spades.png". Your image should look now like this.

The finished image

If you dragged the images in different order then you can reorder them by dragging them to the correct position in the Layers panel. 6. Create the icon from the image using the "Image/Create Windows Icon From Image" menu item. On this window press the Recommended button. This will select all the needed image formats for the icon. Press the Ok button. An icon is created with all the needed image formats.

Create the icon form the image

7. Your icon is ready. Save it using the "File/Save" menu item.

The finished icon as displayed in Windows Explorer

Tips and tricks

Using the following tips and tricks you can customize your icons even further. It will teach you how to customize individual image objects.

Change the background color

You can change the color of the background image object using the "Adjustments/ Hue and Saturation" menu item. This will open the Hue and Saturation window where you can change the color using the hue slider. Using the Brightness slider you can make the color lighter or darker. Before opening the window make sure that the correct layer (the one that contains the background) is selected in the Layers panel.

Change the color of the background

Change the symbol color

The problem with the symbol image objects is that they are white so that the Hue and Saturation adjustment won't work on them. First use the "Effects/ Colors/ Red" menu item. This will change the color of the symbol to red. After that you can use the Hue and Saturation window to change its color like in the previous tip. Make sure that the correct layer is selected.

Change the color of the symbol

Stronger/lighter texture
You can also add texture image objects to the background. Like "Texture08.png". The textures are semitransparent images. If you would like to make it more transparent/lighter

then you can use the "Adjustments/ Opacity" menu item. Decreasing the opacity will make the texture lighter. Make sure that the correct layer is selected.

Make the texture lighter

To make the texture stronger simply drag and drop it on the image more than once. The textures will overlap each other making them seem stronger. On this image there are three layers of "Texture08.png" over each other.

Stronger texture by adding it three times

Symbol with gradient

You can also have a symbol with a gradient. To do this create a new layer in the image and hold the Ctrl key while dragging the symbol from the Explorer panel to the Layers panel. This will not add the symbol in a new layer. It will create only a selection from the symbol.

The symbol as selection

Now you can use the Gradient tool to fill the selection with the desired gradient.

The gradient applied to the selection

Fadeout texture
Using the "Adjustments/ Fadeout" menu item you can fadeout layers. If you apply this to textures then you can fade out textures of the image. Make sure that the correct layer is selected.

Faded texture

Copyright 2005-2013 IcoFX Software. All rights reserved.

Create an icon from an image

With the help of IcoFX you can convert your favorite image to icon. To create icon from an image follow these steps: 1. Start IcoFX 2. Open the image that you would like to convert to icon, using the "File/Open" menu item. You can use PNG, BMP, GIF, TIF, IFX, JPG or JP2 images. 3. The Import dialog will open, where you can select the part of the image that will be converted to icon. Press The OK button.

Import dialog

The Import dialog will only open if the "Options/Preferences/Actions/Import" option is set to "Show the Advanced Import dialog". 4. We want to make the background color (white) transparent. The only problem is that the shirt of the dog is also white. We need to mask the shirt of the dog. First we select the whole image using the "Edit/Select All" menu item. Then we change to quick mask mode by pressing the "Quick Mask" button on the Tools panel. Using the brush tool we paint on the area that we want to be masked, in this case the white shirt. The masked area will be displayed as red by default.

We select the masked area (marked by red) Exit the quick mask mode by pressing the "Quick Mask" button again. We can see that the shirt of the dog is not selected anymore.

The selection now excludes the shirt 5. Open the Make Color Transparent dialog using the "Adjustments/Make Color Transparent..." menu item.

Make Color Transparent Dialog This adjustment will be applied only to the selected area. Set the color that we want to be transparent (white), set a tolerance value and soft edge value to have nice softened edges. Press the OK button when you are done. The white background will be transparent now, while the shirt remains white.

The background is transparent 6. Your image contains only one image format. Use the "Icon/Create Windows Icon Form Image..." menu item to add all the needed image formats to the icon. The default settings on this dialog will do in most cases.

Create Windows Icon dialog

Use the "Icon/Create Macintosh Icon Form Image..." menu item if you would like to create a Macintosh icon. 7. Save the icon using the "File/Save As..." menu item. On the save dialog choose the desired output format in the "Save as type" combo box. Your icon is ready.

The icon displayed on the desktop For more information about the used dialogs and the quick mask consult the help file of IcoFX.

Copyright 2005-2012 IcoFX Software. All rights reserved.

Create an icon library

If you have many icons and you'd like to group them together you can create an icon library. This way it is easier to handle and redistribute your icons. To create an icon library follow these steps: 1. Start IcoFX 2. Open the Icon Resource Editor using the "Tools/Icon Resource Editor..." menu item. 3. To add icons to the icon library use the "Add" tool bar button. After you have added an icon you can see the thumbnail of the icon. IcoFX will automatically number (name) the icons.

Add icons to the Icon Resource Editor Window 4. By default the icon will have the name of the file. You can change this name in the Resource Properties dialog. Press the "Properties..." tool bar button to open the Resource Properties dialog. On this dialog you can change the name of the icon.

Change the name of an icon 5. After you have added al the needed icons you can save the icon library using the "Save" toolbar button. In the save dialog choose a name for your library.

You can use the icon resource editor to edit/modify your existing icon libraries. Using the "Open" toolbar button you can open existing libraries, and using the toolbar buttons you can modify its content.

Using the same method you can create cursor libraries. In step 2 open the Cursor Resource Editor using the "Tools/Cursor Resource Editor..." menu item. For more information about the Icon Resource Editor dialog consult the help file of IcoFX.

Copyright 2005-2012 IcoFX Software. All rights reserved.

Change the icon of an application

If you'd like to change the icon of an application (exe file) you can do it with IcoFX.

IcoFX can only handle uncompressed 32-bit files. If you try to edit a compressed exe file the behavior is unpredictable.

It is not recommended to edit exe or dll files. The file can be corrupted after the editing. Use this feature at your own risk. It is a better practice to create a shortcut to the exe file and change the icon of the shortcut. This way the exe remains unchanged. To change the icon of an application follow these steps: 1. Start IcoFX 2. Open the Icon Resource Editor using the "Tools/Icon Resource Editor..." menu item. 3. Open the exe file using the "Open" toolbar button. 4. Select the main icon of the application and then press the "Change" toolbar button. In the appearing dialog select a new icon for the application. The thumbnail of the icon will change.

Change the icon of an application 5. To save the file press the "Save" toolbar button. For more information about the Icon Resource Editor dialog consult the help file of IcoFX.

Copyright 2005-2012 IcoFX Software. All rights reserved.

Extract icons from exe or dll files

Using IcoFX you can extract icons from exe files and save them as separate icon files. To extract icons from exe or dll files follow these steps: 1. Start IcoFX 2. Open the exe or dll file using the "File/Extract..." menu item. The Extract dialog will appear showing all the icons that the file contains.

Extract window 3. Select the icon(s) that you would like to extract and press the "Extract" button. You can select more files if you hold down the Ctrl key when clicking on an icon. 4. The icons will be opened in IcoFX. Save the files using the "File/Save" menu item. You can extract more icons without the need to save them separately using the Batch Extract Icons or Cursors dialog ("Tools/Batch Extract Icons or Cursors..." menu item). For more information about the Extract or Batch Process dialog consult the help file of IcoFX.

Copyright 2005-2012 IcoFX Software. All rights reserved.

Working with gradients

IcoFX gives you the possibility to create custom gradients. In this tutorial we will create a custom gradient, so that we see how to use gradients.

Creating a new gradient

1. Create a new gradient by pressing the "New Gradient..." toolbar button in the Gradients panel. This will open the Gradient Editor dialog.

The Gradient Editor Dialog We name the gradient "Yellow, Blue, Black" by entering the name in the Name edit box. This name will be displayed in the Gradients panel. 2. We will create a gradient with three colors: yellow, blue and black. By default we have a white and black color in the gradient. Click on the white color thumbnail under the gradient preview. Click on the color box to change its color to yellow. We now have two colors: yellow and black. 3. We will add the third color, the blue, in the middle of the yellow and the black. Click on the thumbnail area under the gradient preview where the color thumbnails are. By clicking on an empty area a new color thumbnail will be created. You can drag the color thumbnail to the desired position. Click on the color box to change its color to blue. Now our gradient looks something like this:

The Gradient Editor Dialog 4. We are finished with editing the gradient. Press the OK button to close the Gradient Editor dialog. The new gradient is visible in the Gradients panel.

Fill an area of the canvas

5. In the Gradients panel select the gradient that we created in the previous steps. 6. Using the selection tools select an area of the screen that you would like to fill with the gradient. You can combine selections if you select the "Add to selection" mode on the Tool Properties panel. Also check the "Anti-alias" check box to have smooth edges. For example this is a selected area created by a rectangle and an ellipse selection:

The Selected Area 7. Select the gradient tool on the Tools panel, and draw a gradient on the canvas. The gradient will be applied only to the selected area.

The Selected Area Filled With Gradient

Create a gradient filled shape

Another method to fill an area of the screen with a gradient is to draw gradient filled shapes. You can draw rectangles, ellipses, rounded rectangles and custom shapes filled with gradients using the available tools in the Tools panel. We will create an ellipse filled with a gradient to simulate a shiny button. 1. Create a new image using the "File/New Image..." menu item. 2. Select the Black and White gradient from the Gradients panel. 3. Select the Ellipse tool on the Tools panel. 4. Set the properties of the tool on the Tool Properties panel:

The Properties of The Ellipse Tool We set the following properties of the Ellipse:

Set the outline to "Outline and fill" so the ellipse will have an outline, and it will be also filled. We set the fill type of the ellipse to radial gradient. We set the center of the gradient (x and y coordinate) to 25% to have the center of the gradient in the top-left corner. Set the Focus Scale to 10%, so that the center of the gradient will be larger.

5. Draw an ellipse on the canvas. The finished ellipse should look something like this:

The Gradient Filled Ellipse

Copyright 2005-2012 IcoFX Software. All rights reserved

Working with layers and the quick mask

In this tutorial we will create a round download button using a layered image.

Create a button with texture

1. In the first step we create a new layer based image using the "File/New/New Image..." menu item. We select 256x256 as the image size and choose a transparent background.

The New Image Dialog 2. Select a colored gradient from the Gradients panel. This will be used as your button color. IcoFX comes with many predefined gradients. Press the "Load Gradients" toolbar button on the Gradients panel to load additional gradients. Load a gradient file Ex. Colors.grd. Choose to append the new gradients to the already existing ones, don't clear the existing ones.

3. Select the ellipse tool from the Tools panel. Set the properties of the ellipse tool on the Tools Properties panel.

Ellipse Properties We set the following properties

Set the outline to "Fill only" so we don't have any outline for the ellipse Set the fill to "Radial Gradient" Set the x and y coordinate of the gradient center to 25% so that the center of the gradient will be shifted to top-left.

4. Draw the button on the canvas You can hold down the Shift key while dragging the ellipse to get a circle.

Gradient Filled Ellipse 5. Next we import an image as a new layer. This image will be used as texture for the button. To import the image use the "Import From File" toolbar button on the Layers panel. Select the image and a new layer will be created from the image.

New Layer 6. We want to have texture only on the button, so wee need to delete the extra parts from the texture image. Select the Magic Wand tool on the Tools panel, set the tolerance to 70%. Make sure that the button layer is selected and not the texture layer. Click on the top left corner of the image. This will select the empty area around the button. If something went wrong you can deselect the selection using the "Edit/Deselect" menu item and start over. 7. We want to soft the edges of the selection for a smoother appearance. For this we will use the quick mask mode of IcoFX. Press the Quick Mask button on the Tools panel (last button). This will show the selection as a mask and you can edit this mask. To smooth the edges we use the blur effect on the mask. Use the "Effects/Blur/Blur" menu item. Exit the quick mask mode by pressing the Quick Mask button again.

Quick Mask Mode 8. Now the selection is ready, we can delete the extra area of the texture. Make sure that the texture layer is selected in the Layers panel. Use the "Edit/Delete" menu item to delete the selected area. We can now get rid of the selection also using the "Edit/Deselect" menu item.

Extra Texture Deleted 9. To complete the texture we must change the blend mode and opacity of the texture layer. Select the texture layer and open the Layer Properties dialog using the "Layer Properties..." toolbar button on the Layers panel.

Layer Properties We can set the name of the layer on this dialog. We set the blending mode of the layer to "Overlay" and the opacity to 50%. Press OK to apply the changes. The button with the texture looks like this:

The Textured Button

Create the arrow image

10. We create an arrow on the button to symbolize downloads. We do not create a simple line, we want a gradient filled line. We add a new layer for the arrow using the "New Layer" toolbar button on the Layers panel. 11. To create a gradient filled arrow we first create an arrow shaped selection and fill it with a gradient. To create the arrow shaped selection we will use the quick mask again. Make sure that the new empty layer is selected. Press the Quick Mask button on the Tools panel to enter in the quick mask mode. 12. Select the line tool on the Tools panel to draw an arrow. Set the properties of the tool in the Tool Properties panel.

Line Properties We set the line width to 60 pixel, set the start cap of the line to an arrow and set the end cap to rounded. Using this configuration we can draw an arrow. Draw the arrow on the mask using a white color. If you hold down the Shift key while drawing the line you can draw vertical lines.

Arrow on the Mask Exit the quick mask mode by pressing the Quick Mask button again. If something went wrong you can deselect the selection by exiting the quick mask mode and using the "Edit/Deselect" menu item and start over. 13. Now we fill the arrow selection with a gradient. Select the gradient tool in the Tools panel and select a black and white gradient in the Gradients panel. Fill the selection with the gradient.

Gradient Filled Selection 14. We create an emboss effect for the arrow to get a 3d look. First duplicate two time the arrow layer using the "Duplicate Layer" toolbar button on the arrow layer. Now we have three layers with arrows. 15. Increase the brightness of the bottom arrow layer. Use the "Adjustments/Brightness And Contrast..." menu item to increase the brightness of the image with 90.

Increase Brightness Now using the Move tool move the whole layer down about 2 pixels so that the bottom of the bright arrow will be visible a little.

Bright Arrow Visible 16. Now we select the middle arrow layer and decrease its brightness with 90. This will result in a darker arrow. Now using the Move tool move the whole layer up about 2 pixels so that the top of the dark arrow will be visible a little.

Dark Arrow Visible

Create a reflection
17. Optionally you can add a reflection to the button. Add a new layer for the reflection using the "New Layer" toolbar button on the Layers panel. Using the ellipse tool with a gradient fill we create an ellipse on the button. For this we select a white to transparent gradient from the Gradients panel. Set the fill of the ellipse to "Linear Gradient" and set the gradient angle to -90 to get a top white and bottom transparent gradient fill.

Finished Button

Copyright 2005-2012 IcoFX Software. All rights reserved.

Create a cursor

Using IcoFX you can create also cursors for the Windows operating system. Using many drawing tools and more than 40 effects you can draw your cursor easily. To create a cursor using IcoFX follow these steps: 1. Start IcoFX. 2. Create a new empty cursor using the "File/New cursor..." menu item. 3. On the New Cursor dialog select the size 32x32 and the data type True Color + Alpha channel. You can select different sizes, but the Windows operating system will resize it to 32x32 because that is the standard cursor size. Select static cursor as the cursor type because we will make a static cursor in this tutorial.

New Cursor Dialog 4. Draw your cursor. 5. Set the hot spot of the cursor using the Hot Spot dialog. Open the dialog using the "Image/Cursor/Hot Spot..." menu item.

The Hot Spot Dialog 6. You can test the cursor using the Cursor Test dialog. Here you can draw on a small canvas using your new cursor and can also test the look and feel of the cursor against different test controls like buttons, edit boxes, etc. You can start the Cursor Test dialog using the "Image/Cursor/Test Cursor..." menu item.

The Cursor Test Dialog 7. When you are done editing the cursor, save it using the "File/Save..." menu item. For more information about the New Cursor dialog consult the help file of IcoFX.

Copyright 2005-2012 IcoFX Software. All rights reserved.

Creating a Macintosh icon from an image

Using IcoFX you can also create icons for Macintosh. IcoFX support Macintosh icon sizes up to 1024x1024 compatible with Macintosh OS X 10.7 Lion.

Automatically create the icon

The easiest way to create a Macintosh icon from an image is to create it automatically. For this follow the following steps: 1. Open the "Welcome" windows using the "Help/Welcome Window" menu item.

Welcome Window 2. On the "Welcome" window press the "Create Macintosh icon from an image" button. 3. This will open an "Open" dialog where you can select the image that you want to use for creating the Macintosh icon. Select an image with a resolution that is larger or equals 1024x1024 because Macintosh OS X 10.7 Lion can use 1024x1024 icons. 4. If the image is larger than 1024x1024 then an "Import" dialog will pop up where you'll have the option to resize or crop the image. Leave the option "Resize the image" selected and press the "OK" button.

If you want to crop the image then select the "Show the Import dialog for more options" radio button before pressing OK. 5. The icon will be automatically created in IcoFX including all the needed image formats.

The icon displayed in IcoFX 6. Save the icon using the "File/Save" menu item.

Manually create the icon

To manually create the Macintosh icon follow these steps: 1. Create a new empty Macintosh icon using the "File/New/New Icon..." menu item. This will open the "New Icon" window where you should select "Macintosh icon" as the icon type.

The New Icon Dialog 2. Once the empty icon is created you can add the needed image formats to the icon. For the list of needed formats for a Macintosh icon see the help page Do not forget to add an 1024x1024 image for full Macintosh OS X 10.7 Lion compatibility. 3. You can import new images to the icon using the "Image/Import Image..." menu item. This will open an "Open" dialog where you can select the image. After that you can select the size of the new image in the "New Icon Image" dialog.

The New Icon Image Dialog If the image is larger than the selected size then an "Import" dialog will pop up where you'll have the option to resize or crop the image. Leave the option "Resize the image" selected and press the "OK" button.

4. Additionally you can create new icon images based on existing images. For this use the "Image/Add New Image" menu item. This will open the "New Icon Image" dialog.

The New Icon Image Dialog Using this dialog you can select the desired size of the new image and additionally you can select the image (on the lower part of the dialog) that will be used as base for the new image. 5. Once the icon is ready save it using the "File/Save" menu item.

Copyright 2005-2012 IcoFX Software. All rights reserved.

Capture an area of the screen

Using IcoFX you can capture an area of the screen and create an icon from it. To capture an area of the screen follow these steps: 1. Start IcoFX 2. Use the "File/Capture..." menu item. 3. On the New Image dialog select the desired size. This size will be used when capturing the screen.

New Image Dialog 4. A semi transparent rectangle will help you to select the area to capture. The size of the rectangle is the size that you selected in the previous step. The screen under the rectangle will be captured.

Capture a 32x32 area of the desktop You can change the color of the rectangle using the mouse scroll wheel. 5. After you selected the area to capture press the mouse button and the captured area will be displayed in IcoFX as a new image. 6. Save the icon using the "File/Save As..." menu item. On the save dialog choose the desired output format in the "Save as type" combo box. For more information about the Capture dialog consult the help file of IcoFX.

Copyright 2005-2012 IcoFX Software. All rights reserved.

Convert Macintosh icons to Windows icons

Using IcoFX you can convert your Macintosh icons to Windows icons.

To convert Macintosh icons to Windows icons follow these steps: 1. Start IcoFX 2. Open your Macintosh icon (icns file) using the "File/Open" menu item. 3. Save the icon using the "File/Save As..." menu item. On the save dialog choose "Windows Icon (*.ico)" in the "Save as type" combo box.

Save As window Using this method you can also convert your Windows icons to Macintosh icons. You can convert more icons at once using the Batch Create Icons Or Cursors dialog ("Tools/Batch Create Icons Or Cursors..." menu item). For more information about the Batch Process dialog consult the help

Copyright 2005-2012 IcoFX Software. All rights reserved.

Create favicons for your website

A favicon is a small icon that is used by some browsers to identify bookmarked Web sites. The favicon is an important part of each website. It helps in the branding process of your site or blog.

Favicons in Firefox Using IcoFX you can create favicons for your websites or blogs. 1. You can create an icon from scratch or from your favorite image. 2.Using Windows 7 and Internet Explorer 9 you have the option to pin web sites to the taskbar.

Pinned Website under Windows 7 In this case the favicon will be displayed on the taskbar. To make sure that you favicon will be displayed correctly make sure that it contains the following file formats:

Recommended: 16x16, 32x32, 48x48 Optimal: 16x16, 24x24, 32x32, 64x64

You can add all the needed image formats using the Windows Icon From Image dialog.

Windows Icon From Image Dialog

Make sure you select all the needed image formats for a favicon: 16x16, 24x24, 32x32, 48x48, 64x64. Press the OK button to create the icon containing all the selected formats. 3. Save the icon using the favicon.ico name. 4. When you have saved your icon add the following code snippet to the head section of your website:
<link rel="SHORTCUT ICON" href="favicon.ico">

5. Upload the favicon.ico file in the same directory as your web page.

Copyright 2005-2012 IcoFX Software. All rights reserved.

Creating custom brushes

IcoFX gives you the possibility to create custom brushes. In this tutorial we will create a custom brush that will paint stars.

Create the mask image for the brush

IcoFX uses an image as mask for the brush. The transparency of that image will be used as a mask. The image has to be a 100x100 PNG image. In the first step we create the mask image that will be used for the brush. 1. Create a new 100x100 image in IcoFX using the "File/New Image..." menu item.

New Image Dialog On the New Image dialog select the custom size and enter 100 in the Width and Height edit boxes. The background color has to be "Transparent". Pressing OK will create a new empty 100x100 image in IcoFX.

2. We need to create the star image that will be used as a mask. To draw the star we will use the Text tool and draw a star using the Wingdings font. First we select the star from the Character Map Windows application. This application is not part of IcoFX. It comes installed with the Windows operating system. It is usually located under "Start Menu/All Programs/Accessories/System Tools/Character Map"

The Character Map Application On this dialog we can choose a character from a font. We select the Wingdings font and double click the star symbol. Pressing the Select and then the Copy button we have copied the star symbol to the clipboard. 3. We paste the star symbol to the Font tool properties window (it will not be displayed as a star anymore).

The Text Tool Properties We select the font Wingdings and a font size of 140. We are now ready to draw the star on the canvas. 4. Select the color Black for a better visibility. Draw the star on the canvas: Click on the canvas to draw a preview of the star. You can drag the star using the left mouse button until it is fully visible on the screen. When you are done press the Apply button on the Tool properties panel. This will draw the star on the canvas. The end result will look something like this:

5. Save the image using the "File/Save" menu item as a PNG image. Select "Portable Network Graphic" in the "Save as type" combo box. You have successfully created the mask image.

Create the new brush

6. Create a new brush by pressing the "New Brush..." toolbar button in the Brushes panel. This will open the Brush Editor dialog.

The Brush Editor Dialog On this dialog we set the properties of the brush:

We enter "Stars" as the name of the brush. This name will be displayed in the Brushes panel. Load the mask image, that we created in the previous steps, in the Mask box. This defines the shape of the brush. We can see the preview of the brush on the bottom part of the dialog. Set the default size of the brush to 50. This size will be used when you select the brush from the Brushes panel. Set the spacing of the brush to 100% so that we will have some distance between the starts.

7. Next we set the dynamic properties of the brush. Select the "Shape Dynamics" tab on the Brush Editor dialog.

The Shape Dynamics Tab of the Brush Editor Dialog We set the size jitter to 50%, meaning that the size of the brush will change randomly by 50% during drawing. This will result in different sized stars. We change the angle jitter to 100% meaning that the star can be displayed at any angle. The stars will be displayed at random angle during drawing. 8. On the next tab we set the color related dynamic properties of the brush. Select the "Color Dynamics" tab on the Brush Editor dialog.

The Color Dynamics Tab of the Brush Editor Dialog We set the hue jitter to 2% to allow a slight variation in the colors of the stars. We set the saturation, brightness and opacity jitter to 20% to allow some variation in the saturation, brightness and opacity of the stars during drawing. 9. On the last tab we set the scattering properties of the brush. Select the "Scattering" tab on the Brush Editor dialog.

The Scattering Tab of the Brush Editor Dialog

We set the x and y position jitter to 50 pixels. This means that the stars will be drawn 50 pixels away from the mouse position. Using these parameters we can scatter the stars as we draw. The stars will be drawn at random distance from the mouse pointer, but not more than 50 pixels. 10. We finished the brush, press the OK button on the Brush editor to close the dialog. Our new brush is now displayed in the Brushes panel.

Test the new brush

11. Now all is left is to try out our new brush. Select the "Stars" brush in the Brushes panel. Select the Brush drawing tool on the Tools panel. Set the size of the brush and select a color. Start drawing on your canvas.

The Stars Brush

Copyright 2005-2012 IcoFX Software. All rights reserved.

Batch create icons from images

To convert more images to icons easily you can use the Batch Process dialog of IcoFX. To batch create icons from images follow these steps: 1. Start IcoFX 2. Open the Batch Create Icons or Cursors dialog using the "Tools/Batch Create Icons or Cursors..." menu item.

Batch Create Icons or Cursors Dialog 3. Using the "Add..." button add the image files that you would like to convert to icons.

You can also add icons here. New icons will be created based on these icons. Using this method you can batch convert Macintosh icons to Windows icons. 4. In the "Image Formats" group box you can select the image formats to include in the icons. It is recommended to leave the default values. 5. Specify the output folder for the icons. The icons will be created in this folder. 6. Specify the file format of the icons. You have two options:

Windows Icon - This will create Windows icons from your images Macintosh Icon - This will create Macintosh icons from your images

7. Press the OK button to start processing the files. For more information about the Batch Create Icons or Cursors dialog consult the help file of IcoFX.

Copyright 2005-2012 IcoFX Software. All rights reserved.