Illustrator: How To Create Mobile App Icons in Illustrator | Dawid Tuminski | Skillshare

Illustrator: How To Create Mobile App Icons in Illustrator

Dawid Tuminski, www.dawidtuminski.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (31m)
    • 1. Flat Design :Introduction to the class

      1:09
    • 2. Class project

      0:34
    • 3. What is flat design?

      3:13
    • 4. iOS calendar app icon

      4:28
    • 5. iOS calendar app icon continued

      2:26
    • 6. Android camera app icon

      5:11
    • 7. Android camera app icon continued

      5:25
    • 8. Metro UI podcast app icon

      4:59
    • 9. Metro UI podcast app icon continued

      3:47

About This Class

Amazing class!!!!! Highly recommended!!!!

Not only does the tutorial explain how to create icons but there's some useful insights into how flat icons are perceived by the industry and their conception, all in a very concise time

In this class we’ll create iOS, Android and Windows phone inspired mobile app icons using Adobe Illustrator.

We’ll  also take a quick look at what flat design is and why we are actually designing things in a simplified and maybe a bit cartoony manner.

We’ll use Adobe Illustrator to design 3 icons :

  • An iOS inspired calendar app icon
  • An Android lollipop inspired camera app icon
  • A Windows Phone Metro UI inspired podcast app icon

Each design will show you the step-by-step process of creating an app icon from scratch. We will start with a blank artboard and, with simple transformations, create beautiful icons.

Even a total Adobe Illustrator newbie shouldn't have problems following along!

So hop on board and let’s get started!

Dawid

PS If you like the class, please submit your review and class project.  It will help other students, just like you interested in topic I teach, in finding my classes. Thanks!

Transcripts

1. Flat Design :Introduction to the class: Hello and welcome to the class. It's really great to have you on board. My name is David Tomaszewski, and I am an adobe certified expert in Illustrator. In this class will create Iowa's android and Windows phone inspired mobile app. I comes. We'll take a quick look at what flat design is and why we are actually designing things in this simplified and maybe a bit cartoony manner. We'll use Adobe Illustrator to design three icons and IOS inspired calendar app Icon, an android lollipop inspired camera at Icon. Any windows phone a Metro, you y inspired podcast app icon. But each design will show you the step by step process off, creating an app icon from scratch. We will start with a blank hardboard and with simple transformations, create beautiful Aiken's. And if you are familiar with my other classes, my teaching math is all about simplicity and getting straight to the point. So hop on board and let's get started 2. Class project: Of course, this class is not just about you listening to me talking and watching me clicking. So for the class project, I want you to create an icon based on the operating system of your choosing. If you want to make some effects or styles from different icons, go ahead. Just try to keep it flat and think what you would want it to look like. If you were to see it on a smartphone or a tablet, you're I can should contain the main object 14 off shadowing and the background. 3. What is flat design?: So what is flat design and why are we designing things in a simplified, flat way? Do you remember the times when graphic designers all sorts were packing flash collars, ingredients and drop shadows into their designs? African had to resemble real life, so the people, totally new to the whole interim concept could get used to virtual reality. Skew dwarfism, as it was called, was particularly prominent in Apple's Iowa's interface items. Today's traning user interface design has completely shifted. There are no classic drop shadows, the greatest are gone, and the objects look to D instead of three D, as you'd expect from longtime rivals. It was Microsoft's Windows eight. There was one of the first flat user interface designs and definitely the most significant in the business. It's strongly opposed to the Apple's IOS design. In fact, Microsoft is continuing this approach with its new operating system, Windows 10. So it seems that flat design is holding strong and they will stay around for a while. So why does everything look so simplified in a flat design? Well, the whole concept of flat design is to turn users attention to usability instead of trying to show off with flashy real life objects. I guess you could say that flat design is about communicating or a certain element does. Using the simplest means. Flat design has seen some major success in the last few years. It has been implemented by many major tag brands in the world. I've already mentioned Microsoft's latest operating systems, but cyclical LG's or why, always, variations of Android You I. Even the latest iteration off I West looks more flat. Of course, the number of flatters on websites is growing every day in terms off Web development. I guess there's no more prominent flat is an example than bootstrap or eye conforms like front awesome. All of those designs are simplified, last flashy, but that doesn't mean they're boring. Bright contrast in colors quickly grab users attention and at the same time or easily recognizable as to their function. Many of them used so called long shadow to make the icons more appealing. And by the way, this is something we'll learn in this class as well. When you decide to design in flat design style, remember to center it around the idea of simplicity they will bring usability. You saw it contrasting colors to set the elements off. Designer part. The fun should be clean, preferably Sand Saref. In this class, we will focus on designing of flat items. I want to show you how to design with flat user interface in mind, and I will do that using Adobe Illustrator. As the class progresses, you'll learn some fantastic and easy to follow techniques that you can successfully implement in your design work flow. Okay, so let's get to work and designer for a cycm. 4. iOS calendar app icon: in the last few years Flanders and has had a such a great input from the design world that even Apple usually is. A you I translator finally subdued to the flat design torrent, the I was eight and the latest Iowa's line items and ditch the real life approach of skew more fizz, um, in a favor of simplicity off flat design. Off course. Apple's version of flat is and is not totally stripped off their U. S. A. Traditional elements like grating backgrounds, but their icons are definitely leaning towards simplicity. In this video, we will take a look at how to create an IOS inspired calendar app. I can. I want to show you how we can spruce up a flat Aiken with some simple shadow ideas as well . But first, let's break this. I come down. We got the main rounded rectangle shape that is divided into one, 23 four and five separate elements Week of the year on top on the day of the month, have the day of the week in the bottom. All in all, a fairly simple design. So let's start, and we'll start with the main rounded rectangle. But before that let's duplicate are aren't bored with the art abort to in here. I'll make sure that the move copy artwork with Art Abort is not selected, and I will click this button right here that creates a new artwork, and I would click somewhere on the right to create an art. But with the exact same dimensions as the original, I will create a new layer for my design. I'll name it calendar, and I am ready to start working, and I will start with the rounded rectangle tool that we can access from the tools panel, of course. And we're holding down the shift key to constrain the proportions. I would create a rounded rectangle, and we can is just the roundness of the corners by pressing up or down arrow keys. Okay, Malley will give it a nice gray Phil and make sure that it has no stroke. And as we mentioned before, this main shape is divided into five smaller shapes. So this is what we will do now. First, I'll make a rectangle too active to create a simple rectangle like, So now I will head over to the Pathfinder tool and with both my shape selected. I will hit that divide bottom right here to know divide the shape and we got as a result of this transformation is a group, so I willen group it and I'll start adding some collars. I will make the top part light red, and I'll add my first shadowing effect by making this smaller rectangle darker. Red in the past would add a drop shadow to the top part. But since we're using flat design rules will simulate the shadow effect, creating a smaller and darker rectangle below the top part. Next up is this rectangle that is supposed to divide our calendar into two parts, and it's supposed to work as a different shading effect. Well, that's easy. I'll just created a rectangle again. Make it black or some really dark color, and I will change its Blanding mode too soft light, which we can do in the control panel up here or in the Transparency panel on the right. Okay, now let's take care off the bottom shadow, and it is as easy as duplicating the bottom rectangle and moving it a bit up, and I am doing it by holding down the shift key and the old or option if you're on a Mac. Okay, this should do it. And I will make the bottom part darker, Grey. And we're almost done. All we need now is the typography, and we'll do that in the next video. 5. iOS calendar app icon continued: to finish the icon off. We still need to add the dates. Right? Okay, So the font I chose is called Lata and the phone. Wait. I've decided to set to black. So with the title active on the quickest way to make it active is by pressing the T key on the keyboard, I will click anywhere in the document and just start typing. I think I'll go for the 19th because I think it just looks nice, but it can choose an idiot you want. It can even be the 32nd if you ask me. I don't mind even that kind of creativity. All right, I will make the phone bigger. I'll give it a proper collar, reposition it, and I want to send it behind the middle rectangle like So now I will clone it down and again I'm doing by holding down the old or option on the Mac and the shift keys. Of course, I would make it smaller as well. I'll type in the day of the week and I will clone it up to half the year indicator on the top. I will give it a light of collar and now it is time for some aligning. But before we align everything nicely, I wanted to show you one more thing. If you don't make your text appear like it was outlined and actually make it a line like it sounds like all you need to do is to go to the effect menu. Of course, I get all my text selected and choose path, outline, object. And now all the tax piers and what's most important behaves like its outline. So now we're gonna line everything to the center. And still we can have the ability to change the tax if we choose. So Okay, so that is it for the Seiken. We learned how to add some nice shadow effects to an IOS looking at Mike on, and we created them without touching the drop shadow option. We also learn to the ever so handy outline object command in the next video will create an android lollipop material design, Aiken. So keep watching 6. Android camera app icon: with the introduction of its new version of Android operating system, Google showed its idea of flat design, which they called material design. They've put together a whole philosophy to justify the use of drop shadows and a wider color palette, which contradicts in some ways at least, the principles of flat designer. I don't know about you, but I like material design. I like the color state advising to use. I like the drop shadows to us like this camera Ivan that I've created for you. As usual, Let me break it down for you really quick, even though it seems like there is a lot going on. If here, the shapes used to create this icon are fairly simple. We got around that rectangle background. We got rounded rectangles working us the main camera shape on the flash. Here at the top, we got a rectangle that is this grip right here and have created the lenses with with simple circles. And of course, we've got this long shadow effects your as well. What is distinctive for the material design icons is the use of tints and shades. Google is really specific and how to use shadows in accordance with material design. And as you can see, we got tense on top of the shapes, like here, here and also here. And we got shades in the bottom off the shapes. Okay, so I guess we should get down to business as before, all creating new art board for my design off course with a little bit of help from the our boards to. And we cannot forget to deactivate the move, copy artwork with our board option and also create a new layer. I will named Camera, and I'm ready to create the icon again. I will start with the rounded rectangle tool and we'll holding down the shift to constrain the proportions or create a rounded rectangle like So Now what I need to do right now is to create the shading elements. And it's a simplest activating the scale told by pressing the ski and then enter or return on the Mac and in this style books on a scale, directing all down but Onley vertically and on Lee by just around 2%. And I don't wanna hit. Okay, I want to hit cop because I want to keep the original rectangle now with both these guys selected. I will head over to the bath Father Tool and I will choose the divide command. I will group my new shape and I'll start adding collars now. The color palette I chose is totally arbitrary, although I composed it off the material designer collars Google provides. But if you want to go for your own colors, go ahead. So I'll add the color to the main shape and remove the stroke. I'll have the tents to the top element and also ill at the shape to the bottom element. Okay, so far, so good. Now let's create the base shape of the camera, and we will do that just like we did with the background shape. I mean with the rounded rectangle to now again, let's activate the scale tool and on Lee for Nicolle decreased the size by this time, maybe by around 4%. And let's hit copy. Now listen, let's divide the shapes and let's group them and all that's left to do is to add the main color, a tent on the top and shake on the bottom. Great. Now let's create the middle ornament or of the grip. If you will. I'll do that with the rectangle tool. And yes, you guessed I was scale it down vertically, but just a bit more. Maybe to around 94% and I will hit copy Now again. That's divided on group them. And let's add the collars. The top will be lighter on the bottom will be darker. Now is the time to create the lens, but I think we should do that in the next video, so let's move on to it. 7. Android camera app icon continued: in this video, we will create the land Soss promised, but also the flash. And we will finish the icon with the long shadow effect. I'll start by making the lips still active by pressing the AL key on the keyboard. And while holding down the shift and the old or option on the Mac, I'll create a beautiful circle, just like so. I bet you know what's gonna happen next. Yeah, we will make a smaller copy off the circle and I will divide in on group the shapes. And since I warned the colors to be the same as the body of the camera, I will just sample them with the eyedropper tool. Now I will copy and skill down the first element of the lens by going to the scale, tool and scaling, scaling it down. But this time uniformly to around 65 to 70%. And I will hit. Copy on the Karzai chose for this element are shades of gray and they're pretty dark and cold. I am looking for some good contrast here. Now I will repeat the whole process with smaller element of the lands, so I will scale it down uniformly to around 50%. I'll hit copy and I will give it nice blue collars. And to finish with the lens, I will create a simple wide ellipse. No place. It's somewhere in the top. Right corner on the last appears to create a rounded rectangle that will act as a flash. So I will do that. I will make a darker gray, and if you're happy with the design so far, you can stop here with added plenty of shadows. So I guess you already understand what I wanted to show you here. But I will add a little extra something. I will create a simple long shadow effect. And for that I will select the camera body and copied into my could board. Now I will head over to the layers panel. I will select every element off the background and head over to the select menu, click in verse to select all the elements except in the background. And I wanted group my selection. I will also lock it and I will pace to the camera body in front. Now I will make black. I'll head over to the transform effect which can be found under effect distort and transform, transform and in here all moved for Nicolle and at a few copies. Until they go further down the background off the Eiken, I will change its planned in mode two soft light and drop the opacity down a bit. What I need to do is to clip the shadow that I've just created, and I will do that with our backgrounds. So in the Layers panel, I'll just select all the background elements. I will duplicate them and unite them with the Pathfinder tool. Now I will move it above the shadow, select them both, and just could control or command on the MAC plus seven to created clipping mask, which, by the way, is the same as going to the object menu clipping, mask, make and all that's left To do now is to move the original camera on top off the stack, and now we can enjoy the view of our material design icon with a long shadow effect. That is it. We've made it. We've learned how to create a material design app icon, Houston. Some simple scaling and Pathfinder operations also learned toe one way of creating a long shadow effect in the next video, we will take a look at how to create a natural you y app icon, so keep watching. 8. Metro UI podcast app icon: natural you Why that user interface of Windows eight was in the forefront of flat design. The latest iteration of Microsoft's windows, which is Windows 10 is no exception. So to close our adventure with the different styles of different operating systems, let's create this podcast. I come. But we know before we start windows, phone icons don't use shadows at all. They are as flat as can be. But in addition to a windows phone app, I can I want to show you how the creating multilayered, long shadow effect, you know, just in case Microsoft decides to is that in the future, I guess we should start as always, with checking out how the icon is constructed first. What supposed important to notice here is that each element of the icon was created with the use of the justice of the rounded rectangle to this man Shape right here is around it rectangle. These endings are also rounded rectangles, and so is the base. We get the multilayered long shadow right here. And of course we got the square background and there are only two collars used here, white and teal. So it's flat design at ISF latticed so to speak. Aziz usual. Let me start with creating some room toe work. I'll go ahead and duplicate the yard work. Of course, I want only the art poured out the contents off it. No, I will treat a separate layer for my icon all my mid broadcast, and I will love the original layer now create the main shape off course with the rounded rectangle toe. But first I'll make sure that only the black Phil is active. You know, I want the Aiken to be easily visible that will go ahead and grab the rounded rectangle to from the tools panel and start drawing it like so sure, creating it will take some time. It's shaping. The roundness of the corners are totally up to you. In this case, if you want to speed up your work, you could always press the right arrow to make the corners rounded to the max like so Now I want to create the side in dense, and I will create them with the rounded rectangle. Yes, with four rounded rectangles to be exact, so I'll create one and I'll make it white and I will duplicated Tower. Let me reposition these guys a bit, and I will group and align them properly. Now I want to copy and reflect them to the right, and I will do that with the reflective that will make active by pressing the O key on the keyboard. And if you have smart guides on which you can check in the view menu, you will see illustrator, tell me where the center off the microphone is. And that's actually great, because now I can hold or option click to get the reflect toe up and reflect. Reflect these guys to the right. Of course I want a copy. Not okay, All right, So far, so good. Now let's select everything and hit minus front in the Pathfinder tool to get the shape I'm looking for. Great, Fantastic. Now let's create the base again with the rounded rectangle, I will click and drag like so it wanted to take some time to get this right. So don't worry. If you don't get it right the first time, just play around with it. Now I will delete the top anchor point, so I will select with the direct selection tool. How simply hit delete. I'll make the stroke thicker. I guess something around 20 to maybe 25 pixels should be fine. And again, with the dread selection tool out, Select to top ankle points and bring them a bit down. If you think that this shape is a bit too big or too small, just go ahead and play with its with its size that with the scale tool or just by re sizing with the selection toe, I will also head over to the stroke panel and choose round cap. Now let's create this stand, and it is as simples creating two rounded rectangles. Now let's align everything to center, and we're set to create the multilayered long shadow effect. But I think that we should do that in the next video. 9. Metro UI podcast app icon continued: before we start creating the long shadow effect, let's do a few things. First, let's unite the standard elements using the Pathfinder tool, and let's expand the base by going to the object menu. Expand no treating rectangle background. So I'll just grab the rectangle tool and holding down the shift key. Create a square like so I'll give a nice steal color and ascended to go back. And now it's finally the time to create the multi layer long shadow effect. First thing to do is to clone the microphone to the right, and I am doing that by holding down the hall, taking hold down the option if you're on a Mac and now a copy the original microphone to my clipboard because I will need it in a second. Now I will drop the opacity of the cloned microphone, all the weight. Zero. I'll change the blending mode of the original microphone too soft light, and I'll change the opacity of the individual elements. Now the founds that I'm choosing are totally arbitrary. There is no right or wrong here. In fact, I encourage you to experiment with the different opacity value so you can get different results and really crass what this technique is all about. What it would suggest know is to keep the opacity low, and this will make the shadow a bit more subtle. Okay, now let's head over to the bland two options, and I will simply do that by double clicking the bland till twice. Here in the tools panel, I will set the space into specified distance and enter a one pixel. Okay, All we need to do now is to tell illustrator which elements we want to blend. So I will shift. Click on the top of the microphone right here and on top of the one with no capacity, I'm going to use a very, very, very handy short cut off old control. Be or option command Bianna Mac to blend these two shapes together. And it's the same as going to the object menu bland and make. I'll repeat these steps for the rest of the elements. Now I will bring back my microphone so I will base it in front. Remember, we still have it in our clipboard. I'll make sure it's white and that it has normal blending and 100% capacity, and I will look it straight away in the layer. Spow. Let's glow in the background, moving over the bland's and select our background with the bland's Let's simply clip them by going to the object menu clipping, mask make. But usually I just used the control plus seven shortcut, and there we go weak at the metro, you Iike on with a little bit of long shadow Magic created. So the Windows phone icon was the last design in this class. Tell me what you think about It would be great if you posted your icon projects and you, if you have any questions, feel free to contact me and have a nice design.