Email support

Having problems with PaintCode? Need help figuring out how to get something done? If you didn't find the answer in our documentation, don't panic!

Send Us Email

Library

Core Concepts

Library
Library is a place where you create and manage colors, gradients, shadows and images. The behavior of these library items is tailored to the needs of user interface design.For example, you can use the same color in several graphic shapes. Later, if you adjust the color, all shapes using it are updated automatically. The same is true for gradients, shadows and images.

This feature is extremely handy for two reasons:

  • you can adjust the color scheme of the user interface you are designing easily and in one place
  • each library item is declared at most once in the generated source code, no matter how many times it is used in your document

Moreover, colors, gradients and shadows can form relationships. A new color can be derived from an existing one simply by using the built-in operations. Gradients and shadows can also be derived from colors in the library.

Tree of Colors, Gradients and Shadows

By taking advantage of this feature, you can define a whole family tree of colors, gradients and shadows that depend on a single (or more) basic colors. When you adjust this basic color, all library items and shapes that directly or indirectly depend on it are updated automatically:

Adjusted Tree of Colors, Gradients and Shadows

For example, if you are designing a set of colorful user interface controls, you can derive all necessary colors, gradients and shadows from a single basic color. By adjusting this basic color later, you can easily change the whole color scheme of your entire document:

The same set of controls with different color schemes

Naming

Each library item has a name. PaintCode generates these names for you, but you can (and probably should) provide your own, more descriptive names for your colors, gradients and shadows. These names are used for source code generation. You can use spaces in your names – PaintCode automatically converts “Button Base Color” to “buttonBaseColor”. It will also not allow you to use names that are already reserved for code generation purposes, so you do not have to worry about any potential name conflicts in the generated source code.Library items can be renamed in their respective adjusting popovers.

Using the Library

Library Header
The Library is divided into 4 sections: Colors, Gradients, Shadows and Images. To manage a particular kind of library item, click the corresponding button in the Library header. To add a new library item (color, gradient, shadow or image), click the “+” button.

To remove a library item, select the item from the item list by clicking on it and press the DELETE or BACKSPACE key. Alternatively, you can select the Delete item in the Edit menu. To adjust an existing library item, double click the item in the list. Alternatively, you can reselect the same library item in the Inspector popup button to show the edit item popover.

Copy & Paste Behavior

When you copy and paste some shapes between documents, all necessary colors, gradients, shadows and images are automatically copied to the target document as well. If the target document already contains the necessary library items, these are reused instead.


Colors

There are 3 kinds of colors in PaintCode:

  • System colors
  • Basic colors (user-defined)
  • Derived colors (user-defined)

System colors are colors defined by the OS X and iOS operating systems. You cannot define new system colors and they are not displayed in the Library. However, you can create your own colors by adding them to the Library. These can be either basic or derived.

Basic Color

A basic color is a simple color that does not depend on any other color. You can adjust it at any time. All directly or indirectly affected shapes, colors and gradients are updated accordingly.

Derived Color

Derived color is a color that dynamically depends on another color. It is derived from the parent color using some of the built-in color operations:

  • change opacity
  • change hue
  • change brightness
  • change saturation
  • apply shadow
  • apply highlight

When the parent color changes, all directly and indirectly (via another color) derived colors are updated automatically.

Using a color

To use a color (for example, for a stroke), select it from the color popup button menu:

Setting a stroke color

This menu is automatically populated with your Library colors. You can also select a system color from one of the three popup menu submenus:

Common system color menu

Adding a new color

There are 3 basic ways of adding a new color:

  • Ensure the “Colors” category is selected in the Library header and click on the “+” button.
  • Click on the “Add new color…” menu item in the color popup menu. This also sets the newly-created color in the popup button.
  • Use the color well in the gradient editing popover

In addition to adding a new color to the Library, this also presents you with a color editing popover. (note that you can also add colors by copying and pasting colored shapes from another document, as well as double-clicking a gradient control)

Editing a color

You can edit a color by double-clicking on it in the library. Alternatively, you can reselect the same color in the Inspector popup button to show the edit color popover.

A basic color

The text field contains the name of the color. PaintCode generates all names for you, though you can always change them to be more descriptive.

There are two types of colors: “basic” and “derived”. Basic colors are the ones with base color set to “none”. For basic colors, you only have to choose a particular color using the color picker. You can set exact values in various formats, adjust the knobs or pick any color from the screen using the magnifier in the lower right corner of the popover.

By selecting the base color you get a “derived” color. With derived colors, you have to specify the desired operation and amount. For example, you can set a color to be the same as some other color that already is in the Library, but with a 50% opacity. This is an extremely useful feature.

A derived color

Derived colors are updated automatically when their parent color changes.

Deleting a color

To delete a color, select it in the Library and press the DELETE key. Alternatively, you can select the Delete item in the Edit menu.

When you delete a color, it is replaced in all shapes, gradients and shadows that have been using it with a default color. All colors directly derived from the deleted color are converted to basic colors, but visually remain the same.


Gradients

Gradients can be used to fill rectangles, rounded rectangles, ovals, beziers, stars and polygons. PaintCode supports multi-step gradients. You can also choose between linear (defined by an angle or two points) and circular gradients with each use. Gradients depend on the colors they use, and when these colors are adjusted, the gradients are also updated accordingly.

Using a gradient

To use a gradient, select it from the fill popup button menu:

Setting a gradient fill

This menu is automatically populated with your Library colors and gradients. Gradients occupy the lower half of the popup menu.

Adding a new gradient

There are 2 basic ways of adding a new gradient:

  • Ensure the “Gradients” category is selected in the Library header and click on the “+” button.
  • Click on the “Add new gradient…” menu item in the fill popup menu. This also sets the newly-created gradient as a fill.

(note that you can also add gradients by copying and pasting shapes that use gradients from another document)

Editing a gradient

You can edit a gradient by double-clicking on it in the library. Alternatively, you can reselect the same gradient in the Inspector popup button to show the edit color popover.

Gradient Editor

Gradient Editor
The text field contains the name of the gradient. PaintCode generates all names for you, but you can always change them to be more descriptive.

To the right is the gradient control. Using it, you can specify the positions of individual colors in the gradient.

Changing gradient color value

To change a color in the gradient, click on a color knob at the bottom of the gradient control. Then, select the desired color from the color popup button below the gradient control.

Adjusting color value conveniently from gradient popover

Sometimes, you need to adjust the shade of a color in the gradient. You can always close the gradient popover, open the color popover and adjust the color there, but this is inconvenient. It is possible to adjust a basic color using the color well at the right side of the color popup button, right from the gradient popover.

Adding a new color directly from gradient popover

If the color you are trying to adjust using the color well in the gradient popover isn’t a basic color (i.e. it is a system color or a derived color), a new basic color is created and automatically replaces the old color.

Adjusting gradient color position

To adjust the position of a color in the gradient, simply drag the color knob to the desired position. To position the knob to some of the predefined positions, hold the SHIFT key while dragging it. The predefined positions are represented with tick marks.

Alternatively, you can fine tune the position of the selected knob using the LEFT and RIGHT arrows on your keyboard.

Adjusting linearity between colors

Gradient Editor
It is also possible to alter the progression of the gradient between two neighboring colors by dragging the knobs at the top of the gradient control.

Adding more colors to a gradient

You can add more colors to a gradient by double-clicking at the desired position in the gradient control. A new color, represented by a new color knob, is added to the gradient. This is a new basic color that can be replaced (by choosing a different color in the popup button) or adjusted later.

Removing color from a gradient

To remove color from a gradient, select the corresponding color knob in the gradient control and press the DELETE key. Note that this only removes the color from the gradient, not from the Library.

Drawing linear gradients

After selecting a gradient from the fill popup button menu in the Inspector, you can choose the “Angular” gradient option. Linear Gradient

To adjust the angle of the linear gradient, you can either input it directly to the text field, or use the circular slider control. By default, the circular slider snaps to multiples of 45 degrees. You can suppress this by pressing down the OPTION key while dragging.

If you want to specify the start point and the end point of the gradient manually you can do so by choosing the “Two Point” gradient option. A two point gradient editing interface automatically appears in the Canvas. This interface is visible whenever you select a shape with two point gradient fill.

Drawing circular gradients

To draw a circular gradient, you have to select a gradient from the fill popup button menu in the Inspector. Then, you have to choose the “Circular” gradient option.

Circular Gradient

A circular gradient editing interface automatically appears in the Canvas. This interface is visible whenever you select a shape with circular gradient fill. It consists of two circles, each representing one “end” of the circular gradient.

You can drag the center of either of these circles to a new position. In addition, you can also adjust the size of the circles. Just click anywhere on the diamater of the circle and drag.

By default, the center and the diameter of both circles snaps to the edges of the edited shape. To suppress this, hold down CONTROL key.


Shadows

PaintCode supports shadows for fills, strokes and text. It also supports inner shadows for fill. Both are very useful for simulating plasticity in your drawings.Shadows depend on the color they use. If such color is adjusted, the derived shadow is updated accordingly.

Using a shadow

Setting a shadow
To use a shadow, select it from a shadow popup button menu.

These menus are automatically populated with your Library shadows. Note that shadows for fill and stroke are set separately. Fill also supports inner shadows.

Adding a new shadow

There are 2 basic ways of adding a new shadow:

  • Ensure the “Shadows” category is selected in the Library header and click on the “+” button.
  • Click on the “Add new shadow…” menu item in a shadow popup button menu. This also sets the newly-created shadow in the popup button.

After adding a new shadow, a shadow editing popover appears. More about editing a shadow can be found in the following section.

(Note that you can also add shadows by copying and pasting shapes that use shadows from another document)

Editing a shadow

You can edit a shadow by double-clicking on it in the library. Alternatively, you can reselect the same shadow in the Inspector popup button to show the edit color popover.

Editing a shadow

The text field contains the name of the shadow. PaintCode generates all names for you, but you can always change them to be more descriptive.

To change the color of the shadow, select a color from the popup button menu. A few tips:

  • bright outer shadows can be used to simulate glow:
    Glow Shadow
  • bright outer shadows with low blur radius and negative offset are useful for simulating inset user interface elements:
    Inset Shadow
  • bright inner shadows with low blur radius and positive offset are useful for simulating highlights of plastic user interface elements:
    Plastic Shadow
  • dark inner shadows are great for cutouts:
    Cutout Shadow

Images

There are situations when you just have to use images. For example, you may want to include real-life photos in your designs. We’ve added support for images to PaintCode to let you do just that:

The “Images” Library section lets you create and manage images. You can provide both Retina and non-Retina versions of your images.

The most convenient way to import images to your document is to select them in Finder and drag & drop them to the Library section. PaintCode will automatically pair non-Retina and Retina versions of the same image for you during the importing process. If you do not use the @2x naming convention, PaintCode will even analyze the content of the images to do the pairing.

Alternatively, you can also import images by:

  • using the File / Import menu
  • drag & dropping an image to an image well in the image editing popover
  • double-clicking an image well in the image editing popover

All shapes can be filled with an image. Simply select an image in the Fill popup button in the inspector:

You can choose between 3 alternative behaviors of the image fill – “Single”, “Tiled in Shape” and “Tiled in Background”. In addition, you can also specify the X and Y offset of the image.

Normally, the non-Retina alternatives of your images are used in the drawing canvas. However, when you turn on the Retina mode in PaintCode, the Retina alternative will be used. The generated code is universal in this regard and will work equally well on both Retina and non-Retina displays (if you provide the necessary images in your Xcode project, of course).

All the images you import to PaintCode are stored inside the PaintCode document, so you don’t have to worry about keeping track of those when sending PaintCode documents to other designers and/or developers. You can export all of these images back to disk at once by using the new export feature.


Shapes & Groups Browser

Object Browser

Shapes & Groups Browser displays a tree of all shapes and groups in your document. The order of the shapes in the object browser list reflects their drawing order in the Canvas. You can tell which shapes do not have a fill by the small icons beside their name.

Additionally, the selection in the browser is synchronized with the selection in the Canvas. You can select a shape in the Canvas by clicking on its name in the browser. Note that you can select multiple shapes at once. It is possible to start editing a bezier by double-clicking it in the browser.

When you double-click a group, the group will be made active, and you will be able to select and edit its content in the canvas. Alternatively, when you select a shape that belongs to some group in the browser, the enclosing group will be activated automatically. The disclosure triangle of an activated group will turn blue.

To delete a shape or group, select it and press the DELETE or BACKSPACE key.

You can rearrange the order of the shapes and groups by dragging the rows in the browser. This is equivalent to changing the graphics order using the bring-to-front and send-to-back commands. You can also use dragging to move a shape inside some group (or remove it).


Inspector

Inspector
Inspector is a place where you can adjust attributes of selected shapes. The inspector supports multiple selection, so it is possible to edit multiple shapes at once.

Renaming a shape

Each shape has a name that can be edited in the Inspector. PaintCode generates all names for you, but you can always change them to be more descriptive. The name of shape is primarily used for code generation.

Extracting attributes

Some shape attributes can be extracted. This only affects the generated code. An extracted attribute is defined as a separate variable just below the library item declarations. This makes it is easy for you to change the attribute manually after you integrate the generated code to your source code. An attribute that is not extracted is usually used as a plain constant somewhere deep in the generated code.

You can extract an attribute by clicking on the extraction button, where available:

Extract On

Extract Off


Canvas

Drawing Canvas

Zooming the Canvas

  • To zoom in, press COMMAND and PLUS.
  • To zoom out, press COMMAND and MINUS.

Alternatively, you can zoom in and zoom out using the pinch gesture. Or you can hold down the OPTION key and use the two-finger vertical swipe (or rotate mouse wheel) to zoom in or out. This method focuses on the position of the cursor, so you can easily zoom directly to any part of the Canvas.

Moving around the Canvas

Preview
You can use the scrollbars or two finger swipes to move around the Canvas.

Additionally, it is possible to navigate around the Canvas using the Preview. If you click on some point in your drawing in the Preview, the Canvas automatically centers at that point. Moreover, you can click and drag in the Preview to move around the Canvas smoothly.

Changing the Origin (flipped NSViews, etc.)

Sometimes, it is necessary to move the drawing origin of your document.

The default drawing origin in OS X is the lower left corner. However, flipped NSViews have the origin in their upper left corner, and the direction of the Y axis is reversed.

On iOS, the origin is in the upper left corner by default.

You have to specify the correct origin, otherwise the generated source code may not work as intended. Fortunately, this is really simple.

Changing the origin using the origin popup button

Origin

  • Decide whether you want to generate code for OS X, iOS or MonoTouch. Choose one of the three target options:Operating System Button
  • If you chose OS X and want to draw to a regular NSView, select the “Default origin” option in the popup button menu: OS X default origin
  • If you chose OS X and want to draw to a flipped NSView, select the “Flipped origin” option in the popup button menu. OS X flipped origin
  • If you chose iOS or MonoTouch and want to draw to a UIView, select the “Default origin” option in the popup button menu. iOS default origin

In nearly all cases, that is all you have to worry about.

iOS does not have flipped UIViews, so you probably never have to use the “Flipped origin” option. However, the option works and may be useful in some rare situations (for example, when you are drawing to a context that is upside down, for whatever reasons).

Changing the origin manually

Sometimes, it is useful to move the origin to an arbitrary point in the canvas. For example, you may draw several user interface elements on a single canvas. Some of these elements may not fit the canvas properly and may be too far away from the origin to be useful. Instead of moving the drawings around to obtain the correct source code, you can move the origin to them.

First, follow the steps for changing the origin using the origin popup button. This will move the origin to lower or upper left corner, but it will also ensure that the Y axis has the correct orientation for your drawing destination.

Then, simply drag the origin in the Canvas to the desired position.

Retina Canvas

Retina ONRetina OFF
To help you prepare for the world of high-resolution, high-density displays, PaintCode allows you to activate the Retina mode. This doubles the resolution of the Canvas.

With the Retina mode turned on, you can instantly see what your drawing would look like on the iPhone 4, iPhone 4S, the new iPad and other retina-display devices that may come to be in the future.

To toggle the Retina mode on and off, simply click on the Retina button:

The Retina mode does not affect the generated source code in any way – this feature is provided only for your convenience, since the generated code is resolution-independent.

Canvas Settings

Canvas Settings
You can access the canvas settings by clicking on the “Canvas Settings” button on the right side of the Canvas & Code toolbar. Alternatively, you can also user “Canvas / Settings…” application menu.

Changing canvas size

To change the size of the canvas, simply enter the desired dimensions in the appropriate text fields..

Changing canvas background color

To change the underlay color of the canvas, simply click on the color well. Note that the underlay color does not have any effect on the generated source code. Also note that this color is used when you export your drawing as a TIFF, PDF or PNG file with background. To export your drawing with a transparent background, set the underlay color to a clear color.

Changing canvas background image

First, make sure that the “Use Image” checkbox is checked. Then, drag and drop the desired image on the image well. You can also offset the background using the controls below the image well.

Showing/hiding the grid and changing its color

To show or hide the canvas grid, use the “Show Grid” checkbox in Canvas settings. Alternatively, press OPTION + G.

PaintCode adapts the color of the grid to the underlay color of the canvas. You can, however, set your own grid color. Simply click on the color well.


Selection

Selecting individual shapes

To select a single shape, simply click on it in the Canvas. Alternatively, you can select a shape by clicking on its name in the Shapes & Groups Browser.

Selecting a shape behind the current selection

To select a shape that is behind the current selection, hold down the COMMAND key and click.

Selecting multiple shapes

You can select multiple shapes by

  • using the selection rectangle – clicking on an empty space in the canvas and dragging towards shapes you want to select
  • holding down the SHIFT key and clicking on individual shapes, adding them one by one
  • selecting multiple rows in the Shapes & Groups Browser

Modifying the selection

It is possible to modify your current selection by holding down the SHIFT key and:

  • clicking on an unselected shape adds it to your current selection
  • clicking on an already selected shape removes it from your selection
  • using the dragging selection rectangle to add or remove multiple shapes from the current selection at once

Deleting the selection

To delete the selection, press the DELETE or BACKSPACE key.

Rearranging the shapes

Send to Back / Bring to Front toolbar icons
You can bring the selection directly to the front or send it all the way to the back using the main application toolbar.

Alternatively, you can also use the application menu for a more fine-grained control over shape order:


  • Press OPTION + SHIFT + COMMAND + F to bring the selection forwards
  • Press OPTION + SHIFT + COMMAND + B to send the selection backwards

Getting code for selection only

PaintCode displays the generated code for all shapes in the Canvas.
However, it is also possible to obtain the code for your current selection of shapes only.
Simply select the shapes in the Canvas that interest you and copy them to the clipboard (COMMAND + C).
When you try to paste the shapes to Xcode, their drawing code will be pasted instead.


Code Generation

Code Generation Options
As you draw, PaintCode generates the drawing code on-the-fly. There are, however, a few settings that affect the code generation.

Target

Operating System Button
First and foremost, you have to choose between 3 targets: OS X, iOS and MonoTouch. The OS X option generates Objective-C code that uses OS X APIs. The iOS option generates Objective-C using the iOS APIs. The MonoTouch option generates C# code that uses MonoTouch APIs (iOS-only). You can specify the target using the target popup button in the lower toolbar.

The target setting only affects the generated code, your drawing stays the same.

Drawing origin

The second most important code setting is the drawing origin. The position of the (0, 0) point may vary, depending on your target operating system and your target drawing context. For example, the default drawing origin is the lower left corner in OS X, but the upper left corner in iOS. See Changing the Origin (flipped NSViews, etc.) for more information.

Memory Management

For OS X and iOS targets, you can choose between Retain/Release (manual memory management) and ARC (Automatic Reference Counting).

Extracting shape attributes

Some shape attributes can be extracted. This only affects the generated code. An extracted attribute is defined as a separate variable just below the library item declarations. This makes it is easy for you to change the attribute manually after you integrate it to your source code. On the other hand, an attribute that is not extracted is usually used as a plain constant somewhere deep in the generated code.

You can extract an attribute by clicking on the extraction button, where available:

Extract On

Extract Off


Preview

PreviewPreview shows you a real-time, 100% preview of the Canvas. Additionally, by clicking on a point in the Preview, you can center the Canvas on that particular point. Moreover, it is also possible to click and drag in the Preview to move around the Canvas smoothly.

Shapes

Shapes

Creating a new shape

  • First, select the desired shape in the toolbar.
  • Click anywhere in the Canvas (keep holding the mouse button down)
  • Drag the cursor away.
  • When you are satisfied with the size of the shape, release the mouse button.

The point where you push the mouse button down and the point where you release it will become the opposite corners of the newly-created shape (except for the bezier).

Creating a shape with equal width and height

To draw a perfect circle, square, regular polygon or a star, hold down the SHIFT key while creating it.

Renaming a shape

Change Name Inspector
PaintCode generates shape name for you, but you can (and probably should) provide your own, more descriptive name. This name is used in the generated code.

To change a name of a shape, just select the shape and enter a new name in the Inspector.

Deleting a shape

To delete a shape, select it and press the DELETE or BACKSPACE key.

Moving a shape

You can move any shape by dragging it with your mouse. The shape will snap to other shapes to help you with alignment.

To suppress this snapping behavior, hold down the CONTROL key.

Moving a shape using keyboard

You can move the selected shape using the ARROW keys. By default, this will move the selection by a single pixel in the desired direction.

To move the selection by half a pixel, press OPTION + ARROW.

To move the selection by 10 pixels, press SHIFT + ARROW.

Resizing a shape

Shape Resizing Control Points
To resize a shape in a particular direction, click and drag the corresponding control point. PaintCode will aid you by snapping to other shapes.

To suppress this snapping behavior, hold down the CONTROL key.

To maintaing the aspect ratio of the shape when dragging one of the corner control points, hold down the SHIFT key.

Setting a fill color or fill gradient

Setting a fill

Click on the fill popup button and pick a color or gradient. You can also create a new color or gradient by choosing the “Add new color/gradient…” option from the popup menu.

Setting a fill shadow

Setting a fill shadow

Inner and outer shadows are set separately. A shape can have both an inner and outer shadow. To set an outer shadow, click on the “Outer shadow” popup button in the “Fill” section of the Inspector. Then, choose the shadow you like, or create a new one by picking the “Add new shadow…” option from the popup menu. Inner shadow has its own popup button, but the steps are the same.

Setting a stroke color

Setting a stroke color

Click on the stroke popup button and pick a color. You can also create a new color by choosing the “Add new color…” option from the popup menu.

Setting a stroke shadow

Click on the popup button labeled “Shadow”, then pick a shadow you like (or create a new one by choosing the “Add new shadow…” option). Note that strokes and fills each have separate shadow settings. Strokes cannot have inner shadows.

Copying style of another shape

It is often convenient to create a new shape that has the same “style” as some other, already drawn shape. First, select the shape with style you want to copy. Then, create a new shape. The newly-created shape will automatically match the style of the previously-selected shape.

Extracting shape attributes

Some shape attributes can be extracted. This only affects the generated code. An extracted attribute is defined as a separate variable just below the library item declarations. This makes it is easy for you to change the attribute manually after you integrate the generated code to your source code. An attribute that is not extracted is usually used as a plain constant somewhere deep in the generated code.

You can extract an attribute by clicking on the extraction button, where available:

Extract On
Extract Off

Flipping a shape

Flip Tools
To flip a shape horizontally or vertically, click on the appropriate icon in toolbar.

You can also use the application menu option “Selection / Flip Horizontally” and “Selection / Flip Vertically”.

Contracting and expanding a shape

Contract and Expand Tools
When you contract a shape, its sides are pushed inwards by a single pixel. Expanding a shape does the reverse. To contract or expand a shape, click on the corresponding icon in the toolbar.

Alternatively, you can use “Selection / Contract” and “Selection / Expand” application menu options.

Converting shape to a bezier

Converting shape to a bezier
You can convert any shape to a bezier shape. Bezier shapes are sometimes more useful, because you can edit and rotate them.

To convert shape to a bezier, select the shape and choose “Selection / Convert to Bezier” from the application menu. You can also do the same from the Canvas context menu.

 


Beziers

Bezier

Creating a straight line

  • Select the bezier tool from the toolbar.
  • Click at the point where you want to start a new straight line.
  • Release the mouse button before moving the cursor.
  • Click somewhere else
  • Release the mouse button before moving the cursor.
  • Optionally, you can continue repeating the previous two steps to draw a polyline
  • Optionally, close the polyline by clicking on the first control point, thus creating a polygon

Caution: moving the cursor before releasing the mouse button will make the line curved, not perfectly straight.

Creating a curved line

  • Select the bezier tool from the toolbar
  • Click at the point where you want to start a new curved line.
  • While holding the mouse button down, move the cursor to the desired position of first curve handle
  • Release the mouse button.
  • Click at the point where you want to end the curved line.
  • While holding the mouse button down, move the cursor to a new location and release the mouse button.
  • Optionally, keep repeating the previous two steps to make a more complicated curved line
  • Optionally, close the area enclosed by the curved line by clicking on the first control point.

You can always create a straight segment (or a curved segment with only a single curve handle) by releasing the mouse button without moving the cursor.

Editing a bezier

Bezier Edit Tool
Double-click on a bezier shape to edit it. Alternatively, you can also select the shape first and then click on the “Edit” tool in the toolbar.

Extending a bezier path

Beziers that are not closed can be extended from both ends. To extend a bezier:

  • Select the bezier
  • Activate the editing mode (double-click)
  • Click on either end of the bezier path
  • Press OPTION or COMMAND or SHIFT or CONTROL to activate extending
  • Now, when you move the cursor around, you should see yellow indication of the possible bezier extension
  • Move cursor to a desired position and click. You can create both straight and curved extensions, depending on when you release the mouse button. See Creating a curved line.
  • Optionally, close the bezier by clicking on the opposite end of the bezier path

Adding a new control point in the middle of a bezier

Bezier After SplitBezier Before SplitTo add a new control point in the middle of a bezier, simply click at the point where you want to add the new control point. This will split the curve at that particular point to two curves, maintaining the original curvature.

Adjusting control point position

You can move individual control points around by dragging them with the cursor. PaintCode will help you draw sharp drawings by aligning control points to certain positions. This behavior depends on your stroke and stroke width settings, so it is always a good idea to set these settings to final values before moving the control points.

Don’t worry, even if you forget to do so, you can always fix it later. But if, for example, you draw your bezier with stroke width = 1, and later change it to stroke width = 2, your drawing will not be as crisp as it could be. To fix this, you will have to readjust the control points manually, since PaintCode does NOT automatically rearrange all control points when you change the stroke settings.

Without any modifier key pressed the control point will be “crisp” at the new position (by snapping to the nearest “crisp” coordinate).

With OPTION pressed, the dragged control point will lie in the half-point grid when released.

With COMMAND pressed, the snapping behavior of the dragged control point is suppressed entirely – the control point will be at an arbitrary position when released.

Bezier SnappingThe dragged control point will also snap to coordinates of other control points to help you out. However, you can turn this behavior off by holding down the CONTROL key.

Adjusting control point position with keyboard

It is also possible to move the control points around using the keyboard. First, select a control point by clicking on it. Then, press an ARROW key to move it. By default, this moves the control point by a single point. To move the control point more quickly, hold down the SHIFT key while pressing the ARROW key. This moves the control point by multiples of 10. You can also move the control point by half-points – just hold down the OPTION key while pressing the ARROW key.

Adjusting curve handles

Aligned Bezier HandlesIndependent Bezier Handles
Curve handles can be adjusted by dragging them. If the control point and both of its handles are aligned, the opposing curve handle will move together with the handle you are dragging to preserve the alignment. To suppress this behavior, press OPTION while dragging.

On the other hand, if the control point and its curve handles are not aligned, the handles will move independently. In such cases, pressing OPTION will force the opposing handle to align.

In order to snap curve handle to horizontal, vertical and diagonal lines, press SHIFT while dragging it.

Controlling the curvature

A control point does not always have both curve handles. For example, in the case of a line or polyline, the control points do not have any curve handles. You can add and remove curve handles to a bezier at any time.

To remove a curve handle, select it by clicking on it and press DELETE or BACKSPACE.

To add both curve handles to a control point, select the “Make Point Round” option in the control point context menu. To remove both curve handles, select the “Make Point Sharp” option.

Curved Bezier
Curved Bezier Ready For Sharpening
Sharp Bezier

Closing a bezier

  • Select one of the ending control points
  • Press OPTION or COMMAND or SHIFT or CONTROL to activate extending
  • Click on the opposite ending point. You should see a preview of the closed bezier while hovering the opposite ending point.

Bezier Extension
Bezier Close Hint

Rotating a bezier

Bezier Rotation

  • Make sure the bezier is NOT in edit mode. You should see the regular resizing control points.
  • Place the cursor over one of the resizing control points
  • Press the COMMAND key and drag the resizing control point to rotate the bezier
  • To force the rotation angle to multiples of 45 degrees, hold down the SHIFT key

Boolean operations

Boolean ToolbarPaintCode supports 3 boolean operations: union, intersection and difference. Using them is simple. First, select two or more shapes from the Canvas. Then, click on the desired operation icon in the toolbar or use one of the “Selection / Union”, “Selection / Intersection” and “Selection / Difference” options from the application menu.

PaintCode will create the resulting shape. This shape will take its appearance settings (such as stroke, fill, …) from the bottommost original shape. All original shapes will remain intact.

Boolean Intersection Result


Dynamic Shapes

In previous versions of PaintCode, it was not possible to generate code for resizable shapes. All coordinates and dimensions were fixed and hard to modify.
PaintCode 1.1 introduces a major new feature called dynamic shapes. With dynamic shapes, you can define how shapes should behave when they are resized. This dynamic behavior is then baked in the generated code.

Dynamic Shapes

To make a shape dynamic:

  • draw a frame around the shape
  • define how the shape should behave when the enclosing frame is resized

Of course, a single frame may contain many shapes.

Frames

Bezier

To create a Frame, simply select the “Frame” tool from the toolbar, then click and drag in the canvas.

Frames are not shapes. By themselves, they do not draw anything. However, they affect the generated code. Frames also affect the dynamic behavior of shapes inside them.

In the generated code, a frame looks like a rectangle variable:

Frame's rectangle variable

Dynamic shapes derive their sizes and coordinates from their enclosing frames.

When you resize a frame in the canvas, all derived shapes are resized/moved around, too.
To suppress this behavior, hold down the COMMAND key while resizing the frame.

Resizing Constraints

You can define the resizing behavior of a shape using the resizing constraints in the Inspector:

Constraints

These constraints define the relationship between a shape and its frame. There are six constraints: left, right, top, bottom, width and height.

Constraints in use

When defining the relationship between shape and its frame, horizontal constraints (left, width, right) are entirely independent from vertical constraints (top, height, bottom). For clarity, we will only describe the behavior of horizontal constraints.

Each constraint can be either rigid or flexible.

The left constraint represents the distance between the left side of the shape and the left side of the enclosing frame. When the left constraint is rigid, PaintCode will make sure that no matter how you resize the frame, the left side of the shape will maintain a constant distance from the left side of the frame. When the left constraint is flexible, PaintCode will try to make the corresponding distance as large as possible, respecting the other two (width, right) constraints.

Width and right constraints work similarly. With specific combinations of rigid/flexible constraints, you can achieve a wide variety of useful behaviors.

Centering a fixed-width shape

Bezier

Making the shape resize proportionally

Making the shape resize proportionally

Shape with a constant margin on both sides

Shape with a constant margin on both sides

Shape that sticks to the right

Shape that sticks to the right

Shape that sticks to the left and resizes proportionally

Shape that sticks to the left and resizes proportionally

Frame & Shape Hierarchy

Nested Frames

  • you can nest multiple frames inside each other
  • frames also have resizing constraints

PaintCode creates the frame hierarchy automatically for you, taking the positions and sizes of the frames into account. By default, all shapes that are fully or partially inside a frame belong to that frame.

In some situations, it is desirable that frame only affects shapes that are entirely enclosed by it. You can turn on this behavior by checking the “Apply only to entirely enclosed shapes” checkbox in the frame Inspector:

Apply only ot entirely enclosed shapes checkbox

If a shape belongs to multiple frames, the smallest of these frames is used as the reference frame for the shape.

Dynamic Beziers

For simple shapes such as rectangles and ovals, it is sufficient to specify their resizing behavior with the resizing constraints. However, you need a finer control for beziers.

Configuring a dynamic bezier

The differences are:

  • you can define the resizing constraints for individual controls points of beziers
  • different control points can depend on different frames (there is no single reference frame for a bezier)

Since control points do not have width and height, the constraints control is simpler:

Control Point Constraints Control

You have 4 constraints: left, right, top, bottom. Each of them can be either rigid or flexible.

When the left constraint is rigid, the control point will maintain a constant distance from the left side of its reference frame.
Analogously, when the right constraint is rigid, the control point will maintain a constant distance from the right side of its reference frame.

When both left and right constraints are flexible, the control point maintains the same relative position inside the reference frame.
For example, imagine the frame is 300 pixels wide and the control point is 100 pixels from the left side of the frame. When you
resize the frame to be 600 pixels wide, the control point will be 200 pixels from the left side of the frame.

It is not possible to have both left and right constraints rigid.

It is possible to achieve complex resizing behavior by setting resizing constraints for individual control points. Moreover, since you can use multiple (or even nested) frames, creating lots of interesting behaviors is simple.

Frames and constraints have much wider range of uses than just a resizing:

Another dynamic bezier example

Groups Example


Groups

When you group a set of shapes, the resulting Group will behave as a single shape that you can resize and move around the canvas. This is highly desirable in complex documents, because it provides a way to “hide” the complexity in a logical fashion, making the document more manageable in the process. You can also:

  • Create a smart group, with a custom resizing behavior for its content
  • Give an outer shadow to the group content
  • Control the transparency of the group content
  • Achieve interesting visual effects by using non-standard blending mode
  • Clip the group content to a certain shape

Grouping & Ungrouping Shapes

Group and Ungroup icons

To create a group, select one or more things in the canvas, then click on the Group icon in the toolbar.
To do the reverse, select a group you want to ungroup, then click on the Ungroup icon in the toolbar.

Groups can be nested; you can have groups of groups.

Editing a Group

To edit a group, simply double-click it (either directly in the canvas, or in the Shapes & Groups Browser). Alternatively, you can also select some of the group’s child shapes from the Shapes & Groups Browser. This will activate the enclosing group.

Dynamic Shapes
When a group is being edited (or active), it’s content shapes can be freely adjusted and moved around. An active group has a blue disclosure triangle in the Shapes & Groups Browser.

To stop editing a group, press the ESC key or click outside the edited group in the canvas.

Shadow & Opacity

Dynamic Shapes
Using the Inspector, you can assign a shadow to the whole group. The group will drop a shadow as if it were a single shape. There is a difference between assigning a shadow to each individual shape inside a group (left) and assigning a shadow to the enclosing group (right).

Similarly, the opacity of a group can also be adjusted. As with shadow, the opacity is applied to the whole group, as if it were a single shape. Overlapping shapes with 50% opaque colors (left) and a group with 50% opacity (right) look differently.

Blend Modes

Blend mode affects how the contents of a group are drawn over the underlying graphics. See Apple’s blend mode documentation for more information.

Clip Example

Clip

In the group’s inspector, you can (optionally) specify a clipping shape. The group’s drawing will then be limited to the clipping shape interior. The clipping shape looks like a white-black dashed line in the drawing canvas.

Smart Groups

With Smart Groups, you can define how the group’s content should behave when the group is resized and moved around the canvas.
This allows you, for example, to create a resizable user interface control which you can then use conveniently multiple times in the canvas. Each control can be represented by a separate smart group and manipulated easily:

Clip Example

Making a smart group is really easy. First, create a dynamic drawing using Frames. Then, simply select the entire drawing (including the frame) and group it. The resulting group will be a smart group – when you resize it, the contents will resize according to the resizing constraints you’ve specified when defining the relationship between the content shapes and the frame.

If you already have a group, you can easily make it a smart group by adding a Frame inside.

Indeed, the only difference between regular groups and smart groups is that smart groups have frames inside them.
If you place a frame inside a group, the frame will only affect other shapes inside the same group.

Smart Group Example

On the right, you can see the structure of the slider control smart group. By adding a frame inside this group and setting the resizing constraints properly, we’ve created a group that is easily resizable (and reusable) across the document.