PaintCode Tutorial for Designers: Getting Started

PaintCode Tutorial for Designers: Getting Started
Make a stopwatch in PaintCode!

Make a stopwatch in PaintCode!

PaintCode is a fantastic little Mac app that turns your vector graphic designs into Core Graphics code you can easily use in your iOS apps.

Not only does it create all of the code to support your lovely vector graphics, but these graphics can be dynamic, which means you can change their color, size, layout, and more, all from within your code.

In this tutorial, you’ll learn how to create two static assets — a stopwatch image and a stopwatch hand — which you’ll export to a StyleKit that you can use in your app.

StyleKits keep track of all the things such as colors, gradients and shadows that you use in your project. If you make any changes to your assets in PaintCode, you simply have to export the StyleKit again and your project will be updated in a snap.

Note: This tutorial does not require any coding experience or any prior experience with PaintCode.
PaintCode Stopwatch

Here’s what you’ll make!

Getting Started

First make sure you have a paid copy of PaintCode. The free trial will not work for this tutorial; it has a number of restrictions such as the inability to copy/paste, the inability to export code, and more.

Open PaintCode; a new document should open automatically, but if not, simply select File\New.

PaintCode new document

Check out the Canvas panel on the right-hand side of the screen; this is the Inspector pane, which you can use to change the attributes of your selection:


In the Canvas section, rename the canvas to Stopwatch, change both the width and height of the canvas to 250, and change the Code Export dropdown to StyleKit Drawing & Image Method as shown below:


This generates two methods in the StyleKit class; one to perform the actual drawing, and another to return a UIImage representation of the drawing.

Note: The top-left of your canvas is the master origin; the locations of all object origins will be calculated from this point in pixels. You simply create your art in PatinCode in non-Retina sizes, and the code takes care of creating the Retina-sized assets.

Creating the Stopwatch

Next, choose Oval from the Toolbar at the top of the screen:


Click and drag a circle onto the canvas – the exact shape doesn’t matter as you’ll modify the values next.

With the circle selected, head back to the Inspector and set both the width and height of your Oval to 220, the X position to 15 and the Y position to 30:

Drawing a circle in PaintCode

This moves your object’s origin down and over a little to (15, 30); by default the origin of your object is at (0, 0).

Click the Fill dropdown in the Inspector and select Add new Color…:


In the resulting menu, change the name of your color to Base Color and the hex value to #118DDA:

PaintCode color settings

Click anywhere outside of the menu to close it.

Next, go up to the Toolbar and choose Rect. Drag out a rough rectangle at the top of the circle, and modify the position and size of your Rectangle as follows:

  • X: 114
  • Y: 2
  • W: 22
  • H: 34

Your Canvas should now look like the following:

PaintCode draw rectangle

Next, drag out another Rect on your Canvas that’s 30 wide and 20 — the exact position doesn’t matter right now. You should have something like the image below:

PaintCode create rectangle

Now drag out another Rect, but hold down Shift to keep the aspect ratio 1:1 and drag out to a size of 10 x 10:

PaintCode create rectangle

Click the + button at the bottom right of the canvas area to see your rectangles up close; you can also pan around by holding the spacebar and clicking and dragging your mouse.

[TODO: FPE: A note on the efficiency of the steps below: I suspect it would have been easier to just rotate the rectangle, then union it with the square. This tutorial rotates the square, unions it with the rectangle, then rotates the whole shebang by -45 degrees. If there’s a reason for doing it the long way ’round we should note this.]

Now you need to rotate the rectangle by -45 degrees. Click on the rectangle to ensure it’s selected, then go to the Inspector and click on Transforms to expand the panel. Enter -45 for the Rotation:


Move the square so the upper right point of the square intersects the diagonal right side of the rectangle as shown below:


Hold down Shift, and click on both the rectangle and the square to select them. Now click Union in the toolbar to combine the two rectangles into a single shape like so:


Position the shape at X 200, Y 30, either manually or by setting the X and Y coordinates in the Inspector:

PaintCode position

Okay — that takes care of the main body and buttons of your stopwatch. Zoom out so you can see the entire stopwatch; it should look something like the following:

PaintCode stopwatch

Save your project before you move on: click File\Save or press Command-S, name your project PaintCodeTutorial and click Save.

Creating the Stopwatch Hand

You know what a stopwatch is without a second hand? Really inaccurate. :]

Creating a stopwatch hand would be the next logical step.

You’ll eventually place the second hand on a new canvas, but you’ll first create the hand on the old canvas so you can position it properly over the stopwatch.

First, create the new canvas. Right-click anywhere outside of the current canvas in the central portion of your window. Select Add New Canvas, and you’ll see a menu pop up. There are plenty of iOS device resolutions to choose from, but look at the top of the menu where you’ll see one of two things: either (200×200) Default, or (250×250) Size of Stopwatch:

PaintCode new canvas

If you had the Stopwatch canvas selected when you right-clicked outside the window (you’d know this as the canvas would be outlined in blue rather than grey), you’d see the (250 x 250) Size of Stopwatch option. If the Stopwatch canvas wasn’t selected, you’d see the (200 x 200) Default option instead.

In this tutorial choosing one over the other doesn’t make a lot of difference, but this demonstrates an easy way to create a new canvas with the same dimensions as another canvas: click on the canvas to select it, then right-click outside the canvas to create a new one.

In either case, select the first option in the list.

You can move the canvas around by clicking and dragging the title at the top of the canvas. The position of the canvas is not important, but if you don’t like where PaintCode chose to put the canvas, you can move it around to suit.

Change the title of the canvas to Stopwatch_Hand, the width to 250, and the height to 220. Since your stopwatch hand will be white, a darker canvas color will make it easier to see what you’re drawing. Click the white color rectangle next to Background and select black to change the background color. Leave the StyleKit option as Drawing Method.

Your canvas and Inspector should look like the following image:

PaintCode new canvas

Note that the actual canvas color does not affect the code at all.

Now head back to the Stopwatch canvas, choose Oval from the Toolbar and hold down Shift while you drag out a circle like so:

PaintCode circle

Click the Fill dropdown and click the white circle from the list of selections to set the circle’s color:

PaintCode color settings

Change both the Height and Width to 30, then manually center the circle on the stopwatch’s blue circle face. Purple guides will pop up to help you position the circle. When you’re done, the circle’s origin should be at X 110, Y 125:

PaintCode position

Now for the hand itself. Click Rect in the Toolbar and drag out a white rectangle of Width 8 and Height 115. You can always tweak the rectangle’s color, width, and height in the Inspector if necessary.

Drag the rectangle over the white circle and position it as shown below:

PaintCode draw rectangle

You are going to combine the two shapes, but first you have to set the circle shape’s origin appropriately so that the hand will rotate around the center of the circle.

Shift-click both the white circle and rectangle and expand the Transforms section in the inspector to see their respective origin points:

PaintCode shape origins

You want the origin of the combined shape to be in the center of the circle — but you need to know exactly where that point is. You can’t just guess.

Click away from the shapes to deselect them. Click the circle to select it, then click Transforms in the Inspector. Hover over the green circle and your cursor will turn into a hand. Click and drag the green origin marker to the center of the circle; the origin marker should snap to the center. Failing that, you can manually move the origin by entering -15 into both the X and Y values of Offset in the Transforms panel:


Take note of the origin’s X and Y position: 125, 140. You’ll need to enter this later.

PaintCode shape origins

Now you’ll union the two shapes. Shift-click the white circle and the white rectangle, and click Union in the Toolbar. Now click Transforms — you’ll notice that the white shapes have been combined into a new shape with the origin at the top left:

PaintCode shape union

If you left the origin in its current position, the hand would rotate around that point, rather than around the center of the circles. Click and drag the green origin circle until its X and Y values are 125 and 140 respectively:

PaintCode shape origin

In this case, you can’t edit these values from the Inspector or it will move the shape along with the origin — which is not what you want!

The only thing left to do is move your new stopwatch hand back to its own canvas. Select the shape and press Command-X to cut the stopwatch hand.

Click the Stopwatch_Hand canvas, then press Command-V to paste the hand shape; it will automatically place itself onto the new canvas with its origin at the same position as it was on the old canvas: X 125, Y 140.

PaintCode paste on black canvas

Since the new canvas is only 220 pixels high, instead of 250 high like the Stopwatch canvas, your shape is no longer located correctly. Since the hand’s canvas is 30 pixels shorter, the hand needs to be located 30 pixels closer to the origin in the Y direction..

Select the hand shape, then use the Inspector to change the position to (125, 110) as shown below:

PaintCode position

That’s the last bit of pixel-pushing! Time to give yourself…a hand! ;]

All that’s left to do is export this StyleKit project so you can use it in your code.

Exporting to StyleKit

Click the StyleKit tab, shown below:

PaintCode StyleKit tab

This tab lists the the Colors, Gradients, Shadows, Images, and Drawing Methods available to export. For this tutorial, you’re only concerned with Colors and Drawing Methods.

At this point, no colors are listed:

PaintCode StyleKit colors

You need to add your Base Color to the list so that you can eventually change the base color of the stopwatch in your app.

Click Add Color; a menu pops up with the one color you defined in your project — Base Color:

PaintCode StyleKit colors

Select Base Color, and it will appear in your list of StyleKit Colors like so:

PaintCode StyleKit colors

Scroll down and look at the two available Drawing Methods, one for the Stopwatch, and one for the Stopwatch Hand:


These have been included for you automatically, so you don’t need to do anything else here — you’re ready to export!

In the right panel, fill out the StyleKit information as appropriate; note that the Project field will be the filename of your export:

PaintCode StyleKit export

Take a deep breath — you’re nearly there! Click the big blue Export button:

PaintCode StyleKit export

You’ll see a popup window like the one below:


Click Export, and then Save. Open up the folder you saved it to, and you’ll see PaintCodeTutorial.swift: this contains the Core Graphics code to draw the stopwatch that you will use in your app.

PaintCode StyleKit export

Where to Go From Here?

The fun doesn’t stop here!

Head on over to PaintCode Tutorial for Developers: Getting Started, where you’ll use these assets to create a stopwatch app with an animated hand.

Best of all, these graphics will be created in your app as vectors, so they will be super-crisp on any device.

For more PaintCode practice, I highly recommend going through the Tutorials and Documentation on PaintCode’s website.

If you have any questions or comments about this tutorial, feel free to join the discussion in the forums below!

PaintCode Tutorial for Designers: Getting Started is a post from: Ray Wenderlich

The post PaintCode Tutorial for Designers: Getting Started appeared first on Ray Wenderlich.



Write a comment