Creating a vector logo in Sketch

Jeremy Osborn
Dec 19, 2014 · 21 min read

This tutorial will walk you through how to create a logo from start to finish. It will probably take you between 20-30 minutes to complete depending on your prior experience in Sketch and/or other creative applications. To follow along, feel free to download the image file here. If you’re looking for a tutorial on how to create prototypes in Sketch, check out my free course over on Aquent Gymnasium.

I highly recommend using the latest version of Sketch, which at the time of this article is version 52.3. If you have earlier versions, it will probably work fine, but there may be some differences in the user interface. Ready, set, let’s go!

Importing a graphic

The scanned logo you’ll be tracing over with vector tools in Sketch

Sketch’s strong suit is vector graphics, but you can also import and edit bitmaps. For example here’s a hand-drawn sketch that was scanned and converted to a PNG file which you’ll be importing for the tutorial. Tracing over hand-drawn sketches in order to obtain clean vector artwork in Sketch is quite common and easy to do. Again, if you want to follow along with this exercise you can download the image here. This graphic is named “vectorflo-handrawn.png”.

The Sketch workspace

This trick of using the up or down arrows works within *any* field in Sketch. Lets try it with opacity.

Adding Vector Shapes

Vector artwork and shapes are all based on paths which are mathematically defined points, lines and curves used to build anything you can imagine: UI elements, illustrations and more. For this reason, vector artwork can be scaled without a loss of quality while maintaining a very small file size, quite a winning combination!

One way to create a path is to draw it by hand. In Sketch the primary tools for this are the Pencil tool and the Vector tool (which is typically called the Pen tool in other programs). The Vector tool is the most often used but it’s a little tricky to master and I’m not going to cover it here, mainly because it’s not right for this project. However, if you are interested, here is a great tutorial on how to use the Vector tool in Sketch.

In order to build this logo you’re going to use a combination of Compound Paths and the Make Grid feature. Specifically what you’ll be doing is creating a number of circles and then combining them into a complex shape that would be difficult to draw by hand.

The first step is draw a circle that matches the one in the top left of the hand-drawn logo. Click the Insert button at the top-left of the application and a flyout menu appears. Choose the Shape category and then select Oval. Now Sketch knows you want to create a vector oval of some sort!

Press Option + Shift to draw a perfect circle from the center.

The circles will not necessarily line up with the original hand-drawn logo, but this is expected. You are making the transition from the loosely sketched logo to a geometrically precise one.

The Make Grid feature I just showed you is amazingly useful, there are so many times when you need to quickly duplicate and repeat objects within a grid structure. In chapter 2 of my course I show you how to use Make Grid for entire artboards, which makes the creation of multiple screens for prototypes dead simple.

Grouping and renaming objects

Before you start building the logo you should do a little housekeeping first by grouping and renaming the layers. If you look at your Layers List you will see the 6 circles have default names and numbers but they’re a bit awkward: “Oval 1 copy 2”and so on. Let’s rename the first circle you created “Oval 1", the second circle in the top row “Oval 2" and so on.

As it turns out Oval 1 is already correctly named, so in your Layer List double-click on the second layer and rename it “Oval 2". Press the Tab key and the next Layer Name will be selected. Continue renaming the remaining circles in numerical order. In the end, your Layer List should look like mine.

You’re about to merge all of these circle shapes and do some “virtual sculpting” to create your logo, but we need to take a brief detour into the world of compound paths. Stick with this next section, I promise this technique will come in handy over and over again, no matter what type of artwork you’re creating!

Working with Compound Paths

Compound Paths are not unique to Sketch (In Adobe Illustrator these commands are found in the Pathfinder panel) and in the mathematical realm, compound paths are referred to as Boolean Operations. The basic idea is that you combine two or more shapes in order to create a new shape. The two most common operations are Union and Subtract, but there is also Intersect and Difference, neither of which you will be using in this exercise.

Compound paths are a simple concept in principle, but in practice they can be tricky if you forget the rules. There are two key things to remember:

  1. Compound paths need overlapping paths in order to work.
  2. All the paths you are trying to combine need to be selected first.

Lets look at an example unrelated to your project: here we see a rectangle which is overlapping a circle. When I select them both and click Union I get this new shape.

Next, lets look at the Subtract operation, which subtracts one path from the other. Pay close attention to the order of the layers in the following examples: The top layer is always subtracted from the lower layer. In the first example, the blue rectangle is the top layer and overlaps the circle, when the two shapes are selected and I click Subtract, we get the resulting shape:

If the circle is the top layer and is overlapping the rectangle, clicking Subtract results in a very different shape:

Now that you get the basic idea, you’ll apply it to your artwork. You’ll be using a combination of the Union and Subtract methods here.

Press the Option key to duplicate the circle and then drag it to desired location.

This next part is the trickiest part of the whole procedure, so proceed cautiously. You are now going to use the original circles (2, 4 and 6 respectively) to subtract the paths from your combined shape that you don’t want.

Command + Click will select any layer to the current selection.

The trap is that it’s easy to forget that the top layer is always subtracted from the bottom. Currently, Combined Shape is the top layer, so subtracting removes everything except a small piece of Oval 6. To do this correctly, you need to reposition Oval 6 to the top layer and then subtract.

Important difference between Illustrator and Sketch

There’s an important behavior in Sketch that relates to the way compound paths work. In Sketch all of the paths you combine are always available for modification afterwards. This is very different than Illustrator, where compound paths are “flattened” by default into a single path. Whether you have used Illustrator before or not, it’s important to understand how Sketch’s compound paths work and why it matters.

  1. In the Layers List you will notice an arrow to the left of the Combined Shape layer. Click on this to expand and you will see all of the circle shapes you have created. Additionally, on the far right you will see small icons that indicate what type of compound path is being applied. Actually, this is more than just an icon, its a menu. If you click on any one of the icons it will show you the different compound path options and you can change them on the fly. Feel free to play around with these, although don’t make any permanent changes.

This feature means vector artwork in Sketch is incredibly flexible. You can always return to your paths and move them, or change their shapes or the operations you used. This encourages experimentation and makes recombining the elements of your artwork simple. Having said that, the Illustrator method of flattening compound paths can be done in Sketch (and sometimes it does make sense to do this). If you want to see it in action try selecting the Combined Shape and then choosing Layer > Paths > Flatten. (Just be sure to Undo afterward).

Adding fills to your logo

Time to give your logo some style. In the next few exercises you’ll be using fills, borders and effects. Lets begin with the standard fill.

Next, click on the Fill color swatch to open the Fills panel. A panel appears with the 6 options for Fills at the top. From left to right the 6 options for Fills are flat color, linear gradient, radial gradient, angular gradient, pattern fill and finally noise fill. You’re only going to focus on flat color and linear gradients for now.

Click on the linear gradient option (the second icon from the left) and a gradient tool with two color stops appears on your logo. In addition, a default gradient will appear.

(Chances are your gradient will look like mine, if not it’s because I believe that Sketch “remembers” the last setting used for gradients, you will be able to ‘reset’ your style in the next step.)

It’s worth exploring the properties of a gradient in Sketch, since it may not be immediately obvious. My logo, for example, starts light at the top and then fades to dark and my green fill color is still apparent, why is that? (Here’s a hint, it has to do with the alpha color value we just looked at.)

The RGB values are set to black, but a value of 50 for A (alpha) creates 50% transparency resulting in the appearance of gray.

Click the bottom circle of the gradient editor (this circle is called a “gradient stop”) and then look at the RGBA values. The value for R, G and B are all 0 which typically displays as pure black, but if the A value is set to 50 (as mine is) this displays as a 50% black or middle gray.

You can see that the overlay of the semi-transparent gradient and the solid fill create a nice, complex color, and you’re only using two layers. It’s not unheard of to have three or four fill colors interacting with each other for unique effects. The advantage here is that you can experiment with either of the fills without affecting the other. To experiment with this try changing the base color fill or adjusting the gradient.

(If you’re a little more experienced, Sketch also has blending modes for the color fills or you could create more complex gradients using the gradient editor.)

Working with borders and other effects

Web design is firmly in the “flat” era at the moment and this is reflected in Sketch’s feature set. For example, you will not find the vast array of layer styles that have been used and abused in Photoshop for years (bevel, emboss, molten glass, etc.) What you will find are styling options that by and large translate directly to features found in CSS including borders, shadows and blurring. Let’s just take a look at borders and shadows for now. Earlier in the tutorial I had you remove the border from your logo entirely, let’s add it back on and then experiment with some of the options.

Click inside the field for Thickness and press the up arrow on your keyboard to increase the size of the border to 10. This border size is a little heavy handed, but it will help you better understand border effects.

Now click on the color stop at the bottom of the gradient editor and change the color to a lighter blue. I used 92BBD7. I didn’t move this bottom color stop, but feel free to experiment on your version.

You can create quite complex effects using the preceding techniques, but lets look at one more tool in your arsenal: shadows.

Feel free to tweak any of the various attributes of the logo to suit your taste, but you’ll stop here for now and add some text for the logo. You’re almost at the finish line!

Adding Text

The text features in Sketch are not as sophisticated as Photoshop and Illustrator but are sufficient for our needs.

Sketch’s smart guides “light up” when the text layer is centered.

You want the text to be centered below the logo, but don’t try to be faithful to the sketched version. Click and drag the text layer until you see the smart guides appear indicating that it is truly centered.

Changing the Character Spacing (kerning) of two letters

Notice in my example that the spacing is changing not just between the characters r and f, but r, f, and l. If you wanted to adjust the space between r and f only and nothing else, you would need to select just the letter r and perform the same operation. Give it a try to see the difference and then find a balance that works for you.

Nice work! The only thing left to do is export.

Exporting your Graphic

Exporting is another one of Sketch’s strong suits. In today’s web environment with its plethora of high resolution screens and mobile devices there is an increasing need to export images in multiple sizes, resolutions and formats. To see how Sketch handles this, you will now export your logo in a number of ways including both bitmap and vector.

Sketch will automatically define the boundaries of the slice but you can adjust manually by clicking and dragging the edges of the slice or typing values into Size field. For example, I wanted my height and width to be equal so I typed in 400 for height and 400 for width. I then repositioned the slice to ensure even distribution of space on all four sides.

A 1x Size simply means your graphic will be exported at 100% size (which is currently 400 pixels by 400 pixels). The Suffix field allows you to add an automatic file name and is typically only used when creating multiple exports. The Format is simply the file type, Sketch can export the following bitmap formats: PNG, JPG, TIFF and for vector: SVG, EPS and PDF.

Congratulations! You made it to the end of the tutorial. Hopefully you know more about creating artwork in Sketch then when you started. If you liked this tutorial, check out the free courses on topics such as UX, responsive web design and much more at Aquent Gymnasium. Hope to see you there.

Further Resources

I was going to come up with some Sketch Resources on my own but I’m just going to point you to the superb list that James Young (@jydesign) has put together here. Thanks James!

Acknowledgements: Thanks to Justin Gagne, Matt Grant and Andrew Miller for their invaluable help with this article.

Gymnasium

Design a career you love with free online courses.

Gymnasium

Design a career you love with free online courses on web design and development, user experience, accessibility, career skills, prototyping, and content creation.

Jeremy Osborn

Written by

Designer, educator, writer. Not always in that order. Academic Director of Aquent Gymnasium.

Gymnasium

Design a career you love with free online courses on web design and development, user experience, accessibility, career skills, prototyping, and content creation.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store