Designing the Logo & Project Resources

Gary Simon
A free video tutorial from Gary Simon
Professional Freelance Designer & Course Instructor
4.3 instructor rating • 17 courses • 233,507 students

Lecture description

In this video, we will use Adobe Illustrator to design the logo for our UpcomingGames app. You can use any other vector-based graphics application.

Learn more from the full course

Create a Full Ionic App with Material Design - Full Stack

Build a beautiful hybrid app that people will actually want to use! Go from design to card, start to finish.

03:41:19 of on-demand video • Updated June 2017

  • Create a relevant and effective logo
  • Building App Mockups in Adobe Experience Design (XD)
  • App Prototyping with Adobe XD
  • Connect to an API
  • Understand Ionic Templating, Storage & Material Design
  • Integrate Search in an Ionic App
  • Integrate Cordova Plugins
  • Integrate Angular Animations
  • Build an awesome Ionic 3+ App
English [Auto] All right so I'm going to use Adobe Illustrator for this although you can use any vector application and we're not going to be doing a type of logo that's real complex and it relies on specific tools that are only exclusively available to illustrator. So having said that just-I create a new project. And in this dialog it doesn't really matter what are within sizes for our canvas starting out. Just make sure that it's large enough to work with. So we're out here just using 12 80 bytes 720 and at 100 percent. This fills it out pretty good. So what we want to do now is you know Attis when you're trying to consider designing a logo for something you know a lot of people get out pen and paper and a Scrat sketch and you know they draft up ideas. I I have a Wacom tablet sometimes I'll do that or sometimes if you're thinking about a new project something might come to mind initially which was the case with this. So again this is about upcoming games and the name of this app happens to be upcoming games. I happen to own the domain name so upcoming in games so that's what I decided to name it. And I'm a big fan of letter Mark logos which are logo or symbols that are based on the initials of the business name. So in this case it would be you or Yuji. And I thought of a way that I can combine three concepts. So the first is the you the G and also upcoming. So to get started for this particular Mark we're going to do is use the ellipse tool right here left click and drag out and Miskin a whole shift all and left click and drag. All right. And we're going to take the stroke up quite a bit and we can adjust this in future. I just wanted it to be pretty thick just for us initially to work with. And by the way to zoom up and now I'm using my alt key and the scroll wheel of the mouse. All right so now we're going to take this tool right here it's the direct selection tool. It allows us to select the individual anchor points. So we're going to take the top one and just delete it. All right so this is going to form the bottom of the U. All right. Next we want to use the pen tool and we're going to hover over it just until we get on this anchor point. We're going to left click hold shift to make sure it's perfectly straight up and down and left click again. Now we can have skate and then do the same thing over here. Left click and there we go. All right so now we have our U-shape and let's work on the aspect that's going to illustrate the concept of upcoming. So you know looking at this shape this very simple U-shape you know how could we potentially illustrate that. So that's one of the questions you know you can brainstorm and ask yourself and just look at the shape and the form and figure out you know what we can do. So the idea that I had was to take this direct action tool and take this left portion and just drag it up to around there and maybe drag this one back down just a tad bit or even more so. All right. So just looking at this right away I could see that we still have or U-shape but we're also beginning to form a potential G. So that's how the Yuji could be fit into here. But for now again I just want to focus on the upcoming portion. So when you think of something going up you think of an arrow correct. So let's go ahead and create a triangle off to the side and place it to the top up here. So I'm going to zoom up here. Take a pencil. I'm just going to click one one good point here. Hold shift to make it perfectly straight and then left click one right there. Now I'm going to hit escape Marigot to left click and drag out choose the anchor point tool. And if we come in in the middle we should find this little. It just changes intersect right there. Now find the center of that this point right here. So then we take the direct selection tool. Hold shift and go up and then we take the pencil connect them hoops right there. All right so now we can go ahead and get rid of the stroke and then also give it a black color for the fill and then place it right in the middle to where that vertical intersection line comes. All right. That looks good. I think I want to make this thicker for working at this particular size so what we'll do is get that up to around 76. Now again depending on your size 76 might not be accurate because we're not working with the same exact units so I think I like that pretty good. To change the size of this and make sure it stays on the center axis you're holding Shift in Allt. And then just dragging it. All right so we have for you. We have the upcoming aspect which is two of the three ideas I wanted to convey. Now let's get the G in there. Just this right here probably isn't enough of a g. So usually the G will have this little portion that comes out and comes into the center. So let's go ahead and work on that first before I do that. I'm going to take this outline right here and we're going to go to object path. And unfortunately you showing up off the side of my screen. But it's path you want to choose outline stroke. All right. Now I'm going to zoom up here just to this portion and take the rectangle tool and just hover over here to where you are in the very edge line here and to this very edge over here. Wasn't quite even up. All right so then I want to take I'm going to make this black and I just drug it over here a little bit and then we look at it like this. That can definitely work. But to give it a little bit more style and not take the direct selection tool and choose this this anchor point drag it in right till we get that line that shows up to let us know that it's right there there we go. And so that is the final letter marker here. So we have our you r g. And the up arrow for upcoming games. So now when you have your final form Dine-In you know you're not going to EDID anymore. You can go ahead and use the Pathfinder and take these three holding Shift and left clicking. So if we come outer layers we'll see them here. They're all selected and we'll go to window. We'll go to Pathfinder which is right here and we'll choose this one right here to unite them all hoops first before we do that when it's like this because there is a feel associated with this. So if we come out here I can get rid of that fill path right there. All right so now I like them all. And we unite them and now it is one single path. All right. And then finally we're just going to have the type to worry about and there's not anything too unique happening there. I'm just going to left click here and type in upcoming games with no space. And this is where normally I would just go through my fonts and use the up air or the down arrow key and start you know just seeing exactly what type of font that I want. That looks the best. In this case this GI right here or this letter mark is more of a condensed type of G. And you. So in that case we want more of a condensed form. I have a font called Franklin Gothic book. Let's see here it is condensed and I just found it specifically it's called Franklin Gothic medium condensed. And if you don't have access to that font I suggest that just going to a site like da Fonte dot com right here. For instance going to San Siro section sort these are more options. Let's see here are only free if you don't want to have to pay obviously show 53 or 100 fonts and then just type in upcoming games for the preview. Oops. I don't want calligraphy. And there you go. Just go through any of the ones that you think look good and are condensed. Make one of these and download it. Get it installed and you can choose it based on the name in your graphics application. All right. So ultimately want the size probably to be right around here. I'm going to hit Control shift. Oh convert these to outlines here right there looks good. And this is going to be the the logo and also the symbol right here which will serve as the actual the app icon as well. And we will place this logo as well inside of the splash screen. When the app loads and also this icon up in the toolbar or the navigation check section of the app interface. All right so go ahead and save this somewhere in a project folder because we will be using it and accessing it later. All right so in the next section we're going to go ahead and step into Adobe XTi or experienced design to start designing the actual app layout. I'll see you then.