Sketch Tutorial

Colorful switch

After a bit more than a month using Sketch 3, I feel confident enough to share a part of my workflow in form of a tutorial. To do so, I’m going to be describing how to create the Colorful switch freebie I made as it uses a lot of interesting features Sketch has to offer and is not extremely long to do.

I want to keep this as simple but thorough as possible. This tutorial is designed for beginners so we’re going to take the time to describe a lot of things you may already know. Here’s the expected result:

Side note: I’m not all knowing and I definitely do not deliver the holy one and only method to design things so if you have feedback or inputs, please feel free to comment on either this Google+ or Facebook post. I’m always interested in learning things as well and it will be beneficial for everybody.

In case you get lost in the steps or if something is unclear there is a half way .sketch file you can download and the final source is also available.

Alright let’s get to it.

01_Installing Sketch

This one is a tough one☺. If you do not already own it, you can download a Free trial or directly buy it from the App Store. Install it and launch it.
When you see the prompt, do not open any specific template and just click “ok” to open a new document. You’ll see this.

02_creating an artboard

Artboards are “work areas” they can be as small as an icon or as big as you like. If you used Illustrator before, it’s the same thing.

Press “A” on your keyboard or hit the “Insert” button at the top left and select artboard(1). As you can see a lot of convenient sizes are now available on the right column. We’re not going to use that. Simply draw your artboard of any size on your canvas. Once this is done, go in you right panel, and under “size”, enter 400x300 (2). This freebies was intended to be a Dribbble shot from the start.

In you artboard/layer panel (left side), double click the “Artboard 1” label and rename it whatever you like. I hesitated between “Glørk the destroyer” or “Colorful switch”, I went for the latter as it was somehow more descriptive(3).

03_Setting a colorful background

Now that you have your artboard ready, it’s time to give it the tone. You can always come back to it later but the background color you’ll decide upon will influence the light reflection on your icon and the general coloring of it.

I did a lot of back and forth and testing but for the sake of this tutorial, let’s cut to the chase and deliver the values right away.

Press the “R” button on your keyboard to select the rectangle button (insert>shape>rectangle (R) in the UI) (4).

Draw your rectangle on your artboard so it fills it up completely. It should be easy as the rectangle tool will automatically snap to the artboard borders (5). When it’s done, you’ll notice that your effect panel (right side) gets automatically populated with a grey “fills” and a grayer “borders” (6)

Uncheck the Borders color, then click the fill color. In the Hex value type #A846FF(7). You now have you base color.

Now notice the “+” icon on the top right of the Fills panel, click that.
As you can see, it just added a new Fills layer on top of the other one.
If not already selected, select the gradient panel and draw you gradient from the top left to the bottom right of your artboard(8).

The two squares right below the fill type selector are your gradients color, click on one and it becomes editable.
Make sure the top left color on your shape is #ffffff(white) and the bottom right color is #000000(black). Click on the black color in your gradient color selector or directly on the artboard and set its opacity to 0. The opacity of a gradient color can be set by using the slider right under the color picker or the “A” box on the right of the RGB boxes. Select your white color and set it’s opacity to 60. See image 9.

Set this Fill level to overlay (10) and click the + button again. This time, select the third tab to get a radial gradient. Draw this radial gradient from top left to bottom right(11).

Make sure the top left color is white and the bottom right color is black. Keep them both a 50 opacity and set this fill to overlay as well. You’ll end up with image 12. A super shiny neon purple gradient from light to dark.

To finish, let’s get fancy and make a group out of our newly created layer.
Select your layer in the left panel, hit cmd+G to put it into a group, double click the group and name it Background. Get even crazier by naming the layer. See image 13 for the final result.

04_The base of your icon using the built-in iOS 7 icon template

Now let’s create the icon shall we.

We’re going to use the built-in iOS icon template so that we do not have to recreate their quite complicated rounded corners.

Click “File>New From Template> iOS App Icon”(14). A new file opens. For the purpose of this, we’re not going to create the full set of course, this is just to make you discover the useful template feature.

In the layer panel (left) click the lock on the right of the “Icon Shape” layer in the “Icon-76@2x” artboard (15). Once this layer is selected and unlocked, copy it (cmd+c) and paste it on your original file(16). You can close the template file window without saving.

Select the Icon Shape layer you just imported as well as our crazy colors layer created earlier (use click+cmd to multi-select)(17).

Using the align tool located at the top of the right column, we’re going to center the app icon in the background. click once on the “align horizontally” button and once on the “align vertically” icon, respectively the 4th and the 7th (18). You’ll end up with image 19.

Now let’s organize this so we don’t have to later.
Hit “cmd+G” on your Icon shape layer to create a group. Drag the group up and Rename it “Icon”. Cmd + G again inside the group to put your layer one level down in the group tree. Rename it “Icon Base” (20).

05_Getting the base shapes

Select your “Base” layer and change the Fill color to #ffffff. Add a secondary flat color fill to this layer using the “+” button and set it to #FAC3FF.
Set the opacity of this flat color to 10%. You’ll end up with image 21.

Now hit “O” on your keyboard to select the oval shape tool. Draw a circle of 124*124 in the middle of your “Base” layer. You can use the right column to get the size right and do not forget to use the align tools we used before to get it perfectly centered. Remove the Borders, you’ll get this (22).

In your layer “Oval 1", set the Fill to “Linear Gradient” and draw it diagonally. Set the top left color to #E500E7 and the bottom left color to #00D7FF. Do not change the Alpha nor the blending mode. (23)

Name this layer “Super colorful base” and group it into a “Color Base” group. (24)

Quick awesome tip: To make sure a layer is aligned hold the “Alt” key while pointing at it, it will make the smart guides appear. You can then hover other elements to measure the spacing between them.

With the oval tool again, we’re going to create the knob base.
Draw a circle of 58*58 and center it on your “Super colorful base”.

Add a vertical linear gradient to your new layer with top color #FFDBFF and bottom color #FCF2FC (25)

Groups this layer (cmd+G) and call the group “Knob base”. (26)

As you can see, we just created the base shapes and zones of our icon. we have the iOS7 shape at the bottom, the colorful circle and the knob at the top. Now what’s left is to add some effects to this flat thing.

At this point if you want to make sure you have exactly what you see above, I created a mid-step sketch file. You can grab it here.

06_Creating the bevel

We are now going to spend some time on the “Color base” group.
We’re going to create the “ring” surrounding our big circle of color.

With your oval tool (O) create a circle of 128*128 centered on the base. Don’t forget that you can use the alignment tool and check everything by displaying the smart guide using the “Alt” key. You should have something like image 27 below.

Now again with your oval tool, we’re going to create a smaller circle, perfectly centered on the previous one. Don’t forget to hold “shift” while drawing and make it 116*116 (28).

Make sure the most recent layer is on top, select both of them and in the main toolbar click “substract” (29). You will end up with image 30.

You’ll notice that Oval 3 is now a “shape group”. If you open it, you will be able to modify the drawn shapes. Rename this layer to “Surrounding”.

Let’s add a linear gradient on it to create some perspective.
Make your gradient go diagonally from left to right.
Set the top color to #F698FF and the bottom color to #FFF3FF so it looks like (31).

Now we’re going to add an additional color to this gradient to simulate color reflection. When you hover the stroke representing your drawn gradient, you’ll see your cursor with a “+”. Cicking will add a new color handle to your gradient. Add a new color at about 1/3 of the way down (close to the knob base outline) and make it #BDB6FF (32).

The next step is about the bevel. We need to create the little “bump” on the icon. The thing that makes pop the central element out of the base and create a nice 3d effect. There is no “bevel and emboss” tool ala Photoshop in Sketch to we are going to have to create it using a simple gradient.

Draw a new Oval (“O” key) of 144*144 underneath your “Super colorful base” layer and perfectly centered on the base. Remove the border layer and add a vertical liner gradient to it with the top color being #ffffff and the bottom color #DF80FF (33).

Next step is to blur it so it creates a proper smoothing effect. Notice the “Gaussian Blur” row in the right column. Check its checkbox and set the amount to 3px (34). Finally, set the opacity of the whole layer to 44%(35).

07_Adding depth

Now that your bevel adds some depth to your icon, it’s time to replicate this depth into your colorful circle. Select your “Super colorful base” layer and add a first Inner shadow by clicking the “+” in the “Inner Shadows” row.

Keep the #000000 color but set its alpha to 64. Set its X and Y to 0 and the blur to 10. Keep the spread to 0(36).

Add another inner shadow by clicking the “+” button.
This time set the opacity to 56, X:0, Y:7 and blur to 9 (37).

08_Beveling

Now that we have a nice bevel on the center piece, it’s time to add it to the base piece so they blend together better.

In your “icon base” folder, select your “base” layer. What we’ll need to do is following the same light direction, light on top, darker on bottom which here means white on top, pink on the bottom.

Start by adding a first Inner shadow with the color #E187FF with 90% alpha, X:0, Y:-5, Blur 6 and no spread.
Add a second inner shadow, this time pure white(#ffffff) 100% opacity but instead of making it go up, make it go down with a a value Y:5 (38).

Now let’s apply this to the little knob. Select your “knob base” group and then the “oval 2" layer.
Apply a first #8D1799 inner shadow with 48% alpha, X:0 Y:-1 and blur:3.
Apply a second #ffffff 100% alpha inner shadow with X:0, Y:2 and Blur:3, it will create a nice shine on top of the knob(39).

The next step is to carve the knob a bit to make it feel more “touchable” and give it some depth. With your oval tool, draw a circle in the middle of the knob of 48*48 (40). Remove the borders and fill it with a black (top) to white (bottom) gradient. Finally, set the white color to 0% alpha(41).

Instead of picking a color for this carving to work, we’ll rely on the overlay blending mode. Set the Blending more to “overlay” for the entire layer (42).

And just like that your knob just took another dimension.

09_shadowing

My favorite part. Something that surprised me about Sketch 3 is how well it handles them. There is several ways of creating shadow: using the shadow tool in the layer panel, simple gradients or using blurred out layers.

We’re going to use both the shadow tool and the blurred out layer here.

Start by selecting your “Icon base > Base” layer. We are going to add a total of three shadows, from sharp and close to the base to soft and far away from the base. Add the shadows as follow:

• #000000 Alpha 42% X:0 Y:10 Blur:16 Spread:0
• #000000 Alpha 34% X:0 Y:4 Blur:14 Spread:0
• #000000 Alpha 24% X:0 Y:2 Blur:2 Spread:0

You should end up with image 43.

The last thing we are going to do to this base is to add a strong drop shadow.
Do to so, duplicate your “base” layer. You can “right click+duplicate” on the layer, copy and paste it in place or click and drag while holding the “alt” key to do so.

Once it’s done, you notice that the effect got copied as well.
Remove all of them. To do so, uncheck the box close to the item and then hit the “trash” icon on the right of the section label (close to the “+” symbol). Clicking this icon will automatically remove all unchecked effects(44). Set the fill layer to #000000 and you’ll get the image 45.

In the layer panel, rename this layer “Big drop shadow” and move it under the “base” layer (46).

Now we’re going to position the layer 30px down. Select your layer, hold shift and hit the down arrow key 3 times. “Shift + down arrow” will make your selected layer move by 10px steps (47).

Last step for this shadow, set the layer opacity to 20% and set the gaussian blur to 7px (48). You base now has nice shadows.

Time to add similar shadows for the Knob.

Into your “Knob base” group, select your “oval 2" layer. Copy this layer, pull it out of the group, set it in his own group that you name “Knob shadow” and drag this group under the “knob base” one (49).

Remove all the effect from this layer, set the fill to a flat #000000 color and move it down 10px(50). Once this is done, set the layer opacity to 10% and the Gaussian blur to 4px, the result will be very subtle(51).

Let’s make fancier shadows. Copy this layer and bring it back 10 px up to align it with the knob. We are going to modify the shape of this circle. With your new layer selected, press “enter(return)” and you will see 52. You are now editing the path. Notice that your right panel has changed.

If not already selected, select the bottom anchor (as on image 52). Move this anchor 10px down(53). Once this is done, click “finish editing” at the top of your vector editing panel to come back to the regular view.
Set the layer to 20% opacity and 8px gaussian blur(54).

For the last shadow, duplicate the layer we’ve just worked on and set its opacity to 40%. In the right panel, in “size”, make your new layer 68 width by 80 height and center it on the knob, top to top(55).

Finally, set the layer blending mode to Overlay to get a nice dark blue shadow(56).

We are going to finish the knob shadowing by adding direct effects to it.

Select the base layer of your knob “Knob base>Oval 2". Start adding 3 shadow effect like so:

• #000000 60% alpha X:0, Y:1, Blur:2, spread 0. Set the blending mode of this shadow to “Overlay”.
• #000000 14% alpha X:0, Y:3, Blur:4, spread 0.
• #000000 50% alpha X:0, Y:2, Blur:4, spread 0.

You should see this (57).

We are now done with the shadows.

10_final details

To finish, we are going to add tiny thing to make it an on/off switch.

In the Knob base group create a rounded rectangle using the “U” key or “Insert>Shape>Rounded” (58) of 8*2 with a radius of 3 or more.
Place it on top of your other knob layers and name it “pointer thingy”, I couldn’t find a better name.

Align it vertically and 8px from the right side of the knob base(59).

Remove the borders and apply a flat #CA2DEA color at 40% opacity.

To give it some depth, add a shadow: #FFFFFF 46% alpha X:0, Y:1, Blur:0 and an Inner shadow: #000000 40% alpha X:0, Y:1, Blur:0.
Set the inner shadow blend mode to “overlay”, you will get the result in 60.

In you “color base” use your “oval” tool (“o” key) to create an 8*8 circle that you will place 10 px to the left side of the knob, centered on the width of the visible color base. Name it “OFF”(61). Remove the border, fill it with #ffffff set its blending mode to overlay (62).

To really make it look like “OFF”, let’s cut it in the middle. Create another circle on top of your “OFF” layer. This time make it 6*6. remove the border to see it better and center it perfectly on your “OFF” circle(63).

Select both your “oval 11” and “OFF” layers. Combine those layers using “substract” in your toolbar (64). You should get the result in 65.

To create the “ON” circle, duplicate your “OFF” layer. Rename it and move it to the other side of the Knob, same distance (66).

Click the triangle on the left of the layer to expand the vector group, select “oval 11" (67) and delete it (68).

You are now done!

11_exporting

The last thing I wanted to show for this tutorial is the way to export an artboard to several DPIs at once. I think this is an excellent feature.

Let’s say you want to export what we just did here in both 1x (the current size we designed for) and @2x.

Select your artboard “colorful switch”.
At the bottom of the right column, you will see a button “Make Exportable”. Click it and you will get image 69.

1x indicates the baseline, i.e the size your designed in. Click on the + on the right of “Export” to add a new export multiplier. It should automatically be populated with @2x. You can also change the suffix and the format. (70)

When you click “Export colorful switch” It will generate the 1x, automatically scale your artboard to @2x and generate it in the chosen format and voila!

Closing note

Edit (11/25/14) If you are interested in learning even more about Sketch, I highly recommend you check out this masterclass created by Jean-marc Denis (@jm_denis) on Sketchdesign.io

I hope this tutorial was useful for you.
You can directly download the final source if you are having trouble with some steps.

Edit (11/08/14) @jocelyncaronfr created a very cool time-lapse video of this tutorial, very well done. Check it out on Youtube.

I’m always happy to receive comments or feedback so if you have any or if I forgot something, just let me know on either:
Twitter, Google+ or Facebook.