Launcher App Icon Design for IOS (Iphone) & Android Devices

1. What we will cover in this course?: In this course, you are going to learn how to create awesome and cool-looking app icons and launcher app icons for Android and iOS devices. Now we are going to create all the different sizes of app icons from small devices and large devices and tetra devices, 3x, 2x and 1x. This is going to be automatically. You need to just learn to use the templates I'm going to show you. You need some of the experience with using Photoshop and Illustrator. Let's see what we're going to cover in this course. Now let me show you what we will actually be doing in this course. First of all, we're going to design iOS app icon, which will be our mailbox icon and we are going to generate all its different sizes required for different iOS devices. Then we are going to shift to Android app icons and we're going to generate very nice and cool-looking hydration app icon. Actually we will be designing to different themes for it. One is this heart one and the second one is this glass app icon. During this course I am also going to show you how I came up with early sketches of this hydration app and how you are going to use the same technique to get some ideas running and creative juices flowing. Then in the end, we are also going to design some mobile mockups to show to our clients because clients are not going to like simple plain icons. So we are going to show them something cool. Now the question is, why do I need to learn this skill? What is the market demand of this skill? The market demand is, let me show you just two websites and this is 99designs contest website. You can see there different contests for app icon design ranging from $200 to $999. In between there are $600 for just an app icon. You can see over here, they are simple icons and the price is, you can see over here $999. Then we have this Envato Studio and they're offering different app icon designs with different ranges of prices. You can see over here at $150, $65, $200, $300, $390. So the average is almost above $100. You can easily earn $100 in just one or two hours. It is not very difficult. I know that you are already convinced and really need to start this course, so let's get started and design some awesome looking app icons. 2. Why Do we Need App Icons: So let's talk about why do we really need an app icon. App icon is the very first thing your app user is going to look at. So if you want good initial impact on your users, you must have a very nice-looking and elegant app icon. Now, bad icons is one of the three big reasons for app rejections. So we really need a good app icon to avoid any rejections. Now, from the selling point of view, a good app icon is a must-have. If you really want to sell your app, nobody will ever bother to download your app or even look at it if your app icon is lame and pathetic. So that was all about why do we really need a good-looking app icon. Let's move on to the next lecture. 3. Qualities of good app icons: Now, let's talk about few qualities of good app icons. Now, first thing is first, your icons, app icons must be easily recognizable. Anyone can easily distinguish it from any other icon instantly and easily. Know your icons must be easily memorable, and if someone plays you a game or download you a app, they instantly see and say, "Oh yeah, I have used this app once, it's a very nice app." They must be aesthetically appealing. If they look horrible and ugly, I don't think anybody's going to even look at them or even download them. Your app icon must stand out of the crowd. So people browsing, the app store or trying to download your app, use and download your app instead of the other similar apps. This is very important point, which is your app icon must be simple and should use a very simple shapes and colors. That is all about qualities of a good app icon. Now, we should move on to the next lecture. 4. Donts of App Icon Design: Let's talk about some of that don'ts of App Icon design. I have listed few things here from IOS guidelines by Apple, so let's talk about them. Rule Number 1; never try to put text on your Icons, because as your icons are going to get smaller, the texts we'll be unreadable. So there is no meaning to put a lot of texts over your app icons. If you try to use a lot of objects in a single piece of small app icon, you are giving away a lot of focus points in a design. It will only distract your users eyes, and this is not a very good design practice, so try to avoid that. Don't use dull colors in your app icon design. Our eyes will neglect those dull colors so try to avoid them. Don't design your app icons only for the big screens, or latest IOS devices. While designing app icons, always keep in mind all the other smaller devices too. Never try to use your own pet's photo as an app icon, or some photo you took few years ago. They might misguide your user, and they might not portray what your app actually does. Avoid making icons which looks similar to IOS default apps icons. This will create a lot of confusion in your user's mind. This one is a bit technical one; avoid transparency in any IOS app icon you design, then you try to upload your app icons to app store. There is no support for PNG, or transparent files. If you want to read more about it, I will include the link in the resources for IOS design guidelines. Try to read that Apple IOS guideline thoroughly about app icons, so you can design some awesome looking app icons, and don't repeat the mistakes a lot of designers make these days. 5. Do's of App Icon Design: Let's talk about what you really need to do while designing app icons. Vibrant and sharp colors grabs the user eye and captures their attention. It is a must have. Use vibrant and sharp colors as much as you can. Use single dominant object in the middle to focus your viewers towards it. All popular apps share this same quality, so use it wisely. You can also use one letter symbol if you can't think about anything else. Sometimes it happens with all the designers. It works very well if you are a big brand. Your brain can understand simple shapes more easily than the complex ones. Use them in your app icons. Don't try to be a Picasso. It's a bit technical point. Vectors are shapes that can expand or contract without losing any quality. Try to use them while designing in Photoshop. We will be only using vector shapes in Photoshop when it comes to design app icons. These are the key points you need to keep in mind while designing great and awesome looking app icons. 6. IOS (Iphone) Icon size specs: Let's talk about some icon size specifications. Here are some of the few guides on iOS app icon sizes and I would like to share them with you. This is one of them from this Ivo guy; I don't know his full name. I will also include the links in the Resources Section, so make sure you check them out. Now don't worry that you need to memorize these icon sizes, you just have to look at them so you know which icon sizes are normally used. So this is one guide then this is another one. There are few icon sizes for iPhone. Don't worry about points and pt and this at the rate of 2x and at the rate of 3x. We will be only using these pixel sizes and we will be using a template to render all the different icon sizes automatically. Don't worry about them. Just have a look at them so you know which sizes are common. Then if you want to go into a lot of details, you can read this Apple iOS Human Interface Guideline on all the icon and image sizes. This is a very big list. This all about icon sizes. Now, let's move on to the next lecture. 7. Always design in square for IOS: Whenever you design an iOS app icons, always think in square. So what does it mean is don't ever try to use this shape as your icon base because iOS app icons don't support transparency or PNG. This clipping is automatically applied by iOS or iOS operating systems. So don't worry about this roundness of your icons. Just design in square and your roundness will be applied automatically. This is one very important tape because most of the bigness they try to design in this shape, which ends up very ugly by showing black screen behind your app icon. So just keep this in mind and let's move on to the next lecture. 8. Using Space and focus point of icon: Let me share one other tip with you, while you are designing IOS app icon. Make sure that you are using as much space as you can in this canvas. When you are designing, if you have a main object like any thing over here, try to use as much as you can, because when we try to go to the smaller sizes, it will look nice. If your object is very small, like something in the middle, maybe like this circle, like that. Let me just move it in the middle. When we try to get to very smaller sizes, the main object of our design will become more and more smaller. So this is very important tip, always try to use as much space as you can. Also always think about smaller sizes too. So don't design for just 1024 pixels by 1024 pixel canvas, always try to see the smaller sizes too or zoom out and zoom in again and again to see that your design is looking perfect in almost all sizes. These are few tips about designing your IOS app icons in Photoshop. Now let's move on to the next lecture. 9. Using Vector tools and shapes for App Icons: Always try to use vector shapes in Photoshop when you are designing iOS app icons or any other app icons. Now, what I mean by vector shapes, we will be using mainly these tools, these shape tools. Then, we will be using this bar selection and maybe this pen tool. These are the tools we will be using most of the time. If you are not making an illustration or a 3D object or something like that, we will be only needing these tools. Let's move on to the next lecture. 10. App Icon Size and Grid: Now the question is, ''What size to start your design with?'' The answer is that you have to design in the biggest size, which is this one, 1024 pixels by 1024 pixels, which is a requirement for App-store icon, and let me show you how I have set it up in Photoshop. Now, I have used this 1024 by 1024 pixels square board, and this is how I set up this grid. Let me show you. Go to edit, preferences and then grade guides and slices, and go to this portion. What I have used is I have used this create line after every 64 pixels and subdivisions to two subdivisions for that. Each small boxes is 32 pixels and each big box is 64 pixels. This is my set-up for app icon design, and whether you use Illustrator or Photoshop, always use this 1024 pixel by 1024 pixel canvas for your app icon designs. Now we know about the size which we will be using for design. Let's move on to the next lecture. 11. Photoshop Document setup for IOS App icon design: I wanted to show you my file setup for an app icon, which is 1024 by 1024 pixels and resolution set to 72 pixels, color mode to RGB, and background should be transparent. Make sure your color profile is set to "Don't Color Manage This Document." This is a very important point. This is my documents setup for app icon. You might be wondering what I used in resolution or color profile, so this is the answer. Let's move on to some of the next lectures. 12. How to use Free App Icon PSD Template: Let's see what's inside this app icon template. Open it up in Photoshop. I have it opened up in Photoshop over here. Okay, now this is the main file, but we will be using this. Edit me and Save Photoshop Smart Object, double-click it and you can see here is our square icon. Basically, these are few masks for the roundness. We will be using them to help out our roundness. This is the roundness which will be applied once the app icon is uploaded to iOS website. This is inner mask and this is outer mask. We need to hide this one at the end. These are few iOS gradients and colors for the backgrounds. If you want to use a plain color, you can use these, any of these colors or if you want to use a gradient, you can use a gradient over here like that. This is all about this icon app template, so we will be using this one to accomplish our task of designing ISFP icon in Photoshop. Let's move on to the next lecture. 13. Update About App Icon Templates: Hello, all app icon designers. From the last few months, a lot of students are complaining that we cannot download app icon templates. Now the problem is that this guy who owns the app icon template has converted it to some paid site. You can see over here go to apply pixels. If you go to that site, you can see these are all the app icons templates and you need to pay at least $9 monthly or yearly, $60 to get these. As my course was free, so I tend to use free templates. I already have one free template. I've uploaded it on my Dropbox and I will share a link with you but its version 5, I don't know whether this designer have more updated templates. But for this course you can use this one or you can go to these websites, iosicontemplate.com. You can see over here, I have showed you the method so don't worry, all these app icon templates, they've almost the similar structure of working like you can see over here there are different sizes of the same app. Then we have this, another one from everyinteraction.com. iOS 9 App Icon Template and it has been updated in 12th, October 2015 last updated and this is the file. You can download this file and these are all the icon sizes it can generate. It also have a mock-up with it. I think all the instructions will be inside these PSDs so don't worry. The third one I want to show you is this Bjango. These are, I think, very geeky guys from UI design perspective. They've a lot of actions and different resources. They've this app icon template in Illustrator, Sketch Affinity Designer and Photoshop. Android, iOS, MacOS, Apple TV, Apple Watch, iMessage, a lot of different templates. You can download these over here and try to use these one. They might have the actions with it because they've a lot of actions. You can see these below are the Bjango actions. This is the update I've wanted to convey to you. I'm going to upload this link app icon template version 5 linked to my Dropbox and I'm going to share this link. Keep every option in mind. You can, if you want to pay and get these great updated ones, you can go to this site, if you want to stay with free sources, you can use these three sites and the old template I'm going to upload right now. This is the update I wanted to give you guys so keep designing. Show me your work. Upload it to this URL, bit.ly/uistudents. Upload your icons over here, upload them on this page and I will review your app icons. You can see over here, this is my picture, always remember to put your name at the end of your file, like app icon underscore student name. Your name, browse and upload your file. These are the things you can do over here. I will look forward to see your creative and awesome designs. Stay tuned and let me know if you need something from me or any questions you want to ask. Let's move on to the next lesson. 14. Designing 3d elevated base of IOS App Icon: In this lesson, we are going to create this base of this icon first. This is basically this rectangular shape and its elevation and shadows and everything. Let's get started and make a new file of 1124 pixels by 1124 pixels. Leave the rest of the settings like this, resolution 72, don't color manage this document. Always keep in mind that when you are designing for mobile apps or web design, don't ever use any color profile, just use this. Don't Color Manage this document. Okay? Press "Okay". This is our background layer, let's make it a background layer, New Layer, Background from Layer. This layer is turned to background now. Let's change the color by pressing "Alt Del". This is going to shift to this foreground color, which is white, and then we are going to create a rounded rectangle. Select the "Rounded Rectangle" click anywhere, single click, and choose the height and width to 1024 by 1024 pixels and the roundness, you'll be using will be this 232 pixels. Almost and 32, 32, and 32. Press "Okay" and let's change its color to E, C, F0, F1. Okay. This is a bit of grayish blue color. Select "Okay" and then we're going to select both of them and center line it. Then we are going to quickly create guides around our shape, like that. This is, I'm using a plug-in Quick Guide. Now we have set our shape and guides. Let's add some styles to this layer. For style we will be adding is going to be Bevel and Emboss. Now let me show you the settings I'm using. Use the style as Inner Bevel, Techniques, smooth depth, move the depth to 100 percent. Use a direction up. Size should be 16 by 16 pixels. Always use even numbers because we will be scaling down our icons, so even numbers works better. So always use even numbers in your styles. Then we will be using this angle to 90 and this altitude to 21 percent or degree. Okay, this highlight mode should be set to screen and color should be white, and move it's slider to 55 percent. Okay, now for the shadow color I am using this color B, D, C, 3C, 7. Set this color as shadow mode for inner bevel and shadow mode should be normal not multiply and slide its opacity 200 percent. Okay, that's it. Now let's add some inner shadow to this layer. Go to Layer. Step 2 is Inner Shadow. Inner shadow, inner shadow and inner shadow. Inner Shadow, color will be the same as this bevel and emboss shadow. So I'm using the same color B, D, C, three, C, seven. Press "Okay". Opacity should be a 100 percent and angle will be minus 90. Always keep in mind that we are producing shadow from this bottom to top. So this angle is minus 90 degree, it is coming from the bottom. Light is at the bottom, so shadow should be here Okay, then the distance should be 32 pixels, which is also an even number. Always keep in mind why I'm using even numbers because our icons will be produced in smaller sizes, so we don't want any problem in our calculations. So use even numbers. Press "Okay". Let's try to add some gradient overlay to this layer. Go to Layer Style, Gradient Overlay. You can see as soon as I have turned this on Gradient Overlay, we have some shadows over here, inner shadows are very subtle. So this is the reason I'm using this Gradient Overlay layer style. Let me show you the settings of this layer style. Blend mode should be normal, opacity should be 60 percent, and this gradient is basically, let me show you the color I'm using for this gradient. The color is B, four, B, D, C, six. It is on the left span of this color is almost 19 percent or 18 percent. We are using this white color more and this grayish blue color and less. This is basically white color and it's opacity is a 100 percent. Click "Okay" and make sure you have pressed this reverse. We are using this reverse over here. Then the style we're using Radial style, our angle of this radial gradients is 140 and the scale is set to 121 percent. These are the settings for this gradient overlay layer style and that was the last step of our base creation exercise. This is all about base for this app icon. Let's move on to the next lecture. 15. Designing Flat Base of IOS App icon: We will also create another background for this icon which will be plain background. So duplicate this sounded rectangle and hide this one and we're going to use zero pixels for the roundness. We are not going to use any roundness. Hide this bevel effect and also this inner shadow. So we will be using only this plane shape for the gradient and the look of the icon. I will explain this technique in the environment when we will export all icons because iOS don't use or apply any PNG. We need a square icon basically. So we will be using both these for creating our icons. This will be for the rounded effect and we will also create, use this one for a simple icon. So this is all about this creating base of this icon. We created two bases in this lecture, this one and this one. We can also shift the angle of this in this square background. Maybe like that. We can change it to linear mode maybe, and change the angle to 90 percent and make it normal like that. Okay, it's better now. So for the square shape we are using different gradient, which is this one. Linear gradient with eliminating this reverse, it will be from white to dark. So scale, if you want to change the scale, I guess 130 percent is good. We don't want much color over here because our main shape will be here. Press 'Okay,' and this is all for this lecture. Let's move on to the next lecture. 16. Designing Envelop Shape In Photoshop: In the last lecture, we have created our base shape. Let's create our main icon shape right now. I am going to start with the rounded rectangle. Going to press "U" to select the shape tool and rounded rectangle. Now I am going to set the radius to 24 pixel and click once on this canvas. Now the size for this is 736 pixel wide and the height is 444 pixels. So set this size and click okay and its color is this one. The value is 242d36, or 242d36. Set the color. Let me bring it up so you can see it. I'm going to align it in the middle. I'm using custom shortcut keys. You can use this one from here. Press the Move tool and you can use these alignment to lower here. I have aligned it in the middle and for the top part of the envelope I will not be using Photoshop because it is not an accurate tool for creating such shape of triangle, rounded triangle. We'll be using Illustrator for that. But for the rest of the shapes and the bottom shapes, we will use Photoshop. Let us draw some other shapes like 2 bars over here, like that. I'm going to use this color, which is 3498db for the blue color. I think first one was darker and replicate it, "Control J". I'm going to use the lighter one and we're going to separate them 1020 pixels. I just move it 20 pixels from the first one. Now we are going to select both of them and we're going to group them into bars. Then we are going to align it at the bottom of this shape like that. Now let's make another shape which was basically the stamp shape. Use your custom shape tool of Photoshop default. If you don't see all of the shapes, click here and click on this "all". You will be able to see all the shapes over here. For the stamp, if you want the round stamp, you can use the round stamp over here like that and color it. This one, its color is 34495e. If you want to use this one, you can use this one. Or you can select the other one which was a bit rectangular shape. I think it's over here. Yeah. This one. You can select this one and hide this one. We are almost done with our shapes for our main icon, we are almost completely done in Photoshop right now. For the next shape of the envelope, we are going to use Illustrator for that. Let's see in the next lecture how we are going to use Illustrator to design the upper part of our envelope. 17. Using Illustrator for Envelop Shape: Okay, now, before starting our design in Illustrator, we need to make some changes. Go to Edit Preferences and then go to guides and grades. I have set my grid line after every 24 pixels and subdivision to 12. It is basically each small boxes two pixels, and each big boxes 24 pixels. Also we are going to set our units in pixels, stroke, general and type. Type should be in points and doesn't matter because we are not going to use any font right now, or text right now. These are two settings units. Convert your units to pixels because we are designing in pixels, then your grid then guides, setup, some guide in even numbers. Click Okay. I'm going to open up a new file, new and then we are going to use pixels in the units 1024 by 1024. Color mode is RGB. Align new objects to pixel grid, okay and this is our canvas. I'm going to turn on my grid right now by clicking control and quotation mark on my keyboard. Now we are going to design our main shape and we'd like to shape over here. To match them perfectly first we are going to draw a rounded rectangle just for aligning it better, so 736 was the width and height was 444 pixels and the roundness was 24 pixels. Our shape, main shape is done over here. Remove this outline from here. This is basically the stroke outline. I have removed it and give this one some color, maybe white is okay, I guess. Now, this is our main shape and my laptop art for that, we are going to use polygon tool. Click on the polygon tool and click ones over here. Enter three sides in the polygon, and click okay. Our triangle is here, let's rotate it. Press shift, so it is rotated in some specific angles. Let's hide the guide right now, and let's color it something else so we can see it properly and also this one. Now we are going to transform this triangle, click on it and go to this Transform panel. We are going to use 736 pixels for the width and 224 pixels for the height. Set it like that and move it around here. Now, what we're going to use is basically live corners. To access them we are going to use this Trek Selection Tool. You can see now these live corners are active over here. You can see small circles inside this triangle. You can double-click on any of them and enter your pixel value for your corner around us. I have entered this 24 pixels and press okay. As soon as you press okay, this is basically reduced to some other size. First step is we are going to make an edge for this corner. To make that we are going to select any anchor point over here to make this active, then click and drag this in this corner. Once we see the zero pixel, release it. Now to size it, we are going to use our Move tool and then transform. We are going to use 736 pixels. Make sure you align to pixel Grid scale and all these are turned off. Now press Enter and we have our shape. Let's align it according to our background shape. Move it a bit up like that and it is almost perfectly set on that. I have pressed control via to come this in this outline mode, so keep in mind pressing control via again. Now I'm going to copy this shape. Copy and we are going to paste it in Photo shop. We're going to use Shape Layer. Press Okay and we have our Shape layer over here, like that. You can see it is perfectly fit. Let's create some drop shed over here. Now for the drop shadow, we are going to use some values which are a bit like distance is 42, size is something like 764 maybe. The angle is 90 and blending mode is multiply Opacity. You can use the opacity, whatever you like. If you want a hard shadow, you can set it to 55 or maybe more than that. This is the blur size, how much it is going to blur around this shadow and this is basically the distance from the top. Keep them a bit closer so your shadows don't leak from this area. Shadows should be over here. Press Okay and our main icon shape is done. We have used Photo shop and Illustrator to create this shape. Now we are going to group them into one group to manage them easily. We have this shape and then we have this and here are the bars. Select them all by pressing control and control G to group them. I'm going to name it mail icon and then we also need to align it a bit in the middle, control click both of them. Align them in the middle. It's almost in the middle right now so it is not aligned or moved when I pressed my alignment tools. This is perfect. We have completed our design for this icon. Let's move on to the section where we will be exporting our icons into different sizes and what problems most of the designers and new designers face while exporting their icons. 18. Final Design touches: Now, we are going to use icon template app. We downloaded it in our last lectures, and we are going to use it to export app icon into different sizes for iPhone and iPad. I have opened up my app icon template, psd file. Go to this "Edit me" and save. Click "Okay" if it's color profile mismatch. Don't worry about that. Now, I'm going to go to this window, and arrange, and tile all vertically. Now for this, my icon shape, go to this. I am going to group all of them, and I'm going to drag them over here on this Icon 1.psd file. Now, I'm going to close this one, and we are going to again tile them to tabs. Now, first of all, we're going to delete this top app icon Template Glyph, and then we are going to convert this app mail icon to Smart Object, alt F5, or you can right-click and convert to Smart Object like that. Convert to Smart Object, and then we are going to do a few more changes, hide these gradients right now, and activate this background, and align all of them in the middle, like that. Ctrl D to deselect. Now, let me show you how we are going to use this. First of all, let's just save it Ctrl S and see what is happening in our app icon while our app icon is here. You can see how our rounded corners are working over here. But just to fix them, let me show you the trick. Let's hide our gradient background, full-scale background, and go to this Outer mask. Outer mask is looking perfect. Grab this Inner mask layer and move it down from your Rounded Rectangle, which is your background. This one 3d elevated base. Move this Inner mask below that. Inner mask is basically this shape for this icon, so what we are going to do is, we are going to clip our shape into this Inner mask. Click on this. Now, our shape is showing on the top of Inner mask art, and we are going to clip these two like that. This is going to be a perfectly rounded app icon because we have clipped it in the inner shape as we know that this app icon shape from iOS is not basically a simple rounded shape, so we have to clip it like that. Ctrl S, and we are almost done with it. Now, if you want the other version of your app icon, you can easily hide these two, and you have this background over here. You can also change the gradient from Radial to Linear like that and remove this Reverse and use this slider to a bit higher value, like 145. If we save it right now like that, you can see still our app icon is in the rounded shape, and it is looking really awesome. That is why I created this simple gradient background in the first place because I think it is more, you can see, along the lines of this difference, and it is more modern-looking then the other one, the elevated one. Still our app icon is looking very awesome. Let's move on to the next lecture where we will be using action to export all these icon into different sizes. 19. Exporting IOS App Icons of all sizes: Let's export our icon into different app icon sizes. To do that, we're going to use our app icon template action file. If you don't see actions over here, this place style button, you can go to "Windows" and click on this "Actions" and it will appear over here. So what we are going to do is; I have already loaded my actions over here. If you don't see them over here, click [inaudible] and go to "Load Actions" and we are going to browse to those app icon template actions and click on "Load". Like that. You can see second one loaded over here right now. What we are going to do now is we're going to use this app icon template, action file, and click on this "Export Square" icons because, we are going to export square icons because iOS don't support transparency. First of all, we are going to export the square icons, click on it, play it, like that. It will show you the save for web dialogue box. Wait for it and click on the "Save". I'm going to save it on the desktop right now. Click on "Save" like that. It will create a new folder to save all these sizes. Let me go to this folder. You can see all of our different size icons are generated and our mail app icon is even looking good in small sizes too. You can instantly recognize this symbol. So this is the quality of a good app icon. Our all square sizes have been generated. Let's generate the rounded ones. Okay, click on this "Rounded" and play this action. Wait for the dialog box to complete action. Okay, it's taking some time. One more thing, just turn off this convert to SRGB. It is better when you are exporting. I just got this very good tip. Otherwise, it will be a problem when you try to see it on other devices. Now, let's see how our rounded icons are looking. Okay, these are our rounded icons. These are basically icons when we are using gradient overlay or gradient background. This one simple background. If you want to see how your icons are looking in this background, 3D elevated background, hide this one, or if any of you want to show it, show it like that and "Save" it. Now we are going to export our icons in this 3D style. Now click on this "Rounded" and click on this "Export" button. Play this action and we are going to save it in our 3D elevated look. We are going to use the transparency, although iOS don't support it. But we want to show it to our clients. So they get impressed by our designs. So this is the trick, just to show them the elevated ones. Now let me see how these elevated ones are looking. They are looking awesome. So this is the app icon generation process I use. If you really want to use this [inaudible] or elevated in your final design, just make sure that you turn this other background too and generate your icons in this square icon. Don't try to run your action when you are in this PSP file or icon. First move on to this app icon template and then try to press it. Don't press it inside that. I'm going to uncheck this; convert to SRGB. Now, I am using a mask to show these rounded corners, so I think these will be perfect, don't worry about them. Click on "Save", "Replace". Let me see how our icons are going to look. Our icons will look the same like that because iOS will apply the roundness on its own side and on its operating system. So we are going to see the squared icons. For the final output, if you want this elevated effect, always use square output. To upload your icons, you should always use squared extraction. So use export action which is squared app icons. Don't use rounded ones. This is all about my course. If you want a plain background behind it, you can hide this one and you can use any other gradient. Also try to hide this grid. We don't need this grid. iOS colors go to "iOS colors". I think if you want this elevated one, you can hide all these colors and just let the gray and click it to move it to white color, like that and generate, export your icons. So in this lesson, what we learn, we exported our icons with roundness and in squares. In the end we will be using only the square exported icons. This lecture concludes my course for this app icon design. I hope you have enjoyed this lesson and this course. Don't forget to review this course. Or if you want to add something to it to try to use discussions. You can always message me directly. I am here to help you in all kinds of ways. So take care and bye. 20. Introduction to Android Launcher Icon Design: Welcome to the new section of this course, which is going to be Android Launcher App Design, and we're going to create a lot of different design options for the same app icon, which is basically Hydration App, or checking your body water levels. So let me show you and introduce you what I'm going to cover in this whole section. So let's see what's inside. Here you can see the main Google Nexus screen and you can see over here we have created three icons, this Liquimeter, and the other two are this Hydration and Dropify. These are the same app icon, different ideas. They are all looking cool. I love the heart one. You can also use this Liquimeter, which is a glass icon, and I think they all fit well. So let me show you what we're going to cover in this whole section. You can see over here we're going to use this template which is going to generate different sizes, which are basically six sizes for all the Android App and different devices requirements, and we're going to create three different themes. One is this glass, and then we have this heart, and then we have this drop icon. In the process of creating these three icons, I created a lot of flop icons as you can say, that we're not very good. So this is one of them. This is one of the failed. I didn't like it. It had some bars to measure the water level but it was looking like, I don't know, maybe it was not looking very good. So I dropped it. Let me show you some of the more early options I tried. These are a few more options. You can see over here I drew this glass shape in Illustrator, but in the end, the edges were very jerky when the icon was very small, so I let it go and I didn't use it. This is one another idea and I just rejected it. So you can see if you are going to design a very nice app icon or something cool, you need to go through a whole process. Sketching, improving, generating new ideas, trying to see which one is getting better or choosing the final one. So we are going to cover all this in these seven or eight next lessons, so let me show you how we are going to create these three cool icons for Hydration App. So let's get started and move on to the next lesson. 21. Specs and Sizes of Android App Icons: Now, in this lesson we are going to discuss app icon specs, like what are different sizes of these launcher app icons for Android platform. Then we are going to discuss what size we need to submit to App Store or Google App Store. Then we are going to see whether we can use transparency and alpha channels in these icons. Like we can use just two or three shapes or we can use any transparency or transparent background in these icons. Let's get started. Basically, each Android app needs six different icon sizes, 512 pixels, which is the biggest one you can see over here. It is basically for Google App Store. The other ones are for other Google Android resolutions. If you want to know more about these densities, screen resolutions, you need to take my Typographic course. There is a full section on all these Android and iOS stuff and they're different screen sizes and how to design for them. In this course you don't need to worry much about them if you are just focusing on designing icons. These are six sizes. Let me show you few online resources like this one. I'm going to share these links with you. These are the app icon sizes, 48 by 48 pixels and they will all be in PNG format, transparent format. This is for hdpi 72 pixels by 72 pixels. These are all square sizes and 144 by 144, 192, 512 for Google Play store. Okay? These are all the icon sizes. One thing you need to remember is that these are called launcher icons. Okay? These are not other icons like you can see what the action bar dialogue and our tab icons. These are called launcher icons or app icons. Keep in mind that we need six different sizes for them. I'm also going to share this document and it has all the sizes for all the different app icons, iOS, Android, BlackBerry, even web OS, Windows phone. You need to keep this in your URLs and save this document. Now, the coolest thing about these Android app icons is that they give you full authority that you can use transparency around the icon. You can create any shape of icon like you can see over here. I have just created this glass icon and there is nothing around it. We are free to use alpha channels, PNG. In the case of iOS designs, you know that we cannot use such tricks over there. You can see over here in the heart icon, it is looking really cool because it is transparent from the sides and we are using this shape. You can see over here in the left corner this phone icon, Android phone icon it is really looking cool because it has transparency around it and we can just see the icon setting on this background. These are few differences from iOS app icon. These are different sizes, we can use transparency and you can see over here we are free to use transparency around it. This is the coolest thing about these Android app icons. I think that's it. We should move on to the next lesson now. 22. Do's and Don'ts of Android App Icons: Now in this lesson, I'm going to discuss few of the do's and don'ts of Android app icon. They are almost the same as we discussed in iOS app icons, but some of them are different. Google Material Design and their design guidelines are really create and the elaborate everything in detail. Let's see what are the guidelines and do's and don'ts of these app icons. Now first we're going to read about these launcher icons and there is an API guide on Google developer forum, Android.com. It is going to show you some of the best practices. Now you can see at the right you are going to see the schools of the launcher icon, do's and don'ts, size and formats. Size and format we have already discussed it's PNG and there are six different sizes. Let's go to the schools of the launcher app icon. It is the same that your app icon is going to tell the story of your app. Make sure that you design it in a sense that it is like the cover of a book. If you pick up a book end cover is very pretty and when you open up, there is a different story than you are going to dislike it. Same is the problem with these launcher icons. Make sure that your Google Play app icon or Android app icon is going to tell the story of what the app is all about. Mostly we also bring the color scheme closer to the app. If the app icon have very strange colors and when you open up the app and it is very different, or it's 3D and the app icon is flat, or the app is flat and the app icon is 3D. It is a bit of mismatch. Few things you need to keep in mind is that you are going to align your app icon with your brand. It should be very closer to your brand design guidelines or brand colors. Then it should be easily discovered by different users on Google Play. It is the same thing I showed you in previous lessons, that it should be noticeable among different icons. The same things they are repeating over here you can see promote the brand story, create an icon that is unique and memorable. It applies to all app icons, it is universal fact. Also the color scheme that is aligned with your brand. Then we have don't try to communicate too much with the icon. It means that don't make it too much complex. A lot of different shapes don't try to use too many shapes. Simple icon will be more impactful and more respect and more memorable. Keep in mind, that's why I use very simple shapes, like we have used drop and a heart and a glass. This is very simple, simplicity is going to win in the end. Then the same thing they have repeated over here, don't try to use the application name or text in your Pycon, this is the same as we discussed earlier. Few more things we have already discussed this function well in the slot in the launcher, tried to read this. Now, communicate [inaudible] at small sizes. This is the main problem, most of the time we have. I discarded a lot of icons when I was designing the Glass app icons because they were jagged on small sizes. That is why I went for whole shapes like filled glass or heart or maybe an a droplet. Here is a very good point, work on wide variety of backgrounds. Keep in mind that your users are going to create a lot of different types of backgrounds and their mobile wallpaper papers will be different. Keep in mind that your colors are so vibrant and that they can be used on any background. This is the main tip. Here's one more thing, reflect the implied lighting model of the launcher. It is basically that the light on the app icon is going to be from the top, so it should generate shadow at the bottom. This line means that, the light will be coming at the 90 degree angle from the top. If the icon is 3D use perspective. Don't try to use too much prospective, otherwise it will not be recognizable. You can see over here this phone icon is a bit in perspective and this movie app icon. I normally go with the simple icons. I'm not very good at perspective. I tried to design simple icons, I think if you are limited with like me, you should try to design like this. Now the last point is that, tried to weigh your icon and use the whole space. Now about that we are going to cover in the next lesson, which is about material design guidelines of these Android app icons. We will discuss their grid, so you can see at the right, this is the great, we're going to discuss it in detail in the next lesson. These are all the do's and don'ts. You can see over here they have showed you some of the things. Like if you create too small details, like you can see over here on small sizes, they will not be visible. You can see on here they have just created three, these bars and they are easily visible. Also you can see tried don't try to hide your main icon shape. Just use that one and leave the rest. We don't need that. Don't try to use to thin lines. You can see over here, very thin line is not going to show very well. This is the problem I was having with the glass icon. It is drawn with lines on the sides, I had to make the lines very thick. Also the thing is that if you can use some paper effect or curved effect with alpha channels, you can see over here tried to get the full benefit of your alpha channels and transparency. Let's move on to the next lesson where we are going to discuss material design. 23. Material Design Guidelines: Now let's see what Google designers are saying about their design guidelines and how we can follow them to improve our app icon design process, let's get started. Now if we go to this material.io/guidelines, they call it product icons. Now, the main thing is that you can see at the right side there is a full grid on how to lay out this app icon, so let's see what they have. Now, first I am going to tell you what is their design approach. Design approach means, what is the thinking or design thinking or guideline behind their Google Material Design. The material design is basically paper on top of another paper. All their design is based on stacked papers, one paper is casting shadow on the other paper like you can see over here in the lighting study, that this elevated paper is casting shadow over here. Also, there is light on this area over here. You can see this area is bit brighter and lit by the light. Also, they have two light angles 90 degree and 45 degree, so keep that in mind too. You can see over here there is the material prototype then they have added colors to it. This is how their designed philosophy or approach is specifically working. For me, I think their design approach is similar to the origami art of Japanese. They create a lot of different shapes from paper. Now, coming to the grid, how we are going to use that grid. That grid is basically are divided into fours. I think, now the main thing you need to keep in mind are these key lines. You can see, don't get afraid of this whole design or this whole grid. Basically, what it says is that, if you are going to remain in any of these shapes. Now if you are designing a rounded app icon, you need to remain in this area. If you are designing a rectangle one, you need to follow these shapes which are rectangle, this top rectangle, maybe you can design a document app, or document app icon, you will be using this rectangle. Also, there is a square one inside, so this is not too much of a worry. This middle is basically focal point if you are using something you can use this area over here. These are called keylines, keep your design according to these keylines. You can see over here they are showing their keylines shapes separately. This is square, this is circle, this is rectangle, this is another side of rectangle. Then they are showing that their DP unit grade, don't worry about the DPs, basically it is all in even numbers multiplied mostly by four or two, divisible by four or two. Then here is their geometry study, you can see there are different icons there showing that, like this one is Chrome icon, It is built on this geometry. Similar are these geometries, they are using rectangle shapes. Now, let's discuss some product icon anatomy, anatomy basically there are different portions they have given that you need to use them in this way and the one number is basically the gloss you can see over here. The gloss of the finish, which is basically your app icon shine or maybe some light, or maybe some shadows at the top, or maybe some glossy finish. Some shine over your icon, then two and three is material background and foreground. You don't need to worry about them, this is background, this is foreground. Four is basically your focal area or your main color you are using for the main object, five is basically your shadow. Don't worry about these, It is very simple, they are showing everything, their material design guideline is very elaborating, very detailed., you need to read it carefully. But I think for icon design, the only main concerns are commanding these shadows, and how we are going to use the whole shape area, this grid effectively. If you want to read all this, you can read all this guideline, I think it's better if you read it thoroughly and they have a lot of different material design guidelines. One more thing I want to show you is Drop shadow metrics. Now, the Drop shadows are very calculated, you can see here they are showing opacity 20 percent. X offset is basically from x-axis, so it is not going to move right or left. It will be from top to bottom, so it will move on the y-axis 4dp, and blur is going to be 4dp. If you are designing in 512 by 512 pixels, then this 4dp means 16 pixels or eight pixels. Let me show you with an example in Photo shop. You can see over here, in this example, I'm using the same technique. Now, if you select this circle, you can see I'm going to apply a new drop shadow over here, so let's remove this effect and apply a new drop shadow. Now you can see I'm using just 20 percent opacity, eight distance and eight pixels size, so you can increase the size in eights like that, 16, you can see it is costing a very nice subtle shadow, like a drop shadow of material design. Also, there are more material design studies you can see over here. There are different styles, I'm going to share the links for these resources. You can just grab these, you can see over here, there are different layers of shadows. If an element is more elevated or more above in the stack, it is going to cost more shadow like that. This is how these material design basically works, It is basically shadows and lights and papers stacked on top of each other. I think this is all about this app icon, If you want read a whole this document, you can read it thoroughly. Also you can see they have given some colors, we can also pick the colors from here, but I picked it from somewhere else, I'm going to show you that too. This is all about material design guidelines, I'm going to share with you this material design shadow, study and you can download the PST from this guy and apply different shadows. Let's move on to the next lesson. 24. Initial Idea and Sketches for App Icon: First part of any design, whether it's an illustration or app icon or web design is sketching. So get on with some paper and pencil and try out some sketches. So I am going to show you my sketches over here. So let's see them. Here are my few initial sketches, I used few things related to hydration, which was glass or water, water drop, a leaf filled with water waves and a beaker with some, you can see over here, I have used some markers or marks on it to measure the water levels. These are the few initial ideas I had in my mind, I just got them on paper. So if you don't have any idea or your mind is empty, then there is another technique which is search on Google and get inspiration or ideas related to this concept. So what we're going to do is we are going to go to Google and search for different water waves and water apps, similar apps. Now you can see here we have in Google, I have searched for water app and you can see there are a lot of different water apps. Their icons are also showing up, also how they look like and their mood board. You can prepare a mood board for that. So we have water drops, some bottles over here, a glass, and if we go down below, there are more water droplets, and there is a funny water drop over here. This is another idea that illustration of a man or a woman or a person is filling with water. But I think for an app icon which is very small image, you cannot use something like this. I had that idea but I discarded it because we need very simple and basic ideas, so just by looking at the icon, the user should be able to guess what it is going to be. These are few ideas. I really like this hydrate and their water level, so this is a new good wave. Another thing now about the color scheme. If you want to design in just one color or two colors, that's up to you. But I like good colors, good vibrant colors to attract the user towards the icon, so you can see over here they have just use one color over here. Also in this app icon, you can see almost one color gradient, and then we have another one which white and blue, just one color basically. I went and searched on Google Play for some water apps for ideas you can see we're here water drink reminder and then we have at the right side a lot of other similar apps, so most of them are using some glass maybe timer, I don't like the idea of timer, I think it should be related to health. That is why my initial idea had this heart in it, because it is related to health. So water is good for your health that is why I use the heart symbol. Now if you go to this iTunes, There are a lot of apps on Apple and you can see over here they still have the bottle, I think it's the same one, then we have drops, drops bottle. So the main concepts are all around water levels and water drops, glasses and some bottles. So I think the bottle needs a lot of detail. You can see over here a few curves another thing and they already have this and I think it's going to suit them better because their app is also showing a bottle. So for colors, you need to search for water waves. When you are going to search for water wave vectors, you are going to see a lot of great colors like you can see over here. Some purplish shade water and we have a lot of splashes then we have other ideas like you can see over here a few gradients from dark to blue, so a bit of a purplish color with blue, they are looking great. So I tried to pick colors from these images. I selected maybe one, two or three colors from here, and one color from maybe this purple color, and use them as my four colors, okay, for the app icon. For waves, you are going to get some colors and ideas from here, as you can see this is also a very good wave, ocean wave. This very unique, I think, I don't think it's very easily recognizable. Then you can see there are more ideas about waves, types of waves, one, two, three, and four different types and then we also have this idea, waves on top of [inaudible]. This is the one I used in my app icon, so for ideation and sketching, you need to see the ideas of other apps and other designers, this is how the world works, you look at someone else's car and design your own, or maybe designed it better than them, so this is how we are going to get our color scheme and our main symbols. Now in the next lesson we're going to design our main symbols in Illustrator. So let's move on to the next lesson. 25. How to use App Icon Assets and Templates: In this lesson, I'm going to share you and show you the resources we are going to use in this course and this Android product icon template we're going to use. There are just few of them. I found data really professional and helps you generate app icons easily and saves your time. If you want to save your time, you need to use those templates. You can also create all these sizes, even from Adobe Illustrator and even from Photoshop. Just create one of them and export them into different sizes. But I think it is better that you use these kind of templates. They can generate these icons in no time. Also, they can show you this preview which is very handy. Two of them, I really like, I'm going to share the URLs of these app icon templates. Let's go to our browser. Note the first one, the best professional one is this applypixels.com. Previously it was a bygone template, before it was free, now it is paid. You need to pay $9 per month to get these awesome app icon templates. I am a fan of free tools like that, so I have version 2 for this Android product icon. Right now the current version is three and there are a few changes in it. Like one more size edit which is 114 pixels, which is for Amazon you can see over here. You can also see it in the change log added a new size. This is one of them if you are going to earn by using these templates and you need to design app icons for earning and it's your profession, then I think you should purchase the license for it. I'm going to share the free version with you guys, so don't forget to download it, it's version 2.0. The second one is from this guy. These are multiple owners it's from Behance and this one is also really good template, very easy to use. It has some flaws, so I'm going to discuss that in a minute. Here it is, you can see over here different sizes. A lot of great previews, even Google App Store. Then it's in these apps and it's on the desktop or whatever you call it mobile desktop screen. The third one I'm going to show you is from this Android developer.android.com. If you go to this area over here, at the right side, you can see over here in the downloads "Android Icon Template Pack". If you click over here, it is going to download the template. It is basically from Bjango guys, I guess. I don't like it much but if you want to download it from overhead, you can use that. All these icon templates, they have similar personalities. Their techniques are almost same. You just design one size and they are going to extract all others. Don't get confused that if you download some other template you're not going to work with it. Now I'm going to switch to my Photoshop and let's see what we have in these templates. You can see what here, this is Android product icon template from Pixelresort app icon template. The site I showed you, it is version 2 which is free, and you can see over here there are different sizes, a preview, and very clearly it is shown over here 512 size and "Edit me and save". Basically, you are going to double-click this and edit everything over here. It has icon grid, circle icon, and vertical rectangle, horizontal rectangle. It's just a simple app icon right now. So if you want to use any of them and you can turn on and turn off the grid very nice. I think this guy has made it very professional. We have top shadow over here, which is if clicked over here, you can see this is "Edge Indigo 900", so it is the edge. If you want to change the color of the edge, you can go to gray or something like that. Whenever you use any of this choice like square or circle, you need to edit everything over here. If you want to bring your design into a circle based app icon, you need to drag your designs over here. If you want to hide this, you can hide this and start making app icon over here, or normally I suggest that you draw your main app icon shape into Illustrator and then bring it over here. This is basically an atomy of these app icon templates. There are different types and you can see over here, there are shadows and you can also switch on alpha version and beta versions, these are different tags. This is all about these. Let me go to the other one. The other one I like is this one. It has this size 1080, so if you double-click it is basically in 1080. It also have, you can see over here, this is grid mask, so this is basically the icon grid. Then we have this icon over here. I just dragged this app icon which I made in Illustrator over here, it's basically illustrator shapes. This is one I tried before, it's ugly, it was one of the rejected ones. Right now I'm using this circle, there is one flaw with this, which is basically, that if I try to turn the "Drop Shadow" over here, so if I save it with a drop shadow, you can see in the, let me zoom in, you can see for the very small sizes like this, 96 and 72 pixels by 72 pixels, there is a jagged line around my design. It is not properly showing my drop shadow. If you want to use this app icon template, I suggest that you never use drop shadow over this shape over here. If you want to use stroke, that's up to you. It is really going to work very well. You can see over here, still it has some jagged edges. I think you should just stick with this one and don't use any shape or shadow around this bigger shape. If your app icon shape, and if I save it, you can see the preview over here. Let me show you the preview. Here it is. Let me zoom out to 100 percent. This is how your app icon is going to look. It has very nice previews but the extraction, when you extract your app icons, they are going to look ugly if you are using some shadow over here. Don't try to use shadows over here. These are the two templates I recommend. One is this Android product icon template from the site I guess applypixel, this is the guy Michael Flarup, I guess. This is the guy who created these, and I think these are better than any of them. You can see there are few errors and flaws in this like drop shadows not coming out very well, so that's it. If you want to use just the free one you go to this Material Design icon template and use this one. If you want to use the paid one, the most updated version 3.0 for this one, then you go and pay for it. I'm going to share this 2.0. and all these templates with you, so don't worry about it. I'm just going to make this course with free resources. In the next lesson we're going to create the basic shapes of our app icon in Illustrator. Let's move on to the next lesson. 26. Designing Glass Shape in Adobe Illustrator: Let's start designing our app icon. First, we're going to design this drop shape. This droplet shape is already available in Photoshop basic shapes. You can click over here. You can see in the Shapes panel, if you go ahead and select the All Shapes you are going to see. There is a droplet over here. Let me show you. Here it is. Also, we have this heart over here. For these two shapes, we are not going to draw them in Illustrator because I believe that if you already have a letter, you should not build it again. Then we have these waves. We are left with these waves and this glass or container icon. This glass shape and this wave shape, these water waves, we are going to design them in Illustrator. Let's go to the Illustrator, and I'm going to set up Illustrator a few settings according to this design guidelines and our grid system. Then we're going to design it. Let's switch to Illustrator. Now, I have opened up Illustrator. If you go to a Edit and Preferences, go to General. What I did over here is in the Preferences, I've set this increment to two pixels and Corner Radius to 16 pixels. Everything is in even numbers, or you can see this grid is built on 16 pixels. It is really good because your main icon is going to be converted into a lot of smaller sizes. 16 is divisible by 2 many times. This is one thing. Then go to Guides & Grid, and grid every 32 pixels and subdivisions four. This is how I have set my grids and my keyboard pixel increments. These are the settings you need to do for your Illustrator. I'll press "Okay". Now, we're going to open up a new file, "New". The size will be 512 pixels, because it is the main size. It is the biggest size, and use RGB Mode. We are going to design for RGB digital devices. Preview Mode should be in pixels, Raster Effects should be a screen. Align New Objects to Pixel Grid is better if you check this one because your items or your design elements are going to stick to the grid lines. So this is better for better alignment. Also, we are going to switch to Pixels, because we are designing everything in pixels. Press "Okay". Here we have our canvas. Let's zoom in and zoom out. As you can see over here we have our grid laid out, it is easier to design this way. Now, we are going to draw our glass shape. We're going to grab our Pen Tool. First, we're going to draw just a simple shape, straight lines. Then we're going to expand it over here. Straight lines, like that. Click over here, and click over here, and then click over there. We have just a square, or as you can see a rectangle. We're going to press "A" key on your keyboard to select this Direct Selection Tool. We're going to select first this one. I'm going to move it 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. So 10 times over here. I think it moved 20 pixels, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Like that. If you want to move it more, you can move it more. 1, 2, 3, 4, 5, 6, 7, and 1, 2, 3, 4, 5, 6, 7. We have almost got a very nice shape of this glass over here. What we're going to do is we're going to round these two corners. If you want to round them, you can round them. Just a simple straight glass shape, you can leave it like that. What I'm going to do is I'm going to press "A" again, and I'm going to select this corner over here. You can see over here, there is a small icon over here which is this. Whenever I hover on this dot, I can drag it like that or click on it. If you double-click on it, you can see here is the radius. I'm going to set it to 32. Also this one, I'm going to double-click and set it to 32. Everything is in even numbers. There is one more thing. Go to the Stroke and make it at least 32 pixels. Like that, very thick. Or if you want you can go to the 24 pixels, but not less than 20 pixels. Also keep this in even numbers. This is our main shape. If you want, you can just remove this inner color over here and keep this stroke over here. We have this stroke. If you want to move the stroke inside or outside, you can move it over here like this. It is looking good. If you want to do something like this, align stroke into outside, middle, or whatever position you want. I drew it in over here like that, so I'm going to keep it like this. Our main glass shape is done. Why I did it in 512 and 512 pixel canvas? Because our main icon is going to be 512 by 512. I need to see how much space it is going to take. If I need I can expand it by pressing "Shift" and "Alt" or "Option key", and see where I can make it how much bigger. Also, I can remove the stroke if I want, like that. It is to see how much space it is going to occupy. This is really good shape. One shape is done. We have created this shape over here. I'm going to save it in the Desktop. I already have built it, so don't worry about it. Glass shape. Why I built these shapes in Illustrator? Because the Illustrator is basically the real tool for all these vector objects and nice, crisp, and really good corners. Photoshop is a raster software, so it is going to show some problems. Like jagged edges or something like that. Also, you can see over here the stroke is a bit not even so I'm going to make it an even number, maybe 32. Keep in mind everything is always design in even numbers so it is perfect fit. Let's move on to the next lesson. We are going to design our water shapes or waves. 27. Designing Water Waves in Illustrator: In this lesson we are going to create these beautiful water waves in Illustrator. So let's get into the illustrator and start building this shape. Now, again, I'm going to create a new file with the same dimensions, 512 pixels by 512, RGB, 72 pixels screen and pixel preview mode and press "Okay". I'm going to turn on my grid over here. It doesn't matter much of the grid, but it helps you use bend tool in a lot of ease. It is very easy to use bend tool like this. I am going to drag my color scheme over here. I'm going to open up and you can see what here, Water Waves Deformed. I have this color scheme. If you go to this "Swatches", you can see over there I have loaded it over here. If you don't have it over here, you can load it over here. You press "Other Library" and go to "Desktop" or wherever you have saved this file, and Water Waves and "Open" and it will be loaded over here like this. You can drag it over here like this. I all ready have it over here, so I am going to use these four colors. I have loaded these four colors into my swatches. If you don't know how to load, I've all ready showed you that you need to load these. You can see over here Water Waves Deformed. If I click over here you can see, it is going to load my library. I am going to share this color scheme file with you, so don't worry about it. Here are my colors arranged and this is my file or main canvas. I'm going to grab my pen tool. Just think that this is your main app icon. I am going to start drawing over here, maybe from this point or this point. If you want to be very accurate, you can draw from here and click over here like this. Drag and make sure your drag to the ends of these small boxes. You can see they are both same at the both sides and leave and then I'm going to click once over here or over here. Over here makes sense. It is really symmetrical, so I'm going to click over here. I'm going to repeat this again and again. Sorry. "Control Z" or "Command Z" to go back. So I'm going to do it again and going to click over here. Now, we are going to click outside this canvas like this just to fill it up because we are going to clip this shape into another shape, which is our main icon, or maybe glass or something like that or even heart. We don't need accuracy over here. I'm going to click this. We are going to remove the stroke. We don't need any stroke over here, so make sure you don't have any stroke. Now select this layer and we're going to go to Swatches, and we're going to use this color. Actually the stroke has been selected, so I'm going to shift to this one. It is our foreground color and remove the stroke again and we are going to use this color over here. I'm going to press my "Option" or "Alt" key to duplicate it like that. Just drag it over here, drag it down. You can also press "Shift" to make it align in the same line. Here we have the second one. Move to the second color and then repeat this again and again. We are going to select the third color, which is this sharp color. We are going to create another copy, which is the last one, and we're going to select this darker color. You can see we have created our waves. They are a bit pointy. If you want some change into it or some drama added to this shape, you are going to distort it. For distortion, there are many effects. Like you can go to "Distort & Transform" and you can use this zigzag. Enable the preview and make it smooth and reduce the size ridges per segment zero, because we all ready have ridges. You can see over here, these are totally different waves. You can play with the size. Whatever size you like, you can go ahead with it. I can go with two or maybe one point. It's up to you. These are totally different waves. There is one more effect which I used is go to "Transform" and go to "Shear". I used shear because I'm going to deform them. I'm going to show that these are moving. I use this angle. I use this angle along with, I guess, 60 for this axis. Let's see the preview. My waves have sheared or moved, deformed. This is the main purpose, while you are creating your icon elements, you can deform them or use them. Create some interest in it. Click over here like that. Try to experiment with it, if you like some angle over here, you can use that. Also we can move it in the place like this. See the effect what effect is basically coming. There are few more things like if you want rounded corners or something like that, you can go to this "Stylize", and you can round the corners. Preview. So ten points or maybe 20 points or whatever you can see over here. Now the corners are rounded and they are looking very smooth and very nice. There are many ways to use these water waves and try to round them or try to create variation with deforming them or using some other effects like this. I showed you this zigzag. You can also use these other effects like this "Wave". If I go to this wave, sorry, I haven't selected any layer or any object. I'm going to go to this "Wave". Let's see what it is going to show us. Now you can see there is more drama into it. Few waves are high and few are very low. You can use them like this. You can also select single layers. If you want to get some variation into this one or this one, you can select this and go to this wave effect and try to bend it over here. Maybe you can use something like this. Now you can see here we have a much more difference like this. Also you can select this one and use the same apply. We have some different affects applied on over here. You can save this wave's form and we can use it in our final app icon. We are going to clip these four waves into our heart shape and droplet or even our glass. This ends our main shapes creation, our main Illustrator part of this exercise. I'm going to save it and we're going to move on to the next lesson. Let's see what we can do in Photoshop finally, to convert these and clip these into nice app icons. Stay tuned and if you have any questions, don't hesitate to ask me. I'm always here. I'm going to help you in everything. If you don't know much about Illustrator, I can guide you where to get tutorials or maybe good courses on the basics of illustrator. Let's move on to the next lesson. 28. Designing heart Icon: Now we are going to get into action and we are going to grab these waves and we are going to bring them into Photoshop. We're going to create first the heart icon and then the droplet one. They both are basically the same. I'm going to create the heart one then I'm going to give you the droplet one, drop icon, app icon for the exercise. What we're going to do is we are going to select everything. Control A and we're going to copy it and then we're going to switch to Photoshop. Here we have this Android product icon template. I'm using this 2.0 which is free one from apply pixels. Previously it was appicontemplate.com. on the right side you can see over here we have 512 and edit me and save. Double-click on this. It's smart layer. If you don't know what a smart object or smart layer is, then you need to see my other course. First we are going to go to this square. Turn the grid on and we are going to hide everything this glyphy and also I'm going to hide this background, and with these edges, and this one too. What I'm going to do is I'm going to select this tool, this custom shaped tool, and I'm going to select my heart over here. It's not my heart, but it's from some Photoshop's guy. He left it over here. We're going to, if you don't see this heart over here, you can select these all and they're going to show all the shapes. These are the default shapes with Photoshop. I'm going to click this heart and we are going to use it over here. Press "Shift" while you drag it over here. If you want some more, I think I can also leave it if I want to expand it or make it out of proportion. Like that. This looks good. Now I am going to use this grid. I'm going to size it, Control t or Command t, and I'm going to size it to the corners of these circles. It is looking really good, good proportions. These grids are basically going to help us build a proportional icon. It is looking very well balanced and nice. I'm going to center align it. This is our main heart icon or shape. Then we're going to move it to white, color white. Now the next step is that we are going to deselect it and we're going to paste our layer we copied our object, we copied from Illustrator. When we press "Paste" or "Control v" or "Command v", we are going to use this smart object. Like this, and we are going to align it over here, like this. Now you can see at the right side the heart icon is over here, and smart object, our vector smart object transported from Illustrator is over here. Simple trick is that we are going to press "Option" or "Alt key" and get in between these two layers and click once, and it is going to clip inside this. Now this is how we're going to clip hide this grid. You can see our heart icon is almost ready now. Few more things we can do. Now it is clipped. We can move it around, like maybe we need to, sorry, Control t and we can rotate it like this. Maybe like that. We can also re-size it like this. It is looking really good, maybe something like this. These waves are looking really cool. The fun part is that leave everything over here. Now, if I see some problem, like if I want to, get more distance between these layers, I'm going to double-click it and it is going to open up in Illustrator. I can just fix it like that. I'm going to move it like this, move this one a bit down like this and Control s, close and it is going to be updated in Photoshop instantly. This is really cool that you can work with both Illustrator and Photoshop at the same time. I am going to again double-click and I am going to get that distance better. It is looking a bit odd to me. Let's go to Photoshop. It's really cool. If you want to move it more down, you can use something like this. Also, you can reduce the size, size of the waves, like this. Now I think our main icon is almost complete. Close it and click "Yes" for saving. If you go back to this Illustrator, sorry, Android product icon template, you can see your app icon over here. It is really looking great in all sizes. Very crisp, very nice. You can see on here something inside this thing, we are going to remove it. I think it's some finished layer. These are finished layers and shines. If you want to use them, you need to drag your design. I'm going to group it. This is my design, and I'm going to grab it and remove it downwards over here, where we had this. I'm going to click it and like that. Maybe above this or below this, like this. I'm going to remove it, don't know it is coming inside this glyphy. I'm going to move it over here. I don't know why it is using some kind of square over here. Maybe I need to move it outside of this care. We are not using this care, but we are using basically the circle over here. If you want, you can move it to the circle area over here like that. I'm going to use the circle instead of this square. I have moved by design over here and I need my design to be moved over here like this, and I'm going to hide the base. It's perfect, and I'm going to hide the grid. This is looking great. I don't know why it was showing something at the background. There were some layers, a lot of layers. Make sure everything is perfect. If you want the alpha and beta over here, you can use it. If you open this folder, you can use beta or alpha versions if you want to. Then your app icon will be like this. I prefer it without anything. This is our main icon. We have designed our main icon. Now for extracting all these icons, I am going to show you everything in the last lesson. Stay tuned. In the next lesson we're going to create the app icon of that glass with the water, and we will be using another template. Let's move on to the next lesson. 29. Finalizing Glass Icon in Photoshop template: Now in this lesson we are going to use our glass shape icon we created in Illustrator, and we're going to bring it in Photoshop and we're going to use another app icon template, which is Material Design Icon Template and it is totally free. There are very few problems with it, but still I think it is one of the best and it's free. So we are going to start off with this blank icon and now if you open up the right side layers panel and go to these icons at the bottom, you are going to see this 1080 and it says, edit. We are going to do everything in this area double-click this "Edit" and basically it's a smart object. Now we are going to create this one. We're going to go to Illustrator and we're going to grab this layer, we design this glass shape and copy it. We're going to paste it over here in Photoshop as smart object "Control A" and also we can use this grid with precision like this. So I'm really loving this grid. You can see all here I use these inner lines to align this app icon and this glass. I'm going to hide this grid. If I am correct, I am going to use my small eclipse, sorry. I'm going to use my big eclipse and if it's color is something else, double-click it and use the white color. Remove all the affects on it. So if it has stroke or the color overlay or drop shadow, just remove them. Also, if you see over here the colors are not working, make sure both these opacity and fill are set to 100 percent. So that is it and we have already used this one. Now we are going to go to this Illustrator again, and we're going to open up our water waves, copy these. We're going to also import them in Photoshop, paste them over here and we have already pasted them all here like this. What we're going to do is they're going to get behind this vector shape, like that. Now select this vector smart object and press "W" to select the magic font on Photoshop and select this inner section of this vector smart object. Go to select, modify, and expand the selection by one pixels. I'm going to create another layer over here like this layer one. Press "G" and we're going to get some color over here, which is going to be white. So like this, we have white color inside this and what basically, I'm trying to do is I'm going to clip this inside this inner layer. So I'm going to clip this with Alt option key and this is how it has been clipped. Really looking great. So if you want to use some water waves, you can contract it and expand it whatever you want. You can see over here, now I'm using something like this. Also, if you see in my original icon design, I removed the fourth color over here. So what I did is I double-clicked on this and remove this fourth layer and "Control S" or "Command S" and I am going to go back. You can see we have just three colors. If you want to move them more, you can move them along like this. Make the distance a bit bigger, like this. Because it's a glass it will look really cool if we have more distance. Also, you can rotate it maybe to create some attraction or something like this. So maybe something closer to this, move it like that or something like this here. So these fine tunings, they are going to take more time. For me, at least that take more times till the time I'm not satisfied. So I just keep on moving these around. So this is how our app icon is going to be. Now you can also use transparency on this big eclipse. So I'm going to set this opacity to 50 percent, like that. So one more thing I think it's a bit above, so I'm going to move it a bit down. There are my three layers. So I'll just try to group them. It's better that your design is in one group and you can move it down like this and "Control S" try to use the grid, see where it is in the grid. Maybe, we can expand it a bit more. Use more area around it. Let's hide this thing "Control S" and let's see how it is looking. So let's zoom in and it is looking really great on all sizes. You can see over here, this is our app icon. We have this on this view. Then we have like this one on our MyApp Store on Google App Store and it is looking really cool on our main screen and I think that's it. Now, for you guys, I'm going to give you the challenge to create the drop icon using the same technique. You can upload that designs on the URL I'm going to share with you. So upload your work over here. I'm going to evaluate your work and let's see how you are going to perform. So let the challenge begin. 30. Extracting all icon sizes for Android Devices: Okay, now in this last lesson, I am going to show you how to extract all these icons, from both those templates. So I've used this Material Design icon template and Android app icon template 2.0. You can also download the 3.0. version, but the method will be the same, for this guy, Michael Flarup, he has designed action file. If you go to these actions, if you don't see actions over here, you can go to Window and turn on these actions. In the actions, I have copied those actions over here. If you don't see these actions, you can click this and you can load actions. Go to this load actions and browse that file. I have this Android product icon template 2.0. ATN file. Action files have this extension ATN. You need to load it and it will be like this. Once you have loaded this, make sure that you have your icon. There is nothing around it or nothing extra around it like this create turn it off or any shadows or problems. Make sure it is okay. Then we are going to use it on this file. So go to this file and just click on this and, go to this. First one is export all sizes, this is the basic action. This is the action folder, if you click over here, you can see the folder is closing and opening. Now click on it and press play and we are going to see this dialogue and we're going to save it like this. I'm going to save it on the desktop. Let's see, I have a lot of folders opened. These are the sizes it has generated 512, 192, 144, 96, 72, 48. Now one size is missing, which is 114. If you want to generate it. Don't worry about it. I'm going to use this 512 and I'm going to import it over here like this and I'm going to export the size, which is going to be 114, like that and save. This is how you are going to create the 114 size, which is missing from this template. Now I'm going to drag it inside this and I have a complete set, 114, 512, 192, 144, 96. So this is 114. So this is how you are going to create the missing size over here. It's just a bit of headache, but I think it's worth it if you don't need to spend $10 per month. Now coming to this Material Design icon template, it is built on the same technology. So what we're going to do is we are going to just use File Export, Save for web and it is going to load up in the same way we are going to save it like this, save and these are all the files. I'm going to replace them and let's see the images. So we have this 512 icon, I think I just selected the square. I don't know. Let me go to this. So what it says is that hide this background. So try to hide this background before you export, like that. This is really good if you know how to do it. Save and save and replace. So now you can see I have these icons and they are transparent from the sides. So if I drag it in Photoshop, it is going to be transparent from all the sides. I really love this transparent area around this white area. It is looking really cool even in the screenshot over here. I think if I did it for one of my clients, I might have charged him at least $200 for this app icons or maybe more. Now this is the last lesson for this course. Your challenge is to create similar app icon with a drop using the droplet shape. If you have any problems, let me know. This is a really solid scale. I think normally, minimum amount for an app icon you should charge at least a $100 for creating one app icon, because we are going to create like five or six sizes for all the different platforms or resolutions for Android or even for iOS, you are going to create for three or four sizes. So I will try to update you guys or if I have anything new, I'm going to add it to this course. This is the last lesson. I am looking forward to see your designs and I will be waiting. Let's move on to some new awesome skills. Do check out my other courses and good bye, take care and have a nice day.