Trace Draw is an app that was originally designed to facilitate drawing from an image, similar to camera lucida drawing.
An image can be loaded using a picker, but drawing is possible without an image. The app uses multiple layers. The bottom layer is the image layer. The drawing layers can be reordered, deleted, or edited. Additionally, the user can draw on any drawing layer at any time, except the image layer. Although drawing is not allowed on the image layer, that layer can have transparency adjusted, or the image can be hidden.
Shown here is the toolbar that appears at the bottom of the screen. Each of the buttons is described below:
Layer: Add a new layer to the project. The position of the new layer is determined by which layer is selected when the button is tapped.
Option: Modify the action of another button, like shift, ctrl, option, etc. on a keyboard.
Image: Using a picker, select an image to be added to the project.
Select (marquee): Using a rectangular marquee tool, select curves or points.
Select (lasso): Using a lasso tool, select curves or points.
Open/Filled/Force: This is a toggle that determines whether the next curve drawn is an open curve or a filled curve or a filled stoke with a width determined by the force applied to the pencil.
Color: Select a color using a picker tool.
Dropper: Select a color from what's displayed on the screen for the project.
Zoom: This is a toggle that enables or disables the ability to pinch to zoom (not available on Mac version).
Projects: Presents a menu with project-related items.
List Projects: lists previously saved projects.
Save Project: Saves an image of the project to the camera roll in the Photos app. This is not the same as saving the project, which happens automatically.
Export SVG: Exports a simple SVG-formatted file of the project without the image.
Print Project: Print a copy of the project or use the print dialog to save a PDF.
Reset Project: Clears all project details to start a fresh project.
Undo: Each layer has its own undo manager. Tapping the undo button will undo the last curve drawn on the selected layer.
Redo: Redo the operation just undone using Undo.
Delete: Used in conjunction with the Select tool, items that are selected are deleted.
Find: A utility to aid in finding a misplaced Apple Pencil.
Help: Context-sensitive help.
Besides the toolbar, gestures can be used with the app.
There is a red dot that displays on the right corner of the toolbar when the project is saved. The project is saved shortly after every stroke or various other project updates. This dot is visible on the toolbar both when the toolbar is fully visible and when it's mostly hidden. When the toolbar is hidden, the layer display is also hidden.
Projects are composed of multiple layers. Except for mask layers, layers are transaparent, revealing the layer underneath, and the image, if there is one at the bottom. Here is an example of a project with multple layers above a photo.
Here are the individual layers.
On the left side of the screen is a layer table. When a layer is added to the project, a default name is given using sequential numbers.
In the above screenshot, Layer3 is that active layer. It is indicated with the highlight color. The layers are displayed to the user in the order shown in this view, with the image, if present, always being on the bottom. Layers can be renamed. For example, here Layer 5 was renamed to Mask. The current line color is displayed on this view as a horizontal line in the color or gradient selected. For example, here Layer 3 is dark brown, and Mask is a tan color. This color will be used when next that layer is active and the user draws a stroke. If the color tool or dropper tool is used to change the color, the horizontal line on the row for the active layer will be updated with that color. The radio buttons on the left toggle whether a layer is visible. The icon on the right is for editing details of a layer, as described next.
The layer edit screen shows some information, has fields that can be edited, and has buttons that can perform actions:
Name shows the current layer name and can be edited to something more useful.
isMask layer is a switch that toggles the layer to a mask.
Curves and Points shows the number of curves and points on this layer.
Current Line Color is the color of the next curve to be drawn, or the color of the mask for a mask layer.
Move layer up adjusts the layer stack so that the layer being edited is one position higher. The layers display is updated when this button is tapped.
Move layer down adjusts the layer stack so that the layer being edited is one position lower, but never below the image, if any.
The Delete button deletes the layer. There is no undo for this.
The Opacity slider adjusts the opacity of the layer. Layers are opaque by default but can be made transparent by adjusting the slider to the left.
New Line Width sets the thickness of the next curve drawn on the layer.
The Sync button causes all curves in the layer to inherit these values if set. Otherwise, the values affect only new curves.
Except for moving or deleting layers, the changes take effect when exiting this screen, which is done by tapping away from it. Layers can also be re-ordered by dragging the cell for a layer to the desired position.
The bottom layer is always the image layer, even if there is no image. Since the image layer has no curves, the settings for curve details do not apply.
There are two additional layers. The first is a scratch layer. The scratch layer contains only the curve actively being drawn. As soon as the curve is completed, the curve is copied from the scratch layer to the active layer and removed from the scratch layer. While the curve is being drawn it is displayed with a line width of 2 points, unless using force. When the line is copied to the active layer, it is drawn with the layer's line width.
The other layer is the selection layer. When the user is selecting, the touch points are used to draw a marquee or a lasso. The marquee or lasso is not part of the project, so it's drawn on a separate layer. The selection layer is above the other layers, so the selection outlines are always visible when active.
The Select tools have two modes. In one mode, points are selected. In the other mode curves are selected. With the curve selection mode, normally the curve with the most points in the selection area is selected. However with the option button enabled, all curves that intersect the selection area will be selected. In this mode, multiple curves are edited together. When one or more curves are selected, curve-related items are added to the toolbar. One of these is Curve Details.
When editing a curve using red dots, if the option button is active, the dot being dragged is first duplicated. In this way, it is possible to extend a curve point by point.
When selecting a color using the color picker tool, if the option button is active, the color selected will be the second color to be used in a two color gradient.
If the option button is active, when the layer button is tapped, instead of adding a layer, the layer display is hidden if shown and shown if hidden.
After a curve is selected, a curve tool is added to the tool palette. If Curve Details is selected from the presented menu, a copy of the curve is shown in a popup screen with curve details. If multiple curves are selected, a copy of all the curves is displayed, and the details shown are taken by majority vote if the curves have different settings.
|
The Curve Editor Screen has been redesigned with version 2.8. At the top is a rectangle showing the color or gradient. Below that are three swatches showing the primary color, secondary color (used for gradients), and border color. To the left of these color swatches is a layer button. Tapping on that button applies the current settings to the active layer. Next is a slider where the thickness of the line used to draw an open curver or the border of a closed curve can be set for the selected curve(s). The next slider is available starting in version 2.8. Adjusting this slider sets how curves are smoothed. The simplify button causes points not needed to be removed from the curve, resulting in a simpler shape. This is useful if curves are to be modified by dragging points, since a simplified curve will have fewer points to drag. |
|
|
| The red and green circles can be dragged to new points within the curve to change where the gradient transition occurs. If there are portions of fill within the curve extending beyond the new position of the endpoint, the rest of the fill will be the color at the endpoint. | If the gradient points are moved to outside the curve only a portion of the gradient will be used. Put another way, the gradient is colored from one endpoint to the other and clipped by the path. |
A layer icon is displayed below the Color label. If this button is tapped, the current settings are applied to the layer.
The thickness slider adjust the line thickness of the line for an open curve and the border thickness for a closed curve.
The Simplify button is used to reduce the number of points used to draw the curve without significantly changing the shape. It is suggested to use this simplify function prior to editing the shape of a curve because that way there are fewer points that need to be adjusted.
The first time running the app, the user is asked for permissions to access photos. There are three options. The recommended selection is to allow access to all photos. Don't allow will mean you can't choose any photos, so you will be able to draw but not add any photos. The Select Photos is not a good option because you will have to select specific photos each time. It's an awkward interface. There will probably be an update to the app to allow the older image picker to be used because it's less confusing. For now, the new picker is used, because it allows access to the original file name, which is used for the project name.
If you grant access, you can then choose a photo using a screen like this. The photo chosen will be added to the project as the bottom layer.
The selection tool allows the user to select points or curves.
To select points, first make sure the layer of interest is selected by tapping on it in the layer list. Then tap the Select icon until it is bolded. That indicates selection is active. The selection operates on the active layer. With the Apple Pencil, tap down on the screen at one corner of the desired selection area and drag to the opposing corner. Then release. As you are dragging, a rectangular marquee is displayed to show the selection area. When the pencil is lifted from the screen, the selection is performed. All points that are on the active layer are selected. The selection is indicated by showing one red circle for each selected point. Here you see a sample selection showing the marquee with about a dozen points selected. A red circle is placed at each point on the curve that is part of the selection.
While the Select button is enabled, any touches on the screen are interpreted as new selections. In that case the old selection is discarded, and the points in the new selection area are selected.
The lasso tool works the same way except that a freeform shape is used for the selection area.
To select an entire curve instead of points on one or more curves, first enable the Select button by tapping down inside the Select button, dragging away from the Select button, then lifting up when the Apple Pencil is no longer in the frame of the button. If done correctly, the button will have a red outline.
With curve selection enabled, select a rectangle as before, but this time, an entire curve is selected. If more than one curve falls within the selection rectangle, the one with the most points in the selection rectangle is selected.
 |
 |
| When a curve is selected using the select tool, after the edit screen is dismissed, each of the points is identified with a red circle. After deactivating the select tool, these points can be moved. | By using the simplify button in the curve edit screen, points are removed until only the essential points remain. This is useful to use before moving the points, because this way there are fewer points to move. Additionally, by simplifying the curves, the project is smaller and so is a generated SVG file. |
If the Option button is enabled, then when a curve selection is performed, all curves that lie at least partially within the selection rectangle are selected. However, red dots are not placed over each point. In this mode, the points cannot be moved. Instead, the curve properties (like line thickness) can be adjusted. Any adjustment made applies to all the curves in the selection.
This button is a toggle. The default value is Open, showing a pencil icon. The alternate value is Filled, showing a paintbrush icon. When open, new curves drawn are drawn as lines using the active color and line width. When filled, the scratch layer displays as with the open curve. However, when the curve is copied to the active layer, a line is drawn connecting the last point to the first point and then filled in. By not filling in the curve until it is copied, it is easier to draw a filled curve, because it doesn't obscure the lower layers.
 |
 |
 |
| When the button is set to Open, an open curve is drawn using the primary color. | When the button is set to Closed, a closed curve is filled with the primary color. If the border color is set, the border will be drawn with that color. | When the button is set to Force, a line is drawn with a thickness determined by the force applied to the pencil. This is actually rendered as a closed curve. |
The Color button displays a color picker tool that is initiated with the currently selected color. The center square displays a preview of the color. There are four sliders that can be used to adjust hue, saturation, lightness, and alpha.
If the alpha slider is adjusted, the center of the project will be revealed through the transparency.
Adjust any of the 4 sliders to adjust the color. The backgrounds of each slider are adjusted to show the range of colors available when adjusting just that slider. All 4 slider backgrounds are updated when any slider is used. Tap away from the picker tool (iPad) or press the red close button (Mac) to dismiss the picker tool without choosing a color. Tap the square color swatch to choose the color.
The dropper tool allows you to select colors from the image so is useful only when there is an image in the bottom layer. When tapping the Dropper icon, several things happen. First, a blurred version of the image is displayed over the original image. Second, a slider is displayed above the Dropper icon. This is used to adjust the amount of blur in the blurred image. The purpose of the blur is to average the color so that any noise in the image layer is not a factor. How much blur is appropriate depends on the image. After the desired amount of blur is applied, tap over any part of the image. The color under the touch location is selected and painted in a swatch displayed at the touch location and then animated to the top, right part of the screen. Tap the Dropper icon again to dismiss the slider and the swatch and activate the selected color. It will be used for newly drawn curves.
If the option button is active a secondary color is selected. If a secondary color is selected, any curve drawn will be rendered using a gradient. The first point on the curve is the location of the primary color. The farthest point from the first point is the location of the secondary color. These points can be edited using the gradient edit tool.
Unlike the other buttons, the Zoom button is enabled by default. When enabled, the project can be zoomed using a pinch/drag gesture. If the Zoom button is tapped, this function is disabled. A reason to disable it may be to avoid accidentally zooming by resting a hand on the surface of the iPad. Whether it's enabled or disabled, the project can be moved around using a single finger. Touches made with a finger are distinguished from touches with an Apple Pencil. Finger touches are used for moving the project around, or possibly on other screens that are displayed over the project, for example, tapping the Layer name field in the Layer edit screen in order to display a keyboard to enter a new name.
The first time using the app, there will be no projects to list. However, after working on a project, it is saved to the app. To switch to a different project already worked on, tap the Projects button to display a scrollable view that shows all the projects.
There is a search field at the top that can be used to filter the projects by name. Details of the projects are shown on the left, and thumbnails of the projects are shown at the right. After scrolling of the project list stops, any drawings are rendered over the thumbnail. A slider is shown if there is an image. This slider can be used to adjust the opacity of the image.
By default it's semitransparent in order to make the drawing more visible. Tap a project to select it. When it is selected, it becomes the active project. If an image was renamed using the Layer Edit screen, it may be listed under both the original file name and the new image name. If an image is used in more than one project, the other names are listed on the left after the Others: label.
This option saves an image of the project using the current settings to the Photos app. In other words, if there are multiple layers in the project, and some of the layers are disabled, those layers are not included in the image. If the opacity of a layer is adjusted to make it semi-transparent, that will be reflected in the image.
Tap the SVG button to save an SVG file to the Files app. This is a vector file but does not include the base image. The SVG image is scalable but is based on an image that fills a 1000 by 1000 point square. Point locations in this square are rounded to the nearest tenth of a point. There could be points outside the square, but the coordinates of the points are based on this 1000 by 1000 square. These SVG files can be opened in other apps that support the SVG format. Note that this is an export function. This app does not open SVG files, nor does it import them. That said, the projects are saved as .draw files. These files can be opened directly or shared with others using Airdrop. If the other person also has Trace Draw installed, a file shared with them opens the app and loads the shared project. To share a project with the image, share the .draw file, and share the image file separately.
In the Files app, the .draw files are shown with the app icon for this app. The SVG files are shown using a thumbnail of the project.
Print a copy of the project using the current layer settings using Airprint. The print dialog can also be used to save a PDF version of the project.
Each layer in a project has its own Undo/Redo manager. This manager tracks curves creating during a session. Only curves added by drawing can be undone. In other words, if you draw a curve, tapping Undo erases that curve. Tapping Redo puts it back again. Each layer has its own Undo/Redo manager, so you can work in one layer, then switch to another layer and undo the last thing that was drawn in that layer. Undo/Redo function in one layer have no effect on other layers. Also note that Undo/Redo operations are per session and per project. So if you switch projects or if you kill the app and launch it again, there will be nothing to undo.
This app has a Find function, in case of an Apple Pencil being misplaced. It works only if the pencil has a charge. To use the Find function, tap the Find button (only displayed if there is an attached pencil). The Apple Pencil doesn't have a GPS sensor in it or a WIFI chip, but it does have a Bluetooth chip. This app uses Bluetooth to help find the Apple Pencil. It works by monitoring the strength of the signal coming from the Apple Pencil. If the pencil is out of range, a red circle filling the whole screen is displayed. This app cannot help finding the pencil as long as no signal is picked up from the pencil. If a signal is picked up, an approximate distance from the pencil is calculated based on the signal strength. Of course many things affect the strength of the signal, including obstructions. If there is a signal found, the color of the circle is not red but orange, yellow, or green, depending on if the pencil signal strength is weak, medium, or strong, respectively. Additionally, the size of the circle changes with the signal strength. A smaller circle means the iPad is closer to the pencil. When the pencil is attached to the iPad or is calculated to be very close, the Find function stops and the app resumes normally.
Tap the help button to display context-sensitive help. While the help view is displayed, tap other items on the screen to display help for that item. Tap the help view to display this document in a web view. Tap the help button again to dismiss the help screen.
A note on how curves are drawn. As the Apple Pencil is moved across the screen, points are recognized at the touch location. To conserve memory, most of the points are ignored. The points are saved if they are gathered a significant distance from the previous point or a significant amount of time after the previous point. The points are connected using Bezier curves as shown in this illustration.
Here, the circles represent touch points. Suppose the curve was drawn from left to right. The first point is the leftmost point, indicated with "Start". The last point touched is the rightmost point, indicated with "End". The app calculates the points labeled D and E, for each of the points A and B. The line connecting D to E at point A is parallel to the line connecting the start point to point B. The line connecting D to E at point B is parallel to the line connecting A to the end point. The points D and E are control points for the Bezier curve. The lengths of D and E are adjusted to render a natural-looking smoothed curve. In this way, a realistic, smoothed curve is drawn along the points drawn by the user.
Starting in version 2.8 the smoothing algorithm can be adjusted using a smooth slider in the Curve Editor screen (see above). This slider adjusts the lengths of the segments connecting the points to their control points D and E. The default value is 0.5. Think of this as a strength applied to the control points. A value of 0 means the control points are located at points A and B so do nothing to smooth the line. The value of the smooth slider is multiplied by the distance between points A and B. The resulting value is divided between the control point E for point A and the control point D for point B.
 |
 |
 |
| A negative value reverses the directions of the control points. | A value of zero results in a polygon (no smoothing) | A larger positive value increases the length of the control point segments. |
Some functionality on a Mac is available only using the keyboard. Zooming normally is done with a pinch gesture on an iPad, but the pinch gesture doesn't work well in Mac Catalyst because the system uses two finger gestures for smooth panning. That's not a problem, though, because zooming is easily accomplished using the keyboard. There are three functions:
If a selection is active, zooming with these keystrokes zoome around the center of the selection. The shift, option, control, and command keys all toggle the option tool. They function as normal on a Mac, namely, as momentary switches. If another tool modifies its action based on the state of the option tool, that will take effect as long as one of these keys is pressed. Using just the toolbar, the button is a toggle instead of a momentary switch.