Professional Documents
Culture Documents
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
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!
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
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
! 2010-2011 TouchAware
2 Toolbox
13 15 18 4
Toolbox Button Opens the Toolbox containing all the tools and functions
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
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
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
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
Raise to Top
! 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
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
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.
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 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
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.
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 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.
panel
2 Custom Width & Height Enabled when Board 1 2 3 4 5
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
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
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
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
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
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)
! 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
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.
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.
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
Rotation Handle
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
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
! 2010-2011 TouchAware
8 Shape Properties
The properties panel is displayed by double tapping on a shape.
8 9 1 Location Fields Display and entry fields for
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
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
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.
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,
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
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
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
! 2010-2011 TouchAware
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
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
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
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
3. The grouping will now be removed can you can now select individual shapes
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
! 2010-2011 TouchAware
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
! 2010-2011 TouchAware
Touching on the layer title in the layer detail panel will show the keyboard and enable editing to make changes to the layer name
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
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
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.
2. Swiping right on the design item in the designs list, which will show a Delete button on the right of the list item
14 Exporting Designs
Menu ! Folder ! Export
1 Transparent BG To make the background
size options
4 Type Opens a panel to specify the export
format type
5 Export Exports the design based on the
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.
The current selection option uses the selection frame size instead of the whole board size for exporting
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
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.
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.
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