Sketch Tutorial for iOS Developers

As an iOS developer, I’ve worked on a few projects without a designer, and let me tell you – it can be tough.

But one thing I’ve learned though these types of projects: even if you’re working without a designer, design is important – especially iterating on design.

Let’s face it, clients don’t always know exactly what they want. Jumping straight into Xcode before they figure it out usually ends with massive frustration and lots of beautiful code being thrown away.

The safer approach? Nail down the spec first by iterating on design mockups rather than code.

But how can you design without a designer?! Well, one great option is Sketch.

Sketch is a great tool for creating logos and custom icons. It’s vector-based, which means you can resize without losing quality. Since it includes iPhone device-sized Artboards and a built-in UIKit Template, you can also use Sketch to create mockups for design iteration. Plus, Sketch is simple enough for a busy developer to pick up quickly.

In this tutorial, you’ll learn how to:

• Create a mockup using the UIKit Template.
• Create icons using the Vector Tool.
• Create icons by combining basic shapes.
• Export image assets for Xcode.

And best of all, you’ll be able to follow along even if you’re a developer like me. Get ready to level up your design skills!

Getting Started

First things first, you’ll need Sketch. Download the 14-day trial at www.sketchapp.com. License activation costs $99.

Once you have Sketch installed, open Sketch, and sit back, relax, and get ready for a grand tour!

In the sections that follow, I’ll give you a tour of the various UI elements in Sketch and will challenge you to make various items. Note that everything you make is just for learning purposes; after you make it, you can safely delete it as you won’t need it later in the tutorial.

Let’s begin the tour!

Templates

The iOS UI Design template is a collection of UIKit components in vector format. It has a Tab Bar, Nav Bar, Table View, and more. You can use this as a springboard for creating mockups.

Let’s try this out. Select to File\New From Template\iOS UI Design, and you’ll see the following:

Notice there’s a Material Design option for the Android folks.

You’ll see a huge template with various iOS UI Components. You can move around the canvas by holding space and clicking to drag, and you can zoom by holding command and using your mouse wheeel.

Artboards

You can draw anywhere you want on Sketch’s infinite canvas, but if you’re mocking up an app with multiple screens, you’ll want to use Artboards. An Artboard organizes layers inside a fixed frame. When you export the Artboard, all the layers inside get combined into a single file. Think of them as View Controller Scenes in a Storyboard.

Let’s try this out. Perform the following steps to create a new Artboard:

• Hold space and drag until you have a clear area of canvas on the screen.
• Click the Insert button and select Artboard from the list.
• In the right pane, choose iPhone 6.

You should see a blank Artboard called “iPhone 6” in portrait mode. By default, a newly created Artboard will envelop any free-floating elements it overlaps. If this isn’t your intention, first pan to a clear area of the canvas.

You can add as many Artboards as you like. Sketch has sizes for iPhone, Apple Watch, and even the iPad Pro. If you ever need to get rid of an Artboard, just click on the title and hit delete.

Copy and Paste

Now that you have an Artboard, drag in a few items from the UIKit template. Start with a Navigation Bar, Tab Bar, and a Table View Cell.

Although you can copy and paste (⌘C and ⌘V) with Sketch, it’s hard to predict where the pasted item is going to end up. Instead, Option-Drag an item, and your copy always ends up where you let go of your mouse.

Basic Shapes

First, create a new artboard to work with by clicking Insert\Artboard and drawing a square somewhere in the canvas.

Now, let’s make some shapes! Click Insert\Shape to see a menu of available options.

In practice, it’s a lot easier to use the keyboard shortucts. Create an oval by typing the letter O and dragging your mouse across the screen. Do the same with R and you’ll make a rectangle. The most common shapes have their own keyboard shortcut:

• L: Line
• O: Oval
• T: Text
• R: Rectangle

See if you can use what you’ve learned to make this robot (note you may have to change your font settings to get this same look):

Styling a Shape

Shapes are all well and good, but the client won’t be impressed unless those shapes are pretty! You can use the Inspector on the right to change the properties of a layer, like color and border radius. Think of it like the Attributes Inspector in Xcode.

Here are some options you’ll be using in this tutorial:

• Position/Size: When it’s difficult to drag to the correct spot using the mouse, type in the exact number. Click the lock icon to keep icons proportional.
• Radius: This is a slider for adjusting the corner radius of a rectangle.
• Opacity: This is useful for tracing images. More on this later!
• Fills: Use the color picker to change the layer’s fill color, or uncheck the box for a transparent fill.
• Borders: Set the thickness and color of the border, or disable it entirely.

Two of the icons in this tutorial use a pill shape as a building block. Try creating one for yourself by styling a rectangle:

• Make a rectangle using the R keyboard shortcut.
• Round the corners by setting the Radius to a large value like 100

You can also try changing some of the other settings, as mentioned above.

Layer List

The Layer List in the left pane contains all the layers in your file. Layers that appear higher in the list overlap the ones below. Think of it as the View Hierarchy in the Storyboard.

Groups organize layers logically. You can move multiple layers as a unit if they are Grouped together. You can also export a Group of layers as a single image. In the Layer List, Groups are represented as folder icons.

Here’s a list of common shortcuts for managing the Layer List:

• ⌘G: Group multiple shapes together. Use ⌘-Shift-G to ungroup.
• ⌘R: Rename the selected item.
• ⌘-Option-Up/Down: Move an item up or down in the Layer List.
• ⌘-Shift-L: Lock a layer in place so it becomes unclickable. This is useful in the next section.

Try grouping some of the layers you added to your iPhone mockup, and give them a descriptive name.

Vector Tool

Drawing circles, squares, and lines is fun, but pretty limiting. But with the Vector Tool, you can make any shape you want!

Shapes With Straight Lines

You can create any polygon just by clicking: the spots where you click become the corners of a shape.

Let’s make a polygon:

1. Type V to activate the Vector Tool.
2. Start clicking the corners of a trapezoid.
3. Close the shape by clicking on the starting point.
4. Click the Edit button, and drag individual vector points around to reposition them.
5. Add a Fill color.
6. Remove the Border.

Thankfully, since Sketch lets you reposition each vector point after the fact, you don’t need to have great drawing skills to use the Vector Tool. The mouse also snaps to the red guidelines as you drag.

Rotate Copies

A simple trapezoid might not look like much, but you can use it to derive other shapes using the Rotate Copies feature. Rotate Copies creates multiple copies of your shape and fans them out in a circle, like the petals of a flower. Let’s try it:

1. Select Layer\Paths\Rotate Copies.
2. Type in 3 copies (counting the original shape, you’ll end up with 4 total).
3. Drag the white dot, which represents the center of the circle, to create icons like a bank logo, a shuriken, or a pinwheel.

Sketch automatically combines your rotated copies into a single shape. This tutorial will cover shape combination in a later section.

Scissors

Right above Rotate Copies is a menu option called Scissors. There’s a neat trick where you can create a WatchKit activity ring using the Scissors tool:

1. Create a circle (remember, use the O key and hold Shift and click to drag a circle).
2. Remove the Fill.
3. Increase the Border thickness to 25.
4. Select Layer\Paths\Scissors.
5. Snip open the circle by clicking the top left portion.
6. Next to Borders, click the Gear button to reveal a popup menu.
7. Select the rounded ends option.

Notice that a circle is really just a vector path made up of four points, and that vector paths can be open like the arc of a circle.

Modes and Handles

Sketch represents a circle using four vector points. You can see this by drawing a circle, and then clicking Edit in the toolbar.

But wait a minute — a rectangle also has four vector points. What’s going on? The difference between the two is in the use of Bezier Curves.

Bezier Curves are lines you can bend into curves using control points. Sketch calls these control points handles. Each vector point comes with two handles that control the curvature on each side. This means that the curve of a line is determined by the handle at each of its ends. This isn’t as complicated as it sounds: in Sketch, you simply drag the handles until the curve looks good.

Sketch defines four different Modes based on the relative handle positions on a vector point.

• Straight: The handles are retracted into the vector point, as if they didn’t exist. No handles means no curvature.
• Mirrored: The handles are the same length and form a straight line, like the wings of an airplane. Use this to create symmetric curves.
• Asymmetric: The handles form a straight line, but they can be different lengths.
• Disconnected: The handles are positioned independent of one another.

In practice, making curves is pretty simple. Just double-click on a vector point and click on Disconnected. Then you futz with each handle like the rabbit ears of a TV antenna until the curve looks right.

To learn more about modes and handles, this article is a great resource.

Bezier Curve Theory

You don’t really need to know the math behind Bezier curves in order to use the Vector Tool — I sure don’t! :] But I have a non-math analogy that helps me understand how the computer is drawing this stuff on screen.

Imagine a grand slam in baseball, but the umpire isn’t looking and the runners are cutting corners. Keep an eye on the red path.

First base and home plate represent vector points. Second and third represent handles. The path from first base to home plate is the Bezier curve.

Again, you don’t need to understand how Bezier curves work in order to use them, but if you’re interested, there’s an interactive visualization tool that simulates how the computer draws these things.

Vector Handles In Action

Enough mathing. Let’s use our new skills to create a map marker icon:

1. Create a circle.
2. Increase the Border thickness to 15.
3. Click the Edit button and select the bottom vector point.
4. Change the mode from Mirrored to Straight.
5. Drag the bottom point downward to stretch it out.
6. Drag the Corners slider to 35 to round out the corner.

The map marker shape is really just a circle with a corner as one of its points. Easy! You’ll revisit the map marker icon later on in the tutorial.

Creating Custom Icons

When coming up with a logo idea, it’s easiest to prototype with pencil and paper or use an online image as a starting point. Then you can trace the picture using the Vector Tool.

In this example, you will be recreating the Ray Wenderlich logo.

1. Rip a low-res version of the Ray Wenderlich logo right off the internet.
2. Drag and drop the logo into Sketch.
3. With the image selected, use the inspector to reduce the Opacity to 20% so it’s easier to trace.
4. Lock the layer using Command-Shift-L so you don’t accidentally drag it around. You should see a lock icon next to the layer name.
5. Type V to activate the Vector Tool.
6. Click on all the corners of the logo. You don’t need to click on the curve of the “R,” but do click the first corner again at the end to close the vector path.
7. Double-click anywhere along the path to Edit.
8. Reposition any points that are off the mark. You can pinch to zoom-in to get it pixel perfect.

To create the curve of the “R,” you’re going to put all your knowledge of vector point Modes to good use.

1. Double-click the top-left corner, and it will turn from Straight to Mirrored.
2. Change it to Disconnected.
3. Stretch the curved-facing handle out toward the right.
4. Tuck the other handle into the vector point.
5. Find the vector point on the other end of the “R” curve and double-click it.
6. Again, change it to Disconnected and drag the handles around. You might have to switch back and forth between both points of the curve before you get it right.

Luckily, the RW logo only has a single curve. You can still use this approach for more complex logos — you just have more curves to deal with. The project you’ll download later includes a rough attempt at the Swift bird logo. I’m using Tab to cycle through each vector point to show the handle positions.

Combining Shapes

Have you ever played that game Tangoes where you combine plastic triangles to form a rabbit shape? Previously, we covered creating icons using the Vector Tool, but another approach is to combine basic shapes.

In programming, you have Logical Operators AND, OR, and XOR. Sketch has something similar called Boolean Operators, but uses different terminology like Union, Subtract, Intersect, and Difference.

Union

Union adds shapes together. Let’s use this to combine a pill and circle shape to form a cloud.

1. Create a pill shape by maxing out the Radius on a rectangle.
2. Create a circle.
3. Move the circle so that it overlaps the pill.
4. Select both images, and click the Union button.

Notice how the outlines of the two shapes meld together. Voila! A cloud :]

Subtract

Subtract uses one shape to cut a hole out of another, like a cookie cutter.

The map marker from our previous example looks OK, but all the cool kids nowadays put a donut hole inside their map markers. You can do the same using the Subtract button:

1. Create a map marker icon, but this time make sure Border is unchecked.
2. Create a small circle and drag it onto the map marker.
3. In the Layer List, drag the circle layer onto the map marker layer to combine the shapes.
4. Expand the disclosure triangle on the newly combined shape.
5. Make sure the hole layer is above the map marker layer.
6. Click the boolean-operator icon to the right of the layer name to reveal a pop-up menu.
7. Select Subtract from the menu.
8. Select the donut hole sublayer and use the arrow keys to fine-tune its position.

Whew! Subtraction sure is complicated. But there are a few important concepts to take from this example:

• You can drop layers on top of others within the Layer List to combine them. How cool is that?
• When you combine the shapes, Sketch makes an educated guess about which operator you intended to use. If you see the None option selected, Sketch is picking one automatically.
• For subtraction, order matters. Make sure the hole layer is always on top. If your shapes disappear, try rearranging the sublayers in the Layer List.

Fill vs. Outline

For this part of the tutorial, you’ll need a starter Sketch file I’ve prepared for you and double click it to open it. You should see the following:

This starter file includes a one-page mockup and custom vector icons – feel free to review them to see how they were made. There are also some before-and-after Artboards, including a few for tab bar icons which you’ll use in this section.

Tab Bar icons change color based on the selected state, but some icons have a lot of empty space, so the color change is too subtle. In these situations, the Apple Human Interface Guidelines recommend using a separate filled version of the icon as the selectedImage. The mockup of the RWDevCon app has both a filled and outline version of each Tab Bar icon.

In the Sketch project file you downloaded earlier, there’s an Artboard called Calendar Starter which contains several building blocks that you’ll combine into a calendar icon. These building blocks are just rectangles and pills, which you already know how to make.

To create the filled calendar icon:

1. Open the Sketch file and expand the Calendar Starter Artboard in the Layer List.
2. Select the Calendar Body and Separator sublayers.
3. Press Subtract.
4. Shift-select the Right Hole layer and Subtract it from the above shape.
5. Also Subtract the Left Hole layer.
6. Shift-select the Right Ring layer and click Union.
7. Add the Left Ring layer using Union.

You should end up with a single shape that contains all the sublayers of the calendar-fill icon. Everything should be green except for the subtracted areas, which should be clear. If you run into any issues, use the Calendar Fill Artboard directly beneath for comparison.

Now that you have a filled icon, it’s time to create an outline version by resizing one of the sublayers.

1. Find the Calendar Fill Artboard on the canvas.
2. Expand the Calendar Fill Artboard in the Layer List.
3. Expand the Calendar Body layer and select the Separator layer.
4. Increase the Separator height to 35.

All it took to create the outline version of the calendar icon was to turn the separator line into a square. If Sketch doesn’t let you drag to the exact height, you can just type the number into the Inspector instead.

Round Profile Avatars

The RWDevCon mockup has round profile pictures of each speaker. To achieve this effect, you’ll use the Mask feature, which is very similar to Subtract. But rather than cutting a hole, Mask trims the outside of a shape like the crust off of a peanut butter and jelly sandwich.

Let’s create an avatar:

1. Expand the Greg Before Artboard in the Layer List.
2. Inside this Artboard, create a circle big enough to cover his face.
3. Select both the greg layer and the oval layer you just created.
4. Make sure the mask layer (in this case, the oval) is on the bottom.
5. Click the Mask button.
6. Expand the newly combined greg layer and select the Mask layer.
7. Add a Border, and use the arrow keys to adjust the position.

Make sure the masking layer is on the bottom. This is the opposite of Subtract, where the hole goes on top.

Image Export

You can export a single layer by clicking Make Exportable near the bottom right of the screen.

If you want to export multiple layers, there are a couple ways to do this:

• Group: When layers are grouped together, you can export the Group as a single image.
• Artboard: All the layers inside the Artboard are exported as a single image. The image size is based on the Artboard frame.

Before you export, check the Width and Height in the Inspector. These dimensions determine the @1x size of your image export.

PNG

Sketch makes it easy to export images in different densities:

1. On the bottom right, click on Make Exportable.
2. Click the Plus button to add a @2x copy.
3. Click the Plus button again to add a @3x copy.
4. Click the Export button to save the PNG files to disk.

PDF

You’re probably used to creating @2x and @3x versions of every image, but Sketch is vector-based, so take advantage of that. Xcode accepts vector images in PDF format, which is like SVG but with size information.

1. Click on Make Exportable.
2. Keep the size at 1x.
3. Select PDF as the Format, and click Export.

You can import this single PDF icon into the Asset Catalog.

1. Within Xcode, open Images.xcassets.
2. Create a New Image Set.
3. In the Attributes Inspector, change Scale Factors from Multiple to Single Vector.
4. Drop your PDF icon into the All image slot.

Xcode will generate the appropriate @2x and @3x PNG files for you at build time. You still end up with PNGs, so the benefit is managing fewer image files.

Where To Go From Here?

And that’s our intro to Sketch! You can download the Sketch project file here.

Sketch is powerful, with a lot of great features beyond what’s covered in this tutorial. To learn more, check out the official documentation. There are also blogs and videos for learning tips and tricks.

Finally, you can also download Sketch files that contain icon sets and vector images of iOS devices.

We hope you enjoyed this tutorial, and if you have any questions or comments, please join the discussion below!

The post Sketch Tutorial for iOS Developers appeared first on Ray Wenderlich.