How to Design a Mobile App Icon for iOS & Android | Ljubomir Bardžić | Skillshare

How to Design a Mobile App Icon for iOS & Android

Ljubomir Bardžić, UI/UX Designer • Adobe Certified Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (42m)
    • 1. Intro

      1:22
    • 2. About Icons

      1:42
    • 3. iOS Basics

      1:32
    • 4. Designing iOS Branded Icon

      9:56
    • 5. Android Basics

      1:23
    • 6. Designing an Android Branded Icon

      7:33
    • 7. Custom Icons

      1:13
    • 8. Designing a Custom Icon

      16:47
    • 9. Assignment

      0:37
    • 10. Final Thoughts

      0:22

About This Class

If you are designing mobile apps but don't know how to design a launcher/app icon or aren't 100% sure how to do it properly, this class is for you!

My name is Ljubomir Bardžić, I’m a UI/UX designer and an Adobe Certified Expert, and in this I'm gonna teach you how to design an app icon.

App icon is an important part of the app and if you think about it users see it before your apps UI and more often than your apps UI, so you as a designer should know how to design one properly.

During this class you will learn:

  • What makes a good icon
  • What are specific requirement for Android and iOS
  • What types of icons exist
  • How to design an icon for Android
  • How to design an icon for iOS
  • How to properly export an icon

As you progress through the class you will be creating two types of icons:

  • Branded icons
  • Custom icons

We will be using Photoshop & Illustrator to create our icons and you need only the basic knowledge of these tools, and even if you are new to design you will be able to take what you learn during this class and apply it on real projects right away.

Transcripts

1. Intro: when designing unhappy often don't pay much attention to the APP icon. But they shouldn't be the case because it's an important part of Iraq. From the APP store to the home screen, the icon is representing rap, and if you think about it, user seat before he wraps, you are and more often than Europe's right, so it's a good idea to make it awesome. And if you match you up with a good looking icon, he will make the overall experience that much better. Hello, everybody. My name is River Barge each time a user interface and user experience designer and I'm also an adobe certified expert in today's class, I'm gonna teach you how to design an APP icon. This doesn't have to be hard if you know the basics. And my goal today is taking process and teach you everything that you need to know to start designing their own icons right away. During this class, we're going to cover both Android and IOS, and I'm gonna show you how to design a couple different icons, including how to build one from simple shapes. As we progress through the class, I'm gonna provide you with templates it can help you when designing an icon in your feet to use these on your future projects. This class is really meant for anyone that wants to have the skill of designing. And I can't do the talking and you wanna leave the basic knowledge about design to follow this class. By the end of this class, you'll be able to design also my concern, your own, and I'm excited to see what you will come up with, so let's dive right in. 2. About Icons: Let's learn what makes a good icon. First off, what is an icon and why do you need one? The ICANN will represent your app both in the APP store and in the system. You I. So the first thing you need to think about this recognizability the icon trusts that Europe apart and make sure that when someone wants to use Europe, they confined it easily. In a way, the icon should be an extension of your app. You should convey the brand and even if younger, Tony branding. Yet it's a good idea for the I countries, the same colors and visual style as the app. The next thing you need to think about scalability, your icon will be displayed at a lot of different sizes, and you need to make sure that it scales well and that it is still recognisable when scaled down to make things easier. It's the Marie simplicity, as making a simple I can will help with the recognizability and scalability. You don't have to make her. I can overly simplified, but it's so definitely have a single point of focus should be based around one main element , and you should've rate making it crowded. Aside from the things that should do there, certain things you shouldn't do, some of the things you want to avoid are using words, photos and you elements inner icons. We're gonna talk about these things more as we go along. So don't worry if human memories to all of them these attributes should be common to all icons. And in the following lessons, we're gonna talk about specific requirements for Android and IOS will also be designing two different types of icons branded were taken existing logo and apply to a Nikon and custom, where you take an icon and created from scratch. 3. iOS Basics: we're going to start by talking about IOS. Let's look at some basic attributes of an I. R. A cycle. First off, we have format, and you need to deliver the icon as a PNG, which is a raster format. And unlike collector, it can't be scaled up without the last of quality. Which brings us to our next point resolution for hours. There is a specific set of dimensions that you need to delivery or reconnect. We'll talk about what these are in just a minute. Next, we have layers and I are cyclones. Don't use layers and don't use transparency. Your design will be used as a flat image, and finally, we have shape. Even though the system displays icons with rounded corners, you need to deliver your design as a square, and the system will apply a mass to it later. Now that we have gone over the main attributes of an I cycle, let's look again at the resolution. The size of the riken will vary based on where in the system and on which device it is displayed. First, your icon will be displayed in the APP store, the main screen spotlight settings and notifications You also need to accommodate different screens with different screen resolutions. Luckily, there aren't that many different iPods and ipads, so there is a specific set of sizes that you need to provide. I'm gonna leveling, for you can find these, but you don't need to remember all of them as we're gonna use the template that lets you design at one resolution and export at all the other sizes you need. 4. Designing iOS Branded Icon: we're going to start, but is ending a brand that I can, and this means we're gonna take an existing logo and apply to a Nikon together. Final result. When you have a local ready, the creative side of making such an icon is pretty straightforward, But there are still technical requirements that need to be met, So this is a great opportunity to learn the technical stuff before moving forward with more advanced icons. The main reason you would want to use this type of an icon is to reinforce your existing brand and take advantage of it to make the icon an instantly recognisable. If you don't know we have a logo in Europe will only live in the APP store. For example, if you're designing Ah Nikon for a calculator app, you should create a custom. I can instead, and we'll talk about how to do that in the later lessons. Now let's get back to Brendan Icon Sen. Look at some examples. We will start by looking a Twitter, and there are Pike on. The local consists of this bird symbol and nothing else, and this is the simplest type of ah branded I can. You'll encounter when the logo consists of four only, ah single element. You just place that element on the icon and make sure toe size it well. After I have done that, only thing left to do is to merge the color of the icon toe the brand color or color save the losing more than one. The next step we look at is Ah, workplace by Facebook. They have a different type of logo that's called a word mark. When you hear a word mark in most cases, you want away putting the whole thing in your icon, and there are a few reasons for this. 1st 1 is that if you have ah longer name to fit it into your icon, you have to scale it down quite a bit. So when the icon is displayed that smaller sizes it won't be irritable. Another concern is the aesthetics long words air white, but not the toll, so they don't feel the square format. We're well, and finally, including Ah, full name in the icon is redundant, since in the APP store you have the name right next to the icon and on the home screen, the name is displayed the right below the icon. Now let's look at what you should do when the main logo is a word mark for stuff. Let's cover an exception to a rule, and that is, if you have, ah, very short board. Markoff 3 to 4 letters. You will probably be able to use it in the icon as the problems we just talked about. Don't apply when it comes to longer names. Each logo should also have, ah, version that's made to fit a square format in case off workplace. This is their first leather that's very distinctive and another Casey's beacons, and they used their 1st 2 letters. So your job is toe. Ask for this version of the logo and included in the icon Samos before. It's also important to use the right colors as they're on important part of the brand as well. And the last step, we will talk about these skill show. Let's take a look at the logo on. You can see it consists of parts assembled with two transforming ah leather s and their name below that same as before. You don't want to include the full name in the icon. So in a case like this, you should use the symbol. You may notice that in their logo there is, ah, circle around the chance while in their icon that doesn't beer. And this is because in their logo, the circle is usedto frame the symbol within it. So in the icon that isn't needed because the symbol is framed by the biology's of the icon itself. Same as before. The color is also important. Then you want to use the brand colors. No, told these icons follow the guidelines we talked about. They're all recognizable. They convey the brand. They scale well, they're simple and focus on a single element. Now. Did we have looked at some examples? We're gonna look a cloud to design on icon ourselves, as we learned in the previous lesson on I recycle needs to be learned as a PNG, which is ah raster format, and it needs to be literally in the 14 different size of sand. It wouldn't be very efficient to make an export, you'd say separately. So one thing that can help us with that issues Photoshopped template made for designing an icon, and there's ah, number of them online. But the good ones cost money. So I went ahead and created on myself, and you can use it for free. We'll also need the logo, and I've included one. Did Dickey news for practice and you can find Vote the template and the logo in the your part of Tab. Let's ah, open the template and I'll show you how to use it. When you open the template, you will be met with an icon in multiple sizes. And these are all the size is that there are listed in the apples guidelines in that are currently required. Good news is that all the icons you see on the screen or length, so if he had it won, all of them will change. And to do that, you just double click on this icon layer. When you do that, it will open a smart object with looking at it. And let's look at what's already here. Starting from the bottom, there is, ah, solid color layer that serves is your background. You can double click on It's time nail, and it will open the color picker so you can change the color above that. You have a grid, and this can help you with aligning elements in the icon. Next we have a greedy int layer used, doesn't know really and same us with the color You can double blankets them thumbnail toe, edit the radiant and you can also hide it if you're looking to create Ah icon in flat style . And finally all of that is wrapped in a group with massed applied to it as we discussed, you need to deliver that I can as a square, but it is your sort off preview what the icon would look like with a mask. So while you are working, you will keep this a mask on. And when you're ready to export, you can disable it by holding shift and clicking on the mask. Now that you know that we're ready to start designing her icon to start open the sample logo are provided you want toe, select the logo and just the drag it into for the shop. After you Ah, drug in it will be added as a vector smart object, so you can resize it without any issues, and the next thing we will do is align it to the center and press control t transform it Then we will resize it until it just touches this circle right down below. And after we have aligned, it will hide. A great is you don't need it anymore and move the layer below. The greedy int Well, green able are mask And now you need toe save the smart object for the changes to take effect. So control s to save And if we go back to remain file, you will see that the all the icons changed. Now there is still one more thing that we need to do and that is toe change the color. So do that. We will go into the illustrator. Click on this background layer. Double click on Phil to open the color picker. Copy the hex code. Go back into further shop in tow. Smart object Double click on the background and based in the hex code Again, we will save the file and if we go back, we can see my right hon is completed. So the last thing we need to do is tow export. This. Before we do that, we will go back to a smart object and disable our layer mask. But again, by holding shift and clicking on it. Save the file and if we go back, alright, when he's ready for export So we'll go to file export export as and you will see that all the sizes are present Hero on the left and all we need to do is make sure that the format is set to PNG. You don't need transparency enabled. You can click on export all after you click on that, it will ask you were you want to export And after you have ah picked a folder, just click and select folder And after you select that, your icon will be exported. If you look at their fuller, we conceal our Aiken sizes are here and are ready to begin the door. Now you know how to design branded icon for IOS. 5. Android Basics: we've talked about. I s Now let's talk about Android. We're going to start by comparing their two bits of an android icon to the one off the IRS . First off, unlike on the IOS on Android, you deliver the icon as director file so it can scale easily without the loss of quality. So even though your icon will be displayed on hundreds of different phones, you only need to deliver one size. The next thing that specific is the sentence Android. 8.0, The system uses what are called adaptive icons, and they use layers so you actually need to delivery or icon as two separate layers. Also, adaptive icon scare a mask layer, which we'll talk about in just a minute. But Samos on the iris you deliver the icon is a square, and the system applies a mass to it later. Those are the basic attributes of an android icon. The most important thing here is the concept off adaptive icons. So let's look at its anatomy. An adaptive icon has three layers. The background, the foreground in the mask. You provide the background in the foreground, and the system provides the mask, the shape of the mask is determined by the phone manufacturer. She need to make sure that your I can't works with masks of different shape. And I'm gonna show you how to do that in the next lesson. 6. Designing an Android Branded Icon: look that branded icons for IOS. And now we're gonna look at how to create that same Macon for android a Samos with I arrests, I made a template for you. But this time seems we're gonna be working with Victor files. We will be using Adobe Illustrator instead of for the shop. Same as before. You can find the file in your project type. The biggest difference from IOS will be the introduction of layers with the adaptive icon. So let's dive in and see how it works. First, let's see what we have. Ah, in our template, starting from the bottom, we have the background layer. Right now, it is just a solid color layer. But they can also include the other elements and Samos. With the template, you can easily change the background color. Next, we have our foreground layer and this is where your main elements will replace. There is already a Finnish layer in here, and it represents ah light source. Since lighting is an important element off material design, which is Google's official design language. So if you want to follow that style, you can use the finish layer. But you also don't have to next week ever guides, and they are divided into groups. First, we have our key line shapes, and you can use these to, ah, lion elements, which we're gonna do in just a minute and more importantly, can use them to draw on your shapes, which we're gonna do you in the next lesson. When we go ahead and create a custom icon, the next set of guidelines marker safe zones. The bigger circle represents where ah, circular mass kid would be. And this is the smallest mask you are likely toe, see? But it doesn't mean the mass can be smaller. This is what the dash Linus for It represents the smallest size, the mask, and technically, be so anything that you put within the circle will be visible for sure about that, we have preview masks. You can use these to view what you're I can would look like with the different masks. And here we have Ah, some common mask shapes. And above that you have those same shapes inverted here. The middle part is visible on, and I'm gonna show you why and how to use them in just a minute. Now that you know what's in the template? We're ready to start this thing right? Can again. We will start by opening our logo and copying it into our main file. It will be a little big. So resize it Just where are flip and will want toe? Make sure that it is in our for ground layer. Now we're gonna align it to the center. And after we center it, we're gonna resize it to right about here where it fits within this key lines square. No, we can, uh, Haider guides and we can turn on our mask. You know that we have done that. We have only one thing left to do. And that is to copy or the color same as before. So, like this beggar on the rectangle double quick, unfilled Scarpetta hex code and basted in death makes her I can complete. So let's learn how to export it. They're exported. You will, uh, first disable the mask. You need to unlock the finish layer. And now we will select finish on her. Hello. And for this we will use the asset expert panel. If you don't have it in your tools, you can find it under window and asked, Expert man, what do you want to do after you have ah selected the appropriate elements is go down here . So this button that says generate a single acid from the selection and click on it. Now we can rename This took for grunt and we will repeat the process for background. And now we have our two layers. Ah, you will want toe export them either as an SPG or you can also use the PNG. But vector format these more favorable. So select both of this and click on export and it will ask you where to export. So after you have selected the folder, your I can't will be exported. Aside from that, there is ah, one more size that we need to deliver a za PNG and that is ah for the play store. And we're going to do that by using the clipping risks at the top. So you want enable, for example, around the square we're gonna copy these elements by selecting them and and holding Alton copying them in the clipping last layer. Now we're going to select all of these shapes, including the mask, goto, object, clipping, mask, make and if we move this now, we have a Nikon with a mask applied to it. If you think you look at the are breathing masks and unlocked them, you can see the They just hide that the area around so we can preview it. Well, this can be used on the area around it can be transparent. So, uh, we're gonna create a new are Bert. Go to the airport to click on new art board and type in the size we want. And that is 512 pixels by 512 pixels and we will placed in here. We can resize it. We can just multiply this by seven times and it will be 504 and we can align it. So it is a little room at the edge. It's so it looks, looks better and that just don't get distorted. Now you can just use the normal export first greens. So, like the second our board, maybe call it placed, or I can and export it. And now you also have the play store icon. Now you know how to design a branded icon for android 7. Custom Icons: we've looked at branded icons and how to design them. Now we're going to explore the process of creating a custom icon. First, let's look at why you would want a custom icon. One of the reasons could be the T rap live in the APP store and nowhere else online, so it's a good idea to focus in the icon instead of the local. Another reason could be the under one brand. You will have multiple APs so you can use the same logo for all of them. One great example of this is Google. They have a lot of APS under their brand, so for the remaining up, they do use their logo. But for all the other wraps, they have custom icons. Aside from the general guidelines that we talked about, there aren't any specific rules. Just what you can do with the custom. I can't. As long as you follow these general guidelines, you should be good. This is especially true for IOS or Android. There is a certain set of guidelines that defined your look off the icon, and you can follow them if you wish. They can be found within Google's material design guidelines and I'm gonna link to them in the project description. And more importantly, I'm going to show you have to design, and I can't face that Look in the next lesson. 8. Designing a Custom Icon: Let's start with designing or custom icon. This icon will follow the material design guidelines, so we're gonna try and use the kill and shapes. As much as possible will be designing, and I can foran able cap so naturally our Aiken will represent the book. Let's start by talking about our colors with the branded I Can. You already have the colors that you need to use, but with custom icons, you can pick the colors yourself. However, in most cases, it's best to just use the colors that are already in the a p y. Since we're designing this icon with material design in mind to bake the colors, we're gonna go toe material dot io go to tools and scroll down to find the color, too. And let's say our abuses this red as the main color and this dark gray as the secondary color. So what we're gonna do is, uh, copy the hex code off this thread. And in illustrator, just grab a rectangle droid, open the color picker based in the hex code and then open the color swatches and click on use. Watch, click on OK, and just to repeat that for dark great Based in the hex code on I didn't swatch and now we're ready to start working. We'll start by applying the dark grey tore background. After that, I'm gonna hide their safe zone. Sent turn on a masks we can preview or icon. And since we're designing ah, an icon for a neighbor cap and we will be drawing a book. I'm going to start by drawing the book covers. For that, we will be using this white rectangle. Grab the rectangle tool, align it to the edge on Android until it snaps to the other corner. Now we will pick, read as their color. We're going to move this into our foreground layer just so that we don't forget to do it later and we're going around the corners so they match the rectangle and it will be four pixels. Next, we will draw the Peterson for debt. Ah, again we will grab the rectangle tool. And this time we're going to use this square shape. Ah soul. It's line it and draw until it snaps to the other edge. We can hold shift so it stays. Ah, perfect square. And here we will use white and again around the corners. Now we're gonna go into shaping this and something that looks like pages of a book, and we're gonna do that by making it look like these pages are folded in. We're gonna do that by, ah, grabbing the mental while this square is selected and we're gonna add a point that alliance toe the center. And we're going to do that down here as well. And now dressed the grab the direct selectable select one anchor point droid down. Go to the bottom one selected and bring it up. Now we have something that looks like pages of a book. Let's hide the key lines for a second, and it's good that we did that since I noticed this points that are sharp. So we're gonna go ahead and make them around it so that grab the direct selectable click on one of them, then a whole shift and click on the other three. And after you have selected them, just click on this, a little circle right here and drag it down until, ah, red line shows up and this means we have ah rounded them a zoo much as possible. So that looks much better. Since we want to use material design style, we need to think about lighting. And since our ah light source is in the top left corner, the left page will be in a shade. And what we're gonna do is at the shadow. To do that, we will copy our pages and grab the says it'll and cut here in the middle at this anchor point and the single point. And now what we're gonna do is Haider right page for a second and grab the left shape, make it black and change the capacity toe. Let's say 5% man, that looks good to me. Next, differ light sources on the top left. That means this left page will be casting a shadow on the right one. So instead of writing ah, shade toe the whole page this time will create Ah, drop shadow. And we're going to do that by drawing a shape, and we're gonna start at this point. But there is already an anchor point there. So we will, uh, lock our ah, left paid shadow. And now it will like this the start new point there. So click there with the mental. Now we want this line, Toby at 45 degrees to follow our light sorts and toe that just hold down shift And it will restrain your line either toe vertical, horizontal or 45. So just draw a line little beyond the page and go around. Get back to this point and close it. Now we will again bring the right page, place it on top, select both of them by holding down shift and in our pet finder tool, we will intersect them. After that, we need toe apply a color to it. This time we won't be using ah solid color but greedy int. Instead we will make it 45 degrees. Just reverse these. And on one side it will be black with 5% capacity. And on the other side, it will be black with 0% best. If we take a look, we have a really nice drop shadow. The next thing we want to do is make these pages more interesting by adding some content to them. Of course, it wouldn't be very smart. Toe had actual text with them. So we will use simple shapes that represents the text when put together. And we will bring back our key lines and grabbed the rectangle tool and lets the drawer shape. That is something like this. 16 bite to, For example, Let's bring it up so it's visible and let's pick a color for it will go back to our color tool and let's go with maybe this trade of great copy it and apply it, and that looks nice. We can add it to the swatches, and let's just copy the shape a few times now that we should three carpets. Just grab them all and copy them again and maybe one more time. No, just select the mall, group them and used the vertical line tool. And what we're gonna do next is copy them toe are left page as well. Now we have ah, content for both of our pages, but I don't want it to be the same. So let's see what we can do to make it more dynamic and make it more interesting. We will grab the top three shapes and make them smaller. Pick the right reference point. Maybe skilled inland toe. Let's see six pixels And now let's draw a rectangle here that's 10 by eight make sure that it's the same color and we will add it to the group. Now, on the right side, we can grabber last shape and make it shorter. So it looks like an ending off a paragraph. We'll make it. Aziz writers, these three ah lines in the left page, so six pixels. And now we have some content. You probably noticed that the these are flat. Then they don't align with the perspective of our pages. So we're gonna fix that right now. So let's look at the what line we want to follow toe marriage. That perspective, If you remember. Ah, we have a point here and the the next point is here. So this is the line we want to follow from this point toe this point right here, whereby rectangle tool and draw it from that point all the way to the middle of the page. I will bring it up if it's in the wrong layer and make sure it has no fail because we wanted empty and group it with our so called text. Now we're gonna draw another shape for the right side and group it with the content for the right side. So now what dildo is Grab the free transform, too shortcut to eat and in this little menu will grab the perspective distort. Now, just grab this point up here in the top, right, and bring it out until it snaps. We will go into that for the, uh, right page as well. Just grab the point, bringing out until it snaps to this path. So let's hide our clients and the casino. We have, ah, content that fits the pages. Really well, you might notice that the colors look a bit weird when you compare these, And that is because our content is above the shadows. So in contrast, they look their friends. So what we're gonna do is grab both groups and place them below our shadows. And now everything looks like you should, and that makes her pages complete. Now, to me, the covers look a bit flat compared to the pages. So we're gonna see what we can do to improve that First thing we can do is add edges on the left and the right, and we're going to do that by copying this shape two times to do that. Just hold on. Old and then click and drag it two times, and we will use the arrow keys with the top shape selected to just click on the right. There are key to move it to the right by one pixel. Now we will grab both shapes and in the paint. Finer tool used the minus front option. Now we have, ah, shape here, and we will make it white and used on a passivity off 10%. That looks great. So let's do it toe the right side as well. Again, copy the shape times by holding the north and clicking and dragon, this time with the top shapes like that. Just the click on the left arrow against, like boat used the minus front option, and we will make this one. Black sits, it's in the shape and we will use a pass ity off. Let's see. 20. We will also add a drop shadow toe covers. To do that, Goto effects stylized drop shadow, and we will use the capacity of 20% four pixels for all the other rallies. So we have a nice 45 degree shadow click on OK, and now we have a shadow. Let's zoom out for a second, and this looks pretty right to me. And there is one last thing I want to do, and that is to change the colors. Since ah, the red is our main color and dark grays or secondary color. I want them to in fact be the primary and secondary color of this icon. And right now the doctor is dominating, so we're gonna grab the background and changes threat and grabber covers and change them toe. They're gray. Now. Our colors fall the hierarchy that they should, with red indeed being the primary color and that makes her I can complete no same as before . We're going to export it, and so that will hide the mask. First, unlock called layers, sand the for the foreground. Never just select everything. And then, while holding shift, click on the background. This little circle next to the background layer going toe the asset export and again create a single asset from selection. Call it foreground. Repeat the process for the background. Now, with both of them selected, click on Export, pick a folder and click and select folder, and your icon is exported. Now you know how designer custom I come from basic shapes. This will just the one case, but you can use the tools and matters are just show you to create a lot of different icons . 9. Assignment: now that you know how to design and I can I have an assignment for you that will put what if you learned into practice? If you have a choice to design either a branded or a custom, I can. If you want to go with the branded icon, you could come up with the logo. Or, if you already have a logo for a company that doesn't have a nap, you can try and see how you would design their icon. You want to go with the custom icon, you can come up with the concept for a nap and designer I can around that after you have created something, go ahead and posted in process gallery. I look forward to seeing what he come up with. 10. Final Thoughts: you made it through the end of this class. I hope that he from enjoyed a little journey and that you feel inspired to stop designing icons on your own. I look forward to seeing your projects, and if you have any questions, just post them down in the discussion.