Sketch 3 Tutorial — Designing Slides Icon

This is the last tutorial in our three part Google Icon series. In the past two tutorials we went over the basics of Sketch and learned how to design in a scalable and maintainable way. If you’re new to Sketch, I would suggest starting with the first videos and work your way up to this tutorial.

1 — Sketch 3 Tutorial — Designing Google Docs Icon

2 — Sketch 3 Tutorial — Designing Google Sheets Icon

Now, with that out of the way, let’s design a sexy looking icon. Shall we?

Step 1 — Create the background

Create a simple rectangle using by pressing the “R” key on your keyboard. Create a rectangle 107px width and 136px height. You can fine tune the size in the Inspector Panel on the right hand side.

Designing Google Icons in Sketch 3

Moving a little further down in the inspector panel, find the “Borders”toggle and turn that off.

Designing Google Icons in Sketch 3

Tip: By default, all the shapes created inside Sketch will have a grey border applied to them. To save time and avoid performing repetitive tasks we can change that default. You can read more on that here)

Find the “Fills” option, located directly above Borders. Click he color picker and change the hex value to #F8B700.

Designing Google Icons in Sketch 3

If you haven’t already, go ahead and select your Rectangle layer in the “Layers Panel” on the left hand side. Double click the layer in panel and rename it to Background.

Designing Google Icons in Sketch 3

It’s important to stay organised as the complexity of your projects grow.

Step 2 — Create fold and drop shadow

Start by selecting the “Triangle” shape from the “Insert” menu on the top left of Sketch.

Click and drag until you have a 24px by 24px triangle and turn the border off if you haven’t set your defaults yet.

Go ahead change the fill hex color to #FFFFFF and drop the opacity to 45%.

Don’t worry if this doesn’t make sense. You can learn why we’re doing thishere.

Designing Google Icons in Sketch 3

Do a little bit of house keeping and change the name of your newly created shape to Fold.

We want to make sure the Fold layer and the Background layer are perfectly aligned. So with both layers selected, we’ll go to the “Inspector Panel” on the right and at the top, we’ll use the “Align Right” and the “Align Top” options to align our layers.

Designing Google Icons in Sketch 3

Go back to the “Layers Panel” on the left and select ONLY the Fold layer.

Press the Return key on your keyboard to enter the vector mode. This is what it’ll look like.

Designing Google Icons in Sketch 3

With the top vector point selected, click inside the X Position field and type in -12. This will move the vector point 12 pixel to the left, aligning it perfectly with the bottom left vector point.

Here’s what we should be looking at.

Designing Google Icons in Sketch 3

Select the “Fold” layer and duplicate it using the keyboard shortcut and make sure you rename it to Drop Shadow. *Important to keep a clean workspace.*

Nudge in down, so it’s positioned perfectly underneath the Fold layer.

Flip it horizontally and vertically using the buttons in the Inspector Panel.

As before, Using the “Fills” option, change the hex value to #000000.

Here’s what it should look like.

Designing Google Icons in Sketch 3

Step 3 — Make the Fold

With the Background layer selected, hit enter on your keyboard to enter vector mode.

Click anywhere along the right side of the Background layer to create a new vector point.

Go ahead and change it a Straight point. Just like this

Designing Google Icons in Sketch 3

Notice the X and Y position on the right.

We know the Fold layer is 24px in width and height, so here’s what we’re going to do.

With the vector point still selected, click inside the Axis box and create a simple mathematical operation to add 24px to your current value.

Designing Google Icons in Sketch 3

Press Enter. This will move your vector point to the bottom right corner of the Fold layer.

With the background layer still in vector mode, select the top right vector point, and move it 24px to the left.

Designing Google Icons in Sketch 3

This is a preferable way of designing our corners, because it leaves less room for human error. Computers are good at calculating and they quite enjoy it, so let them do their job and you can focus on designing cool stuff.

Step 4— Design Slides

This is the fun part. We’re going to be learning a few new techniques and we’re going to have fun with it.

Just to remind you, here’s what we’re trying to accomplish.

Designing Google Icons in Sketch 3

The two rectangles in the middle look easy to enough to create. But they are a little more complicated than they might look initially. 

The outside corners are round, but the insides have sharp corners.

It also looks like the top rectangle is hiding a portion of the bottom rectangle. We can always use a fill color to hide the bottom rectangle, but then, what happens when we change the background color?

Let’s do this this

Start by creating a Rectangle. make it 44px wide and 44px tall(square). Make sure you turn the border off, if you haven’t set your defaults yet.

From the Inspector Panel on the right, change the Border Radius to 5px.

Change the Fill to #FFFFFF. Here’s what we should be looking at.

Designing Google Icons in Sketch 3

Create another Rectangle. Make it 36px wide and 26px tall. Make sure you turn the border off.

Using all your badass Sketch knowledge, position the newly created rectangle in the center of rectangle we created in the previous step.


Designing Google Icons in Sketch 3

With that done, make sure both rectangles are still selected. Have a look at your Toolbar on the top and find the Subtract operation. Click it.

Designing Google Icons in Sketch 3

Is this cool or what? This will cut out(subtract) the overlaying layers shape from the bottom layer. Looking sexy.

Go ahead and Duplicate the new shape.

Move the newly created shape 15px to the right and 15px to the bottom.

Here’s what it should look like.

Designing Google Icons in Sketch 3

With both new shapes selected, choose the Union operation, and we’re done. Almost!

Designing Google Icons in Sketch 3

I left out a minor step that gives us this exact look. Following the steps you will have the bottom rectangle overlaying the top one, which can work as a look. But it’s not the look we’re after. Have a play around, and see if you can figure it out. If you get stuck, let me know and I can help you out.

Until next time, stay awesome!

This tutorial was written by Sam Matrouh. Sam is a Builder of Digital Things and Founder of Dunnnk. You can connect with him on Dunnnk and Twitter @samatrouh.

  • iterate on designs
  • discuss with others
  • don’t be afraid to try a design
  • plan ahead before starting on a complex image

We hope you enjoyed learning about Smartly and the Pedago team. You can connect with them on Twitter and on their website.

Go back to the previous page

This post is prepared by Todor Iliev. If you enjoyed this, follow Sketch App Sources on Twitter for updates. We invite you to check out the selection of freebies and contribute files, plugins, articles, and tips with the community.