Setting up our Document

Gary Simon
A free video tutorial from Gary Simon
Professional Freelance Designer & Course Instructor
4.4 instructor rating • 17 courses • 249,110 students

Lecture description

Now let's setup our document in Adobe Illustrator and ensure all of the settings are correct.

Learn more from the full course

Effective iOS & Android App Icon Design

In this course, learn how to design spectacular app launchers for both iOS & Android using Photoshop & Illustrator.

01:12:15 of on-demand video • Updated September 2014

  • Design & Deploy Effective App Launcher Icons
  • Design Android App Launchers
  • Design iOS App Launchers
  • Present App Launchers on 3D Phones
  • Understand Official iOS & Android App Launcher Specifications
  • Use Adobe Photoshop to Design App Launchers
  • Use Adobe Illustrator to Design App Launchers
English [Auto] Clue in Welcome to this lesson where we're going to design iOS app icon launcher for a fictional app based around GPS coordinates for known treasure locations across the oceans. Now of course this app doesn't exist but if it did our objective would be to create an icon that conveys the idea behind this app. Individual manner. So we have two things of play. We have GPS which is location and then we have the ocean. My idea is to use a PIN which is commonly associated with locations or pins on a map and then a very simple manner. Illustrate water alongside it. So in Adobe Illustrator here we're going to go file a a new and for the name. We're just going to give this IO s icon and number of our boards of one d with. OK so this is the important part. And if you recall from the previous lesson we need to change this to pixels and I'm going to specify this. You're a 2 4 x y 1 0 2 4 X right. So right now we don't need to worry about bleed bleed. Usually is reserved for when you're having something printed. So we're not to worry about that at all. So make sure that that's zero. And then over here where it says advanced the color code we want R.G. be if it's a c m y k that's usually again for print. So we're going to leave our G-B and raster effects screens 72 and we can go ahead and turn align new objects to pixel grid off if it was already on. And that is it. So let's go ahead and hit OK. And this is a large size so I right now on my resolution. It's at fifty six point or 56 percent. If I had control one that gives to 100 percent but we don't really need to worry about that. I have to zoom in and out you can hit all and then use your mouse scroll wheel or you can use the zoom told on here. All right so basically what we want to do is get out our rounded rectangle tool so you just left click over here on the rectangle and just choose a rounded rectangle tool. What we want to do now is simply left click once and that's going to give us the rounded rectangle dialog box in here. We want to specify that size again for our container shape. So 1 0 to 4 hit tab to go to height 1 0 2 4 and you could just you don't have to hit X it will automatically enter that for you. And then the corner radius and this is real important if you were working at a 512 by 512 it would be 80. Since we're working double that size it's going to be 160. So that is our corner radius which is the board that specifies how large the corner radius will be. So I'm going to. OK and take the selection tool and just move it over here. And mine right now has a stroke. We can go ahead and get rid of that specifies zero and then hit enter and I'm going to give the background here I it different colors so. Now what we need to do is I'm going to get the layers right here this panel down here. Just click on it. And by the way if I'm working with any of these panels that you don't see all you have to do is go to View or window rather and just find it right click and click on it. And so over here we have our layers and if you drop that down we have our paths so I'm going to rename this one to container just by double click on it and then enter after you enter into the text. And we want to create just a background. So you're just a regular rectangle tool and I could just left click again over here leave it at 10:24 by 10:24 and hit OK. And I'm just going to you can always use your mouse Ari or keyboard arrow keys to get it lined up. We want to position it down here beneath it. So it's left click and drag it beneath the container. Double click it and just give it a name of B.G. and then I'm just going to give it to aid kind of like a dark gray color. I ain't going to click over here in swatches and just chooses gray right here. All right so it's kind of difficult to design when the size of our container here for the iOS app container right here is the same size as our large container out here. So what we can do is edit the art board so to do that we can click on this button document set up. You can also access that by going to file and document set up and then click on our boards. This will allow us to adjust the size of our canvas. Now you could do it by dragging these up down left and right. Or you can specify the size over here. So I'm just going to specify. Twelve hundred twelve hundred and or. All right. And then I'm going to take our B.G. path. Hold shift and all left click and drag up. All right so now we have a little bit of margin between our actual design and if you need to move this over and adjust these you can scale it just a little bit and then I'm going to click right here and that's going to lock it so we can no longer accidentally select it. OK. So now what I want to do real quick is just give this a color for the background. An ugly make it a gradient. So to do that over here under gradient and again make sure you go to window and you can specify gradient. If you don't have that up and just choose Lennier And if you hit G on your keyboard it allows you to specify the direction and the width of the gradient. If you just start out down here hold shift and that way it stays perfectly vertical and they go up. We can have a perfectly vertical gradient in what we want to do is I want the dark color to be near the bottom. You know we're going to leave that at the top and if I don't click on this color picker over here we can specify the color that we want it to be. For now I just I want this to be 100 percent black. All right. And then this color. Double click that and then click over here to get the swatches I'm going to make this a dark blue of sorts. And you can adjust the orientation to position of these by moving them around. So if I just move this down like a red around here I'll be good. All right. And that is it just for this lesson. So in the next lesson we're going to get started with designing the actual pin. All right so I'll see you then.