icon editor manual

2009

Greenfish Icon Editor


i

Table of Contents

Introduction to Greenfish Icon Editor ..................................................................................................................................................................... 2

Tools with Icon Editor .......................................................................................................................................................................................... 3

Individual Tools .................................................................................................................................................................................................... 5

Tool Behavior Dialog............................................................................................................................................................................................ 9

Working with Colors .......................................................................................................................................................................................... 10

Editorial Tools for Google Sites ......................................................................................................................................................................... 11

Various Editorial Procedures ............................................................................................................................................................................. 12

Editing Site Name Appearance .................................................................................................................................................................. 12

Adding Content ..............................................................................................................................................Error! Bookmark not defined.


2

Introduction to Greenfish Icon Editor

The first question that may come to mind is, "what do I need this for?" If you do any type of work with ANGEL, webpages, or simply need a new icon for some item on your desktop, this application will come in handy. While the ANGEL LMS comes with predesigned icons, we do not have to use them. Personally, I would prefer an icon that truly indicates what I am posting for my students do see. If I am placing a PowerPoint online, I want them to know, based on the icon that the item they are about to click on is a PowerPoint. The objective of this introduction is to get everyone used to this little program and find ways of using it. My focus will primarily be in using the icons in ANGEL once they are created or modified using this application. I believe you will find Greenfish Icon Editor quite user-friendly and intuitive. You will find it user-friendly even if you have not had previous experience using image editors. This icond editor has provided every tool needed for anyone that finds themselves needing or wanting to work with icons. Since this is not extremely important, this document will be short and to the point. The objective of this document is to make the use of Greenfish Icon Editor as clear and understandable as possible. I realize that this is not for everyone. However, if you have the slightest interest, this is an excellent tool in accomplishing the task at hand.


3

Tools with Icon Editor You can select the active tool from the Toolbar dialog. If you accidentally close the window, you can show it again by checking View | Toolbar. When using the selection tools, hold down Shift to add to the current selection, Ctrl to subtract from the current selection, and Shift+Ctrl to keep the intersection of the old and new selections. When you first open Greenfish Icon Editor, you will see to the left of the screen a floating box of tools. An image of that is to the right.

To the right of the Toolbar on this page, you can see individual images of each item. I have separated them so that you may see the name and the hotkey that gives you access to that specific tool.

Follow to the next page to see more details as to how each tool is used ….


4

In addition you will also see some tools to the right of the screen that appear as the screenshot image below:

These tools are useful for editing and icon's color(s) and/or creating your own icon or images that you intend on using.


5

Individual Tools

The tools presented in previous pages gave you the hotkeys for using the tools but I did not get into the details of their purposes. I will now put in some more specific information and hopefully with the demonstration the details will help you to recall the use of each necessary tool when it comes time to apply it to a task at hand.

Rectangular select (S)

This tool, as its name suggests, can be used to select rectangular areas of the image. To move/resize the selected area, use the Transform (F) tool.

Elliptical select (A)

You can select elliptical areas with this tool.

Lasso (O)

The lasso is a tool for selecting freehand areas.

Wand (W)

The wand can be used to select areas of the same color. Click on the canvas to select the neighboring pixels which are similar in color. Use the Tool Behavior dialog to configure the color tolerance of the wand.


6

Pencil select (I)

Draw as if you drew with a pencil to select the pixels.

Transform (F)

This tool can be used to transform selected areas. A special mouse cursor indicates if nothing is selected. You can resize the selection by grabbing its sides or corners, or move it by dragging every other pixel of the canvas. If you hold down Shift while dragging, the selection will drag a stripe wherever it moves. Hold down Ctrl when starting to transform the selection to keep its copy at the initial place.

Crop (X)

Select a part of the image to keep it discarding all other pixels. Hold down Shift to select a square.

Set hotspot (H)

You can use this tool to set the so-called hot spot when working on a cursor. The hot spot is a pixel of the cursor with which you click on objects. For instance, considering an arrow-shaped cursor, the hot spot is the end of the arrow. Click and drag to place the hot spot to another place on the canvas. The hot spot is indicated with a red X.

Eyedropper (Y)

The eyedropper is used for picking colors from the canvas. Click with the left button to pick the foreground and with the right button to pick the background color. If the Eyedropper switches back checkbox is checked in the Tool Behavior dialog, the eyedropper will switch back to the previously selected tool after finishing its work.


7

Retouch (U)

This tool can be used to perform various tricks on the image, especially on photos. The Retouch tool works as a brush and can be configured in the Tool Behavior dialog box. It can work in Blur, Sharpen, Dodge (lighten), Burn (darken), Hue and Sponge modes.

Rectangle (R)

Click and drag on the image to draw a rectangle. Hold down Shift to draw a square. Use the Tool Behavior dialog for configuring filledness and line width.

Ellipse (J)

Click and drag on the image to draw an ellipse. Hold down Shift to draw a circle. Use the Tool Behavior dialog for configuring filledness and line width.

Line (L)

Click and drag on the image to draw a straight line segment. Hold down Shift to draw a line in a special direction. Use the Tool Behavior dialog for configuring line width.

Text (T)

Click on the canvas to open a dialog box where you can type the text and adjust font settings. After clicking OK, the text will be inserted as a floating selection.


8

Pencil (P)

This tool can be used to draw a freehand, 1-pixel-wide line on the canvas.

Brush (B)

This tool can be used to draw a freehand line on the canvas. Use the Tool Behavior dialog for configuring brush shape and width.

Eraser (E)

The eraser is similar to the brush. In effect, it helps you paint with the transparent color. Use the Tool Behavior dialog for configuring brush shape and width.

Recolor (Q)

This tool is in fact a brush which paints with the foreground color only on areas of the background color (reversed if you press the right mouse button). Use the Tool Behavior dialog for configuring brush shape, brush width and color tolerance.

Bucket fill (K)

Click on the canvas to fill one-color areas of the image. (You can drag the mouse while holding down the left button to preview the result of the operation.) Use the Tool Behavior dialog for adjusting color tolerance.

Gradient (G)

Click and drag on the canvas to draw a gradient between the foreground and background colors. You can use the Tool Behavior dialog for adjusting gradient and repetition kind.


9

Tool Behavior Dialog

The Tool Behavior dialog box is essential to configure most of the tools. If you do not see this window, you can still bring it back using View | Tool Behavior. You can also make it compact and revert it by clicking the small triangle in the topleft corner. It looks like the following:

The first two buttons configure whether a drawn rectangle or ellipse should be outlined or filled. You can set the line width of outlined shapes and straight lines using the edit box in this row. The last tool button indicates whether the Eyedropper (Y) tool switches back to the previously selected tool after finishing its work.

The controls in the second row can be used to set the brush size and shape. You can draw with rounded, sharp, slash, backslash, horizontal line and vertical line-shaped brushes, or use the Brush tool as a paint spray. Note that the mentioned controls affect not only the Brush (B), but also the Retouch (U), Eraser (E) and Recolor (Q) tools.

The edit box in the third row help you set the color tolerance of some tools, for instance, the Wand (W) tool. The higher the value set, the more pixels will be affected by the tool. Set the value to 0 to select only pixels of exactly the same color. The four tool buttons on the right can be used to configure the kind of gradient drawn by the Gradient (G) tool.

You can find an edit box in the fourth row which can be used to set the strength of the Eraser (E) tool. If set to 100, as in the image, the eraser changes all affected pixels to fully transparent. If a smaller value is set, the eraser only decreases the opacity by a certain level. The scroll down list can be used to set the action the Retouch (U) tool should perform.

The remaining controls affect the Gradient tool. You can configure the gradient repetition and mode with them. There is a picture below which helps you understand the three repetition types, which are: none, symmetric and asymmetric, respectively:


10

Working with Colors

The Tool Behavior dialog box is essential to configure most of the tools. If you do not see this window, you can still bring it back using View | Tool Behavior. You can also make it compact and revert it by clicking the small triangle in the top-left corner. It looks like the following:

There is a separate dialog which helps you choose the desired color for painting. This can be shown or hidden using View | Color Picker. You can also make it compact and revert it by clicking the small triangle in the topleft corner, if you think that it occupies too much room.

The two filled rectangles at the top indicate the foreground and background colors, respectively. Click on the first rectangle to set the foreground and on the other to set the background color. The colors can be swapped and reset using the buttons between them.

You can define a color by giving its RGBA coordinates or HTML representation, or using the HSB Map, which appears to be closer to human perception than the RGB system.

When working with 16-color or other indexed images, (you want to use only the 16 pre-defined system colors) you should use the Swatches tab. You can select color swatches with the left mouse button and overwrite them with the current color using the right mouse button. Swatch presets can be loaded from and saved to files.


11

Editorial Tools for Google Sites

If you happen to select a name that has been already taken, you will receive a message informing you of such along with suggestions of names that are not yet taken. In the screen below, you will see an example of such.

I now must follow through the steps again as if I have just started from the point of naming my site. However, when I pick one of the name listed here, I know that I will be picking a name that is available. From that point I can go on to the content creating and all.

To the right you see a screenshot of what you will see when you first succeed in “creating” the site. From this point we will want to add pages, make changes etc. The tools for making any changes or adding content, are all located across the top. There are four buttons that I have highlighted in red.

1. Create new page 2. Edit page 3. More actions 4. Site settings

From these you can add more pages, edit content to the one you have before you, change site settings, and


12

you have “More actions’ which brings yet more opportunities. The first change I would make would be the appearance of my site’s name. On the following page, you will learn how to change your sites’ naming on a given page.

Various Editorial Procedures In the following

Editing Site Name Appearance

The

icon editor manual

Documents

use of greenfish icon

new icon

icond editor

editorial tools

angel lms

predesigned icons

individual tools

type of work