Designing App Icons: Combining Simple Shapes In Sketch To Re-Create Instagram's New Logo | Martin Sitar | Skillshare

Designing App Icons: Combining Simple Shapes In Sketch To Re-Create Instagram's New Logo

Martin Sitar, Product Designer at Shopify

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (22m)
    • 1. Class Intro

      0:34
    • 2. Creating the Base Layers

      6:46
    • 3. Combining & Subtracting Shapes

      2:30
    • 4. Creative Icon Backgrounds

      6:37
    • 5. Exporting Your Icon

      5:14

About This Class

In this quick class I'm going to show you how to use basic shapes in Sketch 3 to create an app-icon just like Instagram. You'll learn the basics of Sketch and you'll be able to apply what you learn to create your own custom shapes, icons and logos. This easy to follow class is perfect for anyone who's interested in learning Sketch, and turning their ideas and concepts into beautiful designs. 

If you're looking for some icon inspiration or want to start with a ready made icon you can download my free icon pack here, feel free to use it however you like. 

These are the colours I used in for my app background:

  • Yellow: #FCC658
  • Orange: #F46B26
  • Blue: #485BD2
  • Purple: #B129AE
  • Pink: #DB2471

Transcripts

1. Class Intro: Hi, I'm Martin Satar. And in this class, I'm gonna show you how to use basic shapes and sketch to create an APP icon that similar. Then you instagram logo. You'll be able to apply the skills you learn in this class to creating your own custom shapes, icons, logos for the class project. You'll need an idea for a Nikon and about five hours you want to work with. Yeah, I'll be creating this camera icon of Sketched out, and I'll be using these colors that are similar to us. Great resource I like to use for color schemes is cooler Stop CO. Where you can generate great color palettes just by hitting the space bar. So let's get started and be sure to put Strike comes in the class project. I can't wait to see what you come up with. 2. Creating the Base Layers: it's always helpful to think of your icon in terms of basic shapes. For the camera icon, we have square a rectangle and three circles. It's an empty sketch file open. Let's get started by creating the shapes that make up our icon. The icon we're creating today has a square shape. So we're gonna go ahead and draw square onto the canvas. I'm gonna go to the insert menu, go down to shape and select directing. You can draw shapes on the canvas by clicking and dragging. If you want to make a perfectly proportionate shape like a square, you can old shift and sketch automatically adjusted proportions to drop perfect shape. You could also just size in the inspector here by typing and values. So for my icon, I'm gonna type in values of 300 by 300. Now the icon that we're creating has rounded corners. So I'm gonna just the radius of the corners by selecting my shape. And then there's a radius slider over here in the Inspector, and I'll just quick and drink that over to the right. You can also tap into custom value if you have a specific value in mind. So for this icon, I like Corner radius of 45. So I'm gonna go ahead and type in 45 hit. Enter. You'll notice that shapes and sketch have agree. Fill in a dark grey border. We're actually not going to be using the border in this tutorial. We're gonna go ahead and turn that off. I'll do that by selecting the shape and then un checking his check mark right beside the border color. So now this disables the border. You can see that rectangle doesn't have a border applied to it. The last thing we'll do is go ahead and save this file. Perfect. Our icon has this empty area in the middle, and all that is is just another shape that's been subtracted from our original base layer, which is this square. So I'm gonna go ahead and create this second rectangle. And to do that, I'm going to select the original square hit command, see, to copy and command V to paste. Now we've pasted the square over top of itself and you can see that a new layer was created here for us just before the original. I'm gonna go and change the color to make it easier to see what's happening so changed to read. And now I'm going to scale this square to be a little bit smaller. And I'll do that just by typing in the values in the inspector right here something that did make it 235 by 235. And because our proportions are locked here soon as I type in the value for the with and hit enter the square is resized. I'm gonna position this in the middle of our original square. No, just do that by dragging and then using sketches, layout, tools. It helps us kind of center that shape within the other shape. Perfect. Our original icon has rounded corners at the bottom and pointy corners at the top. When you double quick a shape and sketch, it allows you to edit the individual points for that shape. So I'm gonna go ahead and select the top two points. So I was like, the 1st 1 hold shift and select the 2nd 1 I'm gonna bring the corner radius slider all the way down to zero, and this gives us those sharp corners that we want. Now this inside shape in our icon is actually a rectangle. So I'm also gonna go ahead and quick and drag this down a little bit somewhere around the middle. I'm somewhere right there. Perfect. Now, the last thing I want to do to the shape is adjusting radius of these bottom corners here. Just so it matches a little bit more nicely with the outside radius of the outside square. Once again. Also, like both of these points, I'll select the 1st 1 hold shift and select the 2nd 1 And I'm gonna just the corner radius value to 25. Perfect. Now, to apply the transformation to this shape, you can either hit, escape or just had the finish editing button up here. Next, I'm gonna create the lens for a camera icon. And we'll do that by creating some circles that are gonna represent that. So we'll go to the insert menu here, go to shape and select the Oval Tool. I'm gonna draw circle inside of the square, someone to do that by clicking, dragging and holding shift just like that. That looks pretty good. I'm gonna go ahead and drag this just to the middle like that I'm gonna turn off the border , change the color to orange. No, I actually don't want this to be perfectly in the middle, so I'm gonna select my shape and select the circle And what you can do in sketches you can You can move shapes around by one pixel just by using the Cherokees and by 10 pixels if you hold shift and then press the air keys. So I'm gonna hold shift and hit the down arrow key just once. Great. Now I'm gonna create the inside of this leads so I'll go ahead and duplicate this shape like, man. See, And then command V, and I'm gonna change the color of that circle to blue. Now, I'm going to scale this down a bit, and I want the the difference between the blue and orange circle to be about the same as the difference between the square and the rectangle here. So I'm gonna select these corners, and while holding shift, we're gonna drag to make that smaller just like that. I'm gonna position it into the middle of the orange circle, and you can see sketches helping me out there with those guides. But I'm not quite there yet, so I'm just going to make this record a little bit smaller. Just like that on That looks pretty good. I'm happy with that. Now, the last final touch I want to add to this icon is to put the window from the flash right up here. So I'm gonna treated in a circle and I'll hit the O shortcut to get the oval tool. It'll just draw a little circle just like that. And this will represent that window there. I'll turn off the border, change the color to green and just positioning in the top right corner where I want it. Just like that. Someone there is perfect. Great. Now, just before we start subtracting and combining these shapes to create our icon, I want to name the layers. And this will just make it easier once you start working with all the different layers to keep track of what's what. So I'm gonna be named the base layer, which is our square. I'm just gonna name a camera only in the rectangle camera cut out only in the outside circle the lens, the inside circle, the UN's cut out and the flash window just name it Flash. Great. Now you can already see that our icon is starting to take shape here. And then the next step, we're gonna be using some operations to subtract and combine the different shapes to create the icon that we envisioned this. 3. Combining & Subtracting Shapes: This next step is where a lot of the magic happens. Sketch has a number of tools that help you combine shapes to create more complex shapes, and we'll be using the east to combine the shapes we've already created into our camera icon. So to get started, we're gonna go and basically subtract this rectangle from our original square. I'll go ahead and select my square, hold, shift and select the rectangle, and what we want to do is you want to subtract this red shape so we'll go up here to these 1,000,000,000 operations at the top, and it's a tractor. We've subtracted the rectangle from our square, and we have a new combined shape. You can see that in the layers panel here, and you combine shape has been created. The next thing you want to do is take this orange circle and add it to our shape that we've just created. So we'll go ahead and select that shape, hold, shift, select the circle and hit union, and what this does is it adds that circle to our square shape, and we want to subtract the inside of the lens from the rest of that shape. so will select that shape the circle of the inside of the winds. So, like the square and had subtract. Now this is really starting to look like the icon that we originally plan to create. The last thing we want to do here is subtract the flash window from the rest of the shape. We'll select our shape, select the circle it subtract, and there we have it. Now you'll notice in the later panel, and new layer has been created for the combined shape. And if we open this up, we have all of the shapes that we created before and were actually able to edit thes. So now that I kind of see the camera icon, um, over here I don't want to make this Flashman to a tiny little bit bigger, so I'll select Flash will select the layer here, and I'll just drag it to make it a little bit bigger, just like that. Perfect. And I think that looks really great. So now that we have our beautiful icon created, we can go ahead and start making the background. But before we do that, I just want to do one more thing to our icon here. I'm just going to select it, go to player paths and it flattened. Now we're going to get an air here from sketch, but you can just ignore it and hit flattened anyway. And what this will do is this will allow us to scaler icon upward down by dragging it without losing any of the properties, like the roundness of the corners or the thickness of these of some of these lines here. And we're just gonna name this icon camera Great. 4. Creative Icon Backgrounds: Now what I've actually done here is just beside my camera. Icon identified the colors. I want to use it in my ingredient. So, uh, what thing you want to do is when you're thinking about the radiance you want to use or like, the colors you want to use in your background, try to pick about five colors and that's what I've done here. And so I've just laid them out here so you can see the colors I'll be using. And I'm also gonna put that in the course description as well. So to get started on our background, we're going to create a rectangle. So I'm gonna use the shortcut are and draw a rectangle here, actually wanna draw square. So I'm gonna hold shift to drop perfect square. And I was gonna leave it at that size. Gonna turn off the border and I've been around the corners to 30 pixels. Make it 50 Perfect. And now what we're gonna do is we're gonna set at background color to this square. So because I laid out my killers here, um, and I just threw a bunch of squares and group them together in a group. I'm just gonna pick these colors off when I want to have them to sell my home. It's so for the background of the square. I want my base color to be purple. So I'm gonna hit the color, fill tile here, select the eyedropper tool and pick off that purple color. And so, as soon as I click on it, you'll see my rounded rectangle will take on that color. So this will be the base background color for the for my icon. So there are a couple different ways to achieve this effect. And the way I'm going to do it is create a series of circles on a fly Gaussian Blur effective. So I started here by selecting the circle tool, the oval tool, Poletto. And I'm going to draw an over a circle just down here at the bottom, just like I'll turn off the border once again on this side. Looks pretty good. I'm gonna give this one the color orange. I'm also gonna name this later right away. Just call it Orange Circle. Now. I'm just gonna duplicate this, um, it command C to copy command me to paste, uh, and I'm going to apply the yellow color. Now, the sizing and position of these circles don't really matter at this moment, so I'll just I'll just leave them where they are and call this yellow circle and I'll duplicate this a few more times. Put this one up here, change the color, using the color, drop the color picker. Here, make that will blue change the name to Blue Circle and my last one is going to be down here in the bottom right corner and I'm going to change the name of this one first, I'm gonna change the color to this pink. Change the name to Pink Circle. Now, to achieve the desired effect, I'm going to select all of the's circles and this Ah, this rectangle here and I want to mask these within the rectangle. So when I pressed, the maxim function was actually gonna happen Is that these are gonna be contained within this rectangle. So I'll go ahead and do that up here and quick on mask. And now you can see they're all inside of that rounded rectangle and you layer group has been created for me and it contains all of my circles. So what? I'll do is I'll select all of them just like the 1st 1 Hold shift and select the last one. And I'm going to check off the Gaussian Blur effect down here in the Inspector. I'm gonna increase the blur amount to 35 pixels. Now, that's starting to look a little bit more like the Instagram logo. So what we're gonna do now is a justice circles by adjusting their position and size to kind of achieve the desired effect we're going for. So I'll double click this blue one here. You can see. Once I double clicked it, I'm able to move it around and adjust the size of it. He's gonna push it up to the to the corner here and increase the size of a quite a bit. So I just grab one of these corners, hold shift and drag outward to make it quite a bit bigger. And now I'm just kind of place it up there. Um, that looks pretty good. And I'll do the same with the pink one I have down here. He's gonna double quick it, um, grab the corner and hold shift while I drag to increase the size of that a little bit. Now. I want the yellow and orange circles to be on top of all of these. I'm just going to select both of those layers here in my layers panel on the left side. I'm gonna drag those just before just to be just before the pink and blue circle and just dropped from there. Great. Now I'll grab the orange circle and do the same Hold shift enduring outward. I think this one really big. I'm gonna move it down into the corner. Like so. Okay. Ah, And then I'm gonna grab the yellow circle. Kind of leave it the size that it is, but move it down to somewhere like that, actually gonna move the orange circle over a little bit, just like that, and I'm gonna move the blue circle just a tad bit too the left here. Like that. Great. So now we have, ah, ingredient style background for icon. So let's see what happens when we decided to place a rock on over top of this. So I just closed this group right here. I'm going to slide over here. Grab the camera icon, and I was gonna hit command, see to copy it. I'm gonna hit command. I'm gonna come back over here and a Commander V to Paste. I'll move it into the middle of our of our square here and just kind of align it. And and, um, the size of this is actually pretty good. So the last thing left to do here is to change the fill color of our icon toe white. Great. So now we have our color background. You can experiment by changing the colors to different colors that you like, or changing the size of the circles or even the types of radiance that are being used here . So, for example, I'm going to actually double click on this blue circle and just not just gonna drag yet to make that a lot larger. So I'm just gonna make that circle really big. No wonder I get right up to the top of the icon just like that. Um, it's He can experiment by adding more than five colors right into kind ingredients you come up with. And you can post your backgrounds and icons into the project section for this class 5. Exporting Your Icon: next, I want to show you how you can export your icon. But first, let's review what we've done here. So you got our background later here, and we're actually just gonna choose the name of that to background. We've got our duplicated icon right in the middle. Um, just got a color swatch layer up here. We don't really need that anymore. Then you've got original, like on over here. So you might have noticed that when I apply the radius to this square corner radius, um, it's not quite as rounded as you would find on an app icon for exam. So we could go back in here on and it d corner radius on her mask just by adjusting the slider. But what you'll find is that the corner radius on app I cones is a little bit different than what you can create just by sliding this radius slider around here. So what we're actually going to do is we'll use the built in sketch. I always icon template, and we're going to take this shape. We're gonna take your icon and paste it in there. Um and then our our our corner radius will be exactly what we want. So for this step, it's actually better to kind of reduce that to make sure we don't lose any of our corner. Because, for example, if you around too much, um, the the actual radius might actually not be asked around. So we just take it down to something like that and that's good enough. And we're gonna so like both of these shapes and group them. So I'm gonna hit, commanded you to group them. You can see we've got a new layer group here that will call it camera icon and hit Enter. So what we're gonna do next is we'll go to file you from template. I was app. I come, this gonna open and you filed for us that has a template inside as icons of different sizes for all the different spots that you'll need to generate icons for when designing an IOS app. And so you can see they're all different sizes here. And what we're gonna do is we're gonna copy our icon from our file. We're going to select our camera icon layer are layer group it command C. We're gonna go ahead and paste it into this template. So I clicked on the 1st 1 here and just hit Command V. You can see our icons a little bit smaller, so we're just gonna have to scale it and just the size and the way I'm Simeon here, by the way, is holding command and then pressing, plus or minus to zoom in and out tells him back in. And let's just check the size of this of this default app icon here of this template. So if I click on that, conceive aside, is 5 12 by 5 12 in the inspector, look weak on my icon. Go to scale and just adjust the values here to 5 12 and hit OK, and there we have it are Icon is perfectly scale and it's got the perfect amount of corner radius applied, Um, for use in the APP store or for our I wish I could. So now we can duplicate this process for all these other instances of our icon. So, for example, well, quick on this one hit command V to paste causes honor clipboard. Now rock on is a lot larger clusters. Check this out of this template by clicking here on the name You can see the size is 1 80 by 1 80 So we'll click on her icon its scale and just type in 1 80 and hit OK in Iraq owns resize perfectly to fit into this, uh, this template here, which is used on the iPhone home screen. This this first template that we have the one that says at three X is for the iPhone six plus and the one that says at two X is for any iPhone with the retina screen. So let's go ahead and also put our icon to this template here. Um, and we can see here just by clicking on the name the size. And Inspector is 1 20 by 1 20 So we'll go ahead and Pacer icon in there as well and go to scale and change the size to 1 20 There we go. And so all that's left for us to do is to go ahead and export this icon. So to export any of the icons from each template that you that you drop them into quick on the name of the template and then in the bottom right corner of the inspector here, click Export assets. So let's go ahead and export this icon for iPhone with retina screen. We'll click export assets, and we're going to go ahead and save our icon to our Project folder and hit exports. Great. So now let's go check in our finder, uh, and see what our APP icon looks like. And we can see that sketches automatically created an Assets folder, a knapsack on folder. And here's their icon, Um, at two X So now we double quick it. We can open that up on this is zoomed in a little bit, but at actual size are icon looks like this, and that's perfect. And there you have it, guys, that wraps up our after Icahn class. If you have any questions, I'll be glad to help you on the ask me anything. Discussion. I hope you guys have fun. And I can't wait to see your icons in the class project page. If you have any suggestions on what you'd like to learn next, drop me a line. See you next time. Yeah,