XDesign Version User Guide

Transcription

1 XDesign Version.0 - User Guide [0-09-] This document describes the XDesign user interface and provides step-by-step instructions on how to use the features in the app TouchAware XDesign Version.0 User Guide

2 Contents The User Interface... Toolbars... Properties Panels... 6 Board Settings Setting the Units, Board Size & Drawing Scale Setting the Grid Setting the Snap... 0 Zooming & Panning Drawing Inserting shapes Inserting and editing text Selecting shapes Moving shapes Resizing shapes Rotating shapes... 7 Basic Edit Functions Removing shapes Cut, Copy & Paste Undo / Redo Shape Properties Applying style attributes Applying colors Gradients Point & Path Editing Editing shapes points Adding and removing points Closing an open shape Converting a shape to a path Convert Text to Path Editing control points on a path Straightening or curving a segment Break apart or weld shapes together... 0 Object Functions Grouping and un-grouping shapes Explode or Join shapes Changing the z-order of shapes Flipping shapes Aligning shapes Boolean Operations... 8 Layers Adding a new layer Removing a layer Inserting shapes on a layer Showing & hiding layers Setting a layer as the current layer....6 Locking a Layer....7 Renaming a layer....8 Changing the order of layers... Setting a Background Image... Designs TouchAware XDesign Version.0 User Guide

3 Exporting Designs.... Sharing idesign files... SVG Import... 6 Preferences... 7 Dimension Tools Length Dimension Tool Angle Dimension Tool Dimension Settings TouchAware XDesign Version.0 User Guide

4 The User Interface Design Window Design Board - The content area used for drawing and editing. The board is hosted within a scrollable and zoom-able view. Main Toolbar A customizable toolbar with object tools and functions applied to the current selection of shapes on the board. Right click on the toolbar to customize the tools. Edit Bar Edit controls for frequently used text, style, location and size controls. Quick Access Bar - Grid and Snap on-off switches, Sidebar on-off switch. Rulers Horizontal and vertical unit & scale aware rulers which aligns with the grid. Shapes Toolbar The selection tool and a set of shape tools to draw shapes on the board. Path Edit Toolbar A set of tools for editing points, segments and paths. Properties Panels A set of buttons at the top to switch between different properties panels below for Location & size, Style, Stroke, Fill, Text, Dimension, Board and Background. Layers Panel A list view of design layers to manage and set layer properties TouchAware XDesign Version.0 User Guide

5 Toolbars 6 Shapes Toolbar Main / Functions Toolbar 7 Path Edit Toolbar Select Delete Group Convert To Path Line Copy Ungroup Close Shape Polyline Paste Explode Open Segment Curve Undo Join Add Point Path Redo Rotate +90 Remove Point Square Zoom +0% Rotate -90 Break At Point Rectangle Zoom -0% Flip Horizontal Weld At Point Circle Flip Vertical Corner Point Ellipse Raise Smooth Point Polygon Lower Symmetric Point Star Raise to Top Straight Segment Text Align Left Curve Segment Freehand Length Dimension Angle Dimension Align H Center Align Right Align Top Align V Center Align Bottom Unite Intersect Subtract Exclude Combine Separate 00-0 TouchAware XDesign Version.0 User Guide

6 Properties Panels A set of eight buttons on the top allows switching between different panels for property settings. 8 Location & Size Display and entry fields for Location, Size, length, Angle, Center, Radius, Rotation Style Set the line width, line pattern, line end and corner styles. Stroke Select the stroke color from the color palette or color mixer, set the stroke opacity. Fill Select the fill color from the color palette or color mixer, set the stroke opacity, define and set a fill color gradient. Text Set the font type, style, size and text alignment. Dimension Settings Set the dimension value, style, location and format. Apply selected settings to all dimensions. Board Settings Set the grid, snap, board size and scale. Background Select a background image file, set or clear the background image TouchAware XDesign Version.0 User Guide 6

7 Board Settings Sidebar _ Board panel Units, Board Size & Scale Specify board units, a predefined or custom board size and set a drawing scale Grid Settings Set the grid to Auto or specify custom grid settings. Snap Settings Set the snap to Auto or specify custom snap settings. All the drawing board related settings are done using the Board panel.. Setting the Units, Board Size & Drawing Scale Sidebar _ Board panel _ Board Settings Units List of standard units Board Size List of standard board sizes Custom Width & Height Enabled when Board Size options is set as Custom Landscape Set landscape or portrait, only applicable if a predefined board size is selected 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 TouchAware XDesign Version.0 User Guide 7

8 Units Supported units are: Points (pt) Inches (in) Feet (ft) Millimeters (mm) Centimeters (cm) Meters (m) 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. Example: Points to Centimeters For a Drawing Size of 80x0 with a Square at location (00,00) of size (00x00) 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 (.6,.6) and size (.6 x.6) calculated based on the conversion for Points to Centrimeters for the specific device DPI. Example: Inches to Centimeters For a Drawing Size of 80x0 with a Square at location (,) of size ( x ) 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 (.,.) and size (. x.) calculated based on the conversion for Inches to Centimeters which does not involve any device specific calculation. 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 A, B, B, Letter, Legal, Tabloid). You can also set a custom board size (capped at 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. TIP: For very large unit based drawings like large floor and site plans, you may need to try different approaches of setting Scale as : 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.0. To set a custom drawing scale enter the required drawing scale for Scale, the scale is reflected immediately in the design TouchAware XDesign Version.0 User Guide 8

9 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.0 Example: Refer the House Plan sample (Available at and with idesign, idesign Menu _ Info _ Add-ons _ Sample Designs _ House Plan The House Plan sample is drawn at a scale of :00 with units in Millimeters. If the units are changed to Meters, the dimension values will reflect the change and will be displayed in Meters The drawing scale is set before you start off with the drawing. This is similar to drafting on paper where the scale is determined before you start drawing. As the scale value is a multiplier to the actual value of the dimension, changing the scale after drawing will not rescale the drawing. If your drawing grows larger than the board size, you can increase the board size. Changing the scale will not automatically rescale the existing shapes, if you change the scale you may need to resize the existing shapes. All the measurement readouts, X, Y, Width, Height settings, Grid and Snap values reflect the changes on the drawing scale.. Setting the Grid Sidebar _ Board panel _ Grid Grid - Turn this ON to show the grid on the board. Auto, Custom Auto will automatically set the grid and rulers based on the Units. Custom enables custom grid settings Grid Size Use the slider or enter the value. Value range is 0 to 00 points (or converted units) Separator Steps A value between 0 to for the major grid line separators ZoomOut Grid 0 Steps Set to ON for 0 step separators when you reduce zoom beyond the level when grid lines become too close 6 ZoomOut Grid Separator Steps Set to ON for 0 step separators when you reduce zoom beyond the level when grid lines get too close Grid settings are units and drawing scale aware TouchAware XDesign Version.0 User Guide 9

10 . Setting the Snap Sidebar _ Board panel _ Snap Snap - Turn this switch ON to enable snap. Auto, Custom Auto will automatically set the snap based on the grid. Custom enables custom snap settings Snap Size Use the slider or enter. Value can be a decimal. Object & Point Snap When ON, automatically snaps on to points and end points of objects Rotation Snap When ON, rotating using the rotation handle rotates in one degree increments 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 Snap ON for drawing accurately in fixed steps/increments. This is extremely useful in drawing precise or To-Scale drawings. Turn Snap OFF for free flow art work drawings. Zooming & Panning The drawing content area supports unlimited zooms but currently capped at 600%. The board can be zoomed using: Zoom % selection & entry Located at the left bottom corner of the board, you can set a predefined standard zoom value or enter any value by keyboard. Zoom tools Toolbar buttons for +0%, -0%. The board is scrolled horizontally and vertically using the scroll bars or using the mouse wheel TouchAware XDesign Version.0 User Guide 0

11 6 Drawing 6. Inserting shapes Shapes Toolbar _ Select a shape to insert Line Tool Click and drag to insert the line, release click to finish. Polyline Tool Click and drag to insert the first segment, release click to finish the first segment. Click again and drag to insert the second segment, release to finish the segment. Repeat this for as many segments required. Double click to end the polyline. Arc Tool Click and drag to insert the center point and specify the radius, release click and then click and drag to specify the angle and end point. Path Tool Click and drag to insert the first point and its control point. Click and drag again to specify the next point and its control point. Repeat this for more points. Double click to finish drawing the path OR double tap on the first point to close the path and finish. Square Tool Click and drag to insert the shape, release click to finish. Freehand Tool Click and draw freehand to sketch a freehand path. The path is automatically smoothened after the freehand insertion is completed Rectangle Tool Click and drag to insert the shape, release click to finish. Circle Tool Click to insert and specify the center point, then drag to specify the radius, release click to complete. Ellipse Tool Click and drag to insert the shape, release click to finish. Polygon Tool Click and drag to insert the shape, release click to finish. The number of sides for Polygons can be set by clicking and holding on the icon for the Plus/Minus sides popup to be displayed. Star Tool Click and drag to insert the shape, release click to finish. The number of sides for Stars can be set by clicking and holding on the icon for the Plus/Minus sides popup to be displayed. Text Tool Refer section Inserting & Editing Text for instructions Freehand Tool Click and draw freehand to sketch a freehand path. The path is automatically smoothened after the freehand insertion is completed Length Dimension Tool Refer section Dimensioning for instructions Angle Dimension Tool Refer section Dimensioning for instruction 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 _ XDesign _ Preferences _ Continuous Insert 00-0 TouchAware XDesign Version.0 User Guide

12 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. 6. Inserting and editing text Shapes Toolbar _ Select the Text tool button Text Object The text object inserted by the text tool on the board, it contains the text within the bounding box defined by the rectangular shape. Text Entry On double clicking the inserted text object, a popup for text entry is shown. Standard cut and paste operations for text is supported. Font Size The font size in points. Font Type Select from a list of fonts available on the device Font Style A list of available styles for the selected font type Alignment Horizontal alignment options for Left, Center and Right alignment To insert text:. Select the Text tool Text Settings Panel. Click anywhere on the board and drag just like you insert a rectangle, when you release the click, a text box with a default text "[Text] and a dashed outline for the bounding box will be inserted on the board. To change the text, double click on the text box, which will then open the Text Edit popup for you to enter the text. You can and change its properties (font, size, style, alignment) using the Text settings panel or the text controls in the Edit Bar TouchAware XDesign Version.0 User Guide

13 6. Selecting shapes Selecting a shape: Shapes can be selected by clicking on them. Shapes with a fill color can be selected by clicking anywhere on the shape. Shapes without a fill color can be selected by clicking on the outline/path only. When a shape is selected, it will show selection handles located at the corners and sides. To add a shape to the selection, press the Shift key and then click on the next shape. To unselect a shape, press the Shift key and then click on the selected shape. Multiple shapes can also be selected by clicking and dragging around an area. TIP: Give a one second gap after you click on the empty board area to unselect all shapes as this is the time to differentiate between double tap used for other options and single tap for unselecting. 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. Bounding Box Shows the bounding box of the selection, useful for indicating and aligning rotated shapes 6. Moving shapes To move a shape:. Select the shape (Refer Selecting shapes ). Click anywhere on the shape and drag the shape to a new location. Release the click 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) You can move the selected shapes using the keyboard arrow keys as well. Pressing Shift when moving using the arrow keys doubles the move distance. Arrow key movements are useful to make fine adjustments TouchAware XDesign Version.0 User Guide

14 6. Resizing shapes To resize a selection:. Selection handles are at the corners and mid point of the sides.. Click on any handle and drag in the direction you want to resize the shape. The values for location, height and width of the shape are refreshed continuously in the properties panel and edit bar while you resizing the shape. Release the click when you are done resizing the shape You can also change the location, width, height properties using keyboard via the properties panel or Edit Bar controls. 6.6 Rotating shapes Shapes can be rotated using the rotation handle. Rotation Handle Rotation Center Handles 00-0 TouchAware XDesign Version.0 User Guide

15 Rotation Handle Allow easy rotation for selected shapes Rotation Handles can be swithed on or off with the setting Menu _ XDesign _ Preferences _ Rotation Handle. 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 click on the red peg which is the rotation handle and turn. Shapes can also be rotated using rotation presets in 90 degree increments using the tools menu Main Toolbar _ R +90 or R -90 You can also change the rotation using keyboard via the properties panel controls TouchAware XDesign Version.0 User Guide

16 7 Basic Edit Functions 7. Removing shapes Menu _ Edit _ Delete. OR Main Toolbar _ Delete. Delete Removes the selected shapes from the board. Remove does not copy the shapes to the clipboard. To copy you need to use the Copy or Cut button. You can also delete the selected shapes by keyboard using Command + Backspace. 7. Cut, Copy & Paste Menu _ Edit _ Cut, Copy & Paste. OR Main Toolbar _ Cut, Copy & Paste. Cut Copies the selected shapes to the clipboard, which can then be pasted back onto the board using Paste and then removes the selected shapes. 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. 7. Undo / Redo Menu _ Edit _ Undo / Redo buttons OR Main Toolbar _ Undo / Redo buttons Undo reverses the last action performed Redo reverses the last undo operation A multi level undo/redo stack is maintained from the time you open the design. You can undo / redo an unrestricted number of steps back to where you stared the current session TouchAware XDesign Version.0 User Guide 6

17 8 Shape Properties Sidebar _ Properties panel Shape properties can be set using the properties panels located at the top section of the sidebar. The required panel can be selected using the buttons at the top. Properties panel contains the display and entry fields for Location, Size, length, Angle, Center, Radius, Rotation. Location & Size Location & Size fields change based on the selected shape. X,Y, Width and Height for multipoint shapes or X,Y and X,Y for two point shapes Rotation Display or enter Rotation for the selected shape Reset Bounding Box Resets the bounding box of the shape to have zero rotation but retain the location of the shapes points. Aspect Ratio Checkbox to make the shape maintain its aspect ratio when resizing Edit Points Checkbox to make the points of the selected shape editable 6 6 Length, Angle Display or Enter Length and Angle values for selected Line shapes Center Display or Enter center point X and Y for Arc and Circle shapes Radius Display or Enter Radius for Arc and Circle shapes 00-0 TouchAware XDesign Version.0 User Guide 7

18 8. Applying style attributes Sidebar _ Style panel Line Width Stroke width for the selected shape set using the slider or by keyboard Line Style Set the line pattern from a set of 6 standard and commonly used dash patterns. Set the start and end markers from a standard set of arrow styles. Line End Butt cap, Square cap or Round cap Line Join Miter join, Bevel join or Round join The style panel options allow you to set the line width, line style (pattern), start and end arrow markers, line end and line join style. 8. Applying colors Set the Stroke and Fill colors using the Stroke, Fill and Mixer panels. 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. To set the fill color using the color panel (swatch palette): Sidebar _ Fill panel _ Select the required color 00-0 TouchAware XDesign Version.0 User Guide 8

19 OR Editbar _ Fill color _ Select the color To set the fill color using the RGB mixer panel: Sidebar _ Mixer panel. Select an empty color cell from the first row of blank cell buttons (6 custom colors can be set) on the mixer panel. Move the sliders for each of the RGB values to mix the required color or enter the RGB values by keyboard then press the Mixer to Object button to apply the fill color to the selected shape. OR simply select the color from the custom color list after selecting the shapes. The mixer panel is shared between the Fill and Line colors. Colors mixed from the Fill _ Mixer panel will appear in Stroke _ Mixer for Pen/Line colors 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 00, 00 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 TouchAware XDesign Version.0 User Guide 9

20 8. Gradients Sidebar _ Fill _ Gradient RGB gradient stop color mixer Selected gradient stop s RGB color value input Gradient Strip Display s the gradient based on the current set of gradient stops Click on the strip at a location where a stop does not exist to create a new gradient stop. Double click on the strip will reverse the gradient. Gradient Stops Each stop can be selected, its location can be moved and the color can be adjusted using the mixer Gradient ON/OFF Allows the gradient for the object to be turned ON or OFF Fill, Remove, Linear/Radial The Fill button sets the selected gradient stop color with the value selected in the Fill color panel. The Remove button removes the selected gradient stop (if the number of stops is more than two). The Linear/Radial button toggles between linear and radial gradients for the object. Gradient Handles The start and end location handles for the gradient on the shape, which can be moved TouchAware XDesign Version.0 User Guide 0

21 9 Point & Path Editing Path Toolbar Convert To Path Converts the selected shape to a path. Close Closes an open shape or path. Open Opens the shape at selected segment. Add point Adds a new point in the middle of the selected segment. Remove point Removes the selected point. Break Breaks the shape at the selected point. Weld Welds two shapes together at the selected end point Corner Set the selected shape point s control points to be moved independently as a corner point. Smooth Set the selected shape point s control points to be moved as a smooth connection between the segments. Symmetric Set the selected shape point s control points to be moved as a smooth and symmetric. Line Convert the selected segment from curve to line Curve Convert the selected segment from line to curve TouchAware XDesign Version.0 User Guide

22 9. Editing shapes points Sidebar _ Properties panel _ Edit Points switch _ Turn ON the switch A shape s 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. Shape Points Edit points for the shape have a blue peg and when selected have a red peg at its center Control Points Black square pegs which indicate control points associated with a shape point (for a path). Selecting and editing a shape which has Edit Points set as ON:. The first click on the shape selects the shape and Selection and Resize Pegs (grey pegs) at the corners and sides appear. Double clicking on the shape will change it to edit mode enabling the edit points Individual points of the shape can now be moved Note that when the Edit Points switch is turned on, the shape is directly changed to edit mode. 9. Adding and removing points Path Edit Toolbar _ + Points or - Point button To add a point:. Select the shape. Double click on the shape to change to edit mode If Edit Points switch is not ON, turn this ON (Refer section Edit shapes points ). Select the line segment on which you want to add a new point To select the line segment, click 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 00-0 TouchAware XDesign Version.0 User Guide

23 . Press the + Point button in the path edit toolbar this will insert a point at the middle of the line segment. You can now move the new point to the required location To remove a point:. Select the shape. Double click on the shape to change to edit mode If Edit Points switch is not ON, turn this ON (Refer section Edit shapes points ). Select the point to be removed by clicking on the point. The point will change from Blue to Red. Press the - Point button in the path edit toolbar this will remove the point 9. Closing an open shape Path Edit Toolbar _ Close button Open multi line shapes and open paths can be closed using the Close button. 9. Converting a shape to a path Path Edit Toolbar _ 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. Convert Text to Path Path Edit Toolbar _ Convert button The points that make up the text can be edited after converting the text to path 00-0 TouchAware XDesign Version.0 User Guide

24 9.6 Editing control points on a path Control points can be moved to alter the structure of the shape/path.. Select a shape. If the shape is not a path, convert it to a path (Refer Converting a shape to a path ). Double click 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. 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 click on the shapes point. Control points have a black square handle and a grey peg appears when you click on them.. You can move the control points to curve the shape at each point/segment To make a shapes point a Corner, Smooth or Symmetric point:. 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. Path Edit Toolbar _ 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.7 Straightening or curving a segment Individual segments in a shape or path can be selected and they can be curved or straightened. Path Edit Toolbar _ Line or Curve buttons To straighten a path segment:. Select the segment by clicking on the segment. Both end points will be highlighted in red. Select the Line option in the Path Edit toolbar. The control points for the segment will be removed and the segment will become a straight line segment To curve a line segment:. Select the segment by clicking on the segment. Both end points will be highlighted in red 00-0 TouchAware XDesign Version.0 User Guide

25 . Press the Curve button in the path edit toolbar. Control points for the segment will be added.. Click on any of the segment end points and the control point (with black square handles) will become visible.. You can now move the control points at the segment end points to curve the segment 9.8 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. Path Edit Toolbar _ Break or Weld buttons To break a shape at the selected point:. Select the point at which you want to break the shape or path. The selected point is highlighted in red. Press the Break button in the path edit toolbar. 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:. Select the segment which you want to break out. The end points of the selected segment are highlighted in red. Press the Break button in the path edit toolbar. The segment will now be broken out of the shape To weld two shapes at the selected end point:. Position the shapes such that the end points which are to be welded are close to each other. Select any one of the shapes end point at which you want to weld the shapes together. Press the Weld button in the path edit toolbar. The shapes will now be welded together at the point to form one single shape 00-0 TouchAware XDesign Version.0 User Guide

26 0 Object Functions Main Toolbar Group Groups together the selected shapes UnGroup UnGroups the selected group Explode Explode creates separate shapes for each segment, Join Join successively welds all the shapes aligned at end points in the selection to form a single shape R+90 Options to rotate the selected shapes/groups by + 90 degrees R-90 Options to rotate the selected shapes/groups by - 90 degrees Flip Horizontal, FlipC Flips the selected shapes/groups horizontally Flip Vertical Flips the selected shapes/groups vertically Raise Changes the z-order of a shape by bringing it forward on level Lower Changes the z-order of a shape by moving it to one level back Top Changes the z-order of a shape by bringing it to the top Align Left Aligns the selected shapes at the left Align H Center Aligns the selected shapes at the center Align Right Aligns the selected shapes at the right Align Top Aligns the selected shapes at the top Align V Center Aligns the selected shapes at the center vertically Align Bottom Aligns the selected shapes at the bottom Unite Boolean operation on selected shapes for Unite Intersect Boolean operation on selected shapes for Intersect Subtract Boolean operation on selected shapes for Subtract Exclude Boolean operation on selected shapes for Exclude Combine Combines selected set of shapes points into one shape but maintaining sub paths Separate Separates sub paths into separate shapes 00-0 TouchAware XDesign Version.0 User Guide 6

27 0. Grouping and un-grouping shapes Main Toolbar _ Group or UnGroup buttons Shapes can be grouped hierarchically to create complex objects. To group a shape:. Select the shapes to be grouped Refer to the section Selecting shapes for selecting multiple shapes. Use the Group button to group the shapes together Grouped shapes will have a common set of selection pegs, the individual shapes within a group cannot be selected separately unless the group is UnGrouped. 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:. Select the group to be un-grouped. Use the UnGroup button to un-group the group. The shapes will now be ungrouped with each sub shape or group having its own 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. The grouping will now be removed can you can now select individual shapes 0. 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. Main Toolbar _ Explode or Join buttons To Explode a shape:. Select the shape. Press the Explode button in the tools toolbar. 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:. Position the shapes such that the end points which are to be welded are close to each other. Select all the shapes to be welded together. Press the Join button in the tools toolbar. 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 00-0 TouchAware XDesign Version.0 User Guide 7

28 0. Changing the z-order of shapes Main Toolbar _ 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. 0. Flipping shapes Main Toolbar _ Flip H - for flipping shapes horizontally Main Toolbar _ Flip V - for flipping shapes vertically Flipping shapes is the same as mirroring shapes across X or Y axis with the origin as the shapes center itself. 0. Aligning shapes MainToolbar _ Align Left, H Center, Right, Top, V Center, Bottom buttons Multi select the shapes you need to align and press the required align button to align them. 0.6 Boolean Operations Main Toolbar _ Unite, Intersect, Subtract, Exclude, Combine & Separate Before Subtract After Subtract Boolean Operations Unite, Intersect, Subtract, Exclude Combine / Separate Combine - combines the points in separate objects into a single shape with sub paths and the points can be edited as one shape. This is different from grouping where each individual shape retains its own set of points. Separate separates a shape into sub paths, each sub path will become a separate shape TouchAware XDesign Version.0 User Guide 8

29 Layers Sidebar _ Layers panel Delete Layer Deletes the current and selected layer which is highlighted in grey background Add Layer The + button adds a new layer Show Layer A toggle button when green indicates a visible layer Hide Layer A toggle button when grey indicates a hidden layer Current Layer Click on the name of any of the layers in the list to make it the current layer. The current layer is indicated by a grey background Lock Layer A lock icon Indicates the layer is locked and cannot be edited, click on the lock icon to unlock it UnLock Layer A greyed out lock button indicates a locked layer. Click on the lock icon to unlock it. Copy Layer Creates a new copy of the current layer and makes the new layer current Merge Layer Merges the current layer down to the layer below it Layer Opacity Set the layers transparency. Values 0 to 00, 00 being fully transparent. Change Layer Order Change the order of the layer by dragging the layer to another location in the list. Click anywhere on the layer name to drag. Rename Layer Double click on the layer name of the current layer to rename the 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. Multiple layers can be created to organize the design logically Each layer s visibility can be turned ON or OFF Each layer can be locked or unlocked, locked layers are not editable 00-0 TouchAware XDesign Version.0 User Guide 9

30 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. Adding a new layer Sidebar _ Layers panel _ + button To add a layer:. Use the Menu _ Layers _ Layers panel _ + button to add a new layer. 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 +. To change the default layer name, double click on the default layer name. The new layer will be inserted at the top of the list in the layers panel and will also be set as the current layer. Removing a layer Sidebar _ Layers panel _ Select the layer in the list _ Trash can icon You can remove a layer using the trashcan icon in the layers panel. 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.. 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.. Showing & hiding layers Sidebar _ Layers panel _ Toggle the Show/Hide button The second icon at the end 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. Click the visibility button to turn it to green for making it visible, Click on the toggle button when green to make it hidden (gray) 00-0 TouchAware XDesign Version.0 User Guide 0

31 . Setting a layer as the current layer Sidebar _ Layers panel _ Click on the name of any layer item in the list Click on the name of any layer item in the list, the current and selected layer will be indicated by a grey background.6 Locking a Layer Sidebar _ Layers panel _ Lock/Unlock button on the list item 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:. Open the layers panel - Sidebar _ Layers panel. Lock or Unlock any Layer using the Lock/UnLock button in the list.7 Renaming a layer Sidebar _ Layers panel _ Touch on the layer name _ Touch on the title Double click on the layer name to rename the layer..8 Changing the order of layers Sidebar _ Layers panel _ Drag layer item to a new location in the list. Any layer can be brought to the front of another layer or sent under another layer. To raise or lower a layer, click on the list item and drag the item up or down to the position you want to reposition the layer in the list TouchAware XDesign Version.0 User Guide

32 Setting a Background Image Sidebar _ Background panel Select Background Image Button will open a file open dialog to select the background image BG Image Thumbnail The thumbnail image of the selected background image Background ON/OFF Switch to turn on or off the background Clear Button to remove the background image A background image can be set by selecting any image file, which will then be laid under the grid. This feature is intended for tracing, copying or marking raster images. To set a background image:. Press the Select Background Image button opens a file selection dialog. Select the required image to be set as background. A loading indicator will appear. Wait for few moment for the image to be imported. Once the image is loaded, the thumbnail of the image will be visible on the panel. Turn ON the Background switch to enable the background image under the grid TIP: Raster images takes up memory and affects performance. Turn it ON only when you are doing intricate tracing. Turn OFF the Background image when you are done tracing for performance reasons TouchAware XDesign Version.0 User Guide

33 Designs Menu _ File _ New, Open, Save, SaveAs, Duplicate, Rename, MoveTo etc.. XDesign fully supports icloud. Files can be created, stored and edited on icloud or locally on your Mac. Design files are managed using the File menu. Standard file management options for New, Open, Save, SaveAs, Duplicate, Rename etc are supported. You can switch between icloud and local files list in the Open file dialog. Files can be moved between icloud and your Mac using Menu -> File -> Move To. You can also click on the filename in the title bar of the design documents window to rename or move the file to another location. To save a design to another file, use SaveAs. Once you open the File menu, press the Alt key to enable the SaveAs option. Once a design file is saved initially after creation, designs are automatically saved periodically and also when the window is closed. There is a Save option and Save button in the toolbar to explicitly save the design. Design files are fully compatible with idesign (for ios) and can be opened in idesign via icloud or imported to idesign via or Dropbox. Designs saved in icloud are automatically synced between all ios devices and XDesign (if you are using idesign) 00-0 TouchAware XDesign Version.0 User Guide

34 Exporting Designs Menu _ File _ Export Type Select the export type: JPEG, PNG, PDF, SVG or idesign Background Supports Transparent option for a transparent background for PNG type images. Source There are four options available for what to export from the design: Visible Layers, Current Layers, All Layers and 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 Size Specify export size options, applicable only for JPEG & PNG types. Board / Selection Size Use the designs board size as the export size. (Capped) Custom Size Enables the scale, width and height buttons to specify a custom export size Export Width, Height Specify export width and height Scale Export scale as a % of the board size or selection. 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) Vector format outputs (SVG & PDF) can be scaled to any resolution without any loss of clarity TouchAware XDesign Version.0 User Guide

35 . Sharing idesign files Different ways you can share design files:. Save onto icloud. XDesign has full icloud support and design files will be synched automatically with your devices with idesign.. Share via as an attachment This option can be used to share idesign files with other users or with idesign on other devices. Export the design in.idesign format using the idesign option and send it as attachment. To open the attachment on the other device, open the with the attachment the attached design 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.. Share via Export-Import to Dropbox Exported files can be imported back into idesign from any device via the Import menu. SVG Import SVG files can be opened in XDesign, the files once edited will then be saved in.xdesign format. You can export files back to SVG using the export options. 6 Preferences Menu _ XDesign _ Preferences Continuous Insert Allows repeated insertion of the selected shape tool on subsequent touch, until the Select tool is selected Rotation Handle Enables the rotation handle for the current selection, a red handle appears on the side of the selection to rotate the selected objects Rotation Center Handles Allows the rotation center of the shape to be changed 00-0 TouchAware XDesign Version.0 User Guide

36 7 Dimension Tools Shapes Toolbar _ Length & Angle dimension tools Length dimensions Linear dimensions created using the Length dimension tool Angle dimensions Angular dimensions created using the Angle dimension tool 7. Length Dimension Tool To insert a length dimension:. Select the Length tool from the Shape Toolbar. Click at the location where you want to start the length dimension and hold, then drag out to any direction to insert the shape and continue dragging towards the second point. While dragging, the properties panel will show the length of the dimension being inserted and resized. Once you have the right length stop dragging and release the click to finish 7. Angle Dimension Tool To insert an angle dimension:. Select the Angle tool from the Shapes Toolbar 00-0 TouchAware XDesign Version.0 User Guide 6

37 . Click at the location where the center of the circle for the arc is - to specify the radius and hold, then drag out to any direction specify the first point. Once you have positioned the first point correctly, stop dragging release the click to finish inserting the first point. Click again and drag to specify the second point of the arc. Once you have positioned the second point, stop dragging and release the click to finish inserting the second point 7. Dimension Settings Sidebar _ Dimension panel Dimension Style Specify the arrow style, end markers, text location and auto or custom value Dimension Format Specify the decimal places, fractional format, comma separators and unit suffix Apply To All Apply the enabled and current dimension settings to all the dimensions in the design Sidebar _ Dimension panel _ Dimension Style 6 6 Horizontal Text If horizontal text is ON, the displayed dimension text is rotated horizontally to the board at the specified text location irrespective of the rotation or slope of the dimension 00-0 TouchAware XDesign Version.0 User Guide 7 Auto Enables automatic values as the dimension text for the length or angle dimension based on the specified end points Value If Auto is set to OFF, you can specify a custom value as caption Dimension Style Dimension arrow style selection Text Location Specify the location of the displayed dimension value End Marker Lines Turn ON/OFF end marker lines at the end points

38 Sidebar _ Dimension panel _ Number Format Decimal Places Number of decimal places for the displayed dimension value Fractional Format Display the value in fractional, useful when Feet and Inches are used as the drawing units Architectural Format Display the value in architectural format, useful when Feet is used as the drawing units to have Inches and fractional units as sub units Comma Separators Adds comma separators to the displayed dimension value based on the device/country settings Unit Suffix Adds unit suffix to the displayed dimension value based on the current unit settings Sidebar _ Dimension panel _ Apply To All Dimension Style Turn ON/OFF dimension style for apply to all Dimension Format Turn ON/OFF dimension format for apply to all Line Style Turn ON/OFF line style for apply to all Text Style Turn ON/OFF text style for apply to all Apply To All Applies the current dimension settings based on the below options to all the dimensions in the current design 00-0 TouchAware XDesign Version.0 User Guide 8