iOS & Android App Icon Design | Gary Simon | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

14 Lessons (1h 14m)
    • 1. Trailer

    • 2. iOS App Icon Specifications

    • 3. Setting up our Document

    • 4. Designing the Pin

    • 5. Finishing the Background

    • 6. Exporting our Icon

    • 7. Android App Launcher Specifications

    • 8. Setting up our Document

    • 9. Designing the Lens (Part 1)

    • 10. Designing the Lens (Part 2)

    • 11. Glares and Reflections

    • 12. Exporting our Icon

    • 13. Presentation on a Phone

    • 14. Course Overview

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn how to use both Adobe Illustrator and Adobe Photoshop to create icons for iOS and Android. We will be designing app launcher icons, which are the small graphics used to access an app on a smart phone or a tablet.

You will also learn how to ensure you're up-to-date with the latest requirements put forth by iOS and Android.

And finally, you will learn how to use Adobe Photoshop to impose your app launcher icons onto 3D smart phones for the purpose of showing clients or displaying on your portfolio.

Meet Your Teacher

Teacher Profile Image

Gary Simon

Full Stack Developer & Instructor


Full Stack Developer for nearly 2 decades. Worked as an Instructor for Pluralsight, LinkedIn/ and Envato Network See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


4. iOS App Icon Specifications: - hello in welcome to this lesson where we're going to focus on Iowa's APP icon - specifications. - So why is it important to understand the specifications before we begin designing our - actual icon? - Well, - it's kind of important, - because if you go into designing it and maybe it just setting up a square document, - you may get things wrong, - which will be intrinsically just not compatible or won't be accepted. - When you get a submit year app, - I or your client does. - So we need to make sure this is We follow exactly from the official source developer apple - dot com the specifications required. - So I How do you find this document? - Well, - Google So Google is your friend. - If I go to Google real quick and I type in IOS app launcher, - icon specifications or something similar, - we're gonna likely come up with an official source. - So make sure you click on that, - and that's not the exact page I was at. - This has just general information on icon and image sizes, - but if you click on APP icon, - it'll show you the page that I was just at. - This is the page that we're gonna be concerned with so again, - it's important that you find the latest up to date information. - So depending on when you're watching this course, - it may have changed already. - So it's important to find this page, - so looking at this, - the's right here, - of course, - are the app launcher icons with one thing that separates Iowa's from Android when it comes - to the APP launcher icons is I IOS all have the same exact container. - It's a square with rounded edges. - When it comes to Android, - we don't really have to worry about that so much eso looking at this. - It just gives you general information about how to design the best app lodger icons. - So I'll just read over the bullet points real quick. - So hopefully you're not gonna have to worry about this one right here, - which says for the best results, - enlist the help of a professional graphic designer. - Hopefully, - this course will be able to help you. - Ah, - design app icons that look good. - Eso use universal imagery that people will easily recognize. - This is kind of obvious. - So, - you know, - if you're designing, - if you're dining a launcher icon for a health app, - you obviously would try to use colors that are associated commonly with health in also - forms and shapes embrace simplicity. - Now, - this is hugely hugely important because when we design our APS, - I launch your icons, - you're gonna find that they're designed, - we're gonna be working with a rural large document. - And so basically, - we're gonna have a big canvas to work with at about 1000 24 by 1024 pixels s. - So we're gonna have a lot of room. - But ultimately it gets scaled down to such a small size that any details that were the fine - details that were view visible on the large version get scrunched down and lost. - Ultimately. - So simplicity is hugely important when it comes to Apple on track on design. - So I create an abstract interpretation of your ABS. - Main idea. - All right, - so this is also something that's very common in logo design. - Ah, - you don't really always want to make it so obvious. - Are just try to be too literal in your depiction of the app. - If you want to betray real substances, - dude, - accurately Make sure the app icon looks good on a variety of backgrounds. - Avoid transparency. - Don't use IOS interface elements in your artwork. - So this is obvious as well. - You wanna confuse people with the common Iowa's interface elements? - Don't use replicas of Apple's hardware products. - This is obvious. - Um, - so the port that we're going to focus on right here is create different sizes at the APP - icon for different devices. - So essentially, - I'm gonna skip this part for a second. - We're gonna come down here where says create a large version of your APP icon for display - in the APP store. - All right, - so right here for the app store, - create a larger version of your APP icon in two sizes. - That looks good on all devices. - 1024 by 1000 24 pixels. - So that's 10 24 with by 10 24 pixels s. - So it's a perfect square. - And then also a 5 12 by 5 12 So which we could just resize the image. - And when we get to the lesson where we export and savor images will go over all of this. - But the important thing to remember here for our next lesson where it's set up our document - is 10 24 by 10. - 24 and then to remember, - we're while we're designing in this 10 24 by 10 24 canvas. - Ultimately, - it's going to get scaled down Teoh 120 by 100 20. - So it's a significant amount. - That's about 90% smaller than this version. - So that's where simplicity really plays an important role. - All right, - so so that is the conclusion of this lesson. - And the next lesson we're gonna go ahead and set up our document for a for his project. - I'll see you then. 6. Setting up our Document: - Hello and welcome to this lesson where we're going to design an IOS app icon launcher for a - fictional app based around GPS coordinates for known treasure locations across the oceans. - Now, - of course, - this AB doesn't exist. - But if it did, - our objective would be to create an icon that conveys the idea behind this app in a visual - manner. - So we have two things at play. - We have GPS, - which is location, - and then we have the ocean. - My idea is to use a pin which is commonly associated with locations or pins on a map and - then, - in a very simple manner, - illustrate water alongside it. - So in Adobe Illustrated here, - we're gonna get a file and new and for the name we're just going to give this IOS icon and - number of our boards one the wit. - Okay, - so this is the important part. - And if you recall from the previous lesson, - we need to change this two pixels and I'm gonna specify this one's your 24 p x by 10 to 4 p - x. - All right, - so right now we don't need tobe worried about bleed. - Bleed usually is reserved for when you're having something printed. - Eso we're not have to worry about that. - It also make sure that that zero and then over here, - where it says advanced. - Ah, - the color mode we want rgb If it's at C M I k. - That's usually again for print. - So we're gonna leave the RGB and Raster Effects screen 72 and we can go ahead and turn a - line. - New objects to pixel grid off if it was already on and that is it. - So let's go ahead and hit, - OK And this is a large size. - So right now on my resolution, - it's at 56 point or 56%. - If I had control one negatives to, - ah 100% but we don't really need to worry about that. - I zoom in and out, - you can hit all and then you use your mouse school will or you can use the I zoom told down - here. - All right, - so basically what we want to do is get out our rounded rectangle tool. - So he just left. - Click over here on the rectangle and just choose rounded rectangle tool I. - What we want to do now is simply left click once and that's going to give us the rounded - rectangle dialogue box in here. - We want to specify that size again for our container shape. - So ones here to four hit tab to go toe height ones year to four. - And you could just, - you know, - have TPX It'll automatically enter that for you and then the corner radius. - And this is really important. - If you were working at a 5 12 by 5 12 it would be 80. - Since we're working double that size, - it's going to be 1 60 So that is our corner radius, - which is the border specifies how large the corner radius will be. - So I'm gonna hit, - okay and take the selection tool and just move it over here and mine right now has a stroke - . - We can go ahead and get rid of that specified zero and then hit Enter and I'm going to give - the background here. - Ah, - different colors. - So now what we need to do is I'm going to get the layers right here. - This panel down here, - you just click on it. - And by the way, - if I'm working with any of these panels that you don't see all you have to do is go to view - or window rather, - and it just find it real click and click on it. - Uh and so over here we have our layers And if you drop that down, - we have our path. - So it's going to rename this 12 container just by double clicking on it and then hitting - enter after you entered into text and we want to create Ah, - just a background. - So I'm gonna use just a regular rectangle tool And I could just left click again over here - . - Leave it at 10. - 24 by 10. - 24 hit OK, - And I'm just going to you always use your mouths are your keyboard arrow keys to get it - lined up? - We want to position it down here beneath it. - So just left, - click and drag beneath the container in a double, - click it and just give it a name of B G. - And then I'm just gonna give it a kind of a dark gray color. - I don't click over here in the swatches and just choose this gray right here. - All right, - so it's kind of difficult to design when the size of our container here for the I Iowa's - app container. - Right here is the same exact size as our large container out here. - So what we could do is edit the art board. - So to do that, - we can click on this button documents set up. - You can also access that by going to file and document set up and then click on edit art - boards. - This will allow us to adjust the size of our canvas. - Now, - you could do it by dragging these up, - down, - left and right. - Or you can specify the size over here, - so I'm just going to specify 1200 by 1200 enter. - All right. - And then I'm gonna take our BG path. - Hold shift in. - All left, - click and drag up. - Right. - So now we have a little bit of, - ah, - margin between our actual design. - And if you need Teoh, - move this over and adjust ease. - You can and scale it just a little bit. - And then I'm going to click right here, - and that's gonna lock it so we can no longer accidentally select it. - Okay, - so now what I want to do real quick is just give this a color for the background and I'm - going to make it a Grady int. - So do that Look over here under Grady int and again make sure you go to window and you can - specify Grady int if you don't have that up and just choose linear. - And if you hit G on your keyboard, - it allows you to specify the direction and the width of the Grady in. - If you just start out down here, - hold shift. - And that way it's days perfectly vertical and then go up. - We can have a perfectly vertical radiant. - And what we want to do is I want the dark filler to be near the bottom. - Uh, - actually, - no. - We're gonna leave it at the top. - And if I don't cook on this color picker over here, - we can specify the color that we wanted to be. - For now, - I just I want this to be 100% black, - all right? - And then this color double click that gonna click over here to go, - this watches and we'll make this a dark blue of sorts, - and you can adjust the orientation the position of these by moving them around. - So if I just move this down like right around here. - That'll be good. - All right. - And that is it Just for this lesson. - So in the next lesson, - we're gonna get started with designing the actual pin. - All right, - so I'll see you then. 8. Designing the Pin: - Hello and welcome to this lesson where we're going to design a location pin or a pinpoint, - sort of. - So what we want to do before we do that, - though, - if we click on this the container path and we double click over here, - we need to make sure this is a solid black color right now this isn't it looks a little bit - washed out. - So I have to do is come up here and specify RGB. - And now it is a true black color. - You could see it's much darker. - All right, - so now that we have that done, - it's cook on layers appeared just to see what we have going on. - So we have our container layer and a background BG layer, - and what we want to do is get out the Ellipse tool. - So come over here, - left, - click and drag and still specify lips. - And we're just gonna hold shift and Ault and drag out a circle roughly right around this - size. - It doesn't have to be exact. - Just somewhere around this size will do just fine, - and we want to make sure it is centered horizontally. - So if you come over here horizontal align center, - and we just clicked that it now is specified right here in the center of the container in - the document itself. - Okay, - so we're going to give this a color right here, - and we give it this color right here is going to stick out. - I think we're gonna use this right here. - And I know it is. - Specifies R G and B values if you hover over it, - or if I just double click over here, - it's going to give us a color hex code, - which is 866 seat. - Sorry. - Eight cc 63 f. - And the reason giving that to use if you want to use the same is that colors and me You can - just go ahead and input that they're into this hex value right here and hit. - OK, - All right. - So we want to also hold shift and just move it up a little bit. - And we want to design a point here where it comes down to a point like this. - So to do that, - we want to turn on smart over here. - Smart guides. - So it's gonna view in smart guides. - Nothing changes noticeably right away. - Now we're gonna zoom up here with the gentle and we're gonna take the pencil. - And what the smart guys are is when you hover over certain areas of a path, - for instance, - it's going to show you that you're right on top of the path on also helps for alignment as - well. - So I'm gonna click right around here basically in the center of this point in this point - and just try to click right around there where it's going to allow us to specify where we - want this path to go. - Now, - if I come down here automatically, - it shows me the center of this circle. - So if I come down right around here, - we're gonna meet that back again with a new path because it created on top of this one. - That's not really an issue, - though. - And then just click right here as well and click back to the original point. - It now has us a line there so that it's perfectly in the center of this point and it's - coming down off of these now. - It looks like I didn't quite get it on the angle that I wanted it to. - So if I zoom up here, - you'll see that it starts a little bit. - Should be up a little bit higher. - So all I have to do is take the direct selection tool, - which is right here, - and just click on this anchor point and we can move it up a little bit higher. - So that way it's flows very smoothly from this angle coming down. - And then I could do the same thing up here, - and then we could see it's right. - There is a perfect horizontal line. - All right, - so now what we want to dio we want to combine both of these into one single pack. - As right now, - you can see they're two different paths right here. - So holding shift with one of them selected. - Ah, - left click and select both of them. - So now they're both outline and selected. - We want to go to window. - Are yeah, - window and in Pathfinder. - And then just click right here. - Unite. - So now it is one single path. - All right, - so now we have the general shape created. - Now we want to create a center point here in the middle, - so we're gonna use the Ellipse tool again. - And right here you could see that we have the center of this hold shifting Ault and drag up - roughly right around this size. - That would be good. - And we want to get that Pathfinder out against a window and then Pathfinder, - and it gives you a bunch of different options for shape modes. - Now, - if we select both of these objects the newly created circle right here and then hold shift - left, - click this one we can choose minus front. - What that does is it creates a transparent selection I devoid of the object that, - or the path of, - is on top of it. - All right, - so a couple things to know about this design. - One thing that's really important is, - Ah, - it's a nice, - thick, - very simple sort of pin shaped design. - And again, - this is very important because let me show you, - if I select all of our objects out here, - I hold shift in Ault and scale them down. - You see that even at small sizes, - we can see exactly what this is, - and so that's real important. - I've because when you created this shape right here, - for instance, - if you made it too close to this outer edge, - that Edgewood might get blurry or lost. - So that's why we have a nice and thick, - because this ultimately is going to be scaled down as such a smaller size. - All right, - so I want to create some highlights here. - So what I want to do is take this and we're going to duplicate the shape. - So I'm gonna hit control C a copy and then control F now that creates a compound path, - shape layer above it and is basically a duplicate of it. - And so I'm gonna hold shift in Ault and scale it down just right around here. - So it's gonna come in just a little bit more, - and I'm also going to right click in click on release Compound Path. - All right, - I'm gonna select this path right here, - the center portion and delete it. - And now we have this shape right here, - and it has a Phil, - but it doesn't have a stroke. - So we want to get rid of the Phil. - We will do. - That is we can cook over here, - Or if we choose Grady int with the feel selected weaken, - just click on this red slash and that will get rid of the fill. - So right now, - there's no outline. - All this is a path, - and we want to give it now a stroke. - So switch to stroke. - We click on this, - or if you click on it over here as well. - And for the stroke color, - we want to give it a lighter color. - Perhaps right around here. - Now it's only a one pixel stroke, - so you can't see it real well. - So we're gonna increase that stroke size just by clicking up right here, - all right. - And I also want to delete a couple anchor points. - So if we choose our direct selection tool, - which allows us to manipulate paths and shapes, - I'm gonna click on this over here and click on Delete that anchor point this one as well, - This one and this one. - All right. - So with that selected and by the way, - sometimes when you're trying to view your paths or shapes you have of these outlines here, - if you want to get rid of that or you want to hide them, - you hit control or command on Mac H. - So control H. - And now you could see it gets rid of the path of you and your internal toggle it back on my - head and control H again, - all right. - And right now, - the kind of ends abruptly, - This highlight. - It's very straight to the way you can fix. - That is by clicking on stroke over here and then for the cap round. - So now you can see it's rounded on the edges right there. - All right. - One thing that's a little bit inconsistent about the stroke is it's a little bit further - away from the top than it is at the bottom, - And that's because we scaled it down and it wasn't proportional. - So if we choose the direct selection tool, - we can click on this path. - Appear control H to toggle on. - Just make sure reflect on the right things here, - and you can use your up arrow key on your keyboard to just slightly adjust it. - So everything's a little bit more accurate in terms of position and by I maybe it's like - this and pull up just a bit. - It's a lot more even inaccurate now, - all right, - And now we want to do, - is I? - We're going to get our layers again real quick. - We're gonna just control C control f here, - and we're going to do this to work with a I basically a shadow portion right here. - And so now we have this duplicated we want to right click and release compound path. - This time we're gonna get rid of the outer layer of the path rather. - And now we have this portion portion. - We want to get rid of the Phil. - So to do that, - we'll click on grating over here, - select the fill so it's in the foreground and then click this red slash. - Now we're going to hold shift and all and scale it up right around there. - And then we want to give it a darker color than this green. - And so I'll just choose this color for now. - First have to make sure we click on stroke and then click on that and we will increase. - First, - we'll see how thick this stroke is. - That 16 points. - So if we click back over here 16 all right, - this isn't a very good color, - so well, - we'll go ahead and adjust that. - But I want to take the direct selection tool and get rid of this anchor point right there. - Hit. - Delete. - It's like our move tool and because it's a perfect sphere. - We can move this a little bit, - and we want this s O that the light source is kind of coming from this direction. - So we use our, - ah, - arrow keys. - We can adjust this business position a little bit better. - And now, - on the color of this background, - is this right here? - So with that selected, - we hit control H. - Get rid of the anchor of the path that's viewed Double click on this color picker. - We can come down to just a little bit darker, - maybe right around there and then hit. - Okay, - I think that might be just a little bit too dark, - so I'm gonna change that back and just come up under right around here and hit, - OK? - All right. - And again, - you can experiment with it. - I make it even a little bit darker if you wish. - But I think maybe somewhere right around there is good. - And then I'm going to change this here to the round and cap and just make it some other - adjustments in terms of position. - And that looks pretty good to me right there. - All right, - so looking at this, - I if we look at um, - at a small size, - we could still see the highlights and details and everything looks good. - All right, - so in the next lesson, - we're going to go ahead and finish doing a background here and the water portion. - All right, - so I'll see you then. 10. Finishing the Background: - Hello and welcome to this lesson where we're going to go ahead and finish the ah whole icon - by adding the water portion. - So this right here this background go into the blue to the black is really just meant to - kind of emulate the idea of space. - And so, - the way we're going to create this I earth like water appearance down here is through in a - lips. - So we'll take the Ellipse tool and we'll come out just here in the center and make sure you - have your smart guides guides activated to review in smart guides and just come out right - around here. - We're gonna left, - click and drag and hold Ault and come out to a size roughly right around here. - All right, - so I'm gonna take the I eyedropper tool. - Just I have to get this color right here. - It's not It's not gonna be this color right here, - but I was just getting rid of the stroke outline. - And so now what we want to do is we want to divide objects below this, - So But we only want us. - I make it Divide this object here. - So what we want to do first is We're gonna take our pin and our layers right here for the - highlights and the shadow just by left clicking and selecting all of them, - and then holds shift to de select his background and then hit control G and that will group - them up into a layer right here and then just hide it. - And then we could take this object here, - Object path, - divide objects below. - So now you could see it has created a sort of a background here that I on Lee has the shape - that we had on top of it, - and it just basically divided this container path. - So if we bring this back, - we can view this. - And now we can change the color eso that we want this to be a lighter color here so we can - go to Grady int and we just hit type linear again, - and G and we can leave the Grady int like this as is so we can change the color here. - This is the lighter color down here, - and I'm just gonna choose color right around here. - Right now it's on a stroke by, - so let me get rid of that. - We have to switch to this color right here. - There we go. - So now we can a double click it and make it a light color right there. - Double click this one somewhere right around there. - And we could extend this out all right, - and see how that looks. - All right. - So I kind of want to create some I The difference between this green here in this blue - because there's a little bit of a contrast issue, - so I'm gonna create a shadow. - So the well do that is to zoom appear with a zoom tool, - left, - click and drag. - Take the pen, - Tal. - And if I left, - click right here and then left. - Click on this anchor over here to somewhere off to the side, - and then come up around here, - get up our layers, - and we want to put this behind the pin, - and then we're going to make it a dark brown color. - Maybe right around there. - So now resume out around there. - That's good. - All right. - So I zoom a bit here, - and this is basically the final view of our image and something that was kind of bothering - me. - It looks like there's a little slice in here as if that got divided. - So if I hit control H, - we can see this on the group here. - All we have to do is just take this anchor point If this happened to you and just drag it - up and we'll be able to hide that slight just a very thin edge was appearing there. - All right, - so now if I click off of this, - we're good to go. - All right? - All right. - So that is our app icon. - As you could see, - it's very easy to understand what's going on here. - We take everything and scale it down to a small size. - We'll see that it works well, - I One thing we want to do, - though I what I would do if this were in actual app icon that I was going to possibly be - using in a real production environment is I would save this document. - I and then I would save another one. - And what we or you What you could do is you could take this group, - um, - take everything and just grouped together entirely. - So controlled G and I would call this I lines and then take this control C control F to - create a duplicate of it. - And then we can take all of our strokes and we can outline them. - So what that means just go to object path and outlines stroke in an object, - expand or expand appearance rather which we don't have to, - because we don't have any strokes. - And so now it's ready to go and be able to use. - So in the next lesson, - we're going to go ahead and export our icon, - consistent with the specifications that we covered in less and to. - All right, - I'll see you then. 11. Exporting our Icon: - all right. - Hello. - And welcome to this lesson where we're going to go ahead and export our icon. - So the first thing we need to do is hide the background because we wanted to be transparent - . - And we also want Teoh scale this canvas size back down to 10. - 24 by 10. - 24. - So if you click on deck documents set up at art boards, - we can now come over here for the width and height and adjust that back to one's year to - four by 10 to 4 and then just click anywhere and it will set it. - And now what we want to do is go ahead and save this as I a new document, - if you wish. - So I'm just gonna take control s and save it as an AI file, - which is the note the native Adobe illustrator filed hype. - And then we can go to file and save for Web, - and it's a large document comes up. - Let me get that skeleton here real quick. - And right now we could see this size. - It's very large. - This is the 100% view of it. - Of the 10 24 by 10 24 space. - What want to do is change this here to P and G 24. - You could see down here it is now transparent and these checkered checkered pattern denotes - transparency. - And what we do is save this as this by default just 10. - 24 by 10. - 24. - So just hit save. - And we'll call this one year 24 x 10 to 4. - Enter and then we'll go ahead and switch back to the document that we looked at in the - second lesson. - And that is right here. - And under the size specifications we have here I mention of 1 20 by 1 20 and then 60 by 60 - . - So the way we do this is file safer web and we could specify lunch one here. - And that's the size of it at 1 20 by 1 20 and just it save. - Just call this 1 20 x 1 20 and then save it again. - And 60 by 60. - Oops, - There we go right there and then hit. - Save 60 x 60. - And that is all there is to. - It s so in less in 13. - We're going. - Teoh, - I present this on a phone as well. - So we'll step back to this project I But this concludes the first IOS app icon design - project here in Adobe Illustrator. - Now the next chapter, - we're going to begin a new project and we're gonna step this time into Adobe Photoshopped - to do you dine an android app icon launcher. - All right, - I'll see and then 12. Android App Launcher Specifications: - all right. - Hello, - And welcome to this lesson where we're going to go ahead and overview the android app - launchers, - specifications. - So, - again, - I found this page by searching. - And Google Android icon specifications is the first result. - And there's an initial section up here which kind of describes how android handles graphics - . - And then down here we have the information specific to the launcher. - So up here, - I just wanted overview this real quick And if you've ever developed, - are designed for android before Ah, - you'll be familiar with these names down here. - MDP I hdb i x h two b i xx and xxx which this is an adult. - So don't know Marie about this is has nothing to do with porn. - Fortunately anyhow, - so what it means, - basically, - And just to reiterate this a little bit when you design icons for your app, - it's important to keep in mind that your at me installed on a variety of devices that offer - a range of pixel densities has mentioned in here. - But you can make your icons of great on all devices by providing each icon in multiple - sizes. - So that's very important as well, - which will get to when we get to that lesson. - Eso What's important to note here is I have you created Icon for different densities. - You should follow the 23468 scaling ratio between the five primary densities. - And it says, - for example, - considered that the size for a launcher icon specified to be 48 by 48 dp This means that - the baseline MDP I, - which is right here, - is 48 by 48 pixels in the high density, - which the next step up is, - I multiplied by 1.5 times the baseline, - which gives you 72 by 72. - So essentially, - if you go all the way on up, - you reach in and you multiply it. - By these factors, - you'll know exactly you know how big your icon needs to be based on all of these sizes. - Are these densities right here? - All right, - so that's more important to mention. - You will you'll understand at once we actually go to export, - and we get to that lesson. - So for the launcher, - I we have three sections that we need to worry about here, - sizes and scale eso the launcher icons on a mobile device must be 48 by 48. - And of course you want to provide the other high resolutions as well. - In the launcher I comments for display on Google play must be 5 12 by 5 12 So that's the - gonna be the size that we work with in the canvas. - In the next lesson for the full asset 48 48 in the style used a distinct silhouette so now - are still a wet before When it comes to IOS always has to be that rounded square This one - just says a distinct silhouette, - three dimensional front view with a slight perspective, - as if it being viewed from above so that the users perceive some depth. - They give you some examples of this. - Here s so these icons are injuried icons that ship with the android and you'll see that it - looks like things are slightly viewed from above s Oh, - these are just things that we want to try to pay attention to and, - uh, - keep consistent when we're designing. - And so that is essentially all we have to worry about when it comes to android app icon, - all the other fundamental is that go into good icon design such a state, - keeping things simple. - Still apply. - All right, - so in the next lesson, - we're gonna go ahead and get started by setting up our document. - I'll see you then. 15. Setting up our Document: - hello and welcome to this lesson where we're going to begin designing the launching icon - for our second project, - which is based on a fictional android app. - This APP is a secretive video recording utility that allows users to record video without - the phone screen turned on and also simultaneously upload the video to a YouTube account. - Its intended purpose is to use it to record encounters with police officers. - So we have two things at play here. - We have the video recording aspect, - and we have the unsuspecting surveillance aspect. - I'm going to basis design around a camera lens, - which is the most identifiable object that people can quickly and easily relate towards - video. - And then we have the underground sort of surveillance aspect, - and we're going to hint at that solely through the use of color. - The inter portion of the lens will be a vibrant red, - and this will really reinforce that underground sort of surveillance aspect of the app. - So let's go ahead and get started here in Adobe Photoshopped. - I'm gonna go to file new and we have here already have this size set at 5 12 by 5 12 Make - sure we use and pixels and the Resolution 72. - Now, - the resolution isn't really gonna matter. - Really, - either An and also this size doesn't really matter as well. - We're going to design this in such a way so that it could be scaled up to any size - imaginable without loss, - equality, - and will do that by using solely shape layers and not raster layer. - So again, - into that a little bit. - If you're uncertain about what that is so for their name, - we're just gonna call this android icon. - And for the background content, - you can leave it way if you wish. - And color mode RGB as well. - All right, - So go ahead and hit, - OK, - And we're at 100%. - This is based on my resolution, - which is 12. - 80 by 7 20 currently. - And now what we want to do, - I remember we don't have to use a rounded square. - We're going to use a circle which is obviously the shape of a camera lens. - So we're gonna come down here and choose the Ellipse tools, - the left click drag, - and select that and we're gonna left click just once, - and that's going to allow us to create the Ellipse here specifically with a width and - height. - So we're gonna use 5 12 by 5 12 Use my tab key to switch over there, - and you could specify from center and hit. - Ok, - all right. - So now I I'm gonna just click that to talk about off. - And currently, - our lips is white, - so that's why it's not showing up. - We're gonna give the background at black color, - so I'm gonna click on background, - used a paint bucket tool changer, - fill color here to black, - and then left. - Click, - and then we can get this. - I've moved position here. - Now, - what I also want to do is I increase this just a little bit the campus size. - So the way we do that in photo shop is a good image canvas size. - And we have the whip in height here that we could specify. - So I'm just going to specify 600 by 600 and then hit, - okay. - And just take our paint bucket tools like the background and just click up here. - All right, - so now we have a little bit of room to work with. - So that is it for this lesson and the next lesson we're going to go ahead and start by - designing the lens and it's going to involve a lot of interesting layer effects and it's - actually pretty fun. - Alright, - saucy and then 17. Designing the Lens (Part 1): - all right. - Hello. - And welcome to this lesson where we're going to go ahead and design this lens here and to - get started, - we're gonna focus on this ellipse, - and we're gonna make it look like it's chrome. - Okay, - so right now she's this white sphere not much going on here. - Kind of boring eso The way we change this is by double clicking the right side of the layer - and that will get us the layers style's dialog box in here. - You could do a lot of different cool things. - This just gives you the ability to change your shape right here. - Whatever happens to be here in some different way, - you can stroke to it. - You can, - given an inner shadow, - all these things s o. - What we want to do for our shape is I give it a Grady int overlay. - Very simple. - And we're also going to Ah, - we're gonna keep it at a 90 degree angle and we're going to click on here for the Grady and - editor. - This allows us to change, - Kind of just like in Adobe Illustrator, - the Grady in itself. - So the way we're gonna do that is we're gonna first double click on that first color - stopper and just make it a sort of gray color. - Maybe right around here, - I'm gonna move it in and also move it close to this one as well. - So now we see we have this kind of quick transition here. - Now, - if you click anywhere here, - it's gonna add another one for us. - So this over here is the top. - So I'm gonna add one up here and this one I'm gonna make pretty dark a little bit darker. - And you can experiment with this, - of course. - And just looking at it has it is I think I I'm gonna leave it. - Just make maybe make us a little bit darker right around there and hit, - OK, - and then hit. - Okay, - so now it actually kind of looks like this is some sort of chrome metal piece of sorts s. - So what we're gonna do now is I'm gonna just double click that to rename it. - We'll just call this I cleanse one, - and we're going to duplicate it so you can right click and hit duplicate layer up here. - I set up a shortcut key control shift in D, - which I will use from now on and then hit. - Okay? - And then I'm gonna hit control T that gives us our transform tools and then shift. - All left, - click, - drag in. - And right around here, - we want this outer edge to be pretty thick. - So it's like to move, - tool and hit apply. - So now you could see I kind of changed the grading a little bit scaled in with size of the - shape itself. - This one we're going, - Teoh, - Give it a We're not gonna have a Grady it actually, - we're going to double click right here to change the color. - And that's going to be black and hit. - OK, - now we are gonna have an effect on it Still, - So if we double click on effects, - we'll bring that back up, - and it's gonna put this up here so we could see most of it. - And we want to give it an outer glow, - but we don't actually want it to glow eso. - What we're gonna do is change the color here from a solid color to ingredient. - And so we're also going to change the blend note to normal, - and we're gonna leave the or take the a passively rather up to 100%. - Now, - if you click on here, - we get the grade ian editor, - and I'm gonna double click on this, - and we're gonna make it black hit. - Okay? - And then over here, - if we click on the top color picker allows us to specify a capacity. - So we're going to make that capacity 100% America change. - Just want a white hit. - Okay? - Hit. - Okay. - And I'm gonna take a size up here and increase that now you could see as I increase it. - It makes it look like it's more rounded on the intersection. - I'm gonna leave mine. - Probably around 27 pixels. - That looks pretty good. - And so, - as you could see, - these air very powerful. - You can experiment with all of these and settings just to create a lot of different looks. - So, - you know, - before I recorded the course, - these other settings that I like the most, - But I of course, - you don't have to use them. - So listen, - it's all about experimenting. - All right? - So, - uh, - that is it for that layer. - Now we're going to duplicate it again. - So control shift D or right click in duplicate layer hit. - Okay, - hit control T scale this down. - And this time, - this one's going to be Ah, - roughly. - I'd say right around this size, - such a move Tool, - hit, - apply. - And this time we're going to give it a grade Ian overlay, - and we're not going to have an outer glow. - All right, - so now we're gonna double click on Grady in overlay, - all right? - And we're going to change it by going to the radiant editor, - and this is going to be a simpler IDG radiant. - So we're going ahead and remove this one. - Always news left, - click and drag them off the screen. - And that's how you get rid of them. - And this one is just dragged us off. - This one's going to be black. - It okay? - And we're also going to give it hit, - OK, - or here we may go back to adjust that, - But first, - I'm gonna go to inner glow, - so we're gonna turn that on, - and this is just like, - outer glow, - except it's just gonna go on inside, - and we're going to make it a capacity 100% change the blood mode to normal, - and then change the color to black. - And then also take a look at the size and just a little bit. - Not too much. - So I think around seven i, - r six will work well for that. - All right, - so looking at that, - I think that's a little bit to light a top. - So just gonna go back to Grady int on and change the brightness just down a little bit like - that, - Okay. - And then Okay. - All right. - So let's I continue on, - I'm going to duplicate again. - Control, - Shifty or right click, - and it duplicate Laters control. - T hold shift in Ault and scale it in roughly right around there. - It's like move, - tool and hit. - Apply. - So now you can see we're starting to get there. - I wanna edit this one, - though. - The inner glow. - I kind of wanted to be thicker, - like the separation between this area and this and so the way we could do that is to take - the size up. - And also, - the choke will make it appear thicker as well. - So you can really experiment a lot based on the choke size and the size Here s so I'm gonna - leave it die roughly, - I think maybe right around there and for now, - I'm just gonna leave that as is gonna hit, - okay? - And for now, - I'm gonna end the lesson right here. - I think we've got far enough. - So in the next lesson, - we're just gonna continue on replicating a few more times and getting this ready to where - we can add some reflections and the inner red portion as well. - All right, - so that's what we're gonna be focused on. - The next lesson. - I'll see you then. 19. Designing the Lens (Part 2): - Hello, - and welcome back to this lesson where we're going to continue on working with the lens - shape here. - So I What we want to do is I'm going to make an adjustment that I want to make because I - want to be a little bit more dynamic. - These thes Grady INTs here particular with these two right here. - So I want to select. - Make sure with your you have your selection tour your move tool here, - selected with auto select layer specified. - What that's gonna let you do is just a left. - Click any layer and you automatically select the layer that it's on based on when you click - . - Otherwise, - if it's on selected, - it won't select them. - So it's just kind of a handy tip, - you know, - that lets you quickly access layers when you have a lot of layers going on. - So it's like this one right here in what we wanna do is double click on Grady and overlay. - Click on Grady's editor. - Now, - What I want to do is this right here corresponds to the bottom. - So I'm gonna move it up a little bit, - and I'm gonna add another one at the end and just make it a very light gray color right - around there. - It Okay, - hit OK and hit. - OK, - then we're gonna select our 2nd 1 right here. - Grady and overlay do the same thing blew up in and then I put a rate around here, - and that way it kind of just I gives us a little bit more of a dynamic and it may make it - Ah, - it's a tab. - Bit lighter are darker. - Rather I'm gonna hit. - OK, - ok. - And OK, - ok, - so I we're gonna move on here, - and we're gonna continue by I taking this layer the inner one and duplicating it again. - Troll shifty and on a Nicotrol tea and scale that an roughly probably right around here and - hit the move. - Tool hit, - apply. - And this one we're going to give a takeoff outer glow. - Actually, - I think we're gonna leave it real quickly, - except we're going to double click it and I'm gonna take this stroke in as well. - It's a sized down just a bit right around there. - And then I'm gonna change the Grady int too, - And I'm gonna click on that greeting editor. - Get rid of this one, - and we're gonna make the ah top color or the bottom color. - Rather. - Ah, - yeah. - Pretty dark, - actually. - All the way dark. - I think that's the way I want to handle it. - And yeah, - I do want to keep this one down here as well. - So this one's gonna be a tad bit later. - Just like that. - Maybe this over. - Now this one's going to be lighter. - Eyes noticeably lighter. - Probably right around there. - It Okay, - head. - OK. - And OK, - so it's really starting to come together. - Well, - now control shift D to duplicate that one more time. - I promise. - Control T shift Ault scale in right around there. - It's like moved to will hit. - Apply. - All right. - So control h will also get rid of the outlines just as and I will be illustrator. - So this one, - we're not gonna have any effects at all. - It's just gonna be black. - And that is that I do think I do want to Ah, - just Thea inner shadow of this layer right here. - I don't want it to be so thick. - I decided this happens. - You know, - sometimes when you're working with things, - you're gonna make adjustments 1000 times, - so I'm gonna click on inner Glow, - take down that choke all the way and maybe leave it right around there. - So I'm using zero in six right there for those values and just I hit. - OK, - so now what I want to do is I I'm going to create kind of a shadow, - and I'm gonna do this with the pen tool and also a layer mask. - So with this one selected right here, - which is lens one copy to I'm gonna hit Control Shift N or you could just go to ah, - this menu up here and it's off screen. - But to the very top new layer. - So control, - shift in or command shift and we'll give you a new layer. - And world just I call this shadow here and then use previous layer to create clipping mask - and I'm gonna hit, - okay. - And so now, - clipping mass basically means anything that's inside to this layer right here. - Notice has a little down arrow right here is only going to show up inside the shape that - contains in the layer beneath it. - So if I designed something out here, - it's not gonna show up if it's gonna if it's inside this region right here. - It will show up. - So that's what we want. - I So I'm also going to show you something real quick is it's not gonna show up initially, - we're gonna have to make a change. - It sounds a little confusing, - but don't worry about it. - We're gonna use the pen tal and make sure shape is specified and not path. - And what we're gonna do is kind of make it look like there's a shadow coming off here. - I and that's being cast by this thing over here. - So I'm gonna start just on the outside and I'm going to left click just over here, - and then I'm gonna hold all left click again and then just come down right around here, - and I ended on the original anchor point. - Not gonna hit control H. - It's like to move, - Tolia Control H, - we can't see it. - Well, - why is that? - Well, - we have to double click on this effects over here to bring this up and make sure blending - options. - Default is selected. - And we see over here we have to de select this and then select blend. - Interior effects is group. - Now we can see that sort of ah, - shadow right there and that allows us on. - The reason that is is because I we have layer effects. - I such as grading overlay being applied to this layer right here. - And if you don't make these settings, - then nothing will show up and you're clipping mask layer, - so we'll hit. - Okay. - And I were going to do is do the same thing for the right side. - So we want to duplicate this layer, - right click duplicate layer or control. - Shifty. - If you said that short cookie, - it okay, - and then go to edit, - transform and flip horizontal. - We're gonna de select auto suck layers so we can just click on it and then move it over - holding shift right around there. - Very simple. - All right, - so we're going to do this a second time as well. - And so what we can do is just I take both of these layers and merge them. - So holding shift left, - click both of them hit control E. - That will merge them, - and we can hit. - I control shifty to duplicate those hit. - Ok, - and then we want to move it above in this layer as a clipping mask as well So drag it up - and then right click and make that a clipping mask. - Create clipping mask right there. - Now hit control T shifting all and scale this in roughly right around there. - It's like, - moved to will it apply? - And then remember, - we have to make that adjustment to this layer as well. - So de select blend clip layers is group and click on blend Interior hit. - Okay. - And there we go. - All right, - so it looks pretty good here and looking at this, - this is pretty good. - I for our primary lens. - For my guess, - we can call, - it s. - So in the next lesson, - we're gonna go ahead and design the glares and reflections that's going to really make this - thing come alive. - All right, - So I'll see you then. 20. Glares and Reflections: - Hello, - and welcome to this lesson where we're going to finish up our app icon design, - and we're going to Ah, - first create kind of Ah, - red Grady int sphere or lips here in the center. - So what we're gonna do is just use one of our existing ones. - Ah, - rate. - Uh huh. - I guess we could just take this one, - since it's already in the center of the very top layer of the black one. - Hit control shift deed. - Duplicate it, - control t shift in all and scale it up roughly. - I'd say right around here is good. - And then select. - Move. - Tool, - hit. - Apply Now we need to change the fill of it. - So the way we could do that is I We can go ahead and change it by. - If we take the direct selection tool, - we can see we have a filling stroke up here. - What we'll do is click on fill and then click on Grady int. - And then what we want to do is change it to radio. - All right? - And what we want to do is go ahead and change the Grady int by. - Sorry about that. - Looking right here. - And I once we do that? - We'll see it kind of goes away because I clicked on this one we want to change this year I - by double clicking that color picker to read right around there and then just leaving this - one too transparent up here. - Zero opacity and I And then what we can do is also change the layer blend mode. - So if we just click right here, - we have layer blend modes. - And if you click on again, - you'll see it Outlines of blue. - You can use your down arrow key to kind of go through these to see what they look like and - what type of effect it gives you. - There's no right or wrong, - of course. - So you can really just experiment to see what you think might look best eso for me. - I'm going Teoh. - I think we're gonna leave it. - I'm gonna go back up to normal. - Um, - I think we're gonna leave it right there, - and then I want to do Is hit control shift in de with the move. - Tool selected it. - Okay. - Hit Control T. - And then I scaled down quite a bit here in the center and select a move told it apply. - And then what we want to dio is edit that Grady it real quick. - So we'll go back to the direct selection tool. - Click on Phil, - and we're gonna change this one. - Gonna move it over, - and then we're gonna change the inter one to a white right around there. - Just so it's real bright in this center. - All right, - so looks pretty cool so far. - Now, - what we're gonna do is add kind of like a reflection, - sort of Ah, - lightsaber sort of design. - So we're gonna use thiopental for this. - Come out right, - Right on the center, - left, - click and then come up to right around here and left. - Click. - Come back down right next to it and then also again over here and then meet it back up over - here. - So now my wasn't perfectly straight. - So you can always just use the direct selection tool right here and take this point. - Use your arrow keys to adjust it so it looks like it's even. - All right. - So you can also move the whole thing as well to make sure it's in the center. - So now what? - We want to dio I want to make some adjustments on this one as well. - So we'll take the selection Direct selection tool, - Click on Phil. - And for this one, - we're gonna get rid of that color. - It's just gonna be white to transparent and then hit. - Okay? - And then we're going to do I'm gonna choose over here color Dodge. - And so let me find out. - Yep, - it's right there. - And I was gonna scale us up a little bit. - So control t shift in all. - It's like move till hit, - apply. - And then I'm gonna double click over here, - and we're going to give it a outer glow. - Now, - again, - I have found out, - you know, - just by experimenting that it kind of looks cool when we do it this way. - So again, - there's no right or wrong in terms of how to approach this. - So I'm just changing the color here, - I to this color and I Let's see here and make this they spread out around there, - and I'm just gonna experiment just a little bit with this just to see where I want to take - this. - I think in just a mid color right there let me experiment with the blend mode as Well, - yeah, - that's normal. - I Let's see here. - I kind of like that. - A lot color, - Dodge. - So I'm gonna hit, - Okay? - Right there. - And then I'm gonna hit control shift and d to duplicate it. - Control T hold shift, - and we're going to make it right there, - which is basically flipping it. - Horizontal sec move. - Tool and hit Apply. - All right, - So far, - so good. - Looks pretty cool. - I Now what we want to do is create I've reflections here, - So I'm gonna select this layer right here. - And I also want to select this I clipping mask layer by holding shift and left clicking - control shift D to duplicate both of those and then get rid of this one. - Now, - if you were just to try to duplicate this one, - it would get rid of that clipping mask. - We'd have to fix it. - So that's why I did that. - So now we have a duplicate of this. - We're gonna move us all the way to the top just by left clicking and dragging. - And so, - of course it's gonna overlay everything, - and we're going to get rid of the effects right here. - And I'm going to use the direct selection tool. - Give it a Grady int. - And yeah, - we'll leave it. - I'd say right around there, - that's good. - And then what I wouldn't do is take the pen tal. - Actually, - instead of using the pencil, - we can use the Ellipse tool and right around the center left, - click and hold shift. - Actually, - yet just hold controls all you have to do and larayedh around around here would be pretty - good, - like right around there and with the direct selection tool selected in outline hit control - C to copy it and then delete the layer. - Now with this layer selected hit Control V. - All right, - so now it pasted that shape onto the same layer that this shape is on. - Then what we want to do is click right here and choose. - Subtract front shape. - Right? - So now that portion is gone. - And so what are point? - Our goal here is to create kind of like a, - uh ah lends. - I like a reflection of sorts. - Eso What we'll do is take the A, - pass it down quite a bit, - roughly right around there. - I think 10% look works pretty good. - You don't want it to be to stand out too much. - All right. - And then finally will do. - Ah, - couple light based reflections here. - So we'll take the pencil, - and we're gonna left click of right around here and then left quickly and be right around - here and then left click radio here and then sold slightly. - So you can kind of get the contour of this portion right there won't left click, - come up right around there and then left. - Click back to the original position. - All right. - And then this one is just going to be white. - So we could change the field color here to solid white and then change the A pass ity down - roughly right around. - That's a 53%. - Looks like it works pretty well, - or we could leave it up 100% and then just experiment with the I think overlay would - probably work well right there and take down the A pass iti a little bit. - All right? - And then we're going to take that and duplicate it. - So control shifty. - We're gonna control t and rotate it slightly, - right? - It's like move to let apply. - And we have to make some adjustments so that this looks correctly wanted to be angled - correctly. - So we'll take the direct selection tool. - Move. - Some points around here and move this over here. - Maybe with this. - And you want this to Ah, - you could spend a lot of time for trying to really make this. - Ah, - be accurate. - But I switch to this one as well. - I think this is too exaggerated This in and something right around. - Neither is pretty good. - All right. - So if I had control age and get ready Ah, - view of everything here and I Let's see. - Here. - Let me see if I like the look of this. - I mean, - turn capacity up for both of these, - actually, - and I take both of them had control. - Eat, - emerged them control t. - And we could either do you can make a bigger and move them in, - Possibly because you can get some different, - you know, - interesting looks here. - I I think I'm gonna leave mine. - Probably right around there. - Then hit. - Okay. - All right. - So that is our finished icon. - And I What we could do now is take all the group the layers and group them up with - exception to the background. - So select all those just by striking a top line Hold shift left, - click the bottom one and hit control G. - And so now we can get control. - T scale is down to see what this looks like. - Like moved to let apply. - And it looks really cool. - One thing that we would die when it comes to when it's not rast arised yet. - Ah, - the it doesn't apply. - It doesn't scale the called the effects down correctly, - so it so it looks a little strange. - What we could do is just duplicate that group. - Hide the original control e will flatten everything. - So now when we scale it down, - you'll see that it's a better representation of it. - And boy, - does that look cool, - doesn't it? - All right. - So I'm gonna go ahead and delete that, - though. - Get this back and that is it. - So in the next lesson, - we're gonna go ahead and focus on what it takes to export our icons. - All right, - I'll see you then. 21. Exporting our Icon: - all right. - Hello. - And welcome to this lesson where we're gonna go ahead and export our icons. - Okay, - So remember, - it's a little bit different for Android than it is an IOS, - and also here is pretty much the same thing between a photo shop and illustrator. - You're just gonna go to file safer web. - The first thing we want to do is we want to isolate to this object out of this background. - So what we could do is make sure you have this saved. - I I'm gonna duplicate it and hit control e and then control a will select all and then - control See will copy it and then control are filing new Rather. - And then we see we have 5 12 by 5 12 because that's the size of this container that we - specified hit OK, - and then control for the and then hide the background cause we want to be transparent. - Once we have that, - we can go ahead and save this And this is going to be the place store, - the Google play store graphic that we upload. - So let's go to file safer web here and make sure you have a P and G 24 bits selected with - transparency on and hit save and already saved this eyes. - So I have Android launcher and I named this place store where you could just name it 5 12 - by 5 12 So it's gonna overwrite it, - All right. - The next step is to save for the x x x HDP. - I see, - because we're starting at a the large size already. - So we're going to scale this down by go into Well, - actually, - what we really could do is gonna file safer web And we could scale down right here instead - of doing it in the document itself. - So I the size for x x x hdb I is 1 92 by 1 92 All right, - So once we do that, - we'll see that it changes down to that size. - We're gonna hit, - save and will specify 1 92 by 1 92 and then go safer Web again the next time. - The sizes x x hdb I 1 44 it save 1 44 x 1 44 and we'll do it again. - Safer Web. - The next size is X hdb I, - which is 96 and we'll need is 96 x 96. - Do it again. - And this orca is control shift Alton s. - And this size is for HDP I, - which is 72. - I know there's a lot of variations here. - Steady two x 72. - And then finally we'll do one more. - You get the point. - I believe I would hope so. - At this point, - I and this is going to be for MDP I which is 48 x 48 right there. - All right, - so 48 x 48. - And guess what? - That is it. - So Ah, - in the next lesson, - we're gonna go ahead and take this icon as well as the previous icon from the chapter one - for IOS and present them in sort of a phone view. - And this is good for, - you know, - showing for Folio are shown potential clients. - All right, - so I'll see you then. 22. Presentation on a Phone: - all right, - The low in welcome to this lesson where we're going to go ahead and present our android on - launcher icons and Iowa's a planter icon on to actual phones. - So for the 1st 1 we're gonna focus on Android simply because we just finished that one into - do with voter shop. - And if you do a search, - you can find a bunch of different phone mock ups from which you can place in your mobile - app designs or your APP launcher icon designs. - So I found this one in its free use and the Earl I will link here in the notes and this is - it. - And you can download it by clicking Download Now, - Now, - once you download it, - it's gonna be a zip file. - Just open that up and open up one of the two I views. - This is one of the views, - and this is the other view. - So I'm just gonna work with, - I think, - the second view right here. - And so to do that step into photo shop here and I'm gonna goto open recent because I - already opened it. - You can just open where have you extracted those files markup? - Android. - That can't find it One second. - There we go. - I got it open. - And the way you do this, - it's actually pretty cool. - You take this. - This is a smart object layer could see has a little eye icon right there. - If you double click it hit. - Okay. - And then hit. - No, - right here will see this screen launches. - So whatever you put in here is gonna automatically be placed in here. - So we want to open up the app launcher for Android. - And that's right here for me. - And I want this to be pretty. - I wanted to be a lot bigger than it is as shown here, - So I'm gonna delete this one that we create before. - And I'm gonna go to image image size, - and then change it to 1200. - Or actually, - once I can image canvas size, - change it to 1200 hit. - Okay, - You know what? - I'm very sorry. - Its image size and I was right the first time. - So image image size changes to 1200. - This is going to scale up automatically and not lose any quality because nothing's rostered - and I'm gonna control E just to flatten it, - Control a and control see and switch back to this layer here, - and I want to delete this text layer and this I'm gonna delete as well. - And then just fill in a black color for the background and hit control V to paste control T - shift all and scaled down just a little bit like that and then hit. - Apply then hit control s or command as to save it and then switch back in wa la Here we are - . - So this is I at 100% right here, - and it looks pretty cool. - So that's how you present it. - And you would save this file, - Of course, - if you wish. - Uh, - and there's a bunch of these mock ups out there these templates so you could do a Google - search and find plenty of them there, - hundreds of them, - literally the ones that even allow you to change the background and isolate the phone and - all that cool stuff. - So let's do the other one real quick. - I also the other one let me get the browser up here is right here. - And this from pixie den dot com. - And I will link this as well in the source. - So you can get to it quickly and just hit download to download that and go ahead and open - that up in photo shop. - And I have opened now and gonna zoom up here into the same thing. - These are two groups. - This one allows you to change the background, - which is pretty cool. - Like the background color. - We could make it black if we wish. - I'm just gonna leave it where it was. - And right here is the smart object layer. - We can double click that it. - Okay, - Okay. - And this is the view. - I'm just going to get rid of everything here except for the background. - And then I'm gonna open up the AI file for the IOS launcher, - which minds? - Right here and all right, - so the rebels revolutions at 300. - We can leave that there and see how big it is. - Okay, - Patrol a patrol C switch back to that's more object. - Layer control V. - Now this Israel large. - So control T shift. - All scale down. - Shift out, - scaled down. - And should thoughts get down? - There we go. - And then depending how big we want to show it may be a greater on here. - It's like move tool it apply. - And there we go troll us to save it. - And there is so very cool. - Just a quick way to show you how to present your app icon launcher on an actual screen. - All right. - And the next lesson we're going to go ahead a. - Well, - it's not going to really be a lesson. - We're just going to do a quick course overview of what we learned. - So I'll see you then. 23. Course Overview: - hello and great job. - By making it to the end of this course, - let's do a quick overview of everything we learned first. - In each project, - we outlined the importance of adhering to requirements put forth by Android and IOS. - It's very important to make sure you begin any launcher design project that you check out - the official docks to make sure nothing has changed in terms of launcher requirements. - Then we designed our APP icons, - the first in Adobe Illustrator for IOS and the second in Adobe Color Shop for Android. - As you could see, - you can use both applications for designing icons and both for IOS and injury. - Would you choose depends on your comfort level with the application and the requirements of - the project. - Then we exported our launch, - a graphics based on the requirements of IOS and Android. - And finally we imposed our launcher graphics onto three D smartphones for the purpose of - presentation. - If you enjoyed this course, - please rate it and leave a comment. - Thanks for watching. - I'm Gary Simon and I'll see you next time