Creating a vector logo in Sketch
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
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”.
- Launch Sketch, and on the Welcome screen click New Document and then Choose and a blank document appears. Choose File > Save and name this file vectorflo-logo and click ok.
- Choose Insert > Image, find the vectorflo-handrawn.png file and then click OK. The graphic appears on your Canvas. Let’s take a quick tour of the workspace. In Sketch your toolbar is at the top, the Layers List is on the left, the Canvas is in the center and the Inspector is on the Right.
- In the Inspector, click within the Width field and then press the down arrow on your keyboard. This scales the logo down one pixel at a time. If you want to speed up the process, press and hold the Shift key and now it will scale downwards 10 pixels at a time. (You could have also scaled the image manually by clicking any corner and dragging to the center.) Get some practice with this and bring the Width of the image down to 600 pixels.
This trick of using the up or down arrows works within *any* field in Sketch. Lets try it with opacity.
- Click inside the Opacity field and press Shift + the down arrow until you reach 50%. Fading this image creates virtual “tracing paper” which will allow you to easily layer your vector shapes on top.
- Locate the Arrange menu at the top of your screen and then choose Lock Layer. This prevents you from accidentally moving or selecting the image. If you ever need to unlock it, click the padlock icon in the Layer List (or you can right-click the shape and choose Unlock Layer from the contextual menu).
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!
- Place your cursor in the middle of the top-left circle and then press and hold the Option key, (this forces the circle to be drawn from the center), now drag slowly up and to the left. Notice that this does *not* create a perfect circle by default, so stretch your fingers and press and hold the Shift key at the same time. This constrains the circle’s proportions to a perfect circle. Keep dragging until the outside border extends slightly beyond the original, you’ll have a chance to resize this later, so don’t worry too much about getting it perfect.
- In the Inspector, locate the options for Fills and Borders and if the checkbox for Border is checked go ahead and click it to deselect. You’ll be working with the border later.
- Click on the color swatch in the Fills section and choose a shade of red that won’t burn your eyes out. This color will *not* be the final color of your artwork, so don't spend too much time on choosing.
- Locate the Opacity slider (its above the Fills section) and drag the slider to 50%. The transparency of your circle drops by half and you can now see the hand-drawn artwork easily.
- Now resize and re-position your circle if necessary. The goal is to make sure the vector circle covers the hand-drawn one completely.
- You will now duplicate this circle multiple times (3 on a top row and 3 on a bottom row). To do this, make sure the circle is selected and then choose Arrange > Make Grid. Type 2 for the rows and 3 for the columns and change the margins for both to 0px. This ensures that each circle is sitting flush next to the other. Click Make Grid and now you have 6 perfectly aligned circles in two rows and three columns!
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.
- Select all the circles by clicking and dragging over them. You will see all six ovals in the Layers List light up. Notice the hand-drawn sketch wasn’t selected? That’s because you locked it earlier! (You did lock it right?)
- Now go to the Arrange menu and choose Group Layers (you could also use the keyboard shortcut Command + G). Double-click the folder name and rename the group Circles. While you’re here, click on the arrow to the left of the folder to toggle it open. You’re going to need access to the contents in just a moment.
- To help you visualize the next step, place your cursor on the far right side of the Circles group. You will see a small eye icon appear, click on this to toggle off the visibility of the group. Click again to make it reappear. Do this a few times so you can understand the relationship of the vector circles to the sketch.
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:
- Compound paths need overlapping paths in order to work.
- 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.
- To make the following steps as clear as possible I’d like you to turn off the visibility of Ovals 2, 4 & 6. You’ll turn them back on later. Note the gaps between the 3 circles. To “fill” these gaps you are going to have to get a little creative.
- Double-click on the bottom circle (Oval 5) to select it. Press and hold down your Option key and then drag the duplicated circle up and to the left until you see the “snapping” that takes place with the smart guides.
- Repeat the last step, but drag this duplicate up and to the right until you see the snapping effect. You see where you’re headed with this? You are about to select these 5 circles and then combine them using Union to create a new shape.
(If you’re wondering why there is a darker red on the overlapping paths it’s because the opacity of the original circle was changed to 50% earlier in the tutorial, and you are seeing the transparent colors mixing.) - To select all 5 circles press and hold down the Shift key and then click each one (it doesn’t matter what order). (If you’re having trouble selecting, the Circles group is probably selected, you will need to select any one of the circles in that group and then proceed.) You can double-check that all 5 are selected by looking in the Layers List. Now click the Union button in your toolbar and all 5 circles are combined into a new layer which Sketch renames Combined Shape in the layers list.
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.
- Start by clicking on the eye for the top layer (Oval 2) to reveal it. Then click Oval 2 in the Canvas to select it. Now Shift + Click the Combined Shape layer in the Canvas and press Subtract.. This subtracts the overlapping paths below and we’re left with the shape we want.
- Now it’s just rinse and repeat. Turn on the layer for Oval 4, select it first and then select your Combined Shape and press Subtract to remove the path below.
Only one more to go, but watch out, there is a trap waiting!
If you selected the Combined Shape layer and Oval 6 prematurely and subtracted, the result probably surprised you. (If you’re curious, go ahead and try it now, just be sure to press Undo.)
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.
- Select Oval 6 and then choose Arrange > Move to Front. You could also just drag the layer in the Layer List to the top, but sometimes it’s possible to make mistakes doing this so stick with the command.
- Now select both layers again and press Subtract. You now have a completed vector logo. Yay! Be sure to save your document, you don’t want to lose all this hard work!
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.
- 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.
- The original hand drawn sketch is a bit of a distraction at the moment, so turn it off by clicking the padlock in the “hand-drawn sketch” layer and then click the eye icon to hide it. (Or alternatively, you could Ctrl + Click or Right + Click the layer and and choose Hide Layer.)
- The other thing you need to do is restore the opacity of the logo to 100%. Click your Combine Shape layer to select it, then change the Opacity to 100%. This ensures the color you are about to choose is at full strength.
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.
- You will now change your fill color from red to a specific shade of green. If you want to follow my example exactly feel free, or choose another color to your liking! I made green with a Red value of 99, a Green value of 197 and a Blue value of 115. You can find and update these RGB values in the bottom half of the Color panel. Also note the fourth value of A or alpha. Let’s take a few moments to explore alpha color, as it will become a valuable part of your color arsenal.
- Type 10 as the value for A and press return. Your logo will become extremely faint because you have just set the opacity of the color to 10%. It’s important you don’t confuse the opacity of an alpha color with the Opacity value of the object. To clarify: your logo still has an opacity of 100%, it’s just the fill color that is set to 10% using alpha.
- Type 100 as the value for A and this will restore it to the pure color. Now you’ll add another Fill on top of this one, but this will be a gradient with a little more complexity.
- Click on the “+” sign located on the far right of the Fills panel to add another fill. By default, this new fill obscures the first one, until you change the opacity that is!
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.)
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.
- Now choose any color you’d like in the color picker or if you’d like to continue following my example, type 86 for R, 104 for G and 180 for B. This results in a shade of blue with an opacity of 50%.
- Now click the white gradient stop (at the top of the gradient editor)and drag it to the top-left corner of your logo. If the Alpha value is currently 50, leave it alone, otherwise go ahead and type 50 now.
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.
- Make sure your logo is selected, then click on the checkbox to the left of the color swatch in the Borders section. You may not see a noticeable change because the default thickness is set to 1. In addition to Thickness you also have Color and Position 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.
- Click the Borders color swatch and experiment with different colors. Don’t get too carried away, though; you’ll be adding a gradient border shortly.
- Within the Color panel, click on the linear gradient option. You’ll now manipulate the color and direction of this gradient to create an interesting effect similar to a bevel (but perhaps with a bit more sophistication!).
- Click on the top color stop in the gradient editor and then drag it to the top edge of the top-left circle. Change the color to a blue-green shade; I used the hex color 38968F.
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.
- Click on the plus sign in the Inner Shadows section to add the default shadow. If you’ve ever worked with shadow effects in other programs the options here will be familiar. The values X and Y allow you to position the shadow horizontally and vertically. The Blur property allows you to control the amount of blur and the Spread property defines the “falloff” of the shadow with larger numbers creating a larger shadow. I used the following values X = 3, Y = 12, Blur = 3 and Spread = 2.
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.
- Click on the eye icon for the “vectorflo-handdrawn” layer to bring it back into view.
- Choose Insert > Text and then click once in the area of the letter “v” and the insert text cursor will appear.
- Click on the Typeface menu and if you have Helvetica Neue then choose it. If you don’t have Helvetica or Helvetica Neue, then choose Arial as a last resort, but please never use Arial for real logos!
- Additionally, if you have Helvetica Neue, click on the Weight menu and choose Ultra Light if available.
- Now type the word vectorflo and set the font size to 96.
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.
- Now that the text is all set, your hand-drawn layer is officially a distraction. Click on the eye icon to turn it off. There is no need to delete the layer unless you want to reduce the file size slightly.
- Most professional logos have text that modified in some way, it is seldom good enough “out of the box”. In our example (zoom in if you need to) look at the space between the letter “r” and “f”. The letters are touching and that space could be opened up slightly. Let’s see how Sketch does this.
- Double-click the type layer if necessary and then select the letters r and f and then place your cursor over the word “Character” in the Spacing section. When you see your cursor change to a double arrow this indicates that you can now click and drag to the left or right to change the spacing. Because you want to expand the space, you should drag to the right until the value reaches approximately 8 or whatever value you prefer.
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.
- Make sure nothing is selected on your page and then choose File > Export and Sketch will automatically define a box around your logo. This box is technically called a slice and you can see the slice icon has appeared in your Layers List. Sketch uses the name of your document as the default slice name.
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.
- In the Export panel you will note that there are settings for Size, Suffix and Format. The default value for Size is 1x, Suffix is currently empty and Format is PNG.
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.
- Click on the (+) on the right side of the Export section and another row of settings appears. Now the Size is 2x, the Suffix is @2x and the Format is still PNG. If you chose this setting your graphic would be exported at twice its current size (so 800 x 800) and the suffix “@2x” will be added to the file name to distinguish it from the base image.
- Click on the (+) one more time. Sketch automatically adds a 3x value, but that can be changed. Click on the Size menu and select 0.5x from the list and note the suffix reflects this change. Choosing this option will export an image 50% smaller than the original so 200 pixels x 200 pixels.
- Click the (+) one more time and now click on the Format menu and change it to SVG. Since this is a native vector format the Size menu is now grayed out. Select the @3X value within the Suffix field and delete it.
- Click the Export vectorflo-logo button at the very bottom of the Inspector and the Export window appears. Click the New Folder button in the bottom left and name it vectorflo-exports and then click Export. If you navigate to that folder you will see three files, three of which are the PNG files and one of which is the SVG file.
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.
