iOS App Icon Design Tutorial in Illustrator CS6

Key Takeaways

[Music] hello this is Gary Simon with Gary simon. net and designc course.com and today we're going to design this IOS app icon uh so our work primarily will begin in Adobe Illustrator CS6 and we're going to start by going to file new change units pixels change width and height to 512 we'll hit okay and also to note I'm going to be talking quick because I want to get this done within around 15 minutes or 15 to 20 minutes uh so I'll be talking fast uh but you can always just pause stop rewind and follow along so uh one of the things we're going to start with here is the rounded rectangle tool and one thing we need to do is go to view snap to grid view show grid uh and then what we can do is at the very upper left-and corner double click and we'll get this rounded rectangle dialogue box and we can set the exact dimensions of this rangle rectangle and make sure Corner radius is 80 we'll hit okay and then what we can do is remove this stroke to zero and we're going to give the foreground color a gradient radial now hit the g key and right around here we'll double click and that'll give us like a spotlight effect basically now I don't want it to be that bright so we'll double click here and change it to right around that lightness okay and now what we'll do is create a an ellipse and right around here in the center we'll hold shift and ALT and drag out to right around there hold the G key and we'll redo the gradient holding shift all right and then we'll give it a stroke of six we'll click stroke and align a stroke inside we'll click over here to select the stroke and give it a linear gradient and we will change the radius to 120 now we'll just adjust the colors here to give it the effect of chrome and yours doesn't have to match what I'm doing so you can experiment with whatever you want all right and maybe one more over here make that a little bit darker all right and we're going to duplicate this so crl C crlf holding shift and ALT down we will drag in just a little bit and change the stroke this time to something larger well we'll try 12 and we'll adjust the gradient just a little bit more and again you don't have to be perfect all right now what we're going to do is take this inner one contrl c contrl f shift and ALT and drag in change the stroke to two hit enter we'll remove the foreground color and we'll also adjust the gradient here just to two color Pickers and something a little bit darker to just barely noticeable okay and contrl C contrl F again to duplicate and drag in right around there and this is just barely visible all right uh now what we're going to do is take this uh inner one again crl C crlf we'll enlarge it and we'll remove the stroke and give the foreground color a radial gradient and the G key is selected so we'll take this one right here and make it white double click this one we'll leave it there and we'll change it to zero opacity oops and we'll change the trans the opacity right here to around 70 okay uh now what we can do is Select this the first ellipse we created and duplicate that drag it in use the up and right arrows just to get it selectable and position it right around there and change the stroke to we'll try three and then we're going to change the gradient to a red so select RGB double click this one make it slightly darker all right and let's go ahead and create some reflections with the pen tool first let's select the glare that we created or the glow and then we'll select the pen tool and create some Reflections and if you don't know how to use the pen tool there are plenty of tutorials that will show you uh exactly how to use it and if you don't know the pencil you you definitely need to know it I'll Che opacity here to uh yeah 30% is kind of good we'll duplicate that and just resize it slightly and we'll keep it right around there and then we're going to create a real quick Sparkle if you will now I'm hting control z uh to undo now because I'm going quick I'm not going to make this perfect obviously it isn't but just for the sake of moving along will I accept imperfections uh okay and then we're going to take this right here uh the inlow duplicate that scale it in put it right around here maybe make it a little bit brighter okay uh one last thing we'll take one of these Reflections duplicate it scale it down a lot and drag it over here and make it stand out a little bit more that's fine now we'll leave the blend mode normal let's go to gradient and yeah that's why we want to change this one from black to white and then adjust the right back down around 40 okay all right so now what we can do is I we'll save this and we're going to export it also as a PSD I'm just going to overwrite this one I created earlier and when we exported as a PSD we'll import it into Photoshop I'll just name mine app icon 2 and make sure right layers is selected and screen is at 72 we'll hit okay and then in Photoshop I will go to file open and open that file we just created and I'm going to adjust the canvas size here to let's see here 850 by 600 I'm going to select the paint bucket tool first expand this layer group create a new layer control shift n enter and put at the very bottom and color it white and then create or take the uh elliptical Marquee tool and right around the center we'll hold shift and ALT and drag out and we'll create a new layer control shift n hit enter and we'll drag it up top here and we'll color it a a bright blue and then we will hold the ALT key and hit the delete key then what we can do is go to filter blur gajian blur right around there and hit okay and then we can experiment with the blend mode so select up here twice and then you can hit your down arrow key to start experimenting with different colors so I'm going through each one to see if there's one that I like and I did see one initially which would be this one right around here and I'm going to select the brush tool and make a pretty big brush control shift n for a new layer and select once and then yeah I think I like the linear burn on that one and then uh I'm going to take this uh free leather texture which is linked in the description of this video and I'm going to rightclick it copy image and then selecting this down here the very first layer we created in illustr Ator control shift n and make it a clipping mask and then contrl V to paste control T to resize and then hold shift and ALT down to scale it down proportionally select move tool hit apply and then we'll change the blend mode of this as well and I'm just going to experiment to find one that I kind of like this one isn't too bad neither is is overlay again a lot of this is all just about experimenting with the different blend modes I think I might use that one which would be divide and with the opacity at 35% all right so I one more thing I'm going to hit control shift n hit okay take our brush tool change the size down a little bit make the foreground color white I'm going to make that a little bit larger and maybe one more smaller one down there actually a little bit smaller than that and create a new layer maybe a bigger one and as you can see you know you can add a lot of different touches and which will ultimately really affect uh how this looks very quickly and easily and basically this layer group contains our icon so then you can take it you can flatten it if you want control e um and then you can copy it and you can actually create your your uh your icon there so that is the tutorial um I hope you enjoyed it it's pretty simple as you can see it's very easy to create um a pretty good-looking app icon obviously you'd want to spend more time uh than I did because you can do so much more with this uh but that is it so this is Gary Simon once again from designc course.com and Gary simon. thanks