Introduction

Introduction to iPhotoDraw V2.6

iPhotoDraw lets you add annotation to an image file. You can add texts, arrows, dimensions, lines, and balloons etc. to an image.

People are using iPhotoDraw's annotation capabilities to:

  • Name people in photos.
  • Add descriptions for objects.
  • Show dimension information of an object.
  • Show enlarged details of an object in the balloons.

The following is an example of what we can do with iPhotoDraw.

Original image,
Image with annotations,


Features

Some key features of iPhotoDraw are:

Simple, intuitive user interface
Every feature and user interface element has been designed to be immediately intuitive and easily learned without assistance. iPhotoDraw is designed to be immediately familiar to users of MS Office and any other commercial graphics software.

Instant visual effect when setting properties
When configuring the properties of annotation objects, you will see the instant effect without having to click the [Ok] button.

Annotation data is stored in a separated file from the original image
Annotation is not written directly to the image. Actually they are stored in a separated xml file. So you don't need to worry that the original image will be messed up.


System Requirements

Software Requirements

  • Windows XP SP3 or later (e.g. Windows Vista, Windows 7, Windows Server 2008), 32 bit / 64 bit
  • .Net Framework 4.0 or later

Hardware Requirements

  • 800 MHz processor
  • 512MB of RAM
  • 1024 x 768 screen resolution
  • 100+ MB hard drive space


User Interface

iPhotoDraw provides standard and easy-to-use user interface. Operations are very straight forward.


MainUI

Main Interface

The main user interface includes the following parts,

  • Main panel
  • Toolbar buttons
  • Toolbox
  • Property panel
  • Overview
  • Ruler
  • Status bar

1. Main panel

The main panel is at the center of the application's UI. It shows the image that's being edited.

2. Toolbar buttons

The toolbar buttons provide common operations for editing such as open, save, print, cut/copy/paste, redo/undo, and zoom etc.

3. Toolbox

Toolbox provides all the annotations (e.g. lines, rectangles, text, and callout boxes etc.) you can add to the image. It also provides operations like selection, zoom-in, and image panning.

4. Property panel

Property panel shows the basic properties for the currently selected annotation object. It's context sensitive. For example, if you are editing a line object, the Fill property is greyed out.
To see / modify the all the properties for the current object, you can right click on the object in the main panel, from the pop-up menu, choose [properties].

5. Overview image

The Overview shows the whole image. The yellow box is the current focused part in the main panel. You can drag the yellow box to move the focused part in the main panel. It's handy when you are editing a big image or zoom in to details. You can drag the yellow box

6. Ruler

The ruler shows the size of the image (in pixels) and the current position of the mouse cursor.

7. Status bar

Status bar shows information about the current image, such as storage size and the space size (in pixels).


Menu

iPhotoDraw's menu consists of the followings,
  • File
  • View
  • Edit
  • Shape Effects
  • Image
  • Tools


File

1. File

1.1 New

Create a new image on the fly. Choose this menu if you already have an image on clipboard and you want to add annotation to this image right away.
See File \ New for details.

1.2 Open

Open an image file to add annotation. The following image format are currently supported: BMP, PNG, JPG, TIF, and GIF. You can also open file by drag-and-drop the file from Windows File Explorer. Or right click the image file on File Explorer, choose [Open With] option and then choose iPhotoDraw from the application list.

1.3 Close

Close the current image file.

1.4 Save

Save the data for the current file. For a regular image file such as *.png, the data is saved to an xml-format file. For *.ipdx file, data is save to the file directly.

1.5 Save as...

Save the current image file to another file.

1.6 Extract Image File...

This menu item is available only when you are working on an ipdx file. ipdx is a self-contained file format which embeds the image and meta data. See ipdx File Format for details. When you click on this menu item, you can specify where you want to extract the image file to.

1.7 Export

Once you finish editing the annotation on the image, you can export it to a new image file. The possible export image formats include BMP, PNG, JPG, and GIF. See File \ Export for details.

1.8 Send

You can send the current image with annotations to different receivers or applications. See File\Send for details.

1.9 Navigate in Current Folder

Once you open an image file, its folder becomes the current folder. iPhotoDraw provides menu items or toolbar buttons to help you navigate between files in the current folder. You can open the previous, next, first , or last image file in the current folder. You can also open the containing folder in file explorer.

1.10 Screen Capture

iPhotoDraw allows you to do the screen capture and there are 3 options here: entire screen, region, and fixed region. See File\ScreenCapture for more details.

1.11 Snapshot

Snapshot allows you to keep a copy of the current edit status so you can restore to it in the future. See File\Snapshot for more details.

1.12 Print

Print the content of the current image.


New Image

File \ New

Sometimes you want to make a screenshot and add annotations to the screenshot directly. When you choose menu [File\New], the following dialog pops up.

Dialog for creating new image
  • By default, you will get a 320 x 240 blank image. If you have made a screenshot, you can click the button [Get Image from Clipboard]. Once the image is fetched from the clipboard, the width and height will be automatically set to the same as the image. You can change the size to whatever you want.
  • You can also specify the background color for the new image. The background could be either solid color or transparent.
  • To zoom in/out the image for preview, please use the mouse wheel.
  • The settings you use to create the new image will be remembered by the system. So next time it will save time from entering it again.
  • As a handy approach, you can also pick the image size from a list of predefined items.

List of prefefined sizes for new images

Get image from clipboard

Images consist of pixels, so when you create a new image, the default unit is pixels. But you can also use other units as well. Click on the [Advanced...] button, the "Image Size Advanced Settings" dialog shows up. This dialog provides a number of options for the image size:

  • Size: The system provides a number of predefined sizes. For example, Letter (8.5 x 11 in) is one of o the most popular print page size in North America, while 4R (4 x 6 in) is a popular photo print size. Once you pick a predefined size from the dropdown list, it automatically populates the other fields in this dialog for you. Please note that besides the system predefined items in this list, you can also create your own image size. See the Options\Image Size for details.
  • Unit: You can choose a unit (e.g. inch) for the image. Internally it's converted to pixels.
  • DPI: Dots-per-inch (or pixels-per-inch) is a measure of spatial printing dot density. It means how many dots (or pixels) can be placed in a line within the span of 1 inch (2.54 cm). We use this to calculate the final size in pixels for the image. Normally, DPI for a computer screen is 96, while a laser printer is 300 or higher.
  • Orientation: You can decide the image is in portrait or landscape.
  • Width/Height: You can also manually enter the size in the Width and Height fields.
Advanced settings for image size

Once a new image is created, it's just in memory. So please don't forget to save (or export) it later on.


File \ Export

After finish editing the annotations, you can export the image. By doing this, the annotations are burned on the exported image.

Export to a new image file

You can click on the folder icon [image] to specify the path / file of the exported image. Click on the [Image Options...] button to open up the following dialog to config the options for image exporting.

Options for image exporting

In this dialog, you can specify the quality of the exported image. This option is only available if the exported image is a JPG. By default, the exported image is the same size of the original image. You can resize the image. The aspect ratio of the image is maintained when you change the size.


File \ Send

FTP

iPhotoDraw allows you to upload image to the FTP server. Choose menu item [File]\[Send]\[FTP] to open up the following dialog.

Upload image to ftp server

In this dialog, you can set the image name (without file name extension), the image type (currently only jpg, png, bmp, and bmp are supported). Click on the [Image Options...] button if you want to change the quality for the jpg image, or resize the image.

In the "Ftp Connection" groupbox, please enter the following information for ftp uploading,

  • Upload Path : This is the network address of the ftp server, followed by the path to where you want to upload the image.
  • User Name : Account of the FTP server.
  • Password : Password of the FTP account.

Click on [OK] button to start uploading the image.

Office

You can send the image to MS products such as Word, Excel, PowerPoint and Outlook. Please note that it requires MS Office 2007 or later installed on your machine. To configure MS Office, please see Tools\Options\MS Office for details.

External Application

You can send the current image to the external application. Please see Tools\Options\External Application on how to configure the external application.


FTP

File \ Screen Capture

You can do the screen capture with iPhotoDraw and then annotate on the image directly. There are several options you can use to capture the screen.

Entire Screen

It captures the whole screen as the image. In a multi-screen environment, you can pick the screen(s) which you want to capture just the picture below.

Choose screen(s) in multi-screen system

Region

When you choose this option, the screen will become blurred. Click the mouse's left button on the location where you want to start capture. Then drag the mouse. The region you are dragging becomes clear. And that is the region you will capture. Release the mouse left button, the region of the screen will be captured by the system as a new image.

Note:

  • There is a pixel magnifier that moves along with the mouse. It shows the details of the pixels around the current mouse cursor. The center of this magnifier (the red spot) is exactly the pixel that's under the mouse cursor. As an option, you can turn on / off this magnifier by pressing [Ctrl] key.
  • The label under the selection box shows the size of the region that's being capture.
  • If you want to have precise control of location / size of the region, you can use the Arrow key to move the mouse.

For example, the following pictures shows the region user wants to capture.

Capture screen by region

Fixed Region

You can also use a fixed region to capture screen. When you choose this option, the following dialog will pop up to let you specify the size of the region. After specifying the size of the region, you then move the region in the screen. Click the mouse. The region at which you click will be captured by the system.

Specify the size of the capture region

Note: The size you specify will be persisted by the system and used as the default value for the next capture.

Capture Window

Choose this menu item if you want to capture a window. Move the mouse on the screen, the window under the mouse will be highlighted. So you know what window you are going to capture. Below the highlight box, it shows the size of the window.

Capture Window

Region to Clipboard

It's like capture screen with "Region". But instead of placing the captured image onto iPhotoDraw, it places it to clipboard so you can directly paste to other software.

Delayed Capture

Sometimes you want to take some time to do something and wait there until the screen capture takes place. For example, you want to capture the image of menu items. you open up the menu, but you cannot switch to iPhotoDraw to do the screen capture. Because once you click the mouse somewhere else, the menu will disappear.

In such a case, you can use Delayed Capture. You can specify the amount of time in seconds for the delay. You can combine the delay operation with other capture methods such as Entire Screen, Region and so on (see picture below). Once you hit the [Start] button, the countdown starts. You can take this moment to do your stuff (such as switching to other software and open up the menu) and wait for the countdown to finish. When count down finishes, the system will capture the screen.

Set delay time and other options

Use the Delayed Capture to capture menu items

Repeat the Last Capture

If you not happy with the captured image and want to do it again, you can choose "Repeat the Last Capture". It saves you time because it automatically uses the same settings you do for the last capture (e.g. size of the capture region).


Snapshot

File \ Snapshot

Taking a snapshot saves the current state of annotation editing, so you can return to it at any time. You can take multiple snapshots of the editing, to save any state you might want to return to. A simple scenario is like this, you have several ideas of editing an image, but you are not quite sure which one your client may want. So you create snapshots and show it to your client and let her / him pick the right one.

Create Snapshot

Creating a snapshot is easy. Just choose menu item File\Snapshot\Create Snapshot. The following dialog will pop up. Give the snapshot an easy-to-remember name and maybe some descriptions. Click [OK], the snapshot is then created.

Note: During the above steps, the snapshot is created in memory. If you want to save it with the file you are editing, please click the [Save] button on the main UI's toolbar.

Enter the information for the new snapshot

Restore Snapshot

Once you created snapshots, you can restore this snapshot at any time. Open the 'Restore Snapshot' dialog and pick the one you want to restore. Click [OK] button, and then the system will restore to that snapshot. To save storage space, you can also delete snapshots that you don't need any more here.

Restore a snapshot

Note: If you have made some changes on the current image, before restoring a snapshot, it's better to create a snapshot for current edit status. Otherwise, when the application restores to the snapshot you choose, you will lose the current changes.


MenuView

2. View

2.1 Zoom In

Zoom in the image.

2.2 Zoom Out

Zoom out the image.

2.3 Fit to Window

Zoom the image so it just fits inside the current window.

2.4 Actual Size (100%)

Zoom the image to its actual size (100%).

2.5 Zoom to 200%

Zoom the image to 200% of the original size.

2.6 Zoom to 400%

Zoom the image to 400% of the original size.

2.7 Zoom to Selection

After you select shape(s), you can use this menu to zoom in and put the shape(s) in the center.

2.8 Full Screen

Show the image in the full screen mode. Once the view is in full screen mode, you can scroll the mouse wheel button to zoom in / out image. When you move the mouse, a group of buttons will appears at the bottom of the screen (see the picture below). Use these buttons to exit the full screen mode, Zoom in / out, or zoom to full extent of the image.

Full screen mode

You can also exit the full screen mode by pushing the [Esc] key at anytime.

2.9 Properties

Turn on / off the property panel from the main user interface.

2.10 Overview Image

Overview Image shows the overall image at the bottom of the property panel. See Overview Image for details. It gives users convenience to navigate within a big image. However, in some cases you may want to turn off the overview image for the reason of:
  • Save space on the property panel.
  • Improve the performance of image rendering.

2.11 Ruler

Turn on / off the ruler from the main user interface.

2.12 Ruler Display Unit

You can choose one of the following units as the display unit for the ruler:
  • Pixel
  • Inch
  • Foot
  • Millimeter
  • Centimeter
  • Meter
After you pick a unit, you will see the current unit short name is showed in the ruler like the following picture. The calculation of the physical units (e.g. inch, centimeter etc) is based on the DPI (dots-per-inch) attribute of the image. For example, for a 96-DPI image, 96 pixels equal to 1 inch (or 2.54 centimeters).
Ruler unit

2.13 Grid

Turn on / off the grids when you edit the annotations. When grids are turned on, you can only move shapes on grids. The following image shows grids and a rectangle that is aligned on the grid line.
Grids

2.14 Guide Line

Turn on / off the guide lines. The following images shows the guide lines and rectangles that are aligned to the guide line. When the guide lines are turned on, you can drag the guide lines to a new location.

There are 2 types of guidelines:

  • Cross guideline : The position of the cross guideline is relative to the left/top of the image.
  • Corner guideline : The position is measured from the edge of the image. That is useful if you want to dock shapes in the corner of the images. For example, you may want to put add a logo to a bunch of images and want the logo to be always 10 pixels to the right and 5 pixels to the bottom on all these images.
Guide lines

2.15 Visible

An image document consists of the original raster image and annotation shapes on top of it. During the editing, you can turn on/off either the image or the annotation shapes at your convenience.

  • Image: Turn on/off the raster image.
  • Shapes: Turn on/off the annotation shapes.


MenuEdit

3. Edit

3.1 Undo

This command undoes the most recent action that you've taken when editing the annotation on the image, if any.

3.2 Redo

This command redoes the most recent action that you've undone, if any.

3.3 Cut

This command puts the selected annotation object onto the clipboard and remove it from the image as well.

3.4 Copy

This command puts the selected annotation object onto the clipboard.

3.5 Paste

This command gets the data from the clipboard (if any) and puts it on the image.

3.6 Delete

This command deletes the selected annotation object from the image.

3.7 Select

iPhotoDraw provides several ways for you to select shapes for editing.
  • Select All - Select all the shapes.
  • Select None - Unselect the selected shapes.
  • Inverse - Inverse the selection. That is, select the unselected shapes, and unselect the selected ones.
  • Select Next - Select the next shape (in Z-order).
  • Select Previous - Select the previous shape (in Z-order).
  • Select First - Select the first shape (in Z-order).
  • Select Last - Select the last shape (in Z-order).

3.8 Lock Shapes

Sometimes when you are editing shapes on the image, there are some of the shape that you don't want to touch. In this case, you can lock them up. Once a shape is locked, it cannot be edited (selected, moved, or deleted etc).
  • Lock - Lock the currently selected shapes, so they cannot be edited.
  • Lock All - Lock all the shapes in the current image.
  • Unlock - Unlock the shapes, so they can be edited again.

Note: When you save the image, the lock will be saved as well.

3.9 Align

Once you select multiple shapes, you can do alignment operation for them. Alignment operations include,
  • Align Left
  • Align Centers Vertically
  • Align Right
  • Align Top
  • Align Centers Horizontally
  • Align Bottom

3.10 Make Same Size

You can make several shapes the same width, same height, or same size in both direction.

3.11 Make Center

You can put select shape(s) to the horizontal or vertical center on the current image.

3.12 Spacing

You can control the space between selected shapes. There are several operations here,
  • Make Horizontal Spacing Equal : Horizontal space between shapes are of the same.
  • Make Vertical Spacing Equal : Vertical space between shapes are of the same.
  • Remove Horizontal Space : Shapes are horizontally adjacent to each other (no space between each of them).
  • Remove Vertical Space : Shapes are vertically adjacent to each other (no space between each of them).

3.13 Order

You can change the z-order of the shapes on the image.
  • Bring Forward : Move the selected shape one-step forward.
  • Bring to Front : Move the selected shape to the top of others.
  • Send Backward : Move the selected shape one-step backward..
  • Send to Back : Move the selected shape to the bottom of others..

3.14 Grouping

You can group multiple shapes into a group.
  • Group : Group selected shapes together. The benefit of grouping shapes together is, you can apply properties to them at a time. You can also move, deleted them all together.
  • Ungroup : Ungroup the grouped shapes.

3.15 Shape Properties

Once you select a shape (or a group of shapes), you can open up the property dialog by choosing menu item [Edit\Shape Properties], or double-clicking, or just simply hitting the [Return] keyboard. The 'Shape Properties' dialog shows more details than the 'Property' panel on the main UI. Please see Edit \ Shape Properties for more details.

3.16 Flip

Most of the shapes support flipping. When you select a shape that supports flipping, this menu becomes available. See Edit \ Flip for details.

3.17 Connect Shapes

You can close a polyline or connect 2 polyline to create a polygon. See Edit \ Connect Shapes for details.

3.18 Save as Picture

You can choose a shape or a group of shapes and save it (them) as image file. Supported image formats include PNG, BMP, JPG, and GIF.

Note: You can control the properties of the newly created image, such as background color, transparency, margin. See Tools \ Option \ Shapes Picture for details.

3.19 Formatting

There are lots of formattings for a shape, e.g. font styles, fill color, line thickness, shadow, text effect etc. Sometimes, you have a shape that has the perfect formattings and you want to apply them to other shapes. Manually duplicating these settings is a little bit overwhelming. That is where Formatting comes to help. You just select the interesting shape and choose menu 'Formatting \ Copy'. Then select another shape and choose menu 'Formatting \ Paste', it then pastes (or applies) the formattings to this shape.

You can also use toolbar button 'Format Painter' to achieve the same goal.

Note: Text is not part of the formattings. So the text is not changed after pasting the formattings.


Shape Properties

Edit \ Shape Properties

You can modify the selected shape's properties through the 'Shape Properties' dialog. The properties are grouped into tabpages. iPhotoDraw only shows properties that are available for the current selected shape. Different shapes have different properties, so the tappages may be different. Following is the full list of the shape's properties.

  • Text
  • Font
  • Text Effects
  • Fill
  • Line
  • Dimension


Text Properties

Shape Properties \ Text

This tabpage provides basic settings for the text of the shape. Here are the settings:
  • Text: Text of the shape.
  • Text Margin: Margin between the text and each side of shape.
  • Alignment: It includes the horizontal and vertical alignment for the text.

Text properties

If you want advanced settings for the text, please use Text Effects.


Font Properties

Shape Properties \ Font

On this tabpage, you can config the font properties for the selected shape(s).
  • Font name and size
  • Font style: Bold, italic, underline, and strikeout.
  • Font color and transparency

Font properties


Text Effect Properties

Shape Properties \ Text Effects

Comparing to the Text properties, Text Effects provides more advanced settings for the text. On this tabpage, you can set:
  • Outline: There are 2 options here, no outline or solid line. If you choose solid line, then you can specify the properties for the line such as dash style, thickness, line join, and color.
  • Text Fill: There are 4 options for the fill of the text: No fill, solid color, gradient color, and picture.
  • Shadow: It is similar to the shadow settings for the shape, but it's dedicated to the text of the shape. See for Shape Effect\ Shadow details.
  • Glow: It's similar to the glow settings for the shape, but it's dedicated to the text of the shape. See Shape Effects / Glowfor details.

Text Effect properties

The following picture shows some text effects applied to the text.

Text with glow, shadow, gradient color, and picture fill

Note: These settings are available only when you check the 'Use text effects' checkbox.


Shape Properties

Edit \ Transform

When you are editing, you can resize, move, or rotate shapes by dragging the mouse, or using keyboard. However, the Transform menu item give you a more precise operation, and you can achieve multiple operation at once.

Transform each

It allows you to do translation, rotation, and resize all together in a user interface. Enter value for the x/y position, size, and rotation. If you want to make a copy of the shape with the new value you input, instead of modifying the current shape, pleach check the "Make a new copy" checkbox.

Transform each


Split

Edit \ Flip

There are 3 flipping operations you can apply to a shape:

  • X Flip: Flip a shape along the x-axis (in horizontal direction).
  • Y Flip: Flip a shape along the y-axis (in vertical direction).
  • XY Flip: Flip a shape in both horizontal and vertical direction.

See the following picture for the flipping result with different flipping operations:

Flip a shape

Note:

  • There are toolbar buttons for the flipping operations. They provide you a quick access to the operation.
  • You can also resize the extent of the shape in opposite direction to flip it (if applicable).
  • You cannot flip a shape group. You have to ungroup the shapes, flip them, and group them again if necessary.


Split

Edit \ Split

iPhotoDraw allows users to split an image or rectangle shape into 2 separate parts.

Split with Options

You need to select an image or rectangle shape before you can use the split tool.

Select an image shape for split

There are a number of options on the "Split Shape" dialog.

Split shape dialog

Click on the "Choose splitting line" combobox, and choose an appropriate line pattern from the dropdown list. Please note that the splitting line settings underneath may change based on the line you choose. There are 2 types of splitting line:

  • Wavy line: See Wavy Line Effect for details.
  • Irregular line: Unlike wavy line which has repeatable pattern, irregular lines consist of one or more mini predefined line segments.
List of splitting lines

You can also decide the direction of the split: in a horizontal or vertical way. Once you are done with the settings, click [OK] button to close the dialog. A splitting line will be display on the shape. This is the starting position of the split. You can move the mouse the determine the actual position. Click the mouse left button to tell the system the starting split position is decided.

Specify the starting position of the split

After you specify the starting position of the split, you then continue to mouse the mouse to specify the ending position. The part between the two splitting lines is render in dark color, indicating that it will be cut off.

Specify the ending position of the split

Click the mouse to confirm the ending position of the split. And finally you get the following result.

Result of the split

Please note that there is a "Save as default" checkbox on the "Split Shape" dialog. If you check this checkbox, the change you make on this dialog will be saved as the default settings for shape splitting. And the settings also apply to Vertical Split and Horizontal Split (see the following section) as well.

Vertical Split

This menu item gives you a handy shortcut to vertically split the selected image or rectangle shape. It uses the current split settings.

Horizontal Split

This menu item gives you a handy shortcut to horizontally split the selected image or rectangle shape. It uses the current split settings.


Split

Edit \ Connect Shapes

1. Close Polyline

You can create a polygon from polyline by closing the polyline. The following diagram shows the example of an open polyline and a closed one. Once you close a polyline, it becomes a polygon and you apply fill color to it.

Close a polyline

2. Connect Polylines

Once you select 2 polylines, you can connect them. See the following diagram as an example.
Connect polylines


Fill with Current Image

Edit \ Fill with Current Image

You can fill shapes with the current image to show details for the interesting part of the image. It's also called image magnifier effect. Let's see how to do it with a tutorial.

Step 1 - Open an image

Let's say we already have an image opened in iPhotoDraw. For example, the following is a sample image we use in this tutorial.

Open image in iPhotoDraw

Step 2 - Add a shape on the image

Draw a circle on the image. Make sure it's selected.

Draw a circle on the image

Step 3 - Fill with current image

Choose menu "Edit \ Fill with Current Image". Move the mouse over the image. It picks the part of the image right under the mouse and uses it to fill the circle. In the meantime, you can zoom in / out the fill content by using shortcut [Space] + Mouse Wheel (Scroll the mouse wheel while pressing [Space] key). Once you are satisfied with the result, click the mouse to finish the operation. To cancel the operation, just press [ESC] key.

Image magnifier effect

If you want to fine-tune the settings, just double click the circle to open up the properties dialog for the shape. Switch to "Fill" tabpage and you will see the details of the "Fill with Current Image" settings. Adjust the settings if you want. Note that 'Focus' is the location (in pixels) of the image which relates to the center of the shape object that's being filled.

Fill with current image settings

Step 4 - Export

At the end, you probably need to export the image. In the previous step, we magnify (zoom in) the fill content by 300%. When you export, the magnification will be blurred. So it's suggested to scale down the image when exporting. To do that, click the [Image Options...] button during the export to bring up the "Options for Image Exporting" dialog. Then change the resize percentage. For example, enter 30% here and you will get a nice result.

Resize the image when exporting


MenuText

4. Text

These menu items provide operations on text.

4.1 Change Case

Change text case for the selected shapes.

  • Upper Case: Change the text to upper case.
  • Lower Case: Change the text to lower case.
  • Title Case: Change the text to title case, which means the first character of each word is upper case, while the remaining characters are in lower case.
  • Sentence Case: Change the text to sentence case, which means the first character of the sentence is in upper case, while the remaining characters are in lower case.


MenuShapeEffects

5. Shape Effects

These menu items allow you to apply special effects to the selected shape(s). Currently we support 4 kinds of effects. Please note that some of these effects may only apply to specific types of shapes.

5.1 Shadow

See Shape Effects \ Shadow for details.

5.2 Glow

See Shape Effects \ Glow for details.

5.3 Wavy Line

See Shape Effects \ Wavy Line for details.

5.4 Round Corners

See Shape Effects \ Round Corners for details.


Shape Effects \ Shadow

The following picture shows the settings for a shadow. If you want shadow for a shape, please check the "Has shadow" checkbox.
  • Color - Usually shadow is in black or grey. But you can specify other color (and transparency) for the shadow.
  • Distance - Distance between the shadow and the original shape. It's measured in pixels.
  • Angle - Angle of the shadow. It starts from the horizontal right and increases clockwise.
  • Size - Size of the shadow comparing to the shape. 100% means the same size of the shape.
  • Blur - Blur ranges from 0 to 100. When blur is 0, it means a hard shadow.

Shadow settings

The following picture shows the same shape with two different shadows.

Hard shadow and soft shadow


Shape Effects \ Glow

Glow is a little bit similar to shadow in the sense that both of them have soft and blur edge. The following dialog shows the settings you can config for the glow.
  • Color - color (including the transparency) for the glow.
  • Size - Size of the shadow comparing to the shape. 100% means the same size of the shape.
  • Thickness - How thick the glow is.
  • Blur - Value ranges from 0 to 100. 0 means no blur.

Glow settings

The following picture shows a shape with glow effect.

Glow effect


Shape Effects \ Wavy Line

You can apply Wavy Line effect to lines or polylines. Just select a line or polyline shape and menu item [Shape Effects \ Wavy Line] will be available. On the Wavy Line configuration dialog, check "Wavy line" checkbox to enable wavy line effect. You can choose a wavy line from a number of predefined patterns.

Configure wavy line

There are a number options you can specify besides patterns.

Number of ridges

Ridge is the top or bottom peak of the wave. This following image demonstrate the ridge of the wavy line.

Ridge

This following example shows 2 wavy lines which have 2 and 4 ridges respectively.

Wavy lines which have 2 and 4 ridges respectively

Height

The height of wavy line is measured from the top ridge to the bottom ridge of the wave.
Height of wavy line

Offset

You can specify the offset at the start or end of the wavy line.
Offset of the wavy line

Vertical flip

You can vertically flip the wavy line (see the following example).
A regular wavy line and a flipped one


ShapeEffectsGlow

Shape Effects \ Round Corners

Some of the shapes support round corner effect. Please see the difference between the regular shapes and shapes with round corner effect from the following picture.

Round corner effect

To configure round corner for a shape, please choose menu item 'Shape Effects \ Round Corners'. The menu item is enabled if the selected shape supports round corner effect. On the 'Round Corners' dialog, you can enter the radius for the corner. The shape changes when you enter the value. Once you are happy with the effect, click [OK] to close the dialog.

Note:

  • The radius of the corner is measured in pixels.
  • Set the radius to 0 if you don't want round corner for the shape.

Round corners settings


Image

6. Image

6.1 Information

iPhotoDraw shows the information for the current opened image. There are 2 types of information,
  • Basic information, which includes name, path, file size, image size etc.
Basic information for the image

  • Extended information - iPhotoDraw reads the meta data (mainly Exif) from the image. Different images will have different extended information. For example, the following dialog shows the Equipment Make, model, Resolution, Picture Time, and other rich information about the image.
Extended information for the image

6.2 Copy Image to Clipboard

  • Whole Image - it will copy the whole image to the clipboard.
  • Specified Region - When you choose this option, you can drag the mouse on the image. Once you release the mouse, the selected region will be copied to the clipboard.
  • Repeat Last Region - If you have copied the 'Specified Region' to clipboard, this option will be available. Basically it will copy the image in the same region you used before. It's useful if you have made changes on the image, and want to copy the same region to clipboard. In this way, you can easily compare the result to previous one exactly on the same location and in the same size.

6.3 Show on Map

If you take pictures with smartphone, tablet or GPS camera, the picture may contain location information. This menu item will show the location of the picture on the map. To make it work, you need access to internet.
Please see Image \ Show on Map for details.

6.4 Config Canvas

Usually the size of the canvas is the same as the image. But you can change that. It will affect the exported image. In some cases, annotation shapes are located outside of the image, you want to enlarge the canvas so the annotation shapes won't get cut off. In other cases, you may want to make the canvas smaller to just expose part of the image.
Please see Image \ Config Canvas for details.

6.5 Flip

You can flip the image horizontally or vertically by choosing this menu item.

6.6 Rotate Image

You can rotate image by 90, 180, or any degree. Please see for Image \ Rotate details.

6.7 Brightness / Contrast

You can adjust the brightness and contrast value for the image by opening up the 'Brightness/Contrast' dialog. Change the value by dragging the sliders. It shows the result in the preview panel. Once you are OK with that, just click [OK] button and the effect will finally apply to the image.

Adjust brightness and contrast for the image

6.8 Hue / Saturation

You can adjust the image's hue/saturation/lightness by opening up the 'Hue / Saturation' dialog. Adjust the hue/saturation/lightness value by dragging the slider. The system shows the would-be result in the preview panel. Once you are OK with that, just click [OK] button and the effect will finally apply to the image.

Adjust brightness and contrast for the image

6.9 Greyscale

It changes a colorful image to greyscale image.

6.10 Sepia

This filter adds some degree of brown color to the image and thus makes it looks aged.

6.11 Emboss

If you want to apply the emboss effect to the image, you need to check the "Apply emboss effect" checkbox just the following picture shows. In this dialog, you can control the strength of the effect, grey level (0-255) and light angle.
Emboss effect

6.12 Invert Colors

Choose this menu item if you want to change a negative image to positive, or vice versa.

6.13 Measure

You can measure the image in pixels, or physical distance unit if you have defined the spatial information for the image. See Image \ Measure for details.

6.14 Grid Overlay

See Image \ Grid Overlay for details.

6.15 Slice Image

See Image \ Slice Image for details.


Config Canvas

Image \ Config Canvas

Canvas is the background of the image. It decides the content when exporting the image. Usually it's the same size of the image, so you don't need to worry about its existence. But you may want to change that for the following reasons,

  • Enlarge the canvas so it can contain annotations which lay outside of the image.
  • Set the canvas to a particular part of the image so it just exposes a portion of the image and filters out the remaining.
Config Canvas

The canvas is shown as an editable box with the image. You can use the mouse to resize it and move it. To have a precise settings, you can manually enter the value through the edit boxes. By default, canvas is in white color. Click on the [Canvas Color] button if you want to change that.

Display a portion of the image

You can set the canvas so that it only exposes a portion of the image. The remaining of the image (beyond the canvas box) will be ignored. The dialog shows you the would-be effect. Choose the [Anchor] combobox if you want to fix the canvas box to a specific location, e.g. left/top or center of the image.

Auto Size

Sometimes you have shapes laying out of the canvas. When you export the image, these shapes may be cut off. You can manually increase the side of the canvas to include these shapes. However, a more convenient way is click the [Auto Size] button. When you click this button, iPhotoDraw will automatically increase the canvas so that all the shapes are within the boundary of the canvas.

The following image shows the result of the Auto Size. The rectangle is partly laying out of the canvas. After Auto Size, the right of the canvas gets extended so it totally contains the rectangle.

Automatically set the canvas size

Reset

Reset the canvas box to its initial status, which is the same size as the image.

Put image at the Center

In some cases, you may want to put the image to the center of the canvas. When you click on button [image]. The system will automatically calculates the canvas box to make sure the image is located at the center.

Canvas Color

You can specify the color for the canvas. If the image is a transparent PNG, you may consider using Transparent background.


Rotate Image

Image \ Rotate

You can rotate image by 90, 180, or any arbitrary degree.

Rotate Left 90°

Rotate the current image counter-clockwise by 90 degree.

Rotate Right 90°

Rotate the current image clockwise by 90 degree.

Rotate 180°

Rotate the current image by 180 degree.

Rotate by Arbitrary Angle

You can also rotate the image by any angle. When you choose this menu item, the "Rotate Image" dialog pops up. You can enter the rotation (in degree) and preview the result.

Preview the rotation

You can also turn on the grid lines. The grid line is for the reference purpose and helps you judge if the rotation is what you want. For example, you may have a scanned image which may not be aligned correctly. With the help of the grid lines, you can easily know how much rotation you need to align it perfectly.

Preview the rotation with grid lines


Show on Map

Image \ Show on Map

iPhotoDraw can show the position of the picture on the map if there is embedded GPS data with the picture. There are a few options for the map.

  • Map Provider : There are a lot of map providers in the market. The map coverage and data accuracy may be different for these map providers. You choose the one that is good for your location. For now, iPhotoDraw provides 3 options: Google Map, OpenStreetMap, and AMap.
  • Map Type : You can choose either road map, satellite, or hybrid as the type of the map.
  • Zoom : Choose the appropriate zoom level for the map.
  • Show Scalebar : Show scalebar on the map. Some map providers may not support this feature.
  • Show Picture Direction : Some devices can record direction information with the picture. If that's the case, you can choose this option to show what direction you shot the picture.
Show on Map

If you want the system to remember the settings you make, just click the "Set as Default" button.


Replace Colors

Image \ Replace Colors

Sometimes you may want to replace colors on an image. Let's just use a checkerboard image as an example to show you how this feature works. This checkerboard (see image below) contains only 2 colors - black and white. Now we are going to to replace them with new colors.

Sample image

Click the menu "Image \ Replace Colors", the 'Replace Colors' (see picture below) dialog shows up. Click the [+] button at the bottom to add color peer. Old color means the the original color on the image that you want to replace. And it's going to be replaced with the 'New Color'. You can click the color drop down button to specify the color. Or click on the eyedrop button and then pick a color directly from the image. For new colors, you can also specify the opacity. You can also drag the slider to specify the color matching tolerance. Colors that are within the tolerance range are considerred to be candidates of the replacement.

Replace Colors dialog

In this example, we replace black with green, white with pink. See the following picture, compare the original image with the new one on the right.

Result of the color replacement

Note:

  • To remove the color replacement for the image, just delete all the old/new color peers. You can do that by simply click the garbage bin button.
  • You can save the color replacement settings to the system so they can be re-used in the future.
  • You can preview the effect of the color replacement.
  • You can also preview the original image without color replacement. One reason of doing this is, you can pick the original color from the image to replace.


Measure

Image \ Measure

With the measurement tools, you can measure distance from point A to point B on the image. The measure unit could be pixels, print unit, or real world units.

Define Spatial Scale

To measure distance in real-world units such as meters, feet etc, you need to define spatial scale for the image first. To do that, choose "Define Spatial Scale" menu item first. The mouse cursor then becomes crosshair, indicating that you can click on the image. So click on the image for the first reference point and move the mouse to cover some distance. For example, in the following sample, the highlighted line covers the diameter of the microscope's view-of-field.
Define spatial scale for image

Click the mouse for the second reference point. This will finish the line that defines the spatial scale. The following dialog then pops up. It shows the spatial information you can define for the image.

  • Distance in Pixels: The distance in pixels for the scale line you just defined.
  • Distance in Length Units: You can specify the distance in real-world units for the scale line.
  • Unit Type: Either Metric or Imperial.
  • Unit: The unit you used for "Distance in Length Units".
Enter spatial information for the image

Once you click [OK], the image will contain the spatial information. Later on, you can measure distance in real-world units on the image.

Spatial Information

You can draw a scale line to define the spatial information like what is mentioned in Define Spatial Scale (see above). You can also input the spatial information directly on the Spatial Information dialog.

If you want to unset the spatial information, just uncheck the "Enable length scale" checkbox.

Spatial information for the image

Add Scale Bar on Image

Once you click on the menu item "Add Scale Bar on Image", a scale bar will added at the right bottom of the image (see picture below). You can resize the boundary of the scale bar. iPhotoDraw then automatically changes the actual size of the bar and updates the display unit accordingly.

Add scale bar on image

Double click on the scale bar if you want to change the properties.

  • Style: iPhotoDraw currently provides 2 styles of scale bar: Scale Line and Bar. If you choose Scale Line, the "Scale Line" groupbox will become available, which give you more options.
  • Unit: You can choose the unit for the scale bar. It may not be necessary the same as you define for the image.
  • Text Position: Where to show the text for the scale bar.
Properties for scale bar

The following picture shows text in different positions on the scale bar.

Scale bar with text in different positions

Measure Spatial Distance

If an image contains spatial information (see section Define Spatial Scale, the "Measure Spatial Distance" menu is available. Choose the menu item and click the mouse on the image to start measuring. When you move the mouse, a small black box shows you the distance from the starting point.

Measure spatial distance on image

Double click the mouse (or just right click the mouse) to finish the measuring. A dialog pops up showing the length for each line segment and the totals.

If you want to keep the measuring shape on the image, please check the "Keep the measuring shape." option.

Note: To measure the length/perimeter for an existing shape on the image, you just right click on the shape and choose "Measurement" from the popup menu.

Length measurement result

Measure Distance in Pixels

This is a simple measurement tool that allows you to measure distance in pixels from point A to point B.

Measure in Printing Unit (DPI)

This is a simple measurement tool that allows you to measure distance in printing units from point A to point B. Images have a DPI (dots-per-inch) property which tells you the dots (or pixels) density of the image. For example, for a 1200 x 900 image, if its DPI is 300, when you print it out, you will get a 4" x 3" image on the paper.

Measure Area

If an image contains spatial information (see section Define Spatial Scale, the "Measure Area" menu is available. Choose the menu item and click the mouse on the image to start measuring. When you move the mouse, a small black box shows you the area of the polygon you are drawing.

Measure area on image

To finish the measuring, you can do either of these:

  • Double click the mouse.
  • Right click the mouse and then from the popup menu, choose "Finish".
Result of the area measurement

If you want to keep the measuring shape on the image, please check the "Keep the measuring shape." option.

Note: To measure area for an existing shape on the image, you just right click on the shape and choose "Measurement" from the popup menu.


Config Canvas

Image \ Grid Overlay

In some cases, you may want to add grid overlay on the image. Unlike Grid under the view menu which purpose is to align shapes during editing, grid overlay is for export purpose. That's, when you export, the grid overlay will be part of the exporting image. The following is an example of the grid overlay applied to the image.

An image with grid overlay

When you have an image opened, select menu "Image \ Grid Overlay", it will bring up the grid overlay settings dialog.

Automatically set the canvas size

Here are details of the settings.

Show grid overlay

A checkbox that controls whether to show the grid overlay on the image.

Visibility

You can decide whether to show the horizontal / vertical lines or the border of the grid.

Z-Order

You can determine the rendering order of the grid overlay. See the following example for the difference of "Beneath Shapes" and "Over Shapes".

Z-Order of the grid overlay

Grid alignment

By default, the grid start from the left / top of the image. But we also provide other options you can pick from.

Spacing

You can specify spacing for the grid lines. Usually the spacing for horizontal and vertical lines are locked. That means, when you change one, the other will be changed accordingly. If you want to change them individually, please click the link icon (see image below).

The spacing value is measured in pixels. If you want to use other units, please click the "Calculator" button and select one of the 2 options:

  • Calculate Spatial Distance: This is available only if the image is spatial referenced (see Define Spatial Scale for details). Once the spatial scale information for the image is defined, you can enter the spatial unit for the spacing. It then converted to pixels for the grid overlay.
  • Calculate Print Distance: You can enter the print unit (e.g. inch) for the spacing. It then uses the image's DPI (dots-per-inch) definition to convert it to pixels.
Settings for the grid overlay spacing

Save as default

Click the [Save] button if you want to save the current configuration as default settings. By doing this, it will reuse this default settings when you try to apply grid overlay to other images in the future.


Config Canvas

Image \ Slice Image

You can slice the current image into multiple small tiles. You can specify the tile size by one of the following method:

  • Tile Numbers: Enter the row and column numbers. It then evenly spread the tiles in vertical / horizontal direction.
  • Tile Size: You can enter size (in pixels) of the tiles. Normally field 'Width' and 'Height' are locked. That means changing one will automatically change the other accordingly. Thus the tiles are in square shape. If you want to change width and height individually, just toggle the [Link/Unlink] icon before these 2 fields. You can also specify the size in other units other than pixels (see Grid Overlay Spacing for details).
  • Arbitrary: You can drag the grid lines directly on the image to change the tile size.
Slice image into tiles

Once you specify the output folder, [Start Slicing...] button becomes available. Click the button to slice the image. If everything is OK, you will get the tile images in the output folder. The images have the naming convention of [Original Image Name]_[Row Index]_[Column Index].[Image extension]. See the following as an example.

The tile images of the output


MenuTools

7. Tools

7.1 Extended Toolbox Items

iPhotoDraw will provide more and more drawing tools to meet users' need. But chances are, it's impossible to meet everybody's need. So we allow user to extend the drawing tools by defining their own. These custom tools will be appended to the toolbox like the other regular drawing items. You can choose these extended toolbox items like any other regular items, and then drag it to the image you are editing. It's a time saver - you define once, and reuse over and over again. See Extended Toolbox Items for details.

7.2 Options

This command opens up the [Options] dialog and allows you to config the system settings for iPhotoDraw. These settings will apply to the application immediately. See Options for details.

7.3 Language Settings

iPhotoDraw is a MUI (Multilingual User Interface) application. By default, it auto detects the current culture of the operating system and tries to use that language. You can change that by manually set the language settings. Once you make the change, the application will automatically restart to let the change take effect.

Set language


Options

Tools \ Extended Toolbox Items

You may have spent a lot of time to create a complicated annotation shape, and you don't want to repeat it over an over again. Extended toolbox items will save you time in this case. You can add your own shape to the toolbox. And shape will be saved with the system. Next time, you just drag the annotation shape from the toolbox to the image.

The following picture shows a toolbox with Extended Toolbox Items.

Extended toolbox

Create Category

To save space on the toolbox, extended items are grouped into categories. Each category has one default item, and only this default item will appear on the toolbox. The 'Extended Toolbox Items' dialog shows the categories and their items. The treeview on the left shows how the items are organized. And the panel on the right shows details on the current tree node on the treeview, either categories or the items.

Categories and Items

When you select the root node, you can click the '+' button to add a category. Once you select a category on the treeview, you can add items for that category.
You can also delete the categories/items, or change the orders by clicking the buttons under the treeview.

Add an Extended Toolbox Item

Currently there are two types of items

  • Images
  • Shapes

Select a 'Category' node on the Treeview, the '+' button will be available. Click on the '+' button, you will have 2 choices.

Choose item type

If you choose 'Image', a 'File Open Dialog' will show up and let you choose an image file to open.
If you choose 'Shape on the current image' option, the following dialog will show up and let you pick a shape from the current image. Since you can only choose shape from the current opened image, so if there is no image opened, this option will be greyed out.

Choose shape from the current image

Modify Extended Toolbox Item

Click on a extended toolbox item on the treeview, you will see the details for the item on the right.

For an image item, you can config the following settings,

  • Name - Once the item is appended to the toolbox, the name of the item will appear as tooltip. It's a good to assign a unique and easy-to-remember name for each items.
  • Item image - You can click on the image button to select an image for the item. PNG and Gif formate is suggested, since they may have transparent background. A thumbnail image will be created for this image. The thumbnail image will be used on the toolbox for this item.
  • Opacity - You can assign a value between 0 (transparent) and 255 (totally non-transparent) to the image.
  • Rotation - a value between 0 to 360 degree.

For a shape item, you can config the following settings,

  • Name - Once the item is appended to the toolbox, the name of the item will appear as tooltip. It's a good to assign a unique and easy-to-remember name for each items.
  • Shape - You can click on the "Choose Shapes" button to select a shape from the current opened image. It will create a thumbnail image for this shape and use it for this item on the toolbox.
  • Property - You can properties (e.g. outline, fill, and text settings etc.) for the shape.
  • Rotation - a value between 0 to 360 degree.
Config the shape item


Options

Tools \ Options

Preference

You can save the most often used shape properties as default properties. When you create a new shape, these default properties will automatically apply to it. So you don't need to manually set them one by one, and thus save you time. Currently you can save the following properties as default: font, line color, fill color, and text alignment. If you don't want to current settings, just click the "Reset" button, and the system will clear the current value and reload the factory settings.

Default property setting for new shape
Note: The arrow head settings are only available for the "Line with Arrow" drawing tool.

Appearance

Here you can specify the background and the checkerboard for the image view. A solid background is for normal image. For a partly transparent image (e.g. PNG), the system will use a checkerboard as the background. A checkerboard consists of multiple small squares which are in 2 different colors. Usually they are gray and white. But you change these 2 colors You can also change the size of the squares.

Appearance settings

Print

You can set the default margin for printing. The margin is measured from the printable area. When the system prints out the image, it will keep the width/height ratio of the image and scale to the output page's printable area. If you set the page orientation to "Auto", it will decide the page orientation based on the image's width/height ratio.

Default settings for printing

Edit

This page provides settings for editing.

  • Angular Dimension \ Measure Angle < 180°: It determines how to measure angle for an angular dimension shape (see Angular Dimension for details). When you create or edit an angular dimension, it measure angle clockwise from the starting and ending extension line. That may end up in an angle greater than 180°. If you turn on this settings, that tells the system it should swap the angle when it's greater than 180°. See the following 2 angular dimension shapes for difference.
Difference of the angular dimension with/without the 'angle < 180°' setting
  • General \ Continuous creation: Normally after you create a shape, the toolbox will automatically switch the Select button (Arrow). But in some case, you may want to continuously create the same type of shape over and over again. To be more productive, you can check this option and continue to create shapes until you hit [ESC] key.
  • Highlight: This category contains settings for highlight tools. Right after you draw a highlight region (either a rectangle or polygon), the settings dialog is popped up automatically so you can configure the setings. For some people, they may use the same settings over and over again, so they may not need this dialog. If this is the case, you can turn off the 'Show Settings' option.
  • Linear Dimension \ Value from Spatial Distance: Once you choose this option, the system will automatically set the display text when you create a new linear dimension shape. The display text is determined by the current spatial information of the image. See Measure for details.
  • Polygon \ Right Click Finish: When you create a multi-segment shapes such as polygon or polyline, you can double-click the mouse to finish the operation. Or you can right-click the mouse, and choose the actions from the popup menu. If this sounds too boilerplate to you, you can check this checkbox, which means a mouse right-click will finish the creating operation.
Settings for edit

Grid / Guide Lines

Grids and guide lines are useful tools to help you align annotation shapes. When grids are turned on, you can only move shapes on grids. On the other hand, you can align shapes to the guide lines.

The dialog below shows the settings you can make for grids and guide lines.

  • Snap buffer : If you move a shape close to the guide lines (within the distance specified by snap buffer), the shape will be snapped to the guide line.
  • Spacing : Size of the grid. To avoid crowded lines, the system only draw major grid. A major grid consist of 10 x 10 small grids. So if you set the grid spacing to 20 pixels, the distance between the major grid lines will be 200 pixels.
  • Color : You can customize the color to draw grids and guide line.
Settings for grid and guide lines

Special characters

You may notice a "Special Character" drop down button that associates with the text input in the UI like the following picture shows. When you click this button, a drop down box shows a list of special characters such as copyright symbols. You can choose a symbol to insert into the textbox.

Choose special characters

The list of characters shown above is configurable. You can add/delete or change the order of these character symbols just like the following picture shows.

Config the special characters

Shortcut

Just like other software, iPhotoDraw provides shortcuts to frequently used commands (menu items). Besides that, iPhotoDraw also allows you to extend the default by assigning your own shortcuts to other commands, or change the shortcuts for personal convenience.

The following pictures shows the UI for shortcut settings. All the commands are listed in a table. Please select the command you want to change the shortcut, and then change the shortcut in the "Shortcut definition" box below. If you want to reverse the change and use the original settings provided by the system, please click on the "Reset" button.

Config shortcuts

Shapes Picture

The purpose of this settings is for saving shapes as picture or pasting shapes on the clipboard.

  • Default picture format - You can choose from PNG, BMP, JPG, and GIF as the default format when you save the selected shapes as pictures.
  • Picture background - Background of the pictures. For PNG picture format, you can choose transparent background. If you want to past shapes to clipboard, you'd better to specify the background color (either using the canvas back color or a specified color), since Windows have problems of handling transparent image in clipboard.
  • Picture margin - Space between the body of the shapes and the border of the picture.

Settings for saving shapes as pictures

New Image

You can specify the default folder, file name format, and image quality (for jpeg only) for new images.

Settings for new image

Click on the [Edit] button to launch "Image File Settings" dialog. Here you can specify:

  • Image file format such as PNG, JPEG etc and image quality for JPEG.
  • File name format such as prefix, appendix of the file name, and the increasing number in the file name. Besides plain text, it also allows placeholder such as <%UserName%>, <%MachineName%> in prefix/appendix.

Image file settings

Export Image

You can store the default settings for exporting image, so you don't need to input this information over and over again when you export images.

Settings for exporting image

When you export an image, by default it add '_New' as the appendix to the new file name. You can customize this. Just enter the your own text in the appendix field. During the exporting, your custom appendix will be appended to the file name (see picture below).

File name appendix

Image Size

The system provides a list of predefined image sizes which you can choose for a new image. There are 2 types of image sizes:

  • Paper Size: It's mainly used for the printing business. Normally it's measured in physical units such as inch and centimeter, although it can converted to pixels by using PDI (pixels per inch).
  • Display Size: It's for displaying purpose. And it uses pixel as the unit.
List of paper sizes
List of display sizes

You can customize this list by adding, deleting or re-odering the items. For paper sizes, we use Imperial (Inch) as the unit by default. You can also choose Metric (Centimeter) as the unit. Click [Reset] button if you want to roll back to the original settings.

The items you configure here are used for the list of choice for image size when you create a new image (see File \ New for details). The following picture shows the list of choices you can pick from for the new image size.

List of prefefined sizes for new images

Screen Capture

To make a screen capture, first of all the application has to minimize itself. In this page, you can config the time (in milliseconds) of the minimizing process. The default value is 400ms. You can make it shorter if you have a fast machine, or longer for a slow machine.

There are several options you can apply to the screen capture:

  • Show magnifier: Magnifier allows you to have a better view on the pixels on the screen. You can decide whether to show the magnifier here. While doing the screen capture, you can also turn on / off the magnifier by pressing the [Ctrl] key.
  • Capture cursor: In some cases, you may want to capture the cursor image as well. For example, with a cursor over a menu items, you show people you are going to click that menu item.
  • Invert colors: Invert the color of the captured images. For example, CAD software always uses black as the background color. And you want to revert the color when you place the image on a MS Word document. Sure you can use other command (e.g. through menu Image\Revert Color to achieve the same effect). But let's say you have lots of such screenshot to make, use this option will save you lots of time because every screenshot you make will be automatically color-reverted.
  • Apply watermark: When you check this, the watermark will be automatically apply to every screenshot you make. You can pick what watermarks will be used by clicking the watermark button. Please see Watermark for details.

You can also specify the destination of the captured images:

  • Editor: This is iPhotoDraw itself.
  • Clipboard: You can put screenshot to the clipboard so that it will shared with other applications.
  • Files: Screen captures will be saved to files. You can further specify the folder to store the files and the file name format.
  • External application: Screen captures will be send to the external application. Please see External Application for details.
  • Microsoft Word:You can send the screen capture directly to Microsoft Word if that's available on your machine.
  • Microsoft Excel:You can send the screen capture directly to Microsoft Excel if that's available on your machine.
  • Microsoft PowerPoint:You can send the screen capture directly to Microsoft PowerPoint if that's available on your machine.
  • Microsoft Outlook:You can send the screen capture directly to Microsoft Outlook if that's available on your machine.

Settings for screen capture

If you need to do a lot of screen capture, you may consider assigning global hotkeys to the screen capture operations. Please click [Global Hotkeys] button to config global hotkeys. Like a shortcut, a hotkey is a combination of special keys (Ctrl/Shift/Alt) and regular keys. The difference is, you don't need to focus on iPhotoDraw to make global hotkeys work. For example, you may have iPhotoDraw minimized. Just hit the global hotkey, and you will have the screen capture.
Global hotkeys for screen capture

External Application

iPhotoDraw can send images to external applications. You can config the following settings for the application:

  • Name: Just for easy remembering purpose.
  • Program File: The actual executable file of the application.
  • Parameters: Command line parameters that are passed to the application. In most case, you just need to pass the image name to it. <%F> is the placeholder for the image name, you probably don't need to change that.
Configure external application

MS Office

iPhotoDraw can send the image to MS Office products such as Word, Excel, PowerPoint, and Outlook. On this page, you can configure how iPhotoDraw interact with MS Office.

  • Page Orientation (Word): You can decide the Word document's page orientation. If you choose Auto, iPhotoDraw will automatically decide the orientation based on the image's orientation.
  • Include description text (Word): You can type in text as for the description of the image. You can choose the variables from the dropdown list.
  • Automatically send out the email (Outlook): If you choose this option, iPhotoDraw will automatically send out the email with the image.
Settings for MS Office

Unit of Measurement

iPhotoDraw provides you a list of pre-defined length units. You can use these units when doing measurement on the image. You can customize it by adding your own units (see image below). The information on this page is pretty straight forward.

  • System unit: As the hint shows, system units use yellow background in the list. These are the pre-defined units and cannot be deleted.
  • Default unit: Default unit provides convenience when you use unit. For example, when you define spatial information for images, the default unit is automatically used. You can choose other units if you don't like it.
  • Multiplier: The mulitiplier of the unit is based on Meter. For example, Kilometer's multiplier is 1000, Centimeter is 0.01.
  • Reset: Click the [Reset] button if you want to roll back to the system's original unit settings.
Units

General Settings

General settings include:

  • Decimal Precision: Number of digits after decimal points. It applies to angle for the Angular Dimension shape and distance (see Measure for details).
General settings


Configure Stamps

Tools \ Config Stamps

In iPhotoDraw, you can customize and apply stamps on the image. When you apply them to an image, their content may incrementally changed.

For now, there are 2 kinds of stamps we support:

  • Number stamps
  • Letter stamps

Number stamps

When you choose the Number Stamp tool from the toolbox, every time you click the mouse on the image, a number stamp will be added at the location you click. And the number of the stamp will automatically increase by 1. The following picture is an example of the use of the number stamps.
Example of the use of number stamps

Usually when you open an image, the number will start at 1 unless you want to change that. The Next value is the number Number Stamp tool will use next time on this image. For example, after you click the mouse twice with the Number Stamp tool, the next number will be 3. You can manually change the number by setting the Next value.

iPhotoDraw provides the following predefined shape for the number stamps: circle, rectangle, rounded rectangle, and diamond. Besides that, iPhotoDraw also allow you to use custom shape. To use a custom stamp shape, please follow this:

  1. Create a shape which you think will be a candidate on the image.
  2. Open the "Configure Number Stamps" dialog and choose the "Custom" item from Choose shape combobox.
  3. The "Search" button beside the combobox becomes enabled. Click this button.
  4. A dialog shows all the available shapes. Choose the one you create at step 1. The shape you choose will be displayed in the Preview box.

After you choose the shape for the number stamps, you can customize its properties like other shapes. Properties you can set on this dialog include size, rotation, font, fill pattern, shadow etc.

You can set the size of the shape by changing the value for Width and Height. There is 'Link' icon besides the Width/Height input control. Click this icon if you want the Width and Height are of the same value.

Config number stamps

Two-level numbering

Sometimes you may want to create a 2-level number stamps. See the difference between regular (1-level) and 2-level number stamps.

Regular (1-level) vs 2-level number stamps

To configure 2-level number, please click on the 1.x dropdown button and check "Use second level number" option.

  • From, To: The range of the second level number. When the second level number reach the max (To), it will roll over to the next top level number. For example, let's say you have settings From=1 and To=9. And your current number is 1.9. Then next number stamp will be 2.1.
  • Next: The next second level number.
Configure a 2-level number stamp

Note: Sometimes you may want to fast advance the second number. For example, you have number 2.4 now, and you don't want to go through 2.5, 2.6, ..., 2.9 etc. In this case, just press [Ctrl] key and click the mouse (during the creation of number stamp), you will get number 3.1.

Letter stamps

Letter stamps are similar to number stamps. The content of the stamp shape is automatically changed. Instead of auto number, letter stamps use an alphabet letter as the content. When you choose the Letter Stamp tool from the toolbox, every time you click the mouse on the image, a letter stamp will be added at the location you click. And the alphabet letter will automatically move to the next one. The following picture is an example of the use of the number stamps.

Example of the use of letter stamps

Normally the letter starts from 'A' and stops at 'Z'. But you can customize that. For example, you can change it to 'a' and 'z', or Greek letter 'α' and 'ω' respectively. The letters are actually unicode characters. So check the unicode table if you are not sure the order of those letters.

Configure letter stamps


Configure Color Palettes

Tools \ Config Color Palettes

iPhotoDraw provides a very basic color palette by default. For users who want more options we provides a number of standard palettes. Besides that, you can also create your own palettes to meet your special requirement.

Open the Color Palettes dialog through menu [Tools \ Config Color Palettes].

List of color palettes

Configure color palettes

This dialog lists the available color palettes. Please note that:

  • There is one and only one default palette. It displays with a Check mark on the list. This is the palette in the color drop down whenever you want to set color in the system.
  • You can export and color palettes to an xml configuration file and share it with other people. As a no-brainer, iPhotodraw also allow you to import color palettes.
  • System palettes are read-only. You cannot change it. However, you can create your own palettes based on the system one by using the [Copy] button.
  • Sometimes, colors are very similar to each other. To make sure you pick the right color, we provide an option to show the color name on the palette. It shows the name as well as the RGB value for the current highlighted color. The following pictures show the palette with/without color name.
Show with color name
Show without color name

Color Group

There could be lots of colors in a palette. So it's a good practice to organize colors into groups. You can give a name to the group. Click on the "Group Operation" dropdown button and there are 3 menu items:

  • New Group: Create a new color group.
  • Delete Current Group: Delete a group.
  • Clone Group: Create a new color group by copying the current group.
Groups of colors

Pick colors on the screen

You can add, delete, copy colors in the group, or set the value (e.g. RGB, name) for a color. You can also pick colors from the screen and add them directly to the group. Here is how:

  1. Click on the 'Pick Color' button.
  2. The application then automatically minimizes.
  3. Move the mouse on the screen and click on the pixel which you want to pick from. Continue to pick colors until you press [ESC] to finish.
  4. The colors you pick are then appended to the current palette you are editing.


Tools Screen

Tools \ Import and Export Settings

iPhotoDraw stores lots of settings in the file systems. For example, the size of the windows, the watermarks you create, arrows, line dash patterns, the language you use etc. Next time when you run iPhotoDraw, it will bring up these settings so you don't need to config them over and over again. With the Import/Export Settings feature, you can back up the settings, or even share your settings with other people.

Export Settings

If you install iPhotoDraw msi, you may find that the settings are located in your personal user folder. e.g. C:\Users\YourName\AppData\Roaming\iPhotoDraw. If you are running a portable version (from the zip file), the settings are actually located in AppData subfolder under iPhotoDraw. The settings consist of a number of xml and other data files. When you export settings, the system will package them into a single file. Choose an appropriate folder to store this file, or you can share it with other people.

Export Settings

Import Settings

Once you have a settings package file (either made by yourself or copied from other people), you can bring it into your system. Once the settings are successfully imported, they will take effect instantly. No close-and-restart is necessary.

Import Settings

Reset

Sometimes your settings may get messed up and you want to reset it to its initial status. To be safe, the system will ask you if you want to save the current settings before you do the reset, just in case you may want to get it back later on.


Tools \ Screen

iPhotoDraw provides several tools to allow user to do some operations on the screen.

Pick Color

You can pick pixel color(s) from screen with the color picker. When you move the mouse on the screen, the information panel (on the left/top corner of the screen) shows the color of the current pixel.

When you click the mouse, the system will do the followings:

  • The Hex value of the color is copied to the clipboard. That makes it convenient if you want to use that value for Html design or programming.
  • The color is appended to iPhotoDraw's Color Palette. You can use this color to render shapes later on.
You can continue to pick color by clicking mouse on the screen. To exit the Color Picking mode, please press [Esc] key.
Pick color from screen

Selected color is added to Color Palette

Measure Distance

This tool allows you to measure horizontal and vertical distance on the screen. Please click the mouse for the first point, and then move the mouse. When you move the mouse, the panel on the left/top of the screen shows the distance information. The panel also shows the position of the current mouse. When you click the mouse on the second point, the horizontal and vertical distance information will be placed onto the clipboard.

To exit the Measure Distance mode, please press [Esc] key.

Measure distance on the screen

Measure Angle

To measure angle on the screen, please do the followings:
  • Click the mouse to decide the vertex of the angle.
  • Move the mouse and you will the first edge of the angle. Click the mouse so the first edge is completed.
  • Move the mouse and you will the second edge of the angle. Click the mouse to complete the measurement.
Angle is measured clockwise and the unit is degree.
Measure angle on the screen

Magnifier

The magnifier tool allows you to see the details of the pixels on the screen. The magnifier moves with the mouse. You can use mouse wheel to control the size of pixels shown in the magnifier. To exit the Magnifier mode, please press [Esc] key.

Magnify the screen pixels


Gradients

Tools \ Styles

You can define styles aforehand and then apply them to the annotation shapes directly. This is a time-saver since by doing this, you don't need to manually config the same styles for each annotation shapes.

Here is the list of styles that are currently provided by the system:

  • Gradients
  • Dash Patterns
  • Line Styles
  • Arrow Heads
  • Bullets / Numberings


Gradients

Collection of Gradients

By default, the system comes with a number of gradient colors. You can also define your custom gradient colors. Once gradient colors are defined, you can pick it from the list and apply to the annotation shapes directly later on.

The following image shows the collection of gradient colors defined in the system. Use mouse or keyboard to choose a gradient color from the collection.

Collection of gradient colors

With the buttons at the bottom of this dialog, you can do the following operations,

  • Edit the current gradient
  • Add a new gradient
  • Delete the current gradient
  • Create a new gradient by cloning the current gradient
  • Move up the current gradient
  • Move down the current gradient

Edit Gradient

The following dialog shows the details about the current selected gradient color,

Edit gradient color

We support 3 types of gradients,

  • Linear
  • Radial
  • Rectangular

The following picture shows these 3 types of gradients respectively,

Different type of gradients

Angle is applicable to Linear Gradients. For Radial and Rectangular Gradients, the rendering center is the spatial center of the shape by default. But you can change by setting the "Center Offsets".

There is a gradient bar in the "Edit Gradient Color" dialog. A gradient consists of a starting color, an ending color, and a number of color stops in between. Click on the slide pointer to select the current color. You can change the color through the color button and transparency button beside the rainbow bar. Use the mouse to drag the gradient color stop to a new position the rainbow bar. If you want to add a new color stop, just double click on the bar on the desirable location. Double click on an existing color stop will delete it from the bar. Click the [Reverse Stops] button if you want to change the order of gradient colors.

Config color on the rainbow bar

If two color stops are very close to each other, dragging the mouse on the gradient bar is not an easy operation. Because of this, you may want a more detailed configuration on the color stops. In this case, just click on the [Stops Details] button. The following dialog shows the details for the gradient colors.

Gradient color stops

You can add, delete, or change orders of the gradient color stops. Position is the percentage of distance measured from the start color. Value ranges from 0 to 100.


Dash Patterns

Dash Styles

By default, the system provides the following standard dash style for line drawings : Solid, Dash, Dot, Dash Dot, and Dash Dot Dot. Besides this, you can create your own dash styles to meet your actual requirement.

Choose menu item Tools\Styles\Line Dash Patterns, the following dialog will pop up to let you configure your own dash styles.

Config the dash styles

The left panel lists all the custom dash styles. You can add/delete or change order of these dash style items by clicking the buttons underneath.

The right panel shows the details of the current dash style item. It shows the dash patterns in the enlarged view. One box represents one pixel. The black boxes represents the solid part of the dash, while the white one represents the empty part. To change the length for each dash interval, just click the last box of the concerned interval and drag it to the desired length.

The configuration will be saved with the system and they will be ready for being picked up in the Line Dash ComboBox. For example, the following picture shows the standard dashes as well as the custom dashes. Standard dashes come first above the custom dashes.

List of line dashes


Line Styles

Usually people uses simple styles (either solid or dash patterns) to render a line. By combining these simple styles together, you may get a very rich styles. In iPhotoDraw, a line style may contain multiple layers of simple styles. The following picture shows the basic idea. It uses a thick solid line at the bottom, the top layer is a thin dash pattern. By combining these 2 layers, you get a result as depicted on the right side.

Line style layers

List of line styles

By default, the system provides a number of predefined line styles. Besides that, you can also define your own line styles. Once the styles are defined, you can pick it from the list and apply to the lines or curves.

The following image shows the list of line styles defined in the system. Use mouse or keyboard to choose an item from the collection.

List of line styles

With the buttons at the bottom of this dialog, you can do the following operations,

  • Edit the current line style
  • Add a new line style
  • Delete the current line style
  • Create a new line style by cloning the current one
  • Move up the current line style
  • Move down the current line style

Click the reset button if you want to roll back to the initial list which are predefined by the system.

Edit Line Style

On the Line Styles dialog, click the [Edit] button to edit the current line style. As we mention above, a line style may contain multiple layers. The left side of the dialog shows the layers of the line style. As usual, you can add/delete/move up/move down a layer. The right side shows the properties for the current layer.

Edit line style

Currently, we provide 3 types of lines for the style layer:

Basic

It's either a solid or dashed line. Configuration of basic line is pretty straight forward. You can change the color, transparancy, line thickness, and dash pattern for the line.

Track

The line looks like a track or railway which consists of a number of sleepers.
An example of track

You can set the following properties for track lines:

  • Height: Height (in pixels) of the sleepers of the track.
  • Offset: Start position of the first sleeper.
  • Spacing: Distance between 2 sleepers.
Properties of a track line

Marker

The system predefines some shapes to be used as marker: circle, arrow, square, and diamond. You can also choose a shape from the current image document and use it as a marker. Here are the properties for marker:
  • Width: Width of the marker shape measured in pixels.
  • Height: Height of the marker shape measured in pixels.
  • Rotation: Rotation of the marker shape.
  • Rotate with the line: Whether to rotate the marker with the line. Otherwise, markers always keep the same rotation.
  • Spacing: Distance between 2 markers.
  • Offset: Starting position for the first marker.

Besides that, since marker is also a regular shape, so you can configured the Fill and Line settings for it.

Configure marker lines

Apply style to a line

You can easily apply the style to lines. During the editing, select a line or curve, and click on the 'Line Style' dropdown as the following picture shows. Then pick a predefined style from the list. Choose the 'Edit...' menu item if you want to edit the style on the fly.
Apply style to a line


Arrow Heads

Config Arrow Heads

You can attach arrow heads to lines. In the following example, it shows a straight line with a circle at the starting point and a triangle at the ending point. Arrow head that is attached to the starting point of the line is called Start Arrow Head, and it's called End Arrow Head if it's attached to the ending point of the line.
A straight line with arrow heads

Open the Config Arrow Heads dialog, you will see all the available arrow heads are listed on the left side. When you select an arrow head in the grid, the right side of the dialog shows the properties for this arrow. And you can modify these properties if you like.

Config arrow heads dialog

Add / Delete arrow heads

The Config Arrow Head dialog shows all the available arrow heads you can use with the system. With the buttons at the bottom, you can,

  • Add a new arrow head. If you want to change the name of the arrow head, just click on the name column and type the name directly there.
  • Delete an arrow head which you don't need.
  • Clone an existing arrow head.
  • Change the order of the arrow heads.

The arrow heads you edit here are instantly available for you to choose from when you edit line shapes. For example, the following picture shows the arrow heads in the dropdown. You can pick one of them for the line shape you are editing.

Choose arrow head

Set the arrow head properties

Arrow heads are actually shapes (e.g. triangle, rectangle, and circle etc) themselves. So you can set their properties like any other shape objects. For example, you can set their rotation, fill color, outline color etc. However, since the purpose of arrow heads is to be attached to line, there are some specific properties which you may pay attention to.

Arrow head shape

When you config the properties for the arrow head shape, the preview box shows you the instant effect. You can decide whether to show it as start arrow head or end arrow head by clicking the buttons beside the preview box. The following picture shows the difference of the end and start arrow head. You can change the arrow head shape by clicking the "Search" button. The popup dialog shows the available shapes on the current open image. Just choose a shape from the dialog for the arrow head.

Preview arrow head

Rotation

Usually you may want the arrow heads rotate with lines. Otherwise, the orientation of the arrow head won't change no matter where the line points to / from. The following picture shows the difference: an arrow head rotates with line on the left, and it doesn't on the right. However, in some cases, a non-rotating arrow head may make more sense. For example, It's unnecessary for a circle arrow head to have rotation.

Rotation of arrow heads

Alignment

By default, the center of the arrow head will in line with the end (or start) point of the line. The following picture shows a circle arrow head which centers at the end point of a line.

Arrow head aligns on the Center

X / Y center offset uses logical unit (in percentage). The following 2 pictures a circle being offset by -50% and +50% of its size on the line horizontally.

Arrow head offset by -50% in horizontal direction

Arrow head offset by 50% in horizontal direction

A line consists of a starting point and an ending point. And that's how we draw a line, from starting point to ending point . But if you specify the "End point offset", the line will be a few pixels in short. For example, if you have circle arrow head with size of 18x18, and you specify the "End point offset" to 9 pixels. The line just stops at the edge of the circle. The following picture shows the effect.

Config the End Point Offset

Size

You can change the size for the arrow head. Note that arrow head is working with line. When the thickness of the line changed, you may want the actual size of the arrow head gets changed accordingly. If that's the case, please check the "Increase with line thickness" checkbox and set the value for the increase ratio. The following picture shows the same circle arrow head with different settings (ordered from top to bottom):

  • The original arrow head.
  • Arrow head which size doesn't increase with the line thickness.
  • Arrow head which has a 50% increase rate with the line thickness.
Arrow head size

Fill settings

When you check the option 'Fill with line color', the arrow head will be filled with same color of the line. The following picture shows 2 arrow heads with different settings. The line is in white. Please compare the difference.

  • The left arrow head uses the same fill color as the line.
  • The right one Arrow head uses a different fill color. In this case, it uses transparent color. So it looks like a see-through ring.
Fill settings for arrow head

Outline settings

Like the fill color, the outline of the arrow head can have its standalone color, or it just uses the same color of the line. You can also set the thickness for the outline of the arrow head.


Bullets

Bullets / Numberings

You can show texts with bullets or numberings. For example, the following image shows how it looks like when you apply bullets / numberings to text.
Text with bullets / numberings
The system provides a number of bullets and numbering styles by default. If you want more styles, you can create your own.

Configure Bullets

Open up the "Configure Bullets / Numbering" dialog and switch to "Bullets" tabpage. You will see a number of bullets.

Note:
  • System bullets are surrounded by a green frame. They are provided by the system and you cannot change them. However, you can make a copy of them and use it as base for custom bullets.
  • Custom bullets are created by user. You can add, delete, and change custom bullets. The following picture shows system bullets as well as custom ones.
  • You can set a bullet as the default one. The default bullet is marked with a star icon. Default bullet is a time-saver. When editing texts, you can click on the Bullet button to apply it to the text. See Edit Text - Bullets for details.
Configure bullets

To change the settings for a bullet, please click the [Edit] button or double click on the bullet. There are 2 types of bullet: Symbol and Image.

Symbol-Typed Bullet

For a symbol-typed bullet, you can choose the font and the pick a symbol from the list.

Symbols

Usually, the bullet symbol inherits the front settings from the text which it's associated with. But you can change that by using custom font settings. The following picture shows you the difference. The bullets on the left use the same font settings as the text which is rendered in black, while the ones on the right use custom settings and are rendered in red.

Default font settings vs custom font settings

To use custom font settings, please check the 'Use custom font settings' checkbox, then set the settings such as color, transparency, etc.

Beside the custom font settings, you can also configure:

  • Spacing: distance between bullet symbols and text.
  • Vertical position
  • Size factor: The size of the symbol increases or decreases as the size of the text changes. You can set the size factor to adjust this change.
Advance settings

Image-Typed Bullet

You can also use image for the bullet. Choose "Image" from the Bullet Type combobox and then click on the folder button to specify the image. It's recommended to use a transparent background PNG.

Bullet Image

Configure Numberings

Numberings are similiar to bullets.

  • System numberings are surrounded by a green frame. They are provided by the system and you cannot change them. However, you can make a copy of them and use it as base for custom numberings.
  • Custom numberings are created by user. You can add, delete, and change custom numberings. The following picture shows system numberings as well as custom ones.
  • You can set a numbering as the default one. The default numbering is marked with a star icon. Default numbering is a time-saver. When editing texts, you can click on the Numbering button to apply it to the text. See Edit Text - Numberings for details.
Configure numberings

Double click on the numbering to edit the settings for it. You can pick the 'Number Style' such as '1, 2, 3', or 'i, ii, iii' etc. You can also specify the prefix and appendix. For example, if you give it a prefix like '[', and appendix ']', the final numbered list will look like this: [1].

Edit numbering


Watermark

Tools \ Watermark

You can apply watermark to images. To save time, you can predefine a number of watermarks and later on, you just pick one of them for the image. If you have lots of image, you can use 'Batch watermark'. It will automatically apply watermark to hundreds or thousands of image just with a few of mouse clicks.

  • Manage watermarks
  • Batch watermark
  • Watermark for current image


Manage Watermarks

The first time you run "Manage Watermarks", it asks you to select a sample image. With this sample image, you can see how the watermark looks like when it is applied to images.

Manage watermarks

The following picture shows the user interface for the "Manage Watermark" feature. The listbox on the left panel shows list of watermarks defined by user. There is a default watermark. You can set the default watermark by clicking on the [Default] column in the listbox. When you apply watermark to an image, the system will automatically use the default watermark.

The right panel shows the effect of the current watermark on the sample image. You can change the sample image by clicking the [Sample image] button.

Manage watermarks

You can edit, add, delete, or change the order of the watermarks. Please choose the buttons below the listbox for the desired functions.

Edit watermark

With the [Config Watermark] dialog, you can edit the following properties for the watermark.

  • Basic property
  • Position
Edit watermark (basic)

In basic properties, you can specify the source of the watermark. The source could be an image, text, or shapes. Once the source of watermark is loaded, it's treated as a normal shape. So you can edit its properties like we mention in Edit \ Shape Properties.

There are 2 types of position: Anchor and Tile.

  • Anchor: There are 10 positions you can anchor the watermark on the image (see the following picture). Mostly, you may want to anchor the watermark to the right/bottom position of an image. You can adjust the X/Y offset a little bit to suit your need.

Edit watermark (anchor)
  • Tile: You can tile the watermark on the image. There are 2 types of tile style: Grid and Diamond.
Edit watermark (tile)

The following picture shows the effect of a watermark with different position: anchor in right/bottom position, grid tile, and diamond tile. Please see the differences.

Anchor the watermark to the right/bottom position
Grid-styled tiling
Diamond-styled tiling


Batch Watermark

You can manually apply the watermark to an image like it's mentioned in Watermark for Current Image. However, let's say you have hundreds or even thousands of image that need to apply the same watermark. Doing that is very boring and time consuming. That's why "Batch Watermark" comes to help you. You just specify the followings:

  • Source folder: That's where the original image files are stored.
  • Output folder: That's where the images go after being processed.
  • Watermark: Pick a watermark you defined in Manage Watermark.
Besides these, you can also specify the filter of the source images, and the output image file format (default is the same as the original files). You can click the arrow button at the bottom of the control panel to preview images with watermarks. Once you are happy with these settings, just click the lightning button and off you go - the system will automatically apply the watermark to source images and output the result to the output folder. If you want to view the result in the output folder, please click on the "Explore Folder" button at the right bottom of the dialog.

Batch watermark

If there are errors happen during the process, the system won't stop. It logs the error on the "Log" tabpage and continue the process. At any time, you can click the [Stop] button to abandon the task.


Watermark for Current Image

To apply watermark to the current image, please check the "Has watermark" checkbox and select a pre-defined watermark from the combbox. If you want to modify a pre-defined watermark, you can config its properties as mentioned in Manage Watermark. After configuring the properties, you can click the [Save] button to save it as a new watermark.

Set watermark for the current image


Tools Screen

Tools \ Batch Image Conversion

Just imagine that you may have lots of images and you want to do conversion for them. For example, you want to resize them, or save them into another image format. When you have hundreds of images, doing this kind of task one-by-one manually will be very time-consuming and boilerplate. Batch Image Conversion is a tool that helps you save time on such a boilerplate task. You specify the source folder, output folder, and some options. The tool will traverse the source folder, convert the images using the specified options, and place the processed image to the output folder, keeping the same folder structure as the source folder.
Batch image conversion

There are a few options you can specify for the conversion:
  • Resize: Nowadays images from digital camera and other sources are usually pretty big. But sometimes you may not need big images. For example, if you want to upload them to the web, big images cost lots of bandwidth and time. If that's the case, please consider reducing the size when doing the image conversion.
  • Auto orientation: Some jpeg images have orientation information. Most image viewer application read this and thus rotate image correctly. However, Batch Image Conversion can automatically rotate the image for you if you check this option.
  • Invert colors: Inverts the colors for every images being processed.

Batch image conversion options

The converted image is shown in this dialog for preview. Click the previous / next arrow button to navigate among images. Once you are satisfied with the settings, click the Start Process button, the tool will automatically convert the images one by one. At any time, you can click the Stop button to cancel the process.

Click the "Explore Folder" button at the right bottom will open the output folder in file explorer. It's a handy tool if you want to see the result in the output folder.


MenuTools

8. Help

8.1 Check for Updates

Please make sure your computer is connected to the internet when you check for updates. When you click this menu item, iPhotoDraw will connect to website http://www.iPhotoDraw.com and check if there are any newer versions available for you. Once it finds a new version, it will show you the list of the new features like the following picture.
Check for updates

You then decide whether to download the new version. There are 2 types of file you can download. Please choose what is good for you:

  • Zip file: If you don't want to install the software, you can download the zip file. After the download, just unzip the files to whatever folder you want and off you go.
  • MSI file: It needs to be installed. During the installation, it checks the prerequisites to make sure the software can run successfully on your computer.

The files will be downloaded to your personal user folder. But you can change that by specifying your particular download folder.


Edit

iPhotoDraw supports a variety of annotation shapes. Different shapes may have different characteristic. But the editing operation follows the same rules. And these rules are similar to any graphic editing software in the market. So the operation is very straight forward and easy to follow.


EditShape

Edit Shapes

1. Choose the shape to edit

Choose the [image] (Select) button from the toolbox. When you move the mouse over a shape, the cursor is changed to [image]. Left click the mouse to choose the shape. The selected shape will be in EDIT status. when a shape is in EDIT status, it is drawn with the following elements if applicable,
  • Frames (and resize handles)
  • Vertices
  • Rotation handle
  • Control points
iPhotoDraw supports multi-selection. You can apply changes to selected shapes at a time (e.g. moving, deleting, setting colors).
There are 2 ways to select multiple shapes.
  • Press the [Shift] key and left click the mouse on a shape. That will add the shape to the selection.
  • Press the left button of the mouse and drag the mouse. A highlighted rectangle is drawn on the screen (see picture below). Shapes that are touched by this rectangle will be selected.
Drag a selecting rectangle to select multiple shapes

2. Move the shape

After a shape is selected, move the mouse over the shape, the cursor will be changed to [image]. You can drag and drop the whole shape to the new location. When you move the shape, you can press the following keys to achieve corresponding effect.
  • [Shift] - Constrain the movement either in horizontal or vertical direction.
  • [Ctrl] - Move and copy the shape.

You can also use Arrow keys to move shapes as well. When you push the Arrow keys, it actually move the shape on the grid. See Grid / Guide lines for details. If you want to move shapes by pixels, you can use [Ctrl] + Arrow key.

3. Rotate

When a shape is selected, you will see a red circle on top of the shape. This is rotation handle. You can drag the rotation handle to rotate the shape. Hold the [Shift] key if you want to the rotation changes by 15 degree only.
A rotated callout box

4. Resize

There are 8 resize handles that are associated with the shape being edited. Drag and drop the resize handles to resize shape.

A line with resize handles

When resizing the shape, you can hold the following keys to achieve corresponding effect.

  • [Shift] - Keep the aspect ratio of the shape.

5. Move vertices

Some shapes (e.g. lines, polygons) may contain vertices. The vertices are drawn with small circles (like the following pictures shows). You can drag and drop the vertices to a new position.
A line with vertices

When moving the vertices, you can hold the following keys to achieve corresponding effect.

  • [Shift] - The line angle of the previous vertex and the current vertex will be the multiple of 15 degree. So if you want to make a horizontal or vertical line, please press the [Shift] key.

6. Add / Remove vertex

You can add / delete vertices for line-based shapes including lines, spline curves, polygons, and smooth polygons. To add / remove vertices, you need to select the line shape first. Then choose either the [Add Vertex] or [Delete Vertex] button in the toolbox. To add vertex to the line, you can move the mouse close to the line and left-click the mouse. A new vertex will be added at that position. To delete a vertex on the line, you just mouse the mouse close to the vertex and left-click the mouse. The vertex then is deleted from the line.
The Add Vertex in Toolbox

7. Move the control points

Different shapes have different control points. Control points are displayed as little yellow diamonds. You can drag the control points to move them to new position. The following picture shows the control point for a callout box.
Control point for the callout box

Tips: At anytime, press [Esc] will cancel the editing operation.


Edit Text

Format Painter

Format Painter helps you apply formatting (properties) of a shape to another. Here is how to use it:

Step 1: Select a shape which formattings you want to share. Note that the 'Format Painter' toolbar button becomes available now.

Format Painter toolbar button

Step 2: Move the mouse over another shape which you want to apply the formattings. Note that the cursor changes to the 'Painter' which tells you that you can apply the formattings to this shape.

Move the mouse over the shape you want to apply the formattings

Step 3: Click on the shape, the formattings are then applied to this selected shape. As the following picture shows, now the shape on the right has the same properties (fill, shadow etc) as the shape on the left.

Applying the formattings

Note: If you want to copy the formattings of a shape and then apply it to a number of selected shapes continuously, you can use menu Edit \ Formatting \ Copy and Edit \ Formatting \ Paste.


Edit Text

Some annotation shapes may contain text. To input or modify the text content, just right click on the shape and choose [Properties] from the popup menu. Choose the [Text] tabpage on the "Shape Properties" dialog. You can input the text, specify the text margin and alignment.

Input text

First Line Indent

It's possible to have indent for the first line of a text paragraph. To configure the indent, click on the indent button to pull down the configuration panel as picture below. Indent is measured in pixels. If you have multiple paragraphs and don't want the first indent applied to the first paragraph, please uncheck the "Include first paragraph" option.

Configure the indent

The following examples shows text with different configuration:

  • Without indent.
  • With indent.
  • With indent, but no indent for the first paragraph.
Text with different indent settings

Line Spacing

To change the line/paragraph spacing the text, please click on the [Line Spacing] button. The line spacing dropdown menu then shows up (see the following image).

Line spacing menu

From this menu, you can specify the line spacing by picking a predefined value. You can also add / remove spacing to / from paragraphs. If you want a more precise control on the spacing, select the [More Options...] menu item. The 'Line Spacing' dialog then shows up.

Line spacing settings

You can click on the [Save] button to save your configuration of the line spacing as default settings. This default settings will be applied to the new shapes you create in the future.

Bullets

If you want to add bullets to the text, just click on the [Bullets] button and a default bullet will be applied to the text. If you want more choices, just click on the little triangle on the button and a dropdown will pop up as the following picture shows. To remove bullets from the text, please select "None" from the dropdown. Click the "Edit" item if you want to configure the detailed settings for the bullet.

To create custom bullets, please see [Configure Bullets] for details.

Select bullets

Numberings

If you want to apply numberings to the text, please click on the [Numberings] button, then select a numbering from the dropdown. To remove numberings from the text, please select "None" from the dropdown. Click the "Edit" item if you want to configure the detailed settings for the numbering.

To create custom bullets, please see [Configure Numberings] for details.

Select numberings

Usually, numbering starts from 1 (or A). But you can change that by clicking the 'Set Numbering value' menu item. On the Numbering Value dialog, enter the starting number.

Set the starting number

Load text into the textbox

You can manually type the text in the textbox, or paste text from the clipboard. Besides that, you can also click on the folder button (as shown below) to load text from a *.txt file. Or just drag-and-drop a text file from file explorer into the textbox.

Load text from file


Edit Dimension Line

Dimension Line

A dimension line consists of 3 parts,
  • Main line - The major part of the dimension line. It shows the starting point and ending point of the which has a starting point of the object being measured.
  • Witness line - There is a witness line at each end of the main line.
  • Text - Shows the measurement or other information.

A dimension line

1. Draw a dimension line

  1. To create a dimension line, first of all you need to select the "Dimension Line" button from the toolbox. See the toolbox section in the introduction of the main UI.
  2. Click the mouse on the image as the starting point of the dimension line.
  3. Move the mouse to a desired position and click on the mouse to set the ending point.
  4. Move the mouse to decide the position of the main line. The witness lines will change accordingly. Click the mouse to finally set the position of the main line.
  5. Input the text for the dimension line in the popup dialog.

Create a dimension line

Tips: At step 3, you can press the [Shift] key to constrain the movement of the second end point. In this way, you can create a vertical or horizontal dimension line.

2. Modify a dimension line

Once a dimension line is created, you can modify it.
Edit a dimension line

2.1 Change the starting/ending point

Starting / ending point of the dimension line is drawn with a circle. You can drag them to a new location.

2.2 Change the witness lines

There are 2 witness lines with the dimension line. Each has 2 vertices. You can drag them to change the length and the rotation of the witness line.

By default,

  • The witness lines are kept in the same length. That means when you drag the control point for a witness line, the length of 4 segments of the witness lines will be changed all together.
  • The witness lines are vertical to the mainline.

You can change these default settings modifying the dimension line properties. Right click on the dimension line, and choose "Properties" from the popup menu. Choose the "Dimension" tabpage in the popup dialog.

Modify the property of the a dimension line
  • In the "Witness Lines" group box, uncheck the "Keep Same Length" if you want witness line has different length. In this case, you can freely move a witness line's control point without changing other witness line segments.
  • After uncheck the "Vertical to Main Line" option, the witness line will be rotated when you move the control point.
Tips: If you want two witness line parallel to each other, just hold the [Shift] key while dragging the witness line control point.

2.3 Automatically show the distance value

Once you have the spatial scale information defined for the image (see Define Spatial Scale for details), there is meaningful spatial distance between point A an B on the image. So, you may want the application to automatically show the distance value for the linear dimension line, instead of manually typing the value. To do that, you just need to configure the system. See Options \ Edit for details details.


Edit Angular Dimension

Angular Dimension

An angular dimension line consists of 3 parts,
  • Extension lines - Two lines that starts from the same origin point and form the angle.
  • Arc - Shows the sweep angle of the dimension.
  • Text - Shows the angular measurement or other information.

An angular dimension

1. Draw an angular dimension

  1. To create an angular dimension, first of all you need to select the "Angular Dimension" button from the toolbox. See the toolbox section in the introduction of the main UI.
  2. Click the mouse on the image as the origin point of the angular dimension.
  3. Move the mouse to a desired position and click on the mouse to set the ending point of the first extension line.
  4. Move the mouse to decide the position of the ending point of the second extension line. The application automatically shows the actual angle between these 2 extension lines.
  5. The "Angular Dimension Settings" dialog pops up. Configure the settings and click [OK] button.
Configure the angular dimension during the creation

Tips: At step 3/4, you can press the [Shift] key to constrain the movement of the end point of the extension lines. In this way, the angel of the extension lines only changes in the multiple of 15 degrees.

2. Flip text

The text is render in the sweep through direction of the arc. However, in some case that may not be perfect way as you expect. You can choose the "Flip text" option then.
Flip text for the angular dimension

3. Swap angles

Angle is measured in a clockwise way betwen the first and second extension line. However, if you want to measure angle in the other way, you can click the [Swap Angles] button as below.

Swap angles button
Following is an example of two angular dimensions: one is measure clockwise, the other is counter-clockwise.
Swap angles

4. Edit an angular dimension

There are 2 control points for the angular dimension. You can move the control points to change:

  • Position of the starting point for the extension lines.
  • Position of the arc.

Edit an angular dimension


Edit Bezier Curve

Bezier Curve

A Bezier Curve consists of a starting point and an ending point. A control point controls the arc of the curve.
A Bezier curve

1. Draw a Bezier curve

  1. To create a Bezier curve, first of all you need to select the "Bezier Curve" button from the toolbox. See the toolbox section in the introduction of the main UI.
  2. Click the mouse on the image as the starting point of the curve.
  3. Move the mouse to the desired position and click the mouse to set the ending point.
  4. Move the mouse and you see the change of the arc. Click the mouse to finish the operation.

2. Modify a Bezier curve

Once a Bezier curve is created, you can modify it.

2.1 Change the starting/ending point

Starting / ending point of the Bezier curve is shown as a small circle. You can drag them to a new location.

2.2 Change the arc of the curve

You can drag the little yellow control point to change the arc of the Bezier curve.


Group Rendering

When you edit a shape, you may notice that there is a 'Group Rendering' option at the bottom of the dialog. If the current shape is a group, this option will be available. When you group shapes together, the properties you set will be applied to all the shapes in the group. When you fill a group of shapes with images, or render shapes with line styles, using this 'Group Rendering' option will get you special effects.

Group rendering option

Group rendering with image filling

The following tutorial shows a usage of this option.

  1. Draw a round rectangle and set appropriate properties of the rectangle so it looks like the following picture.

    2. Round rectangle

  2. Copy the rectangle (use menu Edit\Copy, Edit\Paste) so you have 9 rectangles. Arrange the position for these rectangle so they look like the following picture.

    3. 9 round rectangles

  3. Group all the rectangles together (through menu item Edit\Grouping\Group).
  4. Make sure the grouped shapes are selected. Open the 'Shape Properties' dialog. Switch to the 'Fill' tabpage.
  5. Check the 'Group rendering (mosaic effect)' option. Set the 'Fill Type' to 'Picture'. Click on the folder icon to load an image from your hard drive. The selected image will be applied to the grouped shapes just like the picture below.

    6. Apply the Group Rendering to the grouped shapes

Note: At the last step, if you don't check the 'Group rendering (mosaic effect)' option, the image will be repeatedly applied to each of the shapes in the group. The following picture shows the difference between using and not using this option. The left uses group rendering, while the right doesn't.

Difference between using and not using Group Rendering

Group rendering with line styles

In the section of Line Styles, we know we can use different styles to render lines. Normally, lines are rendered in z-order. That's to say, the top one crosses over lines underneath (see the left part of the following image). However, if you check the 'Group Rendering' option, lines are renderred like in the same layer. See the right part of the following image.

Regular rendering and group rendering - see the difference on the intersection


Highlight Tools

Most of the text or PDF editors allow users to highlight parts of the document. But let's say, you don't have the original document. What you have is just a screen capture, or a scanned pdf. Then how do you do the highlighting? That why we provide the highlight tool here.

1. Choose highlight tools

You can choose a highlight tool from the toolbox (see picture below). There are 2 tools you can choose from:

  1. Rectangular highlight tool: Allow you to highlight a rectangular region on the image.
  2. Polygon highlight tool: Allow you to highlight a polygon region on the image.
Choose highlight tools from toolbox

These 2 highlight tools are very similar, let's use rectangular highlight tool as example in this section.

2. Use highight tool

After the highlight tool is selected, you can drag a rectangle over region on the image.
Draw a rectangle over the region for highlighting

Release the mouse, the rectangular region is created. And the settings dialog pops up. On this dialog, you can choose the highlight color, and it will apply the settings for preview so you know how it looks like instantly. By default, the highlight color is Yellow. The system provides a number of predefined color. Besides that, you can specifiy any color by clicking the color button.

Configure highlighting settings

There is also a 'Invert Colors' option on the dialog. For example, the following example is the result of using dark blue as highlight color while inverting colors for the background image.

Invert image colors while using dark blue as highlight color

Note: There is a Save] button on this dialog. When you click this button, it saves the current settings as the default. So next time when you use the highlight tool, this default setting will be automatically applied to the highlighted region.

3 Highlight polygon region

To highlight a polygon region, it's very similiar to draw a polygon except that the line segments are constrained to either vertical or horizontal. Like creating a polygon, you can finish creating the shape by doing either of the followings:

  • Double click the mouse.
  • Right click the mouse, and choose 'Finsh' from the popup menu.
  • Hit the [Space] key.
Highlight a polygon region


Text Effects

Besides regular font settings (e.g. font name, size, color, etc.), iPhotoDraw also supports Text Effects. These special effects bring rich appearance to the text and make them standout from the background image. The following picture shows text with outline and shadow.
Text with outline and shadow

iPhotoDraw currently supports 3 types of effect for text : Outline, Text Fill, and Shadow. To apply Text Effects, please click on the 'Text Effects' tabpage on the shape's properties dialog, and then check the 'Use Text Effects' checkbox. Since these effects need extra computation, this checkbox is unchecked by default.

Outline

You can choose whether to use the outline for the text. If you use the outline, you can continue to specify the line settings, such as dash style, thickness, line join, color, and opacity of the line.

Outline settings for the text

Text Fill

There are 4 options for the text fill - no fill, solid color, gradient color and picture.

Text fill settings

Choose different options, the content on this dialog will change accordingly. For example, If you choose "Gradient Color", the gradient color settings will be displayed like the following image. The configuration is similar to Edit Gradient. If you defined gradient colors before, you can click the [Gradient] button and pick the existing gradient colors from the drop down list.

Gradient Fill

Shadow

Please check the 'Has Shadow' checkbox if you want to apply shadow effect to the text. You can set the color / opacity for the shadow. You can also set the Distance between the text and its shadow. Distance is measured in pixels. Type the value in the Angle box or drag the red point on the circle to set the angle value for the shadow.

Settings for shadow


Shortcuts

iPhotoDraw provides keyboard and mouse shortcuts to make your operation more efficient. Most of these shortcuts are common in other commercial software. So if you have experience with other software (graphic editing software in particular), these shortcuts are very natural to you.

Selecting
Action | Shortcut
Add to selection/remove from selection | Shift + Click
Select next | Tab, Ctrl + Alt + ]
Select previous | Tab, Ctrl + Alt + [
Select all | Ctrl + A
Unselect | Esc, Ctrl + Shift + A

Editing shapes
Action | Shortcut
Move shapes | Drag, Left, Up, Right, Down
Move shapes with small movement | Ctrl + Left, Ctrl + Up, Ctrl + Right, Ctrl + Down
Move shapes in horizontal or vertical direction | Shift + Drag
Move and copy | Ctrl + Drag
Move the main body of specific shapes (e.g. callout, leader line) | Alt + Drag
Rotate | Drag on rotation control point
Rotate in every 15 degrees | Shift + Drag
Resize | Drag on frame
Resize and keep aspect ratio | Shift + Drag
Show property dialog | Double click, Enter
Fill shape(s) with image | Drag-and-drop an image file to the selected shape(s)
Delete shapes | Del
Cancel operations (moving, rotating etc.) | Esc

Editing vertices
Action | Shortcut
Finish creating polygons/polylines | Double click, right click
Move vertex | Drag the vertex
Move vertex so its angle is in the multiplier of 15 degrees | Shift + Drag
Add a vertex | Choose 'Add Vertex' from the toolbox, then click on the line
Remove a vertex | Choose 'Delete Vertex' from the toolbox, then click on vertex

Creating shapes
Action | Shortcut
Fill the shape with transparent color | T

Font
Action | Shortcut
Increases the font to the next larger point size available in the Font size list box | Ctrl + Shift + >
Decreases the font to the next smaller point size available in the Font size list box | Ctrl + Shift + <
Increases the font size by one point | Ctrl + ]
Decreases the font size by one point | Ctrl + [

Image viewing
Action | Shortcut
Zoom image | Mouse wheel
Zoom image to the cursor position | Alt + Mouse wheel
Pan image | Drag
Zoom the image of the image-filled shape | Space + Mouse wheel
Pan the image of the image-filled shape | Space + Drag
Scroll image one page up | Page Up
Scroll image one page down | Page Down
Scroll image one page left | Ctrl + Page Up
Scroll image one page right | Ctrl + Page Down
Scroll up image with small pace | Shift + Page Up
Scroll down image with small pace | Shift + Page Down
Scroll image to the left with small pace | Shift + Ctrl + Page Up
Scroll image to the right with small pace | Shift + Ctrl + Page Down
Display image at left / top position | Home
Display image at right / bottom position | End


EditTricks

Tricks

1. Drag and drop an image into iPhotoDraw

iPhotoDraw allows you drag an image file directly from a file folder. When you are dragging an image file, there will be there possible operations,

  • Open as New Image - Open the file as a new image.
  • Add to the Current Image - Just create an image annotation shape from the file.
  • Fill the Current Shape - Use the image to fill up the currently selected shape (if it supports image fill). This option is available only if there is a shape selected.
Options when you are dragging an image file into the application

Notes:
  • If you don't like the dragging, just choose the 'Cancel' option, or click the [Esc] key.
  • If there is no image opened, the file you bring in will be opened as a new image by default and the popup menu won't show up.
  • If you just want to create an image annotation shape from the file, you can hold the [Ctrl] key when dragging the file.


Quick Start

Tutorials

iPhotoDraw allows you to draw annotations on images. By using different drawing tools and selecting appropriate properties, you can easily add annotations to the image. This tutorial uses a very simple case as an example to walk you through some of the basic functionalities iPhotoDraw.


Open Image File

Step 1. Open Image File

Choose the menu item File>Open or the [Open] icon from the toolbar buttons.
Toolbar buttons

From the 'Open File' dialog, choose the image file you want to open.

Step 2. Zoom the image to the appropriate level

Once the image is opened, by default it's zoomed to the full extent so that the whole content is displayed. You can change the zoom level by setting the [Zoom Level] combobox in the Toolbar. You can also do that by scrolling the mouse wheel button.

After the image is opened


Draw Annotations

1. Choose the drawing tool

The toolbox contains all the drawing tools you need to draw the annotations. To save space, similar tools are grouped together. The little arrow icon at the right bottom of the toolbox button indicates there are a group of similar tools. Just click on the arrow, a menu will pops up, showing all the tools in this group.

Similar drawing tools are grouped together

In this tutorial, we choose the [Oval Curve Callout] from the toolbox. See the picture below,

Choose the right tool

2. Draw the annotation

Click the mouse on the image, then drag the mouse to the appropriate position and release it. A callout box is created. There are three control points (yellow little diamond-shaped points) with this callout box. They control the followings respectively,

  • Position where the callout box points to
  • Touch point on the callout box body
  • The arc of the curve

You can adjust the callout box by moving these control points. You can also move , resize, or rotate the callout box.

Draw a Callout Box

3. Set properties

From the 'Properties' panel (on the right side of the dialog), do the followings

  • Change the color of line to red.
  • Choose the appropriate arrow type for the line.

After you make this changes, the callout box will look like this,

After setting the line color and arrow type for the callout box

4. Set the inset image for callout box

Right click on the callout box, from the popup menu choose [Properties] item. The Properties dialog will pop up. The Properties dialog provides more detailed settings than the Properties panel which we used in the previous step.

  • On the 'Properties' dialog, choose the [Fill] tabpage.
  • Choose 'Picture' in the [Fill Type] group box.
  • Click on the [Load Picture] button and load the picture which is used to fill the callout box.
  • Choose 'Stretch' in the [Picture] group box.

The Properties dialog

  • Select [Keep Original Size] option in the [Stretch Settings] groupbox.
  • For the [Align] option, you can choose either [Left/Top] or [Center] for your need. When you are configuring all these settings, the content of the image will change accordingly thus give you an instant feedback.
  • Click [OK] to apply the changes.

The Stretch Settings dialog

5. The final result

After following the above steps, you will get the final result like the picture showed below.

The final result of the callout box


Export Image

Choose menu item [File\Export]. From the "Export Image" dialog, specify the image format (currently only bmp, jpg, png, and gif are supported) and the file name. Once you click [Save] button, a new image file with the annotations will be created.

There is also an [Export] button on the toolbar (see picture below). It gives you a shortcut for image exporting.

Export button on toolbar


Other


ipdx File Format

ipdx is an iPhotoDraw file format which contains the original image and the annotation data. In the past, the annotation is stored in a *_data.xml file. That's not so convenient because when you copy files, you have to copy 2 files: the original image file and the annotation xml file. And that's why we come up with ipdx file. Now everything is embedded into a single file. Behind the scene, ipdx is a zip package file. If you are curious what is contained in this file, you can open it with any zip software.

ipdx file contains the following parts:

  • Original image. Since ipdx is a zip package file, you can extract it with any zip software. However, the file name may or may not match the original name. If that matters to you, it's suggested to use our internal extract method. See File\Extract Image File... for details.
  • Info.xml. It stores description for the original image file.
  • Data.xml. It contains the annotation data.
  • Thumbnail.jpg. A tiny image that's used for preview purpose.


Update History

Version 2.6, Current
  • New shapes: stadium, semi-stadium, L-shape etc.
  • Replace image colors
  • Format painter
  • Flip shapes
  • Close/Connect polyline(s)
Version 2.5, 2018-02-28
  • New shapes: parallelogram, trapezoid, block arc
  • Draw lines with more styles
  • Highlight tools
  • First line indent for text
  • Swap angles for angular and linear dimensions
  • Rotate image by arbitrary angle
  • Measure Area
  • Support 2-level numbering for number stamps
Version 2.4, 2017-08-30
  • Text bullets / numberings
  • Round corner effect
  • Zoom to selection
  • Save As
  • Self-contained image format: *.ipdx
Version 2.3, 2017-03-26
  • Customize color palette
  • Slice image into tiles
  • Add grid overlay on image
  • Allow filling shapes with current image
  • Support line/paragraph spacing for text
  • File navigation in the current folder
  • Press key [T] to create transparent-filled shape during shape creation
Version 2.2, 2016-11-27
  • Wavy line effect
  • Jagged rectangle shape
  • Angular dimension shape
  • Split rectangle / image
  • Support 'Recently Used Fonts' in the Font dropdown
  • Add some keyboard shortcuts for image viewing
  • Allow users to continuously create shapes, without having to reselect the same tool in the toolbox
  • Support dragging images from web browser
Version 2.1, 2016-04-03
  • Send image to MS Office (Word, Excel, PowerPoint, Outlook)
  • Improve performance when working with big images
  • Measurement tools and scale bar
  • Can choose units other than pixels for the new image size
  • Can choose different display units for the ruler on the main view
  • Turn on/off image and annotation shapes
  • Apply multiple watermarks to images
  • Change text case (upper case, lower case etc.)
  • Allow adjusting text position for dimension line
Version 2.0, 2015-06-14
  • Flexible arrow heads for lines
  • Number and letter stamp tool
  • Batch image conversion
  • Transform shapes
  • Capture window (with screen capture)
  • Global hotkeys for screen capture
  • More options for screen capture (capture to file, with watermark etc.)
  • Import/export application settings
  • Send image to external applications
  • More shapes, e.g. elbow lines
  • Check software updates
Version 1.9, 2014-10-19
  • Watermark
  • Capture screen to clipboard
  • Delayed screen capture
  • Select screen(s) to capture in multi-screen environment
  • Show pixel magnifier when doing the screen capture
  • Support transparent background image
  • Insert special characters
  • Screen operations (pixel magnifier, color picker, measurement)
  • Image emboss effect
Version 1.8, 2014-03-02
  • Shadow and glow effect
  • Snapshot
  • Lock and unlock shapes
  • Save shapes as picture
  • Group rendering (mosaic effect)
  • Image filter (Brightness/Contrast, Hue/Saturation, Grayscale, Sepia)
  • Vertical alignment for text
Version 1.7, 2013-08-16
  • Screen capture
  • Rotate image by 90 degree
  • Cloud and cloud callout shape
  • Customize shortcuts
  • Show position on map
  • Color picker
Version 1.6, 2013-04-14
  • Support Czech and Hebrew
  • Support Traditional Chinese, German
  • Grouping and multi-selection
  • Alignment, spacing, and sizing for selected shapes
  • More than 10 new shapes (arc, chord, pie, explosion, etc)
  • Pixelation and blur tools
Version 1.5, 2012-09-30
  • Add annotation shape to toolbox.
  • Customize dash style for lines.
  • Add / Delete vertex for polyline (polygon).
  • More controls for callout boxes.
  • Support smooth polygon.
Version 1.4, 2012-05-30
  • Gradient Color
  • Show grid and guide lines
  • Move shapes with arrow keys
  • Enhance color picker dialog
Version 1.3, 2012-03-30
  • Resize Canvas.
  • Upload image to ftp.
  • Freehand drawing tool and more callout boxes.
  • Flip image and support negative image.
  • More keyboard controls (Shift, Ctrl, Esc) when editing.
  • Drag image directly into the application.
  • Paste image/text data from clipboard.
Version 1.2, 2012-01-29
  • Text Effect (outline, shadow, filled with pictures etc).
  • RTL (right-to-left) language input support.
  • Show image meta data.
  • Copy image to clipboard.
  • Full screen view mode.
Version 1.1 (Build 4356) , 2011-12-05
  • Add left arrow, pentagons and other common shapes.
  • Drag-and-Drop files from File Explorer.
  • Change rotation by the multiplier of 30 degrees when holding the [Shift] key to rotate the annotation object.
  • Fix the defect of annotations in wrong places when exporting (for a big image).
  • More Zoom options.
  • Can create a new image on-the-fly.
  • Open image from command line.
Version 1.0 , 2011-10-16
  • Initial release.


TechSupport

Technical Support

Bug Report

If you find errors during the usage of the application, Please following the steps to report the bug to the author. That will help us to improve the quality of the software. And your effort will be appreciated.

Step 1 - Expand the error dialog to show the detailed information.

Step 2 - Copy the details of the error to clipboard.

Step 3 - Email the error message to the author by simenwu@gmail.com. It will be very helpful if you could describe the scenario when the error happens in the email.

Feedback / Suggestion

If you have any ideas of improving the current iPhotoDraw, or there are any other features you would like to see in the future version, please email the author by simenwu@gmail.com.


License

iPhotoDraw is provided free-of-charge with generous licensing terms.

You may use iPhotoDraw for personal, commercial, education, and government use -- the iPhotoDraw application is free for all of these purposes. You may install it on as many systems as you'd like. The main restriction is that you may not modify the iPhotoDraw software itself (e.g. change the name, add/remove features, "don't modify the DLL or EXE files"), and as a corollary you may not distribute modified copies of iPhotoDraw.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


FAQ

Frequently Asked Questions

After I download the CHM help file, why the content is blank when I open it?
This is a Windows security issue. You can right click on the CHM file and click on Properties. Then click Unblock. After that, you can see the content of the CHM file.

When I click [Save], why iPhotoDraw just saves annotation objects in a separated file? Why not save to the original image file?
That's by purpose. We save the annotation data into a separated xml file (in the format of xxx_data.xml) so the original image file is intact. Once you decide the work is done, you can choose menu item [File\Export] to export the image as well as the annotation to a new image file.

What's the technology you use in iPhotoDraw?
iPhotoDraw is developed with pure .Net technology. It based on Microsoft .Net 4.0 framework and no other 3rd party Dlls/Components are needed.

Does iPhotoDraw support multi-language?
For the time being, we only support English and Simplified Chinese. Supports on other languages (e.g. French) are underway. Volunteers on the translation are very welcome. Please see the Technical Support session.

I accidentally select a language which I don't understand, how can I roll back?
Locate the iPhotoDraw configuration file AppSettings.xml. It should be in folder like C:\Users\[Your User Name]\AppData\Roaming\iPhotoDraw. Open this file with NotePad. Find the xml node, remove the attribute CurrentCulture and save it. Run iPhotoDraw and it will automatically choose the language based on your Windows' current culture settings and use English as a fallback if the current culture is not supported by iPhotoDraw.

Will it ever be ported to Mac OS, iOS, Android, Linux, or any other non-Windows operating systems?
There is no plan for that in the near future. For now, we only focus on Windows.

I configure an annotation shape with complicated properties. And I don't want to do the configuration over and over again. How can I re-use these property settings?
Right click on the shape, from the popup menu, choose 'Save Properties as Default'. Then the properties of this shape is saved with the system (even after you close iPhotoDraw). Next time when you create a new shape, these default property settings will be automatically applied to it.

Can I share the settings with other people?
Yes, you can. See menu [Tools | Import / Export Settings]. You export settings to a .ipdsettings file. Copy this file to other people's machine and then import it into his/her iPhotoDraw.

Where does iPhotoDraw store the settings files?
It first searches at the AppData subfolder under the current program folder. If you use a portable version of iPhotoDraw, the settings files will be there. However, if iPhotoDraw cannot find the files in that folder, it will then looks at C:\Users\[YourUserName]\AppData\Roaming\iPhotoDraw. Actually when you install iPhotoDraw, this folder will be automatically created for you.