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.
Moving a little further down in the inspector panel, find the “Borders”toggle and turn that off.
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.
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.
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.
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.
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.
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.
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.
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
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 Y Axis box and create a simple mathematical operation to add 24px to your current value.
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.
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.
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.
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.
Hint:
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.
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.
With both new shapes selected, choose the Union operation, and we’re done. Almost!
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.
