PDF version - iPhotoDraw

Transcription

iPhotoDraw V2.1 User's Manual
© 2016 Simen Wu
by Simen Wu
A simple, yet powerful tool to annotate images.
© 2016 Simen Wu
All rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, or
mechanical, including photocopying, recording, taping, or information storage and retrieval systems - without the
written permission of the publisher.
Products that are referred to in this document may be either trademarks and/or registered trademarks of the
respective owners. The publisher and the author make no claim to these trademarks.
While every precaution has been taken in the preparation of this document, the publisher and the author assume no
responsibility for errors or omissions, or for damages resulting from the use of information contained in this
document or from the use of programs and source code that may accompany it. In no event shall the publisher and
the author be liable for any loss of profit or any other commercial damage caused or alleged to have been caused
directly or indirectly by this document.
Printed: April 2016 in Canada.
Special thanks to:
All the people who contributed to this software.
4
Table of Contents
Foreword
6
Part I Introduction
8
1 Features
................................................................................................................................... 9
2 System...................................................................................................................................
Requirements
9
Part II User Interface
12
1 Mani ...................................................................................................................................
UI
12
2 Menu................................................................................................................................... 14
File
.......................................................................................................................................................... 14
New
......................................................................................................................................................... 15
Export
......................................................................................................................................................... 18
Send
......................................................................................................................................................... 19
Screen Capture
......................................................................................................................................................... 21
Snapshot ......................................................................................................................................................... 26
View
.......................................................................................................................................................... 28
Edit
.......................................................................................................................................................... 32
Edit Shape.........................................................................................................................................................
Properties
35
Shape Properties
.........................................................................................................................................................
- Text
40
Shape Properties
.........................................................................................................................................................
- Font
40
Shape Properties
.........................................................................................................................................................
- Text Effects
41
Transform......................................................................................................................................................... 43
Text
.......................................................................................................................................................... 43
Shape Effects.......................................................................................................................................................... 44
Im age
.......................................................................................................................................................... 46
Config Canvas
......................................................................................................................................................... 53
Show on Map
......................................................................................................................................................... 55
Measure ......................................................................................................................................................... 56
Tools
.......................................................................................................................................................... 63
Extended Toolbox
.........................................................................................................................................................
Items
64
Options ......................................................................................................................................................... 68
Config Stamps
......................................................................................................................................................... 85
Import \ Export
.........................................................................................................................................................
Settings
89
Screen ......................................................................................................................................................... 90
Styles
......................................................................................................................................................... 94
Gradients
......................................................................................................................................... 94
Dash Patterns ......................................................................................................................................... 98
Arrow Heads ......................................................................................................................................... 100
Watermark
......................................................................................................................................................... 106
Manage Watermarks
......................................................................................................................................... 106
Batch Watermark
......................................................................................................................................... 112
Watermark for Current
.........................................................................................................................................
Image
113
Batch Image
.........................................................................................................................................................
Conversion
114
Help
.......................................................................................................................................................... 116
Part III Edit
119
1 Edit ...................................................................................................................................
Shapes
119
© 2016 Simen Wu
Contents
5
2 Edit ...................................................................................................................................
Text
123
3 Dimension
...................................................................................................................................
Line
124
4 Bezier
...................................................................................................................................
Curve
127
5 Text...................................................................................................................................
Effects
129
6 Shortcuts
................................................................................................................................... 133
7 Tricks
................................................................................................................................... 134
Part IV Tutorials
137
1 Open
...................................................................................................................................
File
137
2 Draw...................................................................................................................................
Annotations
138
3 Export
...................................................................................................................................
Image
144
Part V Other
146
1 Update
...................................................................................................................................
History
146
2 Technical
...................................................................................................................................
Support
148
3 License
................................................................................................................................... 149
4 FAQ................................................................................................................................... 150
Index
0
© 2016 Simen Wu
5
6
Foreword
© 2016 Simen Wu
Part
I
8
1
Introduction
iPhotoDraw lets you add annotation to an image file. You can add texts,
arrows, dimensions, lines, and ballons 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 bollons.
The following is an example of what we can do with iPhotoDraw.
Original image,
Image with annotations,
© 2016 Simen Wu
Introduction
1.1
9
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 writen directly on 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.
1.2
System Requirements
Software Requirements
Windows XP SP3 or later (e.g. Windows Vista, Windows 7, Windows
Server 2008), 32 bit / 64 bit
.Net Framework 3.0 or later
Hardware Requirements
800 MHz processor
© 2016 Simen Wu
10
512MB of RAM
1024 x 768 screen resolution
100+ MB hard drive space
© 2016 Simen Wu
Part
II
12
2
User Interface
iPhotoDraw provides standard and easy-to-use user interface.
Operations are very straight forward.
2.1
Mani UI
The main user interface includes the following parts,
Main panel
Toolbar buttons
Toolbox
Property panel
Overview
Ruler
Status bar
© 2016 Simen Wu
User Interface
13
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).
© 2016 Simen Wu
14
2.2
Menu
iPhotoDraw's menu consists of the followings,
File
14
View
Edit
28
32
Shape Effects
Image
Tools
2.2.1
44
46
63
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 15 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 Explorerer. Or right click the
image file on File Explorerer, 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 to the annotation file. This is an xml-format file.
1.5 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 18 for details.
© 2016 Simen Wu
User Interface
15
1.6 Send
You can send the current image with annotations to different receivers
or applications. See File\Send 19 for details.
1.7 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 21
for more details.
1.8 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 26 for more details.
1.9 Print
Print the content of the current image.
2.2.1.1
New
Sometimes you want to make a screenshot and add annotations to the
screenshot directly. When you choose menu [File\New], the followng
dialog pops up.
© 2016 Simen Wu
16
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 rememberred
by the system. So next time it will save time from entering it again.
© 2016 Simen Wu
User Interface
17
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 onthe
[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 paper size. See the Options\Paper
Size 84 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.
© 2016 Simen Wu
18
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.
2.2.1.2
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
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.
© 2016 Simen Wu
User Interface
19
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.
2.2.1.3
Send
FTP
iPhotoDraw allows you to upload image to the FTP server. Choose menu
item [File]\[Send]\[FTP] to open up the following dialog.
© 2016 Simen Wu
20
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 [Imae 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 82 for details.
External Application
© 2016 Simen Wu
User Interface
21
You can send the current image to the external application. Please see
Tools\Options\External Application 81 on how to configure the external
application.
2.2.1.4
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.
© 2016 Simen Wu
22
Note:
There is a pixel magnifier that moves along with the mouse. It
shows the details of the pixels around the 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.
© 2016 Simen Wu
User Interface
23
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.
© 2016 Simen Wu
24
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
© 2016 Simen Wu
User Interface
the screen.
Set delay time and other options
© 2016 Simen Wu
25
26
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).
2.2.1.5
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.
© 2016 Simen Wu
User Interface
27
Create Snapshot
Creating a snapshot is easy. Just choose menu item
File\Snapshot\Create Snapshot. The following dialog will pop up. Give
the snapshot a rememberable name and maybe some descriptions. Click
[OK], the snapshot is then created.
Note: Durimg 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 snapsnot
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 storeage space, you can also delete snapshots that
you don't need any more here.
© 2016 Simen Wu
28
Restore a snapshot
Note: If you have made some changes on the current imag, 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.
2.2.2
View
2.1 Zoom In
Zoom in the image.
2.2 Zoom Out
Zoom out the image.
2.3 Fit to Window
© 2016 Simen Wu
User Interface
29
Zoom the image so it just fits inside the current window.
2.4 Actual Size
Zoom the image to its actual size (100%).
2.5 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.6 Properties
Turn on / off the property panel from the main user interface.
2.7 Ruler
Turn on / off the ruler from the main user interface.
2.8 Ruler Display Unit
You can choose one of the following units as the display unit for the
ruler:
Pixel
© 2016 Simen Wu
30
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.9 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 rectagle that is aligned on the grid line.
© 2016 Simen Wu
User Interface
31
Grids
2.10 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.
© 2016 Simen Wu
32
Guide lines
2.11 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.
2.2.3
Edit
3.1 Undo
This command undoes the most recent action that you've taken when
editing the annotation on the the image, if any.
© 2016 Simen Wu
User Interface
33
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 aannotation object from the image.
3.7 Select
iPhotoDraw provides serveral 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,
© 2016 Simen Wu
34
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 vretical center on the
current image.
3.12 Spacing
You can control the space between selected shapes. There are serverl
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 Sapce : Shapes are vertically adjacent to each
© 2016 Simen Wu
User Interface
35
other (no space between each of them).
3.13 Order
You can change the z-order of the shapes onthe 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 simplily hitting the [Return] keyboard. The
'Shape Properties' dialog shows more details than the 'Property' panel
on the main UI. Please see Edit \ Shape Properties 35 for more details.
3.16 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 76 for details.
2.2.3.1
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
© 2016 Simen Wu
36
different. Following is the full list of the shape's properties.
Text
40
Font
40
Text Effects
41
Fill
Line
Dimension
Group Rendering
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. For example, if you fill the group with image, all the
shapes in the group will be filled with the same image, repeatly. But if
you check the 'Group rendering (mosaic effect)' option, the same image
will be rendered only once.
© 2016 Simen Wu
User Interface
37
Group rendering option
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.
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.
© 2016 Simen Wu
38
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.
© 2016 Simen Wu
User Interface
39
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 repeatly 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
© 2016 Simen Wu
40
2.2.3.2
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
2.2.3.3
41
.
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
© 2016 Simen Wu
User Interface
41
Font properties
2.2.3.4
Shape Properties - Text Effects
Comparing to the Text 40 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 similiar to the shadow settings for the shape, but it's
dedicated to the text of the shape. See for Shape Effect\ Shadow 44
details.
Glow: It's similiar to the glow settings for the shape, but it's
dedicated to the text of the shape. See Shape Effects / Glow
details.
© 2016 Simen Wu
45
for
42
Text Effect properties
The following picture shows some text effects applied to the text.
© 2016 Simen Wu
User Interface
43
Text with glow, shadow, gradient color, and picture fill
Note: These settings are available only when you check the 'Use text
effects' checkbox.
2.2.3.5
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
2.2.4
Text
These menu items provide operations on text.
4.1 Change Case
© 2016 Simen Wu
44
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.
2.2.5
Shape Effects
These menu items allow you to apply specifial effects to the selected
shape(s).
5.1 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.
© 2016 Simen Wu
User Interface
45
Shadow settings
The following picture shows the same shape with two different shadows.
Hard shadow and soft shadow
5.2 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.
© 2016 Simen Wu
46
Glow settings
The following picture shows a shape with glow effect.
Glow effect
2.2.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.
© 2016 Simen Wu
User Interface
47
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.
© 2016 Simen Wu
48
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.
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 55 for details.
© 2016 Simen Wu
User Interface
49
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 53 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 degree or 180 degree.
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.
© 2016 Simen Wu
50
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.
© 2016 Simen Wu
User Interface
51
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)
© 2016 Simen Wu
52
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 56 for details.
© 2016 Simen Wu
User Interface
2.2.6.1
53
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 remainings.
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.
© 2016 Simen Wu
54
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
sie 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 canvase.
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.
© 2016 Simen Wu
User Interface
55
Automatically set the canvas size
Reset
Reset the canvas box to its initial status, which is the same size as the
image.
Canvas Color
You can specify the color for the canvas. If the image is a transparent
PNG, you may consider using Transparent background.
2.2.6.2
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,
© 2016 Simen Wu
56
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.
2.2.6.3
Measure
With the measurement tools, you can measure distance from point A to
© 2016 Simen Wu
User Interface
57
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
© 2016 Simen Wu
58
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 57 (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.
© 2016 Simen Wu
User Interface
59
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.
© 2016 Simen Wu
60
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.
© 2016 Simen Wu
User Interface
61
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
© 2016 Simen Wu
62
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.
Note: To measure the length/perimeter for an existing shape on the
image, you just right click on the shape and choose "Length
Measurement" from the popup menu.
Spatial distance dialog
Measure Distance in Pixels
This is a simple measurement tool that allows you to measure distance
in pixels from point A to point B.
© 2016 Simen Wu
User Interface
63
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-perinch) 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.
2.2.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. Thse settings will apply to the
application immediately. See Options 68 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.
© 2016 Simen Wu
64
Set language
2.2.7.1
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
© 2016 Simen Wu
User Interface
65
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
© 2016 Simen Wu
66
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 inage
Modify Extended Toolbox Item
© 2016 Simen Wu
User Interface
67
Click on a extended toolbox item on the hreeview, 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 easyto-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 easyto-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.
© 2016 Simen Wu
68
Config the shape item
2.2.7.2
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.
© 2016 Simen Wu
User Interface
69
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.
© 2016 Simen Wu
70
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.
© 2016 Simen Wu
User Interface
71
Default settings for printing
Edit
This page provides settings for editing.
Right click to 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.
© 2016 Simen Wu
72
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 mojor grid consist of 10 x 10 small grids. So if
© 2016 Simen Wu
User Interface
73
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.
© 2016 Simen Wu
74
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.
© 2016 Simen Wu
User Interface
75
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.
© 2016 Simen Wu
76
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
© 2016 Simen Wu
User Interface
border of the picture.
Settings for saving shapes as pictures
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.
© 2016 Simen Wu
77
78
Settings for exporting image
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 procss. 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 chapture:
Show magnifier: Magnifier allows you to have a better view on the
pixels on the screen. You can decide whether to show the magnifer
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
© 2016 Simen Wu
User Interface
79
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. throught 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 106 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 81 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.
© 2016 Simen Wu
80
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 75 , 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.
© 2016 Simen Wu
User Interface
81
Global hotkeys for screen capture
External Application
iPhotoDraw can send images to external applications. You can config the
following settings for the applicaiton:
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.
© 2016 Simen Wu
82
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
© 2016 Simen Wu
User Interface
83
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.
© 2016 Simen Wu
84
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
Paper Size
The system provides a list of predefined paper size which you can
choose for a new image. See the following picture for the list. You can
customize this list by adding, deleting or re-odering the items. By
© 2016 Simen Wu
User Interface
85
default, all the paper sizes use Imperial (Inch) as the unit. You can also
choose Metric (Centimeter) as the unit. Click [Reset] button if you want
to roll back to the original settings.
List of paper sizes
2.2.7.3
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
© 2016 Simen Wu
87
86
86
Number stamps
When you choose the Number Stamp tool from the toolbox, everytime
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 "Config 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.
© 2016 Simen Wu
User Interface
87
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.
Config number stamps
Letter stamps
Letter stamps are similar to number stamps. The content of the stamp
shape is automatically changed. Intead of auto number, letter stamps
use an alphabet letter as the content. When you choose the Letter
Stamp tool from the toolbox, everytime 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.
© 2016 Simen Wu
88
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.
© 2016 Simen Wu
User Interface
89
Config letter stamps
2.2.7.4
Import \ 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.
© 2016 Simen Wu
90
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.
2.2.7.5
Screen
iPhotoDraw provides several tools to allow user to do some operations
on the screen.
Pick Color
© 2016 Simen Wu
User Interface
91
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
© 2016 Simen Wu
92
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.
© 2016 Simen Wu
User Interface
93
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.
© 2016 Simen Wu
94
Magnify the screen pixels
2.2.7.6
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.
For the time being, the system supports the following styles,
Gradients
94
Dash Patterns
98
Arrow Heads 100
2.2.7.6.1 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.
© 2016 Simen Wu
User Interface
95
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,
© 2016 Simen Wu
96
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 applicagle 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
© 2016 Simen Wu
User Interface
97
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.
© 2016 Simen Wu
98
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.
2.2.7.6.2 Dash Patterns
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 config your own dash styles.
© 2016 Simen Wu
User Interface
99
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 stardard dashes as well as the custom
dashes. Standard dashes come first above the custom dashes.
© 2016 Simen Wu
100
List of line dashes
2.2.7.6.3 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.
© 2016 Simen Wu
User Interface
101
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.
© 2016 Simen Wu
102
Choose arrow head
Set the arrow head properties
Arrow heads are actually shapes (e.g. trangle, rectangle, and circle etc)
themself. 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
© 2016 Simen Wu
User Interface
103
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.
© 2016 Simen Wu
104
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
© 2016 Simen Wu
User Interface
105
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.
© 2016 Simen Wu
106
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.
2.2.7.7
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 106
Batch watermark 112
Watermark for current image 113
2.2.7.7.1 Manage Watermarks
The first time you run "Manage Watermarks", it asks you to select a
© 2016 Simen Wu
User Interface
107
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 clicing 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.
© 2016 Simen Wu
108
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 souce of the watermark. The
souce 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 35 .
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.
© 2016 Simen Wu
User Interface
109
Edit watermark (anchor)
Tile: You can tile the watermark on the image. There are 2 types of
tile style: Grid and Diamond.
© 2016 Simen Wu
110
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.
© 2016 Simen Wu
User Interface
Anchor the watermark to the right/bottom position
Grid-styled tiling
© 2016 Simen Wu
111
112
Diamond-styled tiling
2.2.7.7.2 Batch Watermark
You can manually apply the watermark to an image like it's mentioned
in Watermark for Current Image 113 . 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 origional image files are stored.
Outout folder: That's where the images go after being processed.
Watermark: Pick a watermark you defined in Manage Watermark 106 .
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 ightning button and off you go - the system will
automatically apply the watermark to source images and output the
result to the output folder.
© 2016 Simen Wu
User Interface
113
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.
2.2.7.7.3 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 108 . After configuring
the properties, you can click the [Save] button to save it as a new
watermark.
© 2016 Simen Wu
114
Set watermark for the current image
2.2.7.8
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.
© 2016 Simen Wu
User Interface
115
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.
© 2016 Simen Wu
116
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.
2.2.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.
© 2016 Simen Wu
User Interface
117
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.
© 2016 Simen Wu
Part
III
Edit
3
119
Edit
iPhotoDraw supports a variety of annotation shapes. Different shapes
may have different charateristics. 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.
3.1
Edit Shapes
1. Choose the shape to edit
Choose the
(Select) button from the toolbox. When you move the
mouse over a shape, the cursor is changed to
. 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.
© 2016 Simen Wu
120
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
. 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 72 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.
© 2016 Simen Wu
Edit
121
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.
© 2016 Simen Wu
122
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 / remvove
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
© 2016 Simen Wu
Edit
123
7. Move the control points
Different shapes have different control points. Control points are
displayed as little yellow dimonds. 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.
3.2
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.
© 2016 Simen Wu
124
Input text
3.3
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.
© 2016 Simen Wu
Edit
125
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
13 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
© 2016 Simen Wu
126
Tips: At step 3, you can press the [Shift] key to contrain the 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 modifing the dimension line
properties. Right click on the dimension line, and choose "Properties"
© 2016 Simen Wu
Edit
127
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.
3.4
Bezier Curve
A Bezier Curve consists of a starting point and an ending point. A
control point controls the arc of the curve.
© 2016 Simen Wu
128
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 13 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.
© 2016 Simen Wu
Edit
3.5
129
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.
© 2016 Simen Wu
130
Outline settings for the text
Text Fill
There are 4 options for the text fill - no fill, solid color, gradient color
and picture.
© 2016 Simen Wu
Edit
131
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 95 . If you defined gradient colors
before, you can click the [Gradient] button and pick the existing gradient
colors from the drop down list.
© 2016 Simen Wu
132
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.
© 2016 Simen Wu
Edit
133
Settings for shadow
3.6
Shortcuts
iPhotoDraw provides keyboard and mouse shortcuts to make your
operation more efficient. Most of these shortcuts are common in other
commerical software. So if you have experience with other software
(graphic editing software in particular), these shortcuts are very natural
to you.
Selecting
Action
Add to selection/remove from selection
Select next
Select previous
Select all
Unselect
Editing shapes
© 2016 Simen Wu
Shortcut
Shift + C lick
Tab, C trl + Alt + ]
Tab, C trl + Alt + [
C trl + A
Esc, C trl + Shift + A
134
Action
Move shapes
Move shapes with small movement
Move shapes in horizontal or vertical direction
Move and copy
Rotate
Rotate in every 15 degrees
Resize
Resize and keep aspect ratio
Show property dialog
Fill shape(s) with image
Delete shapes
C ancel operations (moving, rotating etc.)
Shortcut
Drag, Left, Up, Right, Down
C trl + Left, C trl + Up,
C trl + Right, C trl + Down
Shift + Drag
C trl + Drag
Drag on rotation control
point
Shift + Drag
Drag on frame
Shift + Drag
Double click, Enter
Drag-and-drop an image
file to the selected shape(s)
Del
Esc
Editing vertices
Action
Finish creating polygons/polylines
Move vertex
Move vertex so its angle is in the multiplier of 15 degrees
Add a vertex
Remove a vertex
Shortcut
Double click, right click
Drag the vertex
Shift + Drag
C hoose 'Add Vertex' from
the toolbox, then click on
the line
C hoose 'Delete Vertex'
from the toolbox, then click
on vertex
Zooming, Panning
Action
Zoom image
Pan image
Zoom the image of the image-filled shape
Pan the image of the image-filled shape
3.7
Shortcut
Mouse wheel
Drag
Space + Mouse wheel
Space + Drag
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.
© 2016 Simen Wu
Edit
135
Options when you are draggina 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.
© 2016 Simen Wu
Part
IV
Tutorials
4
137
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.
4.1
Open 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.
© 2016 Simen Wu
138
After the image is opened
4.2
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.
© 2016 Simen Wu
Tutorials
139
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
© 2016 Simen Wu
140
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
© 2016 Simen Wu
Tutorials
141
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.
© 2016 Simen Wu
142
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.
© 2016 Simen Wu
Tutorials
143
The Stretch Settings dialog
5. The final result
After fowllowing the above steps, you will get the final result like the
picture showed below.
© 2016 Simen Wu
144
The final result of the callout box
4.3
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
© 2016 Simen Wu
Part
V
146
5
Other
5.1
Update History
Version 2.1, Current
- 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
© 2016 Simen Wu
Other
- 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
© 2016 Simen Wu
147
148
- 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, petagons and other common shapes.
- Drag-and-Drop files from File Exploerer.
- 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.
5.2
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.
© 2016 Simen Wu
Other
149
Step 3 - Email the error message to the author by [email protected].
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 [email protected].
5.3
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
© 2016 Simen Wu
150
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.
5.4
FAQ
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 wellcome. Please see the Technical Support 149
session.
I accidently 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?
© 2016 Simen Wu
Other
151
There is no plan for that in the near future. For now, we only focus on
Windows.
I config 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.
© 2016 Simen Wu
152
© 2016 Simen Wu
Thank you for reading.

PDF version - iPhotoDraw

Transcription

Similar documents

I`m helping to end MS by participating in the 2016 Jayman BUILT MS

The Board of Directors of Qatar Fuel (WOQOD) is pleased to invite

5 `S` Training Program at ABV-IIITM, Gwalior on 21.07.2016

Porky Expo Flyer

The NeuLion Report

Sept 30-Oct 2, 2016 Nov 4-6, 2016 @Camp Tadmor

4 star ALOE HOTEL, PAPHOS

the Guidelines for the registration on

Ticket plus hotel packages for the Chelsea Flower Show 2016

loyola institute for ministry on-campus open house thursday, may 12