You are on page 1of 39

iDesign Version 1.

4 - User Guide
[2011-04-26] www.touchaware.com

This document describes the iDesign user interface and provides step-by-step instructions on how to use the features in the app.

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 1

Contents !! "#$%&'$(%)*+$(,-.$%///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%0! 1! "223425%///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%6! 7! "2234-('%//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%8!


4.1! 4.2! 4.3! 4.4!

0! 92-(:%;$++<*='%/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%>!
Setting the Grid ........................................................................................................................................ 8! Setting the Snap ....................................................................................................................................... 9! Setting the Units ....................................................................................................................................... 9! Setting the Board Size & Drawing Scale ................................................................................................ 10!

6! ?22@<*=%A%B-**<*=%///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%!1!
6.1! 6.2! 6.3! 6.4! 6.5! 6.6!

C! D(-E<*=%////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%!1!
Inserting shapes ..................................................................................................................................... 12! Inserting and editing text ........................................................................................................................ 14! Selecting shapes .................................................................................................................................... 14! Moving shapes ....................................................................................................................................... 16! Resizing shapes ..................................................................................................................................... 17! Rotating shapes ..................................................................................................................................... 17!

7.1! Removing shapes .................................................................................................................................. 18! 7.2! Copy & Paste ......................................................................................................................................... 18! 7.3! Undo / Redo ........................................................................................................................................... 19! 8.1! Applying style attributes ......................................................................................................................... 20! 8.2! Applying colors ....................................................................................................................................... 21! 9.1! 9.2! 9.3! 9.4! 9.5! 9.6! 9.7! Editing shapes points ............................................................................................................................. 22! Adding and removing points................................................................................................................... 23! Closing an open shape .......................................................................................................................... 24! Converting a shape to a path ................................................................................................................. 24! Editing control points on a path .............................................................................................................. 24! Straightening or curving a segment ....................................................................................................... 25! Break apart or weld shapes together ..................................................................................................... 26! Grouping and un-grouping shapes ....................................................................................................... 27! Explode or Join shapes ........................................................................................................................ 28! Changing the z-order of shapes ........................................................................................................... 28! Flipping shapes .................................................................................................................................... 29! Adding a new layer............................................................................................................................... 30! Removing a layer ................................................................................................................................. 30! Inserting shapes on a layer .................................................................................................................. 30! Showing & hiding layers ....................................................................................................................... 31! Setting a layer as the current layer ...................................................................................................... 31! Locking a Layer .................................................................................................................................... 31! Renaming a layer ................................................................................................................................. 31! Changing the order of layers ................................................................................................................ 32!

8! 9-'<.%F:<+%GH*.+<2*'% //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%!>! /

>! ;#-I$%B(2I$(+<$'%///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%1J!

K! B2<*+%A%B-+#%F:<+<*=%//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%11!

10.1! 10.2! 10.3! 10.4! 11.1! 11.2! 11.3! 11.4! 11.5! 11.6! 11.7! 11.8!

!J! L4M$.+%GH*.+<2*'%///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%18!

!!! N-O$('%///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%1K!

!1! ;$++<*=%-%9-.P=(2H*:%)@-=$%//////////////////////////////////////////////////////////////////////////////////////////////////////////////%71!
13.1! Automatic save & crash recovery......................................................................................................... 34! 13.2! Save As a new design.......................................................................................................................... 34! 13.3! Create a new blank design................................................................................................................... 34! ! 2010-2011 TouchAware iDesign Version 1.4 User Guide 2

!7! D$'<=*'%/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%77!

13.4! 13.5! 13.6! 13.7! 14.1! 14.2! 14.3! 14.4! 14.5!

Opening an existing design .................................................................................................................. 35! Clearing a design ................................................................................................................................. 35! Removing a design .............................................................................................................................. 35! Renaming a design .............................................................................................................................. 36! Selecting the export source .................................................................................................................. 37! Setting the export size .......................................................................................................................... 37! Setting the export type ......................................................................................................................... 38! Transparent background for PNG export ............................................................................................. 38! Sharing iDesign files ............................................................................................................................ 38!

!0! F5I2(+<*=%D$'<=*'%/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%7C!

!6! 9-.PHI%D$'<=*'%/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////%7K!

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 3

1 The User Interface


The iDesign user interface is designed to provide a full screen drawing surface with menus and toolbars displayed only when needed. User interface elements which permanently take up screen space are kept to a bare minimum, toolbars and rulers can be turned on or off easily as required. 9 1 5 1
12

5 1

11 1 10

8 1 7

5 1 6 Design Board

4 1 Toolbars

1 Design Board - The content area used for drawing and editing. The board is hosted within a scrollable and zoom-able view which encloses the entire screen. 2 Message View - Top (top left for iPad) portion of the screen where context related help messages are displayed. Messages appear and disappear as and when required if context messages is set to On in Settings. 3 Measurements View - Top portion of the screen where measurement readouts are displayed. 1 The measurement readouts only appear during insert, edit or move operations. 4 Toolbox Button - Located at the bottom right corner. This button opens the toolbox which has the full set application functions organized into a set of menus and panels. 5 Toolbar Toggle Buttons - To turn the toolbar on or off. 6 Nudge Control Toggle Button To turn the nudge controls on or off
7 Nudge Controls - Allows accurate and fine position adjustments for the selected shapes 8 Toolbars - Scrollable toolbars located around the screen edges. 9 Ruler Button - To turn the ruler on or off. 10 Rulers - A floating set of unit aware horizontal and vertical rulers which aligns with the grid

and can be moved anywhere on the screen.


11 Ruler Handle - Handle to grab and move the floating rulers. 12 Pan/Scroll Lock Button Disables or enables panning/scrolling gestures on the board

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 4

2 Toolbox
13 15 18 4

Toolbox Button Opens the Toolbox containing all the tools and functions

13 Toolbox Hosts the menus and panels 17 14 15 16

Menu Buttons For switching between top level menus Panel Buttons For switching between panels within a menu Functions

16 Panel Holds the related Tools or 17 Tool / Function buttons - To invoke the 14

functions of the app 4 1 Toolbox


18 Close button To close the toolbox

The toolbox is organized into multiple levels of menus, panels and buttons, which are displayed based on the current context. The bottom row has a set of root level menu buttons, which displays a set of panels for that menu. There are different ways to open the toolbox menu, some of them are context based and depending on the current shape selected on the board, the appropriate panel is displayed for quicker access to the required functions. Ways to invoke the toolbox menu: Using the menu button located on the bottom right corner of the screen. This will open the context menu in its default state the first time with the home panel displayed. On subsequent menu button presses, it will show the menu with the last panel which was kept open before it was dismissed. Double tapping anywhere on the empty board area This is similar to using the menu button but is quicker to access if your finger is away from the menu button and closer to an empty board area. This is especially useful on the iPad due to the larger screen and you do not need to move your hand back and forth from the main menu button. Double tapping on a shape on the board This opens the Properties panel, which is otherwise located in the tools menu. The properties panel allows you to set the shapes measurements, edit the shapes properties and quickly switch between a set of panels for setting the shapes style, color etc. Double tapping on text on the board This opens the Text edit panel, which allows you to edit the text, set the font, font size, font style and alignment.

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 5

TIP: If you are navigating to any of the sub panels in the properties menu, at any stage you can go back to the previous menu using the back button located on the top right corner in portrait mode (or bottom left corner of the menu in landscape mode on iPhone/iPod). This is very handy when you need to move back and forth between sub menus for setting different shapes attributes one after the other. Toolbox Menus & Panels Home Menu Home Board Tools Menu Tools Object Properties Menu Properties
X, Y, Width, Height Stroke Line Width, Dash Pattern, Arrow Markers, Line End, Line Cap Stroke Color & Opacity Fill Color & Opacity Custom Colors & RGB Color Mixer Select, Line, Polyline, Curve, Path, Square, Rectangle, Circle, Ellipse, Polygon, Star, Text Group, UnGroup, Raise, Lower, Top, Bottom, Rotate +/- 90, Flip Horizontal, Flip Vertical

Functions
Delete, Copy, Paste, Undo, Redo, Zoom +/-25%, Actual & Fit Board settings for Grid, Snap, Units, BoardSize & Scale

Text Edit Path Edit Layers Menu Layers BG Layer Designs Menu Designs Export Backup Info Menu Help Add-ons Settings
! 2010-2011 TouchAware

Text entry, font size, font type, font style, alignment Convert to Path, Close Shape, Add Point, Remove Point, Corner, Smooth, Symmetric, Apply To All Points

Layers List, Add, Remove, Show/Hide, Set Current, Lock/Unlock, Raise, Lower, Top, Bottom, Layer Preview Image Select Background Image, Background ON/OFF, Hi-Res ON/OFF

Designs (Files) List, Open, Add New, Save As, Clear, Delete, Lock Source, Size, Export to Photo Library, Email as JPEG, PNG, Transparent PNG, PDF, SVG (InkScape & Illustrator), Share iDesign files via Email Backup and restore, email backups, restore from email backup

Context Messages ON/OFF, Links to User Guide, Video Tutorials, Version Update Info, Support & Feedback Sample Designs Continuous Insert ON/OFF iDesign Version 1.4 User Guide 6

3 Toolbars
Toolbars provide a one touch access to many of the commonly used tools and functions which are also available through the toolbox menu interface. All the toolbars are scrollable and can be turned ON/OFF easily using the toolbar toggle buttons.

1 1 5 4

3 OR 4

Toolbars on iPad
1

Toolbars on iPhone / iPod


3

Tools Toolbar Select Line Polyline Curve Path Square Rectangle Circle Ellipse Polygon Star Text

Edit Toolbar Delete Copy Paste Undo Redo Zoom +25% Zoom -25% Zoom Actual Zoom Fit

Functions Toolbar Group Ungroup Explode Join Rotate +90 Rotate -90 Flip Horizontal Flip Vertical Raise Lower

Path Edit Toolbar Convert To Path Close Shape Open Segment Add Point Remove Point Break At Point Weld At Point Corner Point Smooth Point Symmetric Point Straight Segment Curve Segment

Colors Toolbar Fill Color Stroke Color

Raise to Top

Fill Color & Stroke Color Toggle Button


iDesign Version 1.4 User Guide 7

! 2010-2011 TouchAware

4 Board Settings
Menu ! Home ! Board panel
1 Grid Settings Opens the grid settings panel 2 The grid switch turns the grid on or off

Snap Settings Opens the snap settings panel


1 2

The snap switch turns on or off all the different kinds of snap in snap settings
3 Units Opens a list of standard units to specify

3 4 1

the one used for the design


4 Board Size & Scale Opens the board size and

scale settings panel for specifying predefined or custom board size and set a drawing scale

All the drawing board related settings which include Grid, Snap and Drawing Scale are done using the Board panel.

4.1 Setting the Grid


Menu ! Home ! Board panel ! Grid
1 Grid To Rulers - Turn this switch ON to align

the grid to the rulers. Turning it OFF will enable custom grid settings
1 2 2 Grid Size Use the slider or tap on the value

field to enter the grid size by keyboard. Value range is 0 to 100 points (or converted units)
3 Separator Steps A value between 0 to 10 for

the thicker grid line separators

The grid can be turned ON or OFF using the Grid Switch. Selecting the Grid item on the board panel will open the Grid Settings panel. Grid settings are units and drawing scale aware.
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 8

4.2 Setting the Snap


Menu ! Home ! Board panel ! Snap
1 Snap To Grid - Turn this switch ON to set the

snap to the grid. Turning it ON will disable custom snap settings


2 Custom Snap Turn this switch ON to enable 1 2 3 4 5

custom snap setting. Turning it ON will disable Snap To Grid


3 Snap Size Use the slider or tap on the value

field to enter the snap size by keyboard. Value can be a decimal


4 Object & Point Snap When ON, automatically

snaps on to points and end points of objects


5 Rotation Snap When ON, rotating using the

rotation handle rotates in one degree increments

Snap can be turned ON or OFF using the Snap Switch. Selecting the Snap settings on the board panel will open the Snap Settings panel. Snap setting is units and drawing scale aware. When object & points snap is ON, a red cross mark indicator is displayed when object or point snap is activated to indicate that the object or point has snapped onto an adjacent object or point. TIP: Turn ON Snap for drawing accurately in fixed steps/increments. This is extremely useful in drawing precise or To-Scale drawings. Turn Snap To Grid off for free flow art work drawings.

4.3 Setting the Units


Menu ! Home ! Board panel ! Units

The default units for a new design in the iDesign coordinate system is in Points. This can be changed for any Design to one of the supported units. Points (pt) Inches (in) Feet (ft) Millimeters (mm) Centimeters (cm) Meters (m)

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 9

iDesign displays shapes in real unit measure on the display of the device (iPhone/iPod and iPad) based on its DPI. On 1:1 zoom for a unit setting in centimetres, a line of 2 centimeters will be exactly 2 centimeters if you measure it with an external ruler on the device screen. The rulers, grid and snap all are unit aware. Setting or changing the units will affect all the measurement related display and input fields (X,Y, Width, Height etc) but will not change the internal representation of the points in the design and can easily be changed back to another unit. If the Unit setting is changed, the measurement display/input values will be converted based on the change. Example1: Points to Centimeters For a Drawing Size of 480x320 with a Square at location (100,100) of size (100x100) if the units is changed from Points to Centimeters, The measurement readouts and values in the properties menu for the location of the square will be (1.56, 1.56) and size (1.56 x 1.56) calculated based on the conversion for Points to Centrimeters for the specific device DPI. Example2: Inches to Centimeters For a Drawing Size of 480x320 with a Square at location (1,1) of size (1 x 1) if the units is changed from Inches to Centimeters, The measurement readouts and values in the properties menu for the location of the square will be (2.54, 2.54) and size (2.54 x 2.54) calculated based on the conversion for Inches to Centimeters which does not involve any device specific calculation.

4.4 Setting the Board Size & Drawing Scale


Menu ! Home ! Board panel ! Board Size & Scale ! Drawing Scale
1 Board Size Opens the board size options

panel
2 Custom Width & Height Enabled when Board 1 2 3 4 5

Size options is set as Custom


3

Drawing Scale A multiplier applied to the board size for all measurement display and input fields. Useful to setup very large drawing limits to scale. applicable if a predefined board size is selected

4 Landscape Set landscape or portrait, only 5 Apply board size changes Applies the

changes to the current design

iDesign uses a unit aware coordinate system with an extendable board size and Drawing Scale setting for setting the drawing limits as required. Board Size A set of standard board sizes options are available for convenience (iPhone, iPad, A0 to A5, B4,
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 10

B5, Letter, Legal, Tabloid). You can also set a custom board size (capped at 1 million) as your Board Size. Board Size is set in the selected units. Note that Board Size is not Drawing Size, Drawing Size = Board Size x Drawing Scale. Changing the board size for a design: 1. Open the Menu ! Home ! Board panel ! Board Size & Scale ! Board Size 2. Select a predefined board size from the list of available board sizes or Custom for specifying a custom board size 3. If the custom board size option is selected, Width and Height fields are enabled. Enter the required Width and Height using the keyboard available by taping on the field. Press the Done button on the keyboard after entering the values. 4. Note the new Drawing Size values displayed based on the new Width and Height. 5. Press the Apply board changes button to apply the new board size to the design

TIP: For very large unit based drawings like large floor and site plans, you may need to try different approaches of setting Scale as 1:1 or using a scale multiplier. The scale setting will affect the measurement and ruler display. Drawing Scale A Drawing scale can be set separately from Board Size. Default drawing scale is 1.0. Setting or changing the Drawing Scale will affect all the measurement related features of the coordinate system, display and input but will not change the internal storage values. Values stored by iDesign internally will always be at Scale 1.0 Examples: Setting a Drawing Scale of 0.1 will turn an iPad Board Size of 768 x 1024 to an effective Drawing Size of 76.8 x 102.4 Setting a Drawing Scale of 10.0 will turn an iPad Board Size of 768 x 1024 to an effective Drawing Size of 7680 x 10,240 All the measurement readouts, X, Y, Width, Height settings, Grid and Snap values reflect the changes on the drawing scale. To set a custom drawing scale: 6. Open the Menu ! Home ! Board panel ! Board Size & Scale 7. Touch on the Drawing Scale value field to enable the keyboard 8. Enter the required drawing scale and press the Done button on the keyboard 9. This will set the new value as the drawing scale

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 11

5 Zooming & Panning


The drawing content area supports unlimited zooms. The board can be zoomed using the pinch zoom method, which is standard way to zoom on the iPhone, iPod and iPad. Preset zoom options are also available in the Tools menu. Pinch zoom Touch down two fingers on the drawing area and move the fingers apart while to increase the zoom. Move the fingers towards each other to decrease the zoom. Zoom presets Presets for +25%, -25%, Actual size and Fit are available in the Tools menu. The Actual size option is particularly useful to bring the board back to the original size. Fit can be used to show the whole board to fit onto the screen. The zoom presets are available at: Menu ! Home ! Home Panel ! Zoom preset buttons +50%, -50%, Actual, Fit TIP: The pinching gesture needs to be started as soon as both your fingers touch down on the surface, otherwise it will move the shapes which come under the fingers instead.

6 Drawing
6.1 Inserting shapes
Menu ! Tools ! Tools Panel ! Select a shape to insert OR Tools Toolbar (Located at the left of the screen) ! Select a shape to insert

1 Drawing Tools All the tools are also available

in the Tools Toolbar


2 Number of Sides buttons + and - buttons 1

to specify the number of sides for polygon and star shapes

The following general steps describe how to insert a shape. 1. Select a shape tool from the tools panel OR toolbar 2. A message will appear on the message view area with a tip on how to insert the shape based on the tool selected. If context help is set to Off in Settings this message will not be displayed.
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 12

3. Touch down and hold for a second, then drag out to any direction 4. The shape will now be inserted and will begin resizing based on your drag action 5. While dragging, the measurements area will show the X, Y, Width and Height of the shape being inserted and resized 6. Once you have the right size for the shape stop dragging and lift up your finger to finish TIP: When you touch down your finger to insert the shape, touch down and hold for a second before you drag so that it is not the gesture for scrolling/panning the board. Touching down and immediately dragging will become a swipe gesture for scrolling/panning the board. Specific steps need to be followed based on the tool selected: Line Tool Touch and drag to insert the line, lift up your finger to finish. Polyline Tool Touch and drag to insert the first segment, lift up your finger to finish the first segment. Touch down again and drag to insert the second segment, lift to finish the segment. Repeat this for as many segments required. Double tap to end the polyline. Curve Tool Touch and drag to insert the first point and its control point. Touch and drag again to specify the second point and its control point. Path Tool Touch and drag to insert the first point and its control point. Touch and drag again to specify the next point and its control point. Repeat this for more points. Double tap to finish drawing the path OR double tap on the first point to close the path and finish. Square, Rectangle, Circle, Ellipse Tools Touch and drag to insert the shape, lift your finger to finish. Polygon, Start Tools Touch and drag to insert the shape, lift your finger to finish. Note that the number of sides for the shape is based on the selection using the + and - button in the Tools panel.

TIP: You can move the previous points (and control points) when you are drawing a polyline, curve or a path even before completing it. This can be very handy when drawing complex polylines or paths. You can also undo/redo previous points before completing a polyline or path. Continuous Insert Menu ! Info ! Settings Panel ! Continuous Insert ON/OFF Switch Turning the continuous insert setting ON will keep the selected tool active and enables you to insert shapes continuously in succession without switching to select mode. This is required only when you need to insert many similar shapes using the same tool. When using this option, you have to explicitly switch to the Select tool for moving, resizing or editing shapes.

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 13

6.2 Inserting and editing text


Menu ! Tools ! Tools Panel ! Select the Text button OR Tools Toolbar (Located at the left of the screen) ! Select Text tool button

1 Text Entry Field To enter and edit text for the

selected text shape. Supports standard cut-copy and auto correction features
1 2 3 4 5 3 2 Font Size Can be specified using the slider or

by keyboard. Touch on the numeric field for keyboard entry Font Type Select from a list of fonts available on the device selected font type
5 Alignment Horizontal alignment options for

4 Font Style A list of available styles for the

Left, Center and Right alignment

To insert text: 1. Select the Text button 2. A message "Touch and drag to insert shape" should now appear on the message area and the design mode indicator on the right corner will have a text insert mode icon. Note that the message is displayed only if context help is switched on in Settings 3. Touch down anywhere on the board and drag your finger just like you insert a rectangle, when you lift your finger, a text box with a default text "[Text] and a dashed outline for the bounding box will be inserted on the board 4. To change the text, double tap on the text box, which will then open the Text Edit panel for you to enter the text and change its properties (font, size, style, alignment)

6.3 Selecting shapes


Both single and multi-selection are supported. Selecting a shape: Shapes can be selected by touching on them Shapes with a fill color can be selected by touching anywhere on the shape Shapes without a fill color can be selected by touching on the line/path only When a shape is selected, it will have four grey pegs located at the four corners To unselect a shape, touch outside on the empty board area
iDesign Version 1.4 User Guide 14

! 2010-2011 TouchAware

TIP: Give a one second gap after you touch and lift your finger on the empty board area to unselect as this is the time to differentiate between double tap for opening menus and single tap for unselecting.

1 2

Single Selection (touch)

Multi Selection (drag rectangle)

Selection Handles Indicates that the enclosed shape or set of shapes are selected. Moving the handles will resize the shape in the corresponding direction. Selection handles are positioned outside the shapes bounding box so as to not obstruct the view of the shape while resizing when the touch finger is over the handle when moving it

2 1

Bounding Box Shows the bounding box of the shape, useful for indicating and aligning rotated shapes

To select a single shape touch anywhere on the shape or inside the shapes fill area to select the shape. If the shape does not have a fill set on it you need to touch anywhere on the line or path segment of the shape to select it.

To multi-select shapes there are two methods - steps below: Method 1 Multi-touch selection 1. Touch on the first shape 2. With the finger down on the first shape, touch another shape with another finger, this will multi select two or more shapes 3. Repeat this for selecting more shapes Method 2 - Multi selection by touching and dragging on the board 1. Touch and hold your finger down on the empty board area anywhere near the shapes
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 15

2. Drag your finger over the shapes to be selected, a semi transparent grey rectangle will indicate the drag over area while you are dragging 3. The drag area rectangle should cover the shapes to be selected, the shapes which are partially inside with at least one point (edit point) inside the drag area will also be selected 4. Lift up your finger to finish the selection, all the shapes inside the drag area will now be selected in a single selection frame with grey pegs on the corners

TIP: Method 2 selects and holds all the contained shapes in a single selection frame allowing all the contained shapes or groups to be resized, rotated or moved as a single entity.

6.4 Moving shapes


To move a shape: 1. Select the shape (Refer Selecting shapes) 2. Touch down anywhere on the shape and drag the shape to a new location 3. Lift up your finger to complete the move All the selected shapes are moved together if multiple shapes are selected. (Refer Selecting shapes on how to select multiple shapes)

TIP: iDesign implements true multi touch which allows you to drag different shapes with different fingers/touches simultaneously. You can move a shape with one finger while another shape is being moved with a different finger. This multi touch mechanism is applicable for resize as well.

1 Nudge Control Toggle Button Turns the

nudge controls on or off


2 Nudge Controls For precise and fine

adjustments to position the selected shapes. The four arrow buttons allow precise movements in four directions to position the selected shapes
3 Nudge Level button Allows to set 1 pixel

3 2 1

or 2 pixel unit movements when snap is off and 1xSnap or 2xSnap units when snap is on

To make fine adjustments you can use the nudge controls for moving the selection in any of the left, right, top or bottom directions using the nudge control arrow buttons.

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 16

6.5 Resizing shapes


To resize a shape: 1. Select the shape. Four grey pegs will appear at the corners when a shape is selected 2. Touch down on any peg and pull in the direction you want to resize the shape 3. Measurement readouts will appear at the top of the screen indicating the location, height and width of the shape while you are resizing the shape 4. Lift the finger when you are done resizing the shape A multi selection can also be resized using the same method.

6.6 Rotating shapes


Shapes can be rotated using a multi touch gesture or using the rotation handle.

Rotation Handle

Rotation Center Handles

Rotation Handle Allow easy one touch rotation for selected shapes Rotation Handles can be swithed on or off with the setting Menu ! Info ! Settings ! Rotation Handle Switch

2 1

Rotation Center Handles Allows moving and setting the center for rotation

To rotate a shape using the rotation handle, select the shape or multi-select a set of shapes and touch on the red peg which is the rotation handle and turn. To rotate a shape using multi-touch gesture: 1. Select the shape
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 17

2. Touch down two fingers at the same time on the shape and hold for a second 3. Twist and turn the two fingers in the direction you want the shape to be rotated 4. Lift the fingers when you are done rotating the shape Shapes can also be rotated using rotation presets in 90 degree increments using the tools menu Menu ! Tools ! Object panel ! R +90 or R -90

7 Basic Edit Functions


1 Edit Functions Delete, Copy, Paste, Undo &

Redo. All options are also available from the Edit Toolbar
1 2 2 Zoom Presets +25%, -25%, Actual and Fit

options. All options are also available from the Functions Toolbar

7.1 Removing shapes


Menu ! Home ! Home Panel ! Remove button. OR Edit Toolbar (Located at the top of the screen) ! Remove button. Remove Removes the selected shapes from the board. Remove does not copy the shapes to the clipboard. To copy you need to explicitly use the Copy button.

7.2 Copy & Paste


Menu ! Home ! Home Panel ! Copy & Paste buttons. OR Edit Toolbar (Located at the top of the screen) ! Copy & Paste buttons. Copy Copies the selected shapes to the clipboard, which can then be pasted back onto the board using Paste. Paste Pastes the shapes previously copied onto the clipboard. NOTE: Shapes need to be selected before using Cut or Copy. Refer to the section Selecting shapes on how to select shapes
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 18

7.3 Undo / Redo


Menu ! Home ! Home panel ! Undo / Redo buttons OR Edit Toolbar (Located on the top of the screen) ! Undo / Redo buttons Undo reverses the last action performed Redo reverses the last undo operation A multi level undo/redo stack is maintained by iDesign from the time you started the current session. You can undo / redo an unrestricted number of steps (based on available device memory) back to where you stared the current session. The undo/redo stack is cleared when a new session is started in the following cases: When a new design is created or opened When the app is exited When the current design is cleared using the Clear button in Designs ! Design Details panel

Layer operations also have undo/redo support.

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 19

8 Shape Properties
The properties panel is displayed by double tapping on a shape.
8 9 1 Location Fields Display and entry fields for

X and Y locations for the selected shape


2 Width and Height Fields Display and entry

fields for width and height of the selected shape


1 3 2 3 Rotation Field Display and entry field for

rotation angle for the selection


4 5 4 Reset Bounding Box Button to reset the

selections bounding box to zero rotation


5 Sub panel buttons Opens panels for setting

Style, Pen, Fill colors


7 6 6 Edit Points Switch to make the points of the

selected shape editable


7 Aspect Ratio Switch to make the shape

maintain its aspect ratio when resizing


8 Text Edit Opens text edit panel with text

entry and style options for selected text shape


9 Path Edit Opens path edit panel with options

8.1 Applying style attributes

to close a shape, convert to path and set control point types

Menu ! Properties ! Properties panel ! Stroke button ! Stroke panel


1

Line Width Stroke width for the selected shape set by the slider or touch on the number to enter by keyboard. Line Style - A set of 6 standard and commonly used dash patterns are available Arrow Markers Type of Arrow on the line ends based on the line width or None Line End Butt cap, Square cap or Round cap Line Join Miter join, Bevel join or Round join Properties Back Button To switch back to the properties panel

1 2

3 3 4 4 5 5 6

Select the shapes and double tap on any one of the shapes to open the properties panel directly. The stroke panel options allow you to set the line width, line style (pattern), Start and end arrow markers, line end and line join style.
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 20

8.2 Applying colors


The Stroke, Fill and Mixer panels are opened from the main properties panel.

Stroke Color

Fill Color

Color Mixer

Fill colors and Line colors are set separately. Colors can be set using the predefined color swatches or specified by RGB values using the color mixer. Select the shapes and double tap on any one of the shapes to open the properties panel directly. To set the fill color using the color panel (swatch palette): Menu ! Properties ! Properties panel ! Fill button ! Fill panel ! Select the required color OR Color Toolbar (Located on the right side of the screen) ! Toggle to Fill mode ! Select the color To set the fill color using the RGB mixer panel: Menu ! Properties ! Properties panel ! Mixer button ! Mixer panel 1. Select an empty color cell from the first row of blank cell buttons (Color 1 to Color 4) on the mixer panel 2. Move the sliders for each of the RGB values to mix the required color then press the Mixer to Object button to apply the fill color to the selected shape The mixer panel is shared between the Fill and Line colors. Colors mixed from the Fill ! Mixer panel will appear in Pen ! Mixer for Pen/Line colors To set the line color using the Pen panel (swatch palette): Menu ! Properties ! Properties panel ! Pen button ! Pen panel ! Select the required color OR Color Toolbar (Located on the right side of the screen) ! Toggle to Pen mode ! Select the color

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 21

TIP: You can switch between the Color toolbar between Fill and Stroke(Pen) mode using the first button in the Color Toolbar. The opacity of the fill or stroke color can be set using the opacity slider on the Fill or Pen panel. Opacity is set in a range of 0 to 100, 100 being fully opaque and 0 fully transparent. Picking object colors and transferring panel colors to the mixer: - To pick colors from existing objects using the Object To Mixer Button. - To transfer colors from the fill panel to the mixer use the Fill to Mixer Button. This option can be used to make variations based on the predefined colors in the fill panel.

9 Point & Path Editing


Double tap on a shape to open the properties menu, then select the Path Edit panel for points and path editing options. 1 Convert, Close, Open Convert option converts the selected shape to a path, Close option closes an open shape, Open option open the shape at selected segment.
1 3 5 2 2 Add / Remove point The + option adds

4 6

a new point in the middle of the selected segment. The - option removes the selected point.
3 Corner, Smooth & Symmetric Options to

set the selected shape points control point movements as corner, smooth or symmetric
4 Apply To All Switch to apply Corner,

Smooth or Symmetric setting to all of the selected shapes points


5 Line, Curve Convert the selected segment

from line to curve or curve to line


6 Break, Weld Break the shape at the

selected point or Welds two shapes together at selected end point

9.1 Editing shapes points


Double tap on the shape to open the Properties panel ! Edit Points switch ! Turn ON the switch A shapes points can be moved independently by turning ON the Edit Points setting. Note that this setting is separate for each shape. The switch is disabled if a shape is not selected. Selecting and editing a shape which has Edit Points set as ON: 1. The first touch on the shape selects the shape and Selection and Resize Pegs (grey pegs) at the corners appear
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 22

2. Double tapping on the shape will change it to edit mode enabling the edit points Individual points of the shape can now be moved 3. A further double tap on the shape will open the properties panel for setting or changing any of the shapes properties Note that when the Edit Points switch is turned on, the shape is directly changed to edit mode.
1 Shape Point Edit points for the shape

have a blue peg and when selected have a red peg at its center
1

2 Offset Handles Four offset handles

around a selected edit point allows positioning the point without obscuring the view when moving with the finger
2

Double tap on a shape with edit points enabled to switch from selection mode to point edit mode Use offset handles to precisely position points without obscuring the view while moving it Turn offset handles on or off with the setting Menu ! Info ! Settings ! Offset Handles Switch

9.2 Adding and removing points


Double tap on the shape to open the Properties panel ! Path Edit ! + Points or - Point button To add a point: 1. Select the shape 2. Double tap on the shape to change to edit mode If Edit Points switch is not ON, turn this ON (Refer section Edit shapes points) 3. Select the line segment on which you want to add a new point To select the line segment, single tap on the line between any two points on the shape. Both the end points for the segment will change from Blue to Red when the line or path segment is selected 4. Double tap again on the line segment this will open the properties panel 5. Press the + Point button in the properties panel this will insert a point at the middle of the line segment 6. You can now move the new point to the required location
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 23

To remove a point: 1. Select the shape 2. Double tap on the shape to change to edit mode If Edit Points switch is not ON, turn this ON (Refer section Edit shapes points) 3. Select the point to be removed by single tap on the point. The point will change from Blue to Red 4. Double tap on the point to open the properties panel 5. Press the - Point button in the properties panel this will remove the point

9.3 Closing an open shape


Double tap on the shape to open Properties panel ! Path Edit ! Close button Open multi line shapes and open paths can be closed using the Close button.

9.4 Converting a shape to a path


Double tap on the shape to open Properties panel ! Path Edit ! Convert button Converting a shape to a path changes it to a Bezier curve with control points for each point. Any shape can be converted to a path Converting to path adds control points for each point in the shape End points will have only one control point each Inner points will have two control points each

9.5 Editing control points on a path


Control points can be moved to alter the structure of the shape/path. 1. Select a shape 2. If the shape is not a path, convert it to a path (Refer Converting a shape to a path) 3. Double tap on the shape to show the edit points. If edit points are not visible, in the Properties panel turn the Edit Points switch to ON 4. There will be two control points for each of the shapes inner points and single control point for the end points. These control points are only visible when you touch on the shapes point. Control points have a black square handle and a grey peg appears when you touch on them. 5. You can move the control points to curve the shape at each point/segment

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 24

To make a shapes point a Corner, Smooth or Symmetric point: 1. 2. 3. 4. Select the shapes edit point When a shapes edit point is selected, its selection color changes from blue to red with a grey circular region around it Double tap on the point to open the Properties panel ! Path Edit ! Corner / Smooth or Symmetric button To make all the edit points in a shape the same type, turn on the Apply To All switch in the Path Edit panel before you press the Corner/Smooth or Symmetric button.

Corner Point - Setting a shapes edit point as a corner point makes the control points freely moveable in any direction with a sharp corner between the joining segments Smooth Point - Setting a point as smooth makes the control points constrained so as to be opposite to each other but freely move to any distance away from the edit point Symmetric Point - Setting a point as a symmetric point makes the control points constrained to move in a symmetrically opposite manner maintaining the same distance as the other from the shapes edit point

9.6 Straightening or curving a segment


Individual segments in a shape or path can be selected and they can be curved or straightened. Double tap on the shape to open Properties panel ! Path Edit ! Line or Curve buttons To straighten a path segment: 1. Select the segment by touching on the segment. Both end points will be highlighted in red 2. Select the Line option in the Path Edit menu or toolbar 3. The control points for the segment will be removed and the segment will become a straight line segment

To curve a line segment: 1. Select the segment by touching on the segment. Both end points will be highlighted in red 2. Double tap on the segment to open the properties panel and press the Curve button in the path edit panel OR press the Curve button in the path edit toolbar 3. Control points for the segment will be added. 4. Touch on any of the segment end points and the control point (with black square handles) will become visible. 5. You can now move the control points at the segment end points to curve the segment

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 25

9.7 Break apart or weld shapes together


Shapes can be broken at a selected point or segment. They can be welded together at the end points if the end points are close to each other. Double tap on the shape to open Properties panel ! Path Edit ! Break or Weld buttons To break a shape at the selected point: 1. Select the point at which you want to break the shape or path. The selected point is highlighted in red 2. Double tap on the point to open the properties panel and press the Break button in the path edit panel OR press the Break button in the path edit toolbar 3. The shape will now be broken and split into two distinct shapes with one of them selected

To break a shape at the selected segment: 1. Select the segment which you want to break out. The end points of the selected segment are highlighted in red 2. In the Properties ! Path Edit panel press the Break button OR press the Break button in the path edit toolbar 3. The segment will now be broken out of the shape

To weld two shapes at the selected end point: 1. Position the shapes such that the end points which are to be welded are close to each other 2. Select any one of the shapes end point at which you want to weld the shapes together 3. Double tap on the point to open the properties panel and press the Weld button in the path edit panel OR press the Weld button in the path edit toolbar 4. The shapes will now be welded together at the point to form one single shape

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 26

10 Object Functions
Group Groups together the selected shapes UnGroup UnGroups the selected group R+90, R-90 Options to rotate the selected shapes/groups by +/- 90 degrees Raise, Lower, Top, Bottom Changes the z-order of a shape by bringing it to the front or back, top or bottom FlipH, FlipC Flips the selected shapes/groups horizontally or vertically Explode, Join Explode creates separate shapes for each segment, Join successively welds all the shapes aligned at end points in the selection to form a single shape

10.1 Grouping and un-grouping shapes


Menu ! Tools ! Object panel ! Group or UnGroup buttons OR Functions Toolbar (Located at the bottom of the screen) ! Group or UnGroup buttons Shapes can be grouped hierarchically to create complex objects. To group a shape: 1. Select the shapes to be grouped Refer to the section Selecting shapes for selecting multiple shapes 2. Use the Group button to group the shapes together Grouped shapes will have a common set of 4 selection pegs, the individual shapes within a group cannot be selected separately unless the group is UnGrouped 3. You can now select and move the group just like a shape. Most of the operations done on the shape (resize, rotate, flip etc.) can now be done on the group A group can be further grouped with other shapes or groups (hierarchical groups) To un-group a group: 1. Select the group to be un-grouped 2. Use the UnGroup button to un-group the group The shapes will now be ungrouped with each sub shape or group having its own 4 selection pegs Note that for hierarchical groups, only the shapes and groups one level below the current group is ungrouped to maintain the hierarchical grouping
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 27

3. The grouping will now be removed can you can now select individual shapes

10.2 Explode or Join shapes


Shapes can be exploded into individual segments, each segment to be a separate shape. They can be joined together at end points if the end points are close together. Double tap on the shape to open Tools panel ! Tools ! Explode or Join buttons OR Use the Explode or Join buttons on the tools toolbar at the bottom of the screen To Explode a shape: 1. Select the shape 2. Double tap on the shape to open the menu, press the Explode button in the Tools menu OR press the Explode button in the tools toolbar 3. The shape will now be broken and split into separate shapes, each segment will be a separate shape

To Join multiple shapes aligned at end points: 1. Position the shapes such that the end points which are to be welded are close to each other 2. Select all the shapes to be welded together 3. In the tools menu panel press the Join button OR press the Join button in the tools toolbar 4. The shapes will now be joined together to form a single shape with each overlapping end point welded together with the nearby shapes end point

10.3 Changing the z-order of shapes


Menu ! Tools ! Object panel ! Raise, Lower, Top, Bottom buttons OR Functions Toolbar (Located at the bottom of the screen) ! Raise, Lower, Top, Bottom buttons Shapes can be created and placed on top of other shapes. The order of the shapes which determine which shape is higher in the stack is referred to as its zOrder. No two shapes can have the same zOrder. One is always over the other when it overlaps. To raise or lower a shape, select the shape and press the Raise or Lower buttons in the tools panel. When there are many overlapping shapes, for raising a shape to the top use the Top button in the tools panel or for lowering the shape to the bottom use the Bottom button.

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 28

10.4 Flipping shapes


Menu ! Tools ! Object panel ! Flip H - for flipping shapes horizontally Menu ! Tools ! Object panel ! Flip V - for flipping shapes vertically OR Function Toolbar (Located at the bottom of the screen) ! Flip-H and Flip-V Buttons Flipping shapes is the same as mirroring shapes across X or Y axis with the origin as the shapes center itself.

11 Layers
Menu ! Layers ! Layers panel

3 1 4 1 1 2 1 1 5 1 6 1 7 1

9 10 1 11 12

8 1

1 2 3 1 4 5 6 7

Visible Layer A green button indicates a visible layer Hidden Layer A grey button indicates a hidden layer Add New Layer The + button opens a panel to add a new layer Current Layer A tick mark Indicates the current layer Layer Item Opens the layer item panel for all the layer options Locked Layer A lock icon Indicates the layer is locked and cannot be edited Layer preview Preview image of the shapes which are part of the layer

8 Order buttons Raise, Lower, Top, Bottom options to change the layers z-order 9 Layer ON/OFF Switch to set a layer as visible or hidden 10 Lock/UnLock Toggle button to Lock or UnLock a layer 11 Set Current Sets the selected layer item as the current layer 12 Delete Removes a layer. You can also swipe right on the layer list to delete a layer

Shapes can be organized into different layers. A layer can be visualized as a separate transparent sheet on the board which holds a set of shapes.
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 29

Multiple layers can be created to organize the design logically Each layers visibility can be turned ON or OFF Each layer can be locked or unlocked, locked layers are not editable There is always a layer which is identified as the current layer, this layer can be set Any new shape created or pasted on the design will be located on the current layer You can move and edit shapes on other visible layers Layers can be raised or lowered, raising or lowering a layer will bring all the objects on the layer to the front or back depending on the zOrder of the layers

TIP: Turning off unused layers will boost the rendering and editing performance

11.1 Adding a new layer


Menu ! Layers ! Layers panel ! + button To add a layer: 1. Use the Menu ! Layers ! Layers panel ! + button to open the Add New panel 2. The Layer Name text field is auto populated with a new layer name of the format Layer N where N is the number of layers + 1 3. To change the default layer name, touch on the Layer Name text field for the keyboard to appear and enter the name, press Done on the keyboard when finished entering the name 4. Press the Add button to create the new layer 5. The new layer will now appear at the top of the list in the layers panel and will also be set as the current layer as indicated at the bottom caption in the layers panel

11.2 Removing a layer


Menu ! Layers ! Layers panel ! Select the layer in the list ! Delete button You can remove a layer using the Delete button in the layer sub panel which is shown when selecting a layer item in the layers list. Layers can also be deleted by swiping to the right on the layer item in the layers list which will show a Delete button on the list item. Removing a layer sets the layer right below the removed layer as the current layer. If there is only one layer in the list, Delete is disabled as there is a minimum of one layer for a design.

11.3 Inserting shapes on a layer


New shapes inserted or pasted on the board automatically belong to the current layer. Refer Setting a layer as the current layer for changing/setting the current layer.
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 30

11.4 Showing & hiding layers


Menu ! Layers ! Layers panel ! Select layer ! ON/OFF switch An icon at the start of each layer item in the layers list shows the visibility of the layer. The inner portion of the icon has a green color if the layer is set as visible or grey color if it is hidden. To show or hide a layer: 1. Open the layers panel - Menu ! Layers ! Layers panel 2. Select the layer this will open a sub panel with the settings/options for the layer 3. Turn the ON/OFF switch to show or hide the layer Note that the current layer cannot be turned off. To turn off the current layer, you need to set another layer as the current layer. If there is only one layer in the design, it cannot be turned off.

11.5 Setting a layer as the current layer


Menu ! Layers/Board icon ! Layers panel ! Select layer ! Set Current button To set a layer as the current layer: 1. Open the layers panel - Menu ! Layers/Board icon ! Layers panel 2. Select the layer this will open a sub panel with the settings/options for the layer 3. Press the Set Current button to set the layer as the current layer The Set Current button will be disabled if the layer is already the current layer

11.6 Locking a Layer


Menu ! Layers ! Layers panel ! Select layer ! Lock/Unlock button If a layer is locked, a lock icon will be visible on the layer item in the layers list. To show or hide a layer: 1. Open the layers panel - Menu ! Layers ! Layers panel 2. Select the layer this will open a sub panel with the settings/options for the layer 3. Lock or Unlock a Layer using the Lock/UnLock button Note that the current layer cannot be locked.

11.7 Renaming a layer


Menu ! Layers ! Layers panel ! Select layer ! Touch on the title / layer name

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 31

Touching on the layer title in the layer detail panel will show the keyboard and enable editing to make changes to the layer name

11.8 Changing the order of layers


Menu ! Layers ! Layers panel ! Select layer ! Raise, Lower, Top, Bottom buttons Any layer can be brought to the front of another layer or sent under another layer. To raise or lower a layer, select the layer in the Layers list to open a sub panel for the layer settings and press the Raise or Lower buttons. When there are many layers, for raising a layer to the top use the Top button or for lowering the layer to the bottom use the Bottom button.

12 Setting a Background Image


Menu ! Layers ! BG Layer panel
1 BG Image Thumbnail The thumbnail

image of the selected background image


2 Select Background Image Button to

3 1 1 1 2 1 4 1

open a list of images from the photo album to select as the background image
3 Background ON/OFF Switch to turn on

or off the background


4 High Resolution Switch to set the

background image on full resolution or low resolution for faster performance

A background image can be set from the photo library, which will be laid under the grid. This feature is intended for tracing, copying or marking raster images. To set a background image: 1. Open the BG layer panel - Menu ! Layers ! BG Layer panel 2. Press the Select Background Image button opens the photo library folder or the camera roll 3. Select the required image to be set as background by touching on it 4. A loading indicator will appear. Wait for few seconds for the image to be imported 5. Once the image is loaded, the thumbnail of the image will be visible on the panel 6. Turn ON the Background switch to enable the background image under the grid
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 32

The High Resolution button sets a full resolution image as the background for tracing at higher zoom levels. Low resolution is still good for tracing at normal and lower zoom levels. TIP: Raster images takes up memory and affects performance. Turn off the High Resolution switch when you are doing excessive scrolling and zooming with the background OFF for better performance. Turn it ON only when you are doing intricate tracing. Turn OFF the Background image when you are done tracing for performance reasons.

13 Designs
Menu ! Folder ! Designs

3 1
6

1 1

4 1

7 8

2 1

5 1

1 2 3 1 4 5 6 7

Design List Item Opens the design details panel for the design Current Design Indicator Caption indicates the current open design Add New Design The + button opens a panel to add a new design Design Preview Preview thumbnail image of design Design Lock Disable editing by turning the switch off to lock the design Open Automatically saves the current design and opens the selected design Clear Removes all the shapes in the current design

8 Delete Removes a design. You can also swipe right on the designs list to delete a layer

Designs is the equivalent of files and holds all the iDesign drawings. The Designs menu allows you to create and manage your designs. The designs panel shows a list of all your designs. This is a scrollable list of design names and any design can be selected. Selecting a design will open a sub panel with a design thumbnail and options for opening, clearing, locking or deleting the design.

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 33

13.1 Automatic save & crash recovery


Designs are automatically saved. Even in the event of a crash, designs are saved to the point right before the crash. The very first time when the iDesign app is launched, a blank un-named design is loaded. This design does not appear in the designs list at Menu ! Folder ! Designs till the design is saved as a new design using Menu ! Folder ! Designs ! + button ! Save As New Design button. Any drawings done on the initial unsaved design is auto saved temporarily, the design needs to be permanently saved using Save As New Design otherwise in the event of a crash the unnamed initial design is cleared. On application launch, the last (current) design is automatically loaded for you to continue your work. In the event of a crash when the app is launched again, it tries to load the current design which will work fine almost all the time. If the loading of a design fails during launch (if the design is corrupted), the un-named blank design is loaded instead to prevent a cyclic launch failure.

13.2 Save As a new design


Menu ! Folder ! Designs ! + button for Add New panel ! Save As New Design button To save the current design as a new design: 1. Open the Add New panel using Menu ! Folder ! Designs ! + button for Add New panel 2. A default design name is automatically created. To change this name, touch on the design name field to enable the keyboard. Press the Done button on the keyboard when you have finished entering the new name 3. Press the Save As New Design button on the Add New panel to create a new design which is a copy of the current design

13.3 Create a new blank design


Menu ! Folder ! Designs ! + button for Add New panel ! New blank design button To create a new blank design: 1. Open the Add New panel using Menu ! Folder ! Designs ! + button for Add New panel 2. A default design name is automatically created. To change this name, touch on the design name field to enable the keyboard. Press the Done button on the keyboard when you have finished entering the new name 3. Press the Select board size button on the Add New panel. 4. Select a predefined board size from the list of available board sizes or Custom for specifying a custom board size 5. If the custom board size option is selected, Width and Height fields are enabled. Enter the required Width and Height using the keyboard available by taping on the field. Press the Done
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 34

button on the keyboard after entering the values. 6. Change the Drawing Scale if required (applicable for very large drawings refer to section Setting the Board Size & Scale 7. Note the new Drawing Size values displayed based on the new Width and Height. 8. Select the Back button to go back to the Add New panel 9. Press the New blank design button on the Add New panel to create a new blank design

TIP: The default board size for a new blank design is the screen size of the device. Skip all steps after step 3 and press New blank design to create with the default size. If the device is in landscape mode, a landscape board size will be created.

13.4 Opening an existing design


Menu ! Folder ! Designs panel ! Select design ! Open button To open a design: 1. Open the Designs panel using Menu ! Folder ! Designs panel 2. Select the design in the list. This will open a sub panel with the options for the design 3. Press the Open button to open the design The current design will be closed and saved before opening the selected design

13.5 Clearing a design


Menu ! Folder ! Designs panel ! Select the current design ! Clear button To clear a design which is open: 1. Open the Designs panel using Menu ! Folder ! Designs panel 2. Find the the current design in the list and select it. This will open a sub panel with the options for the design 3. Press the Clear button to clear all the shapes in the design

13.6 Removing a design


Menu ! Folder ! Designs panel ! Select design ! Delete button OR Menu ! Folder ! Designs panel ! Swipe right on the design item ! Delete button There are two ways to delete a design: 1. Using the Delete button on the design sub panel which is shown when a design item is selected in the designs list A confirmation panel will appear with a Confirm button to delete the design permanently
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 35

2. Swiping right on the design item in the designs list, which will show a Delete button on the right of the list item

13.7 Renaming a design


Menu ! Folder ! Designs panel ! Select design ! Touch on the title / design name Touching on the design title in the design detail panel will open the keyboard and enable editing for the design title

14 Exporting Designs
Menu ! Folder ! Export
1 Transparent BG To make the background

transparent when exporting to PNG


2 Source Opens a panel with source options 1 2 3 4 5 3 Size Opens a panel to specify custom export

size options
4 Type Opens a panel to specify the export

format type
5 Export Exports the design based on the

Source, Size and Type

iDesign supports high quality export output in both raster and vector formats. The following formats are supported: Vector export formats: SVG (handles differences for Illustrator and InkScape support), PDF Raster export formats: JPEG, PNG (with or without transparent background) For JPEG & PNG, output resolutions of 1280x1920 on the iPhone and 2304x3072 on the iPad are supported. Vector format outputs (SVG & PDF) can be scaled to any resolution without any loss of clarity. Designs are exported as Email attachments. Designs can also be exported to the photo library as JPEG images. To export a design: 1. Open the design which needs to be exported (Refer Opening an existing design) 2. Open the Export panel : Menu ! Folder ! Export
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 36

3. Select the export source 4. Select the export size 5. Select the export type 6. Press the Export button and wait few seconds for the design to be exported 7. For export to Photo Library, the export menu will close after the export is done. For export via email, an email send window will appear with the exported design as attachment ready to be sent. Note that for export by email, email should be configured on your device.

14.1 Selecting the export source


Menu ! Folder ! Export panel ! Export Source There are three options available for what to export from the design: 1. Visible Layers 2. Current Layers 3. All Layers 4. Current Selection (only the selected objects on the board)

The current selection option uses the selection frame size instead of the whole board size for exporting

14.2 Setting the export size


Menu ! Folder ! Export panel ! Export Size

1 Board Size Use the designs board size as the

export size. (Capped)


2 Custom Size Enables the scale, width and 1 2 3 4

height buttons to specify a custom export size


3 Export Width, Height Display and entry fields

for export width and height


4 Scale Export scale as a % of the board size or

selection. Note: There is a cap on export size (width/height of 3072px for iPad or 2048px for iPhone/iPod) for pixel based export formats (JPEG, PNG, Photo Library). No cap applies for PDF as it is a vector format.

! 2010-2011 TouchAware

iDesign Version 1.4 User Guide 37

Designs can be exported at the board size or a custom size can be specified. To specify a custom size for export, select the custom size option in the Export Size panel. This will enable the controls for setting the scale in percentage or width and height.

14.3 Setting the export type


Menu ! Folder ! Export panel ! Export Type

Export format options 1. JPG to Photo Library 2. iDesign File (Email) 3. JPG (Email) 4. PNG (Email) 5. PDF (Email) 6. SVG (Email) for Illustrator 7. SVG (Email) for InkScape

Setting the export type decides the format and destination for export.

14.4 Transparent background for PNG export


Menu ! Folder ! Export panel ! Transparent BG switch PNG files can have a transparent background when exported if the Transparent BG switch is turned ON.

14.5 Sharing iDesign files


Menu ! Folder ! Export panel ! Export Type ! iDesign File option iDesign files can be transferred or shared between users or different devices via email. You can export a design using the iDesign File option as an email attachment. The attachment can then be opened on any device with the same or newer version of iDesign installed. To open the attachment on the other device, open the email with the attachment the attached iDesign file will be shown with the iDesign icon on it. Press and hold the attachment for an option to appear for opening using iDesign. Once the file is opened, it will be imported and added to the designs list.
! 2010-2011 TouchAware iDesign Version 1.4 User Guide 38

15 Backup Designs
Menu ! Folder ! Backup

2 1 1 1 3 1 4

1 2 3 1 4

Backup List A list of local backups with date stamps Add new backup + button to create a new backup of all current designs Restore from backup Restores the selected backup by overwriting all current designs with the designs in this backup Email backup Opens an email with this backup as attachment to send externally

Menu ! Folder ! Backup The entire set of current designs in iDesign can be backed up and restored locally or externally via Email. Multiple backups can be created locally. Use the + button on the backup menu list to create a new backup. Select a backup to open the backup details panel with options to restore or send it externally as email. Restoring from a backup replaces all the current designs with the designs in the backup The setting Allow Restore must be set to ON in Menu ! Info ! Settings ! Allow Restore to allow restoring from a backup To restore from a local backup, select the backup from the list and press the Restore from this backup option To restore from a backup in an email attachment, press the icon on the iDesign DB attachment in the Mail app and select the Open with iDesign option. This will open iDesign with a popup to restore and selecting the Restore option will erase all the existing designs and replace them with the ones in the backup. Design thumbnails are recreated only on first open for restored designs
iDesign Version 1.4 User Guide 39

! 2010-2011 TouchAware

You might also like