Design 2D Game UI in vector with Inkscape! | István Szép | Skillshare

Design 2D Game UI in vector with Inkscape!

István Szép, Designer and design teacher

Design 2D Game UI in vector with Inkscape!

István Szép, Designer and design teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
20 Lessons (3h 55m)
    • 1. Welcome to Game UI design with Inkscape!

      1:11
    • 2. Before we start!

      1:32
    • 3. The 3 Cs of good game UI design

      3:57
    • 4. What is a HUD?!

      2:51
    • 5. Before you draw: SKETCH!

      2:02
    • 6. Basic button bases

      18:13
    • 7. Aligning buttons

      4:20
    • 8. What makes a good game icon?

      4:22
    • 9. Create very simple icons

      5:54
    • 10. More complex icons and drawing methods

      9:16
    • 11. Complex icons for a fantasy game

      19:30
    • 12. Design a matching icon set for a ninja game!

      18:39
    • 13. Space shooter UI design - Part #1

      18:05
    • 14. Space shooter UI design - Part #2

      18:29
    • 15. Fantasy game UI - Part #1

      19:38
    • 16. Fantasy game UI - Part #2

      15:44
    • 17. Fantasy game UI - Part #3

      19:07
    • 18. Fantasy game UI - Part #4

      11:44
    • 19. Gemstone game UI - Part #1

      20:42
    • 20. Gemstone game UI - Part #1

      19:35
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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

288

Students

2

Projects

About This Class

A good game needs great graphics, nice music and cool characters 

- and of course a well designed game user interface!

I created this course to help the indie developer community to create clean and engaging UI designs for their games. Even if you are not a designer, you can just download this free software, and follow my course! :)

485af423

During the course we will use the amazing open-source software Inkscape. Inkscape is a vector graphical software, which makes it perfect for 2D game element design.


During the course we will learn the theory of game UI design, and we will create:

  • several icons and icon sets

  • buttons and menus in various styles

  • 2 versions of UI design for a fantasy game, 

  • 2 versions of UI for a space shooter,

  • and one version for a casual gem stone game

We will also draw an icon set for a ninja game - Hiiiiiijaaaa! Check it out! :)

64dff0c2



Important: We will create all the buttons and icons during the course, however, recreating the game screens shown in the preview and used as a base to design on during the lectures are NOT part of this course!  Also, this is a UI course, we are not working on the UX part of he design.

Although this is a beginner game UI course, a basic Inkscape knowledge is good to have. I stop and explain every single step I make, but if you are totally new to Inkscape I suggest check out my Inkscape beginner course first and learn the tools! :) 

Meet Your Teacher

Teacher Profile Image

István Szép

Designer and design teacher

Teacher

I am a graphic designer and design teacher from Budapest. I draw cute characters and clever logos, build websites and sometimes videogames. My main tool is Inkscape, a great open source design program.

See full profile

Class Ratings

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

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

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

phone

Transcripts

1. Welcome to Game UI design with Inkscape!: do you design a video game? That's great. A good game needs a nice story. Interesting characters, cool music and a very, very, very well these and user interface to this is what I will cover in this course. I will teach you the theory off you. I design and give you more than three hours off. Practical examples off Aikens Butters And you, I designed in general review, create general designs as well. A spent their faces for a fantasy game, a science fiction shooter and a carton like candy gemstone game. To create all these, we will use this amazing, simple free to gold escape. We will create scalable vector graphics and use them in any game for any screen. Yes, I mean more by two. You don't need anything. Just follow the course. Don't load escape which is free and create all the practices with me. My name is Esteban Shape. I'm a graphic designer and I'm using escape professionally for almost 10 years now. Follow my course and learn everything I know today 2. Before we start!: Hey, welcome to the course. Good to have you here. Now we will start being a few short lectures with the theory off game design and game you I design. And then we will move one straight on to draw several pieces for game user interface. So we will create icons and I concerts and buttons, and I hope you will enjoy it. As much as I enjoyed creating this course, the first thing you have to do is to go toe escape dot org's and don't know the version off escape you need for your own machine and own operating system. Also, please get a notebook and a pen or pencil ready because I will ask you to sketch. I will talk about it in a later lesson. And I will also would like you to take notes in the theory part. And remember, I am here to teach you, and I'm here to help you. So whenever you are stuck whenever you feel I'm too fast, I'm too slow and not explaining anything, or you just simply don't get it or you haven't Whatever question coming up. I am here to teach you. You are beating escape. So just ask and I will answer and try to help the best I can. And also the same goes if you finish their lectures. You finished all the course and you're creating your own art. Your own game. You I please share. Please show it to me. Police. Show it to the others. Make me proud and show off your work. Okay, let's start. 3. The 3 Cs of good game UI design: and this course, I will guide you through the process and teach you everything I know about game you. I design what is game You design a graphical user interface design. For me, it is simply the designing and creating how the user indirect video game gave you the interface highly defines the gaming experience for the player, and designing a good user interface is morphological process than an artistic one. I am a graphic designer and I I have a degree in design and art. But I still say making a good user interface is ah, like a work of an engineer. You think you research you design. You re think you, the redesign and your work, work, work and create the best, best possible experience for your player. So it's not about artistic expression. It is as well. And it is. It's great, man. It is that, but focus on designing for your player designed with the player in mind, I came up with three simple words to remember three words starting with C, and they are clean, convenient and consistent. So green, convenient and consistent. Game user interface is what we are aiming for. So what is what green for me, it is not just minimal. It is easy to understand, and it's not in the way of the player. In a clean design. No place is wasted, and it helps the immersion. I learned a lot off about design from the games I'm playing, and I learned a lot of good and bad examples. A good design is clean, and the good interface design is very convenient. It means it's easy to handle, and it's easy to learn. It's intuitive, intuitive means that don't make me guess. Oh, what does that I can mean? Like, if I push this button, do I blow up or do I blow up the enemy? What is happening? You don't want your player to guess. It has to be clean. As Jared Spool said it, good design when is done well, becomes invisible. It is only when it's done poorly that we notice it. So if a design is bad, you notice it and you start to curse it because, like, why is it in my way? I cannot play because it's so bad. These bottoms are so much out of the way and they look horrible. But if they are designed well, you are immersed in the game and you just leave for the game experiments, and you are totally leaving the game and inside the game because the design is not in your way, not blocking you and the Sir C is consistent consistence mean visually matching the theme off the game. It's again helps immersion. Think about the game like candy Crush or cut the rope or angry birds or something cute like that. And imagine it has icons and buttons with metal and blood on it, like in a hard edge fantasy game. Who would like that, like we're gamers would always stop like What is happening? Why does it looking is the evil is coming? No, it's a cute game. So think about consistency and coherency. Create your icons around the theme of the theme of your game, what the player is expecting and create around that. So that is consistency for me. So again, a good game using their faces clean, convenient and consistent. And I really, really hope that after finishing all the lessons with me in the coming hours, you will be able to create your very own game user interface along those lines. Let's start it 4. What is a HUD?!: I do this very short lesson about the hug. So what is the heart and what do I think? It's a good, huh? It means head up display. It's a special type of user interface, the one that the player is seeing during the playing. There are a lot off new games which are doing it creatively, hiding the heart. There are no score, no number, no lives. But in all other games, it was always a few hearts on the top and the scoreboard. No, whichever way you choose going for a minimal heart or know how that'll give us much feedback us. You can, for example, think about strategy games, it all the bottles and all the numbers and all the menus on the screen. For hard core strategy gamers ahead of display is all about feedback, which means you have to make it readable and visible. That's its ultimate goal. It is giving feedback to the player. What is happening? What will happen? How much ammunition do you have left? How high is your score? How much time do you have left? So this seems to reveal, but a lot of times I see hard design reaches blocking the way looking the view off the player and it is not giving information or it is giving information which is unnecessary. It is not clean. It is slow. It is limply against the immersion off the player. So don't let the heart get into the way. Remember, as I said in a previous lesson, Good design. He's done well when it is invisible. So remember, make your heart invisible. I don't say make a transfer and you know what I mean. I mean that make it as good that the player is not noticing just getting the information, getting to his goal and enjoying your game. That's the whole point. Also don't animate if it's not absolutely necessary. When the heart is animated, I think is just heavy on the machine. And it's also heavy on the player more. Most of the animation should happen in the game, and action should happen in the game. If you put too much animation on the heart than the player cannot focus on what is happening, what is his goal? So this is just a very short lesson about this because in the coming lessons I will teach you a bit about escape. We will draw a few buttons, but most of the time we will create title screens and menu screens for your game as well as simple hearts so you can create those with me and follow me through the lessons. Let's start. 5. Before you draw: SKETCH!: in this lesson. I want to talk about the importance off sketching. Simply sketch. You don't have to be an artist. Just grab a pencil and your favorite booklet or ah, tissue or a piece of paper or anything and drove here are making a few sketches for a little game I created from about the little spaceman floating in space. I'm thinking how I want to make the bottles. I want them come from the side. I want them to hanging out. Do I want to use icons? Do I want my little spaceman floating around in a proper spacesuit or make him funny? Do I want to use icons? Different icons for the Saturn? What do I need? Icons? I am thinking. I'm constantly asking myself, and I'm thinking it's not on artistic expression. I can put this little icons here on the bottom. Maybe it we were Maybe not. I am not throwing on the computer until I drew something on paper, and I'm semi sure that it will work off course. It's a lot of trial and error as well on the computer, but what I want to do is sketch out all my ideas so don't be afraid to drop. I'm just writing in my handwriting and drawing a view icons and thinking how this will look on a mobile screen. I don't care about artistic properties. I don't care about how great it we look in my portfolio because this one is not going into my portfolio. This is only for myself. And now I'm showing it to you. So don't be afraid to use a fancy and a paper. Get all those great ideas out of your head in front, off you on the paper. So I'm taking here. I'm sketching and I drawing what is in my head. And this is what you should do as well to create the perfect games and the best possible user interface for your games. So, please, Joe, please sketch. 6. Basic button bases: in this lesson, we will create basic bottom bases. Reading escape. Okay, and as well I will show you how am I drawing an escape and acknowledge you can use in your game user interface design. So everybody has a base and it has icons and texts on the base. Usually the base is a simple square, so we will start with that. Here is the square tool on the left. I drove a simple square. I said this toe millimeters. Here are the details of the square Very dispositions, how big it is. And I can set the width and the height off my scare off course it's up to me. How big are the bottles in my game? Consider if your game is for mobile or for screen and size them accordingly. No, I think in mobile games, and I don't want to make big, big buttons. So I just sighs them this more. Okay, I zoom in by holding the control key and using the mouse wheel. I could also use just a plus and the minus on my numeric keyboard. So plus and minus to zoom in and out. This is the bottom base. Our cities selected with the selection toe. I can click on any color on the bottom and color however I want. It's very easy to color here on the bottom. Left, you see the fuel color and if you double click it or click shift control F you open up the field and stroke window where you see this nice, real this triangle of colors and you can pick any color. I love that. Okay, let's back to gray and at some text with a icon on the left. That's the text tool. I just pick a fund. Anything I like. I'm not designing something fancy here. I just really want to show you how to do this. And then I dyed my text. So I clicked somewhere. And as the text is selected, I click on a color because the text is like an object in escape. I can click on it. I can select it. I can recall er it. I can delete it. So I just for seating deal it. Now I click somewhere I type and it remembers that it was white. I began the phone that can change it. Okay, this is much nicer. And us text is an object. I can scale it with the selection toe. I can scale us any other object I could and just pull on the sparrows. And it's killed by holding controlled by scaling, it will scale proportionally, so holding control means I am in control. Remember this control is proportion or scaling or turning in an angle. Now I can sell. Are both of them withholding shift? So she click on the text and shift click on the background and push contra de to deprecate . Now I have the same bottom When you duplicate seemingly nothing happened. Just a flesh. But I can duplicate it and I can move it aside because the application appears on top of the other one. What I did now I re color the text to Gray and I made the button into a bar or horizontal bar. This is another type of button you could use this. You see this a lot of webpages and here and there. But you can use it in game menus as well. So I made a certain obligation. This bar can be in front off it. It is very good in vertical menus with the color picker I selected the text and with the color picker. This is the eyedropper tool. I can pick any color from the screen, so it's easy to create a create the same exact same dark gray color for my text. Okay, let's do some more simple button can be a circle. Just use the circle tool and create a circle. When you are holding control, you can do perfect circles. If you are not holding, you can make ellipses with the delete just related. Hit the delete key. Okay, I'm holding control. Perfect circle, holding control against size it. I make the text wide. We don't enter. I break it up in the two lines and I put it in the middle of my circle. Nice. Now I will talk a lot about this in another video. But here is one thing. It's the alignment window. So I said, like the text and the bottom base, and I click on these two icons toe vertically and horizontally aligned the text toe the bottom. Now the line height is very, very much so. I make it smaller. Okay, much better. The line height was already bigger than the line height off the text. So here I have four Butters, Let's make a fix one. I will make more than 10 I promise. That's the line, this text a bit as well. So I just selected both the text and the background and align them to each other in this one. I want to show you how to round the corners. When you select the square, you see these little circles and square on the side. With the little circles, you can make rounded corners. This makes the button much more friendly and it's up to me. How much run did I make it? So I can make it very rounded, like almost circular. Or I can make it just 10 pixel or something like that Up on the top. When this ex query selected, you see numbers and you can specify exactly that you can specify how around it is your script, and if you set it back to zero or recited higher number, you can modify it. And if you don't want it to be circled anymore, rounded anymore just hit also the little icon on the right, This little corner I can and that will do the same. So we deal. So make it back to a perfect square has duplicated again with control. D I make it longer by holding this little square and holding control this way it's not lose losing the height off the object, but it gonna be vital proportionally. What I want to do now is another trick. What if I want to cut out the right? It looks like it's cut out. I just drew a wide square over it, but I really want to cut it. So I'm holding shift, selecting both of them, and I go to bath difference. There is the little I can always showing what it will do. And next to the order. There is always the hot key you can push, so control minus is for difference control. Plus, he's for merging them together. Union. I will talk a lot about these more in the during the lessons. So let's duplicate it again. I made rounded buttons. I made half rounded buttons. It is good if the button is on the edge of the screen. For example, what, as I can make, I make a little square, turn it around by holding control, I can turn it diagonally in a nice order. By holding control, I can also scale it proportionally. So holding control is Yeah. I like to think about this Always like holding control. So if I'm making a science fiction game us, you will make as well a science fiction game user interface. It is sometimes nice to cut out the edges. So I go again path difference and cut out one edge and it is looking over the cool. Let's duplicate that and do something else. Obviously, I can cut out the other edge as well. The bottom left this one. This time I am pulling down from here from the top ruler, I'm pulling down a guide. A guide is just a line. It is not visible on my exported image. It is just visible. Escape is here to help. Why? I'm doing it Because I want to match the edges. So I pulled in my being triangle a being square, selecting both of them and hit control minus which is passed difference to cut off exactly at the same angle and the same place with the age, letter, age or letter V. I can flip my base image horizontally and vertically, so age or V, and I can feed my pattern that way. That's selected again. Control the Let's make yet another button. We are not finished yet. We are halfway. So what as I can do, I can't scare my button holding control. Yes, and that will be proportional. But if I scaled by holding shift, that's ah, scaling from the middle. So it's scaling to both directions. Now I will cut off the whole edge. It controlled the I duplicated and I cut off the other edges. Well, if you like Italian pasta as much as I do, you will realize that this is a pending. No, but really, you can do this. Just select these bath difference with difference. You can only select to object If there is three. Escape will not understand it. So take care. It's only two objects Now I'm duplicating it, and I have an order of bottoms already. This could be very nice for a game. The 1st 1 I would make not been their shape. I would I would keep only one side cut, but these would be nice for a game. Menu on the bottom were on the top of the screen and nice horizontal menu. Okay, let's do one more. I'm just selecting, duplicating, pulling it down. We will do this a lot of times because we create a button, were satisfied with it, and we duplicated. So we're keeping the specifications off that object. So Okay, what does? Until now, we were drawing with basic object squares and even circle, and we were cutting off edges. What I want to show you now is how toe use different tours with editing path. So I goto path object towpath or shift control. See, as you see, return next to it here. And that means we'd the no tool this little thing narrow. I can modify the notes. These points are the notes. I can modify them all over. This is the fundamental part of escape. I love that because you can literally sculpt everything. I can move the edge of the object. I can make it curvy. I can make it Look freehand! I can do anything crazy stuff I want. My bottom was duplicated twice. Okay, I just deleted that. Mistakes are mistakes. No problem. It's easy to correct So backdoor thing you see, I can bend it inwards outwards where the little hand is appearing on an edge. I can bend it where I select corners. I can move them, I can rotate them. And here, with these icons in the top, I can odd a new node and moved that and modified that. Or I can delete an old beautician. Delete. I can move it around endless possibilities. No, the editing is the best thing in escape. If you checks few of my videos on YouTube, this is how I drove the most of the times. I have the basic shapes, and then I modify them with Butters. We just one simple shapes, so it is also usable. There I made a button pointing left or right. I just rotated with age or is mentally and it's nice. It's asking the user for next for Do something next, and I can do the same on this side as well. If my roo is not the same, I can delete it, and I can just select the bottom base, replicated. Flip it horizontally. You see, with this button or letter age, I color differently. So you see what I'm talking about? I move it to the left a bit not much, okay? And we shift. I'm selecting now. The red and the gray one and towpath union. I merge them together. Now I just have to position my texts again in the middle. But this way, both the arrows, both the triangles on the edge are exactly the same as this one on the right has duplicate my button again. I want to show you something else how to work. Let's make a line of buttons. This could make as well a nice horizontal menu us with dependent buster manually did before . So I allowing them next to each other. I color this a different color, so I see what I'm doing. I move it out a bit. Okay, back. So they are on the edge and I want to cut out apart off this right button. So what I would do? I will elongate it with no selection tool. I did these. I do this. So my text still have space. I can put my objects up and down using those buttons or pushing the page up and page donkey . Now I'm duplicating the grave on selecting both of them and do difference. So I was cutting off the gray object, which is higher than the yellow one on this yellow wish one and I was pushing control miners or path difference. But now it is cut. I can simply duplicated and pull it aside as many times as I want us. You see, the gray one has a straight edge on the left, so it is perfect if I want to start it from the top left side off the screen and running along the top edge of the screen. Nice horizontal menu, which is making the user move forward Creek, the next one creek, the next one creek, the next one, and you can highlight the one the user is at. So this is how much we have now, but it's still not finished. Let's duplicate the 1st 1 again. Make it longer. I duplicated again and I make it into a path chief controversy or path object about I calorie. Two different colors. So you see what I'm doing? I pulled his nose in, and this is one type of a button like here and here. I'm just signing outside. I give some little sign next to the butt next to the text that this is a button. This is push a ball here. I'm doing a bottom, which is two pieces. I can even make this from bigger, smaller like it's a piece of paper covering it, I can recall very differently, like the bottom base is coming out off a folder. It is also good for science fiction game now. I just duplicated this gray one so it looks like the orange one is dropping. A shadow is looking nice coming out. I can animate it. Even. I mean nothing escape but in your game, and you can move it a bit if the user is going over it. But I will talk about bottom states in one of my next lessons. So I made it even bigger, and I can make this white so it's separating the text. But now I have to resize a bit and move the text because it's too close to the edges. But all in all, it is looking fine. And now imagine the next possibility that this orange one is an I can. It has an icon, so it is communicating on even more levels to your player. So this is it. Plenty of button places for you to experiment with. Find out new ones. There are still hundreds to go. I was just showing you a few. 7. Aligning buttons: in the short lecture, I will talk about aligning and distributing your buttons for your main menu. I like this part of the game because it's already giving the whole look and feel of the game. I made up a button for my made up zombie game is just an angry face in the ruined city background. You can use any game you are working on, and we will do this actually, a lot of times in the next lessons. I just wanted to go very clear about it. So I have. My button is grouped up with the text and I just throw it in the middle. I could align it by hand, but no, I am using the alignment window. So we chief time selecting the button in the background, and I'm opening this window by shift control A. Or I could go to object a line and distribute shift control? A. That's a great thing. Push it and this window is opening. So I have this to object selected, and I click on this one and it's aligning to the vertical axis. Now I just control the duplicate my button and pull it down as many times as I need it. So I take care that my bottoms are the same style. I could go visually into another direction. Sometimes rarely. We do very different buttons, but 99% is the same style. People are there to read what is written on the button or what icon is next to the button and push what they need. No, I just click on the text and I did my buttons. You don't have to follow what I write. Really? Do us many and edit us. You need it. This is just what I came up in now I could write kit or quit game. But I will just keep it short. Now I select only the texts which shift and then I lost Lee, select the buttons. So I want the text align to the middle. So again I put the same button and all the text is aligned to this center. Now the buttons are not in a good position to each other. But I will solve that later. What I want to show you is very important. You see, there is always a question. What? Align toe What? So I always use last selected so if I first I moved my butter now, and if I first click on the bottom and we shift after that, click on the background, then the button will be aligned to the background. So last selected, you can use anything asses. So in the drop down there is like 67 or eight options. But I use this because I'm very satisfied with it. I got used to that. Okay, now how to distribute my buttons, even the shift. I'm selecting them and I go to this part where there is about distributing and I click on this icon. So it is creating the same distance vertically between all off my groups, which are my buttons. I can then select them and move them together. If I want them distributed again, I move one off them and I do the same thing again. I said, like them and I distribute them again. No, I selected them and I make them smaller. So I have some space on the top to add my logo. It will be very tiny. I just go pay the text and I write something like my zombie game. I know. Very creative. You will see a lot off creative logos like this in this, of course, but it's not about that. It's about learning how to distribute the buttons. So again, if I throw around everything and I said like them and I click on this icon debut be rearranged. I click on the distribute I can again they will be re distributed again. It is a very nice tool. I know you have to distribute it in your game engine. But this is for us as designers, to show the best possible outcome. The best possible visualization off our ideas for our game. I hope you enjoy this little lesson and see you in the next one. 8. What makes a good game icon?: this lesson is called How Think off icons. I think it comes down to do things. A good icon for me is scalable and recognizable scale, but means that it doesn't have unnecessary details. I see icons which are beautiful, which are amazing. When I when I'm looking for inspire ation, I see icons like Oh my God, I cannot draw that It's amazing. But if you scale it down, all the details are lost. So does that work for my game. If I work for mobile and I have a small, small icons that that work, I don't think that I can. A scalable and I can is not an illustration, so simplify and I got a simple It's simple. It's a break, really, and I can a lot of times is a plus. It's a cog wheel. It's a little bullet, something that is giving information to the player. Push me and I do something in the game. It has to be very simple, so if we see a lot of shiny, beautiful designs as Icann's and it could work, But do you want to make your game busy, read fleshy icons, or do you want your game Toby Immersive. Think about that and find the balance between that. So create good icons. Good. I can a simple and scalable. The other thing. I said that the good I can is recognizable. It's easy to recognize it, and it's easy to understand. You know, I'm teaching us about logo design, and I create logos for companies them for more than a decade now. And when I'm creating the logo, a local for a game or for company or whatever, I'm always aiming to be us unique and us creative. I can possibly be. When I'm creating and I come, I am AP aiming toe do the opposite and I can is not a local. I don't say that you can neglect it and be not creative, but do you want to show me a good I could then draw me a cliche. So for settings, yeah, drove the coke. Well, it doesn't matter. It was used a 1,000,000 times before because people recognized that easily. Cliches make good icons. If people want the heart drove them heart, so they understand that they know what it is if they want a look or an open look if they want a pencil if they want a narrow, gave them what they need. Just think, Don't overthink. So when I can design, I think it's opposite. Off logo design has to be easy to understand and not really unique. On the other hand, you can go unique and creative if you are thinking in icon sets or icon families, I Can Family is a bunch of ICOM future coherent, which are looking similar in design. They have a similar style. For example, they around it, they are minimal and white. They can be fully shiny and three d they can be metallic looking. You know, there are so many different type of icons for so many different type of games. So if you think if in and I can set, you can be creative there, what colors to use, how to shape them so they're matching each other, create the first few icons for the look and feel of your game and create the next icons accordingly. That's an icon set that's an icon family. I will create a few of those during the coming lessons, and I will take care that all the icons are make our scalable and simple and recognizable. And if you create any Aikens after we were together, now please send it to me because I want to see them. I'm very curious about your work. In the next lessons, we will create Aikens, starting from the very, very, very basic ones to more complex ones. And then we will create some icons and buttons for fantasy and science fiction games. Let's go. 9. Create very simple icons: during the coming lessons that we create some icon from the very simple one. Just us practicing two more complex months. Let's start with the simple ones. I just create a few squares, circles and lines in escape, and you can follow my lead and create very simple things. We will use all the tools he was before and we just combined on. Combine our knowledge to create something new and simple and great. Okay, so I can scare my Aikens. I scale it now to normal windows size, and I made the 1st 1 which is the simple play button. Now what is this play? But play button is just a triangle, so I turn my square holding control. So it's turning in a nice angle. I drove another square with shift, I said, like both of them, and they go to path difference where I could push control minus on my keyboard. No, I recover. It resize it a bit. Yeah, this blue is good and that's it. I have the most simple I can ever. If it's pointing down, it can be a little arrow. If it's pointing backwards, it's also narrow. You can flip it. You can use it to wherever I want. Now I call it the play button because yeah, because why not? So that is the most simple one. I'm using the color picker tool. I duplicated the object I colored. It blew. Now I duplicated. And yes, now I have two squares. I scared them down. So they fit. I turn off the snapping, and I can use these us Oppose Aiken. I removed them from the background because the background is for me there now only as a placeholder that my icon has toe fit this space. So I duplicated the square again and I have a stop. I can I have all the icons I need? No, for videos. Actually, if I would duplicate my triangle, it would have a fast forward. What? As do I need in games or anywhere else? Let's make a big, more complex, but still very simple. I can I draw a square and I will put the triangle on the top off it to create a little roof . I duplicate my triangle, holding control, rotating it, scaling it a bit and putting it on the little house. Scared that dumb I take her that is feeding my square, the brown square. So all my icons are roughly the same height now my opening with shift control A. I'm opening the alignment window and I align the roof and the house to each other. I make the house a bit smaller. I duplicated again the little house to create a door. I could draw a square sometimes, and I just need a square. I duplicate another square because it's faster. I don't have to go out and draw a square again. No, I said, like both off the shapes, bath difference. And I have the little house. I selected it and magic together with Control pass or path Union. And then my little house is one object. I can use my icons Now they are in a nice road. They're looking quite similar, and I can recall of them us. Each of them is just one object. It's easy to use, and all of them are the same size. Do something more complex. I do. I'm creating a circle and with a single click I gave a stroke to the circle. I turned off the feeling color us. Every object has a feel, and the stroke color and I said the thickness of the stroke. I said this to pick Sell. I said The thickness I want. Okay, it's nice. Now I want to scale it down and I have to turn this little icon off. So it is not the scaling, the outline, the stroke. So it's always remains the same number. I just had it. And with these with you know that it or tool. If it's still an object and not the path, I can move a circle in a way. And I just set the edges not to curves, but two straight lines. No, I have this nice shape. Scale it down and rebuild. The thickness is still there. As you see, it's always updating. When I scale, I duplicate my little arrow. I will rotated and scale it to my semi circle, and I create an icon for you. Guessed, refresh new game restored level. I take care that they are matching in with, so I color this blue, too. I'm holding shift by using the color picker, so it's coloring the stroke. I put the decide and I can rotate it as much as I want. No, I have already. 12345 Icann's very simple ones. It was good. A PSA practice. Keep on doing it. If you have any questions so far, left me now and in the next lessons we will create some more. 10. More complex icons and drawing methods: So these are seeing poll icons. Let's make some more complex ones. And in the next lesson, I will show you even more complex icons. And I can set I drew a circle. It still remains, as it was in the previous lesson. So I click on that icon and it's a full circle again wherever your circles, not the food, just Greek on the tiger, a quick on a color. So it has a feel color and I can turn it off here. I turned off the stroke on this girl and I give you the feel color because what I would like to create now is a radical for ah, sniper school. I can pull it inside. I can pull it outside. I can do different versions. It is a good not so simple. I can, I said, like the circle and the square over it, and I arranged them to each other and I pulled down a guide from the top and the guy from the side simply creaking on the ruler. I aligned his guide, so it is a line to the middle of the circle. Now I double click on my rectangle and I pulled down this little. Plus, this is the excess off rotation. I will do this a lot of times, and it's a good trick. I duplicate with control de my rectangle, and I turned it around. Unless you see it is nicely, neatly turning around that little plus in the middle. Very simple. This is my first more complex. I cannot see. I duplicated, and I decide what if it is a bit thicker, so I don't scale each of them, but I scare one off them duplicate and do it again. I can duplicate, too. Hold control and do it again. So if you are drawing something which has more than four legs, let's say, or four rectum because you have to rotate like, for example, flower with several battles or something that I would draw next. You can do this to spare some time. You don't have to duplicate the applicators many times. You can duplicate beard the line off these things and then just replicates three or four objects together. And this is what we create now is the most used I can, I think, No, it's not a diamond ring. My position it correctly. I rounded the square and I am creating a cog wheel. The cog wheel is a sign off settings on every phone, A lot of applications. So this is how we do it again. I'm pulling in a guide from the side and I arrange the thickness a bit off the square. I'll the circle. So I go to the stroke style and I make it thicker. Nice. Scale it down. It's still keeping your thickness because that icon on the top is turned off. Which means that I'm scaling the stroke is not scaling with it. Even thinker. Okay. Still think Okay, Nice. Okay, I feel these. Good. I found there was a mistake with the opacity. It was not 100. Okay, so, no, I have my little square. I arrange it again to the middle. And with control a duplicated controlled the and with control. If I move it now, these rotating in a nice, orderly fashion. Now we shift. I said, like this three. And this is what I was talking before, and I move them together. I don't have to rotate each of them separately. I make another circle. So, like the big circle and arrange it to the middle shift control A to pull up the arrangement window, and it's in the middle. If I I clicked on the ruler once, so the guys are not visible. I selected the everything in the Koguryo and I group them together. It is still in the center of rotation, so if I want to rotate Mike over here now, I can. I duplicated and rotate. I always duplicate and keep the original. I will tell the several times it's It's a trick I always do. I can always go back to the more ordered original one. In a lot of times, something a bit more random, like irritated Kabul is looking good. Okay, let's do something more, which we could use in a fighter game. We already have the radical for the sniper gun. So let's make a bullet. For example. You can put it on the left side on your mobile game and showing home Anibal at the Sniper has. So I just drew around its circle. I cut off the bottom by drawing another square over it. No, I will cut the line in it with path difference. And now, with another round it square, I create this ring on the bottom, off the bullet. I make this part longer. I arranged them to each other. So everything is arranged nicely and I make this part longer. Yeah, looks much better. I still leave some gap up here. I close it up a bit, but I leave a gap up there and down here because I like it. You see, it's like a line. But if I manage my object, it can be one color and it's one nice little bullet. It is very easy to modify things. Inning escape. So let's make Ah, bullet for an assault rifle. I just can't Oakley control click the little handles that makes it pointing. I pulled these handles up and it is a different longer Elon Gated and different bullet. Not for a handgun, but really for a sniper rifle. I make it even thinner so it looks even sharper and higher. You see even a few seconds I just modified and I can ahead. I put the two together and they stand together, us one. I can I can group them up and use them as one I can for my game, simply with number showing how much more I have now this next ICANN considered very complex for a lot of people because it's so heavy to draw hands. But I would just show you how to draw a some very simple, symbolized hand. I drew a big scare. A school, a small one small rectangle and rounded down. Now I dro other several rounded down rectangles. Assisi Escape is remembering the round this I just doublet Kate the last finger. It looks very puppet. Now, with three fingers, I duplicate this one more. Scale it down a bit and they scared the palm of the hand. So it's matching the edges. I round down the palm, Not that much. Okay, push it up or so My fingers are not that long. I pull select dembo all of them by shift, Scale them down a bit, Push them down with and I want some gap. So I said, like this finger, my index finger and the palm and arrange it all of them toe right. And now I do. It is the small finger I do the same, All of them to the left. Now I select all my fingers and I click this tribute here the second and they're distributed evenly. There are Nike. Nice gaps between them is looking very simple and good. I make the thumb thinner a bit was huge. I duplicated rotated to create this joint between the Tampa and the Palm. I make it a bit longer. Not that long. I think that the curves on the two objects are matching. This is it. It's a very simple hand. You can work on it more and create your own. It's very simple. You can use it a stop sign or us and all our messaging your game. It is not a perfect hand, not an illustration. It's a simple I can, but for everyone, it has the meaning. Stop. Okay, In the next lesson, we will draw even more contesting. So practice this. 11. Complex icons for a fantasy game: as well as with the previous Aikens. We will start with the square which is size properly, and we take care that we draw our icons into that. This could be the base of our icon or just for measurement. So I create the first sword I already created in an appropriate tries. But I can obviously resize it later. So I just create square. This will be the blade I duplicated. It controlled the and I make the duplicate thinner. I made the whole thing of its more smaller, even smaller. And this is the handle. My holding control. I'm rotating it and I have the cross Iran. It's already looking like a sword. Just a basic shape. Make thinner on the end. I make some rounded metal IQ globes and I go to the arrangement and I arrange them on the same line. Now I select always three. The two wars and the cross. Iran and I distribute them evenly and then I go to Path Union Or I could use control. Plus, you see, now it's one object Bath. Union is very, very good, and it's important. Now I shape it a bit, So with rounded and they do the same with the handle. I go towpath, objective bath, and I make it a bit rounded, elliptical like it's, Ah, handle off a bicycle or a handle of this world. I think this little legs and I have one more metallic bull on the coma. I arranged them to each other well, it down a bit more and because I copied the handle made out of the blade, they are already arranged. I click on the handle and click on the brown color. I moved the poem er up and down with the page up and page down. I think I keep it up now. Let's see. It is a bit too wide. I have everything but the sword. It seems broken, so let's make it a bit longer. I transform it into a bath to add a note in the middle. So I said, like these two notes, and with this I can I add the note here. I just left that one by using control. So it's going uppers now. These three I pulled down or I pull them separate a bit. It was too long, and now because I pulled them on different direction the head off. The sword is a bit wider now. I duplicated this ward and I drew this brown surface. I said like them and I go two bath in their section and that's it. Now I have a brown side. Of course I will recover it. And no, my sword has a lighter gray and dark. A great is looking like metal already it page down, I put it behind the healed and what I'm gonna do now is just simply with the base here Tool make some darker lines. So it seems like the handle is wrapped in leather. This is just a tiny detail. Us. This isn't I can and not administration. I could make it very, very detailed. But maybe already this is a bit too much detail. I give a bit off flatness to the pommel, which means I made this different circle on it and I duplicate the handle and select the lines I made over the handle and the path intersection. You see, it's cut perfectly. I do this trick a lot of times, so I doubly Kate the basic shape. And I said, like the thing which is over it and then control star or PATH intersection, and it's creating it perfectly. No, I want to add a plicating. The blade. Full blade. I got off half off it. No half 80 person. So I have this little shape. I said, like this again the two notes. And with this button again, I add one note in the middle. I make this smaller or actually, yeah, the lead them is easier. And if you control, click on this handles the handles disappear. So you have a straight line Now what this gives me it is a flat triangle surface. And with the color picker, I get an average color from the dark and the light grey. So this is a medium grey between these two now, I duplicated the dark gray base off the blade and I make it smaller and a bit thinner. I pulled it together. Pull it inside on this side and on the other side because I want to give a nice, sharp edge to the blade. Just make it smaller. I'm taking care of the thickness now on the sides and pull this up. Okay. Looking nice and sharp. No, I duplicate again the base with page down. I put it under this, I said. Like both of them, I make it orange. So we see I select the base dark gray, which is replicated the orange and I go to path difference, which made the orange one cut out. And I can color it very bright and as the sharp edge of my blade. Now let's group it up, select the whole sword and we control G. Group it up and I put it into my Aiken. I want to rotate it because I wanted to be dynamic and I scale it to fit. You see, I told you I was scared with the Contra creek ability. The play selected the blade and deleted because I didn't like it. I didn't like this wide, sharp edge. It's looking cool ass cities. It's a very crude soared, very simple, But even in small size, it's visible. I can make a darker background. I can make it bigger all together. I'm satisfied. I group it up and let's do something different with the control key Click. I select the base off it controversy and Contrave and I have the base out of the group. Now let's do another icon and it can be a field as well as this one. I wanted metallic and crude looking because this is what is matching my I can set now. So I'm thinking already an icon sets so I just make a square. I make the edges back from rounded and I long get it and go to path, object a path because I want to shape it. And I will use my favorite little icon on the top left toe at the note. So I selected those two notes on the bottom. I didn't note and pulled it down. You can make a house, you can make a pencil. This way I control click these notes and to make them curvy and then cloned control clicked the edges and now I pull this edge on the top of it down. And I already have a basic shape. We will do this again in another lecture. So because I wanted to look like the sword, make it a bit bigger because I wanted to look like the sword. I want to make it metha leak. So I set it toe this metal grey. I duplicated it. I resize this background one to give a thickness to the shield. So the background one is the thickness. Now I duplicated the gray one, and I make it a dark gray one. I could color these. I can paint a lion on it Now. I will just keep it simple. I make it a darker gray. I de placated again. I make it a nice green color. So I see what I'm doing. I have this one and the gray under it. I moved it a bit, and I go to path difference, which is cutting a shape into it like it has a little edge. We will do this in a lot of other lectures. I picked the same gray color for the background off it, and it just seems weird that it goes upwards. So I add some notes to this degree. One two notes where it's met, meeting on the edge and two notes a bit inside. I delete these previous edges previous edges, so just delete and control creeks. These little handlebars, so it will be a straight line, and now it seems that it is pointing inwards. A select these nose and pull it downwards. So it's not that I think. And now it seems like a nice little shield. I can scratch it. I can draw on it. What I will know to make it with more rounded. I give it a Grady int. So this is a light gray. I can make it even more light, very shiny. Or I could make it colored or whatever. I group it up selected and control G to group it up. And I went too far and I am zooming back and putting it on his base. I have to resize it a bit, but other than that, it is looking like a matching pair or sword and shield again. I'm duplicating the base because I want to do one more I can for my little fantasy game. And this will be a wild off potion. This is in a lot of games. You can have Munna potion. So for magic and health potion. So this is what I will create now it will be a bit more complex, more like this ward, but still not an illustration, because I will try to keep it simple. Whatever I drew. Now it's looking nice also in a small size. So my while will be a little rounded bottle with a long neck. So just a square and the circle so far I select them both and in the line window. I aligned them to each other and we do not around its krayer. I made the neck of the bottle and arrange it again. Make it bigger. And now I just have to select all of them and fix the color because it's too gray. And I wanted to make Yeah, I wanted to be glass. This could be a nice set, but let's pick a blue one. Okay, light and nice. Now I'm selecting in duplicating the circle. I make it smaller and give it the color Which is them on a potion or a health potion color , which is red. I scaled the circle down by holding control and shift. So it's going down given the around the same CenterPoint. So if you are scaling a circle holding control and shifted gonna be sized around the same centrepoint Now I am just throwing around, not holding, but creaking with the base here Tool. So I'm getting straight line. No, but I wasn't chief time selecting the circle and this shape I drew and I go to path division and the shape overlapping the circle is cutting it up into three pieces. I select the top one and dilated. And I said, like the bottom one. And you see, it has a nice wave and I give it to Grady int. This will make it that the drink in the jar a circular and feeling up the bar the jar. Now I'm control clicking on this edge. I would fix this little gap Later on, I deleted some notes. I move some notes up and down This one, I will pull down, even delete those. I don't need those. Nice. So after all, I have a nice with the shape here with page down, I put it behind my Grady int mark. I delete the nose here as well. I don't need it. Looks like a Pepsi. Okay. Put back the notes. Yeah, my job better. So it seems like a fluid is in motion inside. This is what I like to create. Now you don't have to create the exact same fluid I do. I just look at fluids, how they behave in bottles. I don't mean I'm drinking a lot. I just say, like I look at references and I try to make this way. Everyone know with the background, I do the same. I delete some notes. I play with the shape I pulled this up. So it's almost covering the basic circle It was. And it seems now that the top one is almost covering the bottle and the background. One is just visible there. I delete this few notes because these are out of the picture. Tiny, tiny detail again. But it looks nice, like it's waving in the bottle and the background. One is lighter, but I can recall a it to make it lighter later on. So it is much more different. I duplicate the neck off the bottle on the mouth of the bottle. I move it and I duplicated again. I color. It's something different. So I see why I'm doing this because I want to make a little shine. I'm selling both and I go path difference or abusing control minus No. I'm making a square under it and I just made it a bit thinner and this I merge, read my shine, and this will be my shine here on the bottles There will be also shine. I use the orange. Doesn't matter Ivy recovery it obviously I duplicated and I make even a smaller circle. Sometimes I'm not drawing a circle. I just duplicate the previous from because it doesn't matter. I round down this one and I make it shorter and I cut off the top of it and drew a circle. A scary movie. Cela both and they go. Path difference. So I cut the top straight. Asked. The bottom is not. I move it up a bit, Saleh, both of them, and we control plus or path union. I merged them together. So now this great thing and the orange circles we'll be my shines. So I select them and make them white. This makes my bottle looking. It's Chinese, still a simple cartoon bottle. I selected every contra G. I make it one object, one group and I make a cork. I make X square. Let's color it brown. So I see what I am doing it. Shift control, see or path object to path. I make it at the table. I booties knows together, and I take care that this little handers are parallel with the sides off the court. This makes this round very nice. On the bottom, I do the same on the top. Actually, this is how you draw a square, a glass or something Here on the top. I drove an ellipse. I fit it on both sides and I put it down. Pull up the color window and I make it a bit lighter. Look, it's already looking like a court. Now I said that both of them with Contra Geo group it up and what I will do now is to show that the court is inside the bottle with the control click. I'm selecting this blue one, the neck off the bottle with another control. Quick, I'm selecting these brown based off the cork and I duplicated the neck and I duplicated the base of the cork. Now I select both and I goto path intersection And even though they are in different groups , they create an intersection. A colored it nicely. This brownish bluish color. So it seems that the cork is inside. But you see, it's not the same object. So I have to select the blue and the court together and move the cork up a bit, so it's on the edge, and I put it behind the shine with being page down. Now it's perfect. It seems that the court is inside. These are a bit too big. Potion looks nice. Let's group it up with Contra Gee and put it in its place. I can move it around a bit, so it's maybe a bit more dynamic. Scale it. But if it is moving than the liquid has to be more horizontal. So I turn on Lee. The liquid selected the front and the back part of the liquid and turned it more or less horizontally. So it seems it's shaking, but it's still inside the bottle. This gives a nice dynamic. I grooved everything together, and I give it a nice, different color because the shine is not very visible. Yeah, a darker blue. Maybe it would work in my game. Maybe I would make it Dreyer. Too much. The other icons as well. It's up to you. Play with it, create your own portion, and if you deprecate it, it's very easy to create your munna potion because you just duplicated. You can even flip it or change the shape of the bottle. What I do know. I just color it a dark and the light blue in the same idea I did with the red one. And now I have among a potion. It is very simple. It was a simple application and the case of changing colors. But now I have not to honor three before I can. This is concluding the part about creating Aiken's Please have some more fun and create more on your own practice, practice and practice, and then we can move on to the next lessons. 12. Design a matching icon set for a ninja game! : in this lecture we were practice and create an icon set. And I concept is basically yes, a set off matching icons They are matching visually and conceptually. Now I have this game game designer ended before for my previous course is one of my courses . And I know what icons I need. I need a sword. I need the shuriken or ah, strolling ninja star and I need a blinding I can like smoke, bomb or firecracker here on the left. I would like to have the controller for the movement and I duplicated this circle and I decide where I want my other icons I move made my left ump. Let's say this is a mobile game. I move my knee injury in my left arm and with the right, I am pushing the icons so it's jumping and throwing shooting cans and attacking. I already have the place for the icons here on the bottom. That's why I designed this game that the foreground is black and here in the bottom, I have plenty of black space for my icons. I can also fit here a score or live by whatever I want. But now I'm just focusing on the icons. So I have the circles. This is where my three icons will be on the right. I will make this from bigger. I duplicate the circle. Okay, this will be my controller. This is just a place where There us, You know, this can be invisible and only appears when the player is placing to stomp on the screen. So now this is just a place holder. Now I will focus on the three Aikens. Let's decide what colors I views for the icons. I obviously will use the colors from here from the game. So no, I drove a few squares to create my own color palette. Just control D and replicate the squares with them all up and smaller. The's doesn't have to be good looking. These are just for matching colors. So obviously there will be black. There will be bluish from the background. At least this level is blue. Why not? And there will be a small amount of Fred because there is a small amount of red on the ninja and some here and there. And I am planning if I make this game that the blood will be read obviously old joke and there will be a light part which is white or very by a bright great. So these are my colors black, red, maybe blue and white. And I will use these colors in my eye concept so I can decide how my I can only look together if there were white. They are very good looking. They look very nice, but it could be another color, but I don't want them to be green or yellow or something. I love this type of green, but not for this game is totally not matching the whole game. It's an action game I wanted to be. It's scary. I wanted tough. I want to use black and red. This green is to calm. It's not matching, so let's stick to the white ones. They're standing out very nice on the background. I start with my first icon, which is the sort that's the most interesting for me. So I start there. I remove the stroke off it, achieve controversy. I turned Ah square in tow. Path is the same thing. If I will push this button in the path and I moved, eh, Giambi. I turned off the snapping It's good if you want something very control, like drawing a blueprint or ah plan. But for this type of creative growing, it's not very good. If the snapping is turned on, I don't like it. I duplicated the blade of this ward, so I have the handle as well. I drove a square over its select, both of them. It shift and the path difference. I cut it down. I take care that there is a tiny distance between the blade at the cross. Iran, which is the two. But I think in the Japanese Ford. So it's little horizontal bar and there is a distance between the handle and that not much , just a bit. Now I take it that the bottom is rounded. Here's a trick. If the little handles are aligned to the side off the square, then it will be a perfect rounded edge on the bottom. So I made them perfectly vertical, and it works. No, I have you make the handle. There is a special wrapping techniques for these Japanese handles. I well, Joe, a small icon, so I can make a handle, but it doesn't have to be perfect, so I just replicate this little orange line. Turn it around and I take care that it's ending here. Now I would replicate these and again and put it up There is up with control D I duplicate now withholding shift. I'm selecting these orange bars and I measured him together with path Union. Now we achieved I said, like this one and the handle and I go towpath difference and it's cut out and I have nice triangles, so it looks like from a distance or in small scale, it is looking like it's repped. So it is looking like a proper ninja sword. I've your color it later. I'm five minutes right now. Let's check what as I have to do, Okay, the Suri can and the little blinding bomb I started the shooting Come, I want to star. So I drove a square with Chief control see or bath object to path. I make it at the table. I said I just these two notes and I added a note. I moved that out and move these two bottom ones closer to each other. You see, I can move the nodes and scared them aside. Scale object? No, I have this and this is ramping off the star one leg. I make it a bit shorter Now I move the center of rotation down a bit and if I duplicated and rotated, it's rotating exactly around that centre de applicator and rotated again. This is how I would go with flour, by the way, throwing one petal and rotating it around one excess point, which is defined. But by that little plus I moved, so I duplicated it four times. Now I have five battles off my Suri can I moved it around. OK, Lexx. Yeah, Let's fix it a bit now resuming and other circle in the middle, I duplicated again and I imagine it together with the little petals. But because it was duplicated, I can shrink it down and select the shoot. You can select the circle and the path difference. I cut a hole in the middle off. It is very simple. I can rotated. It will look very nice in a small scale. I could make different stars. There were a lot of them and they say they were not even thrown. They were used in close combat. That's a new theory, but anyway, I call it a throwing star us in many games and my last task now is to create a smoke bomb. I draw a circle and I wanted to be broken apart like a little play sphere than enjoys throwing to the floor. So I drove this part which will be broken and I go towpath division and it will be divided by the edge off the object which is higher. And now I can move them apart. I do the same again. It will be divided to several parts. So path division and as you can say, you can see I can move it apart the little parts. I move them out of the center off the object, so it is like broken up and shuttered. It is already looking like it's blowing up. I matched them together, and now I am adding little lines with the basic 20 depend tool. So it is really looking like it's shattering and blowing up. By holding shift, you can rotate by one edge. So you see, all of them are pointing to the center off my little bomb. I delete this one on the bottom by contra creaking a tile in the in the group. I can move that object separately. So no, I have the three icons. I am quite happy with the shape of them. I group it up with everything and now I have to say I resize them and create an icon set and put them into my seen it controlled the adopt decayed, my sort I always used replicate because I keep the originals for later. If I want to read it. If I want to change something, if I'm urged the object with something else, I still keep the original because I want toe be able to edit it. So let's see. What if my sword is here and this red? He's looking nice, but I want to put it here on the right side because this is what the player will push the most like. Steps steps them. This is what you put your push the most next to it. I want to put the throwing star. Obviously I recovered that as well. Not feel be orange. I duplicated. Let's have more than one. I rotate it so it looks more random and I squeeze it a little, so it seems like it is turned a bit in there. I move it to the right side of my circle and I'm I'm adding some dishes, you know, like it is flying through the air. So it is more dynamic. And the last thing I drew was red because I picked this red for the sort. And I like this red. I will keep it for the dead trees and I made the stars black. Now, if I look at my icon, it's not good. It's too much, right? So I have to scale up with my objects, select everything, and I make them bigger. Okay, It's nice and dynamic. I like it. How the dishes are a bit outside off the icon. Actually, this gave me an idea. I could make the same for my sword. I group up my little bomb and I will use the same idea I used at the Suri. Can you see? I'm very playful, but I still aiming to create an icon set So my boom will be this dark color. Asked the Sure you can already to be read. No, dark is better. And what we will be read the dishes off the explosion like exactly the dishes on the shooter can I can make it a bit bigger. So it as well, coming out of the screen off the I can. I mean, it is more dynamic this way. Like, really, it is blowing up. I really like it that it's as well coming out of the screen. Let's make even this one's even bigger. A small start in the big my like someone just through two stars very fast. And now I have this idea that even the black part is coming out of the screen. A bit of the economy. I make it longer and put it behind the star. Okay, It is looking nice and dynamic, still a bit of positioning. And as I said, these gave me the idea. Let's do the same for my sword with control Greek. I'm selecting the blade and picking the same black color for it. The same for the cross. Iran and the handle. It was good, but not much is visible from the handle. So let's make this one smaller. The whole sword and rotated a bit. No, to keep my icon set, I want to give some blood so I duplicate the blade with control D and I drove an object over it. So I have some splashes, some blood splatter over the blade. Now we shift. I select this red blade and this red shape over it, and I go to path intersection and with I have the blood on it now, I duplicated the circle in the back. I colored it. Read I duplicated again, calorie to whatever color just to cut this nice arch from it. I use path difference and us with throwing stars. And with a little bomb. No. I have this comic book like effect, which is red, and it indicates that the sword is moving. I have to cut off the bottom of it. I merged them together with Control Plus Or I could go path union. I drove an object over this too. Well, she's I don't know what they are arches and I go to path difference. So I cut off the bottom off it. So now if you look at the three icons, they are getting pretty similar. My only Yeah, blade could cut like this. My only problem is that sword is a bit too small. I like the size off the stars and I like the size off the bomb, the bombing, the small size of like a screaming face. That's great. What if I make this from bigger than It looks prominent because it's nice, but the sword is very tiny, and if I make it bigger, you see it's not much visible. So what I do now, I select the handle, and I may get white. It's experiment to be fi size. It's smaller, still good. But then the two bodies cross eyed and I have to make black. Sorry, if you are a Japanese ninja geek, and I pronounce it badly now I just group it up and group of my other icons as well. The star in the little bomb and I pull a guide just simple creaking there, and I pulled another one. So they are on the same line, and they are more or less the same size. I know they are the same size because the circles are the same. I just wanted that the different little objects are not hanging out too much, and visually, they're on the same line, but they seem good to me. I used the red here, and it's coming back and I'm very satisfied with that. And I didn't use the blue. I didn't need it after all. I think it's quite good and violent enough that I used this random colored objects and I colored them red and black and white, actually black and red on a strong wide background. I have a color set and I have an icon said, because of these, So if you look at them separate, they're not inside the game. You can still see that this is a ninja I can set, and this is the what we are aiming for. This is the result, what you are aiming for with every game you make. So please, if you create and I can set us, we will do a lot in this coming lectures. But if you create a night concert for your own game, pre send it to me because I want to see it. I want to know how you saw it, how you create different icons for your games. 13. Space shooter UI design - Part #1: in this lecture, we will create icons and buttons for little science fiction game. Yeah, Space Shooter. This was the first idea I came up with. We will again focus on the game user interface buttons, and I can not on how the game looks. So let's start with the I can again. I am super creative naming in my space shooter. I found a good phone, though. Fix the line. Height it shift control. See, I made it in tow a bath when I select the word letter by letter, grouping them together and shaping it looks OK. I select my little spaceship take of a this field grouping of the spaceship and coping it into my logo. Kate, I turned it. I made it wide, but it's a bit hard to see which parties which So I just want to make the inside. So with control and five on the numeric keyboard, I switched the view so I could select the exact element I wanted. I matched everything together except the little window, and then I removed the little window. I make it purple, so it's different color is the purple off the space Now I make little bars like the spaceship is shooting and move them a bit and select everything and group it up. And now I feel with here doing it a bit more. I love to create little locals for my games off for everything. I'm a local designer as well. So this part is more class about game user interface. It's more about getting used to escape and having a little fun. And if you learn to make a good local also for your game, if I inspire you that way, that's even better. So I just reposition the spaceship, reposition the text. I know it has a bit of a star Wars feel, but I like Star Wars, and I think it's good I arrange it to the middle. The shift control A. I opened this window. Okay, I made a mistake. There is the little thing it was hunting for before the It's a glass part of this way. Shape the cockpit. So I arrange it and size it again, and I put it here, and this time I select the spaceship with shift control and I select the object, and I just weed control miners had make a path difference so No, it's one object. Okay, so this is ready. I didn't like the logo. I'm gonna put more effort into that. I say new game, start game. Whatever is fitting you. You know, all the buttons I'm making is just for the fun off it And as before, are gonna make different versions for this game User interface. Now, in the 1st 1 as you can see on the left, I already copied some icons we made previously. I copied it from the previous file when I was talking about how to create the right guns or how much details you need. So now I just copied the text New game set. Things could be as much as I want. I gonna make quit, or it can be leaderboards. You know, social, maybe icons, whatever you want. So I just created the text and I will give the icons next to that. So I grabbed the Eiken. This is for the settings. Not everything is a bath, so I make this outline. He stroked a bath. Okay, now it's right. So now all the text gonna be white and Aikens always was so white. The play button is very good for my for the new game. The settings is good for the The cog wheel is good for the settings and for the quit I will make also early that I can a little cross. So I just make a bar nice and rounded because this letter is a bit this point is a bit rounded So I around it a tiny bit just to beat the corner. Okay, Now with the control I rotated in a nice order I duplicated and I rotated backwards. I saw like both and then path union control. Plus So I have the X for the quit. I have the play button which I just colored white. Perfect. Now I have to select the text and the icons arranged them in tow each other. So they are line All the text are aligned to the left and all the icons to the right. So there is like a vertical space between them. Now I group them up and now I gonna take care that the horizontal the vertical spacing between the button is also good. Okay. I select Sio all of them and then spacing. I have more space here. So his space anyway, A lot of space here so I can sell like them and, Ah, distribute them better. Okay, it's too much. Feel free to play with this. And, ah, how I'm measuring this now that I don't want the space bigger than the line height itself, that's it to be to be good, but not much. And there, you know, space for the icons and for the letter as well. I take care that everything is in the same line. I pulled in a guideline. Perfect. So was before all the letters are in the same line. This is orderly because we are usually, I mean, if you are from a western country or reading with a lot of letters like I do, you are reading from left to right. And this is a good order feeling. If you would make a Japanese game or Chinese game or something different, maybe it would be better. Maybe it would be. You could take it differently, but for us it's very ordered. The eye is always looking for order. That's why I make the quit button into quit game. Because it just looks better. It's too short that way. Also here I want to make a big I have a big space here in the bottom. I could put their social media icons. I just want to make a big, big bar to start the game. So I imagine this is a little shooter game and it's just a casual game. So I'm on the metro or waiting in the subway or wherever, waiting in Magda notes. And I have a bit of time. I just hit up my game and play so I give nice initiative to the player with the huge, oversized go button is bigger than anything else on the screen. So it could be like this. I arrange it nicely and just replicated the triangle. A marketing they call it like cool direction button like push these. Do this by this. This is also like that. It's a court action. Go start the game. I make a big bar, select the death text and I good go for path difference so that the work I have to group it and Madge the little Arrow and the text You Nazi because it's white on white. But now I go to difference. Perfect White is good because I see the background behind the text and it's so amazing. Of course I can use the new game, but this London has to be different. That's a continue I mean, in an easy mode now, because I can just make this up. These are for all for the learning. So I don't have to implement this in my game now. I cut off the edges off the white bar. My I drew a little bar selected that we shift and the background the white background and cut it off. I want the text order the bit. So I selected those notes. Don't forget, it's not a text anymore. That is why I used the no tool to shape it. Okay, now I'm done with this and I'm happy with the menu. So let's focus on this one here. I want to put icons around. I want the special icons and I want them to look the same white and the same. Cool with the same phoned us the other one. So I will put icons on the top and on the button, I will see I need the scoreboard and I need special icons for shooting and launching missiles. This is the score assuming so we see what I do. So the score just can stand alone and I can put icons on the side. So if the player is pushing those ah, arrows then the spaceship is going left or right. I group them up. I arranged them to the middle to the screen. This is like going left and right, and I cant sport. I can then put the space the score in the middle behind the space you and what I doing now ? I am creating a little life bar by not throwing hearts or anything like in the fantasy game we did, but I'm duplicating the little spaceship. So that's why I removed the shield Corporate the spaceship put the shield back and now I have it. Now I just gonna magic together. I'm gonna play around like a David a logo Kobe it light criticizes Tiny. It's still recognizable. Also on the phone screens would be recognizable because the player is easily recognizing in that okay is the same shape as my senior leadership. This is what they did for ages in old Amiga games and everywhere it works. I select all of them and the rage them ideally, these arrows, because I don't need them. Actually, I was just wanting, wanting them there to show that what can happen here on the right. I would rather put a giant button for shooting. So let's say fire. I think that's straightforward enough cause I could draw little lines to show that it's an ICANN four laser. But it's not that recognizable us remembering the ninja game like driving a ninja started shooting, and that's recognizable. But here I just keep text fire, and I could make the bottom red as the big red button. But in this case, it wouldn't work. So I just cut off the letters out off it, and I put it here and gonna be big and comfortable to my time to push. I put this guy here, so I know that is the space I can inhabit on the bottom of the screen. This is where nothing gonna happen. It's only the space for my buttons. What I'm doing now is the little icon next to the fire, one gonna be on the side. It is very, very similar. So let the rocket is very similar to the one I drew before like a bullet. I just duplicated its size it down. And I have no the little engine part of the rocket or little wings. And I drove bar here, Select the rocket and cut it away. No, I say left everything and we control plus or path union. I imagine together. How am I gonna make a small button replicate the fire button? I delete the text and I put the rocket on it. I resize it. Obviously, with the home, I put it to the top. So I just put the home key and I rotate a bit, so it's more interesting. Nice. And they put a tiny number next to it because I want to know how much special moves I have left. Let's say have five rockets. Okay, fine. So I see my lives. I see my score. I didn't might score. Everyone gonna notice it. It's that starts at 000 and then it goes up. That's your score. You cannot be a survived score next to it. And now I have the bottoms as well. I have the special button and the fire button. And I'm one was done. What else? I need us you noticed my leadership has a field. So again, just very fast. We're gonna do a shoot. I say again because we did it again in the icons lessons. So I just created other note Pull it down and I click on this note control click to make them curved. And that's it. So you have a curve if you control quick on a noted gonna curve around. So now I have the sheared I duplicate the little text and the icon So I have the exact same text, the exact same position with the exact size us with the rocket. This is showing that the user that these things are the same importance How many rockets I have, How many special I can shoot and how many fields I have now with control X, I cut out the shield Oh, my mistake. And now I delete this little parts and with control V, I could back the shared and they're gonna color it the same dark blue space blue, I call it now I color it to the space blue. The exact now I duplicated make it white because the shield was too. And for me, it was too boring. It was just one part. Okay? I arranged this little white one. And with control minus or path difference, I cut it out. No, my group it up. And the shield I make the two. It's up to you. How many she'll do you give to your player? I wouldn't give much. I deleted the bar, The guideline, everything is in order and it's nice and you can play here on the left. I let a lot big space out and I would andro. This is just for the user to know that here is a little controller. You know, your average video game controller, your mobile controller. So I just put this us ah, transport and signed like it would be. And this is why I removed the arrows because it's much better to play with the controller and move up and down and circle early around into with their measure. Then just it's much better than just going left and right. I resize my buttons a bit, so everything is aligned nicely. I hope you enjoy this and let's get ready to another version or the same science fiction. Shoot them up 14. Space shooter UI design - Part #2: So one version is done. I just copied the backgrounds and I want to create a second version. I like this being Andi. I had the icons and everything there. I just gonna copy them and use them here. But I want to make a total different approach because you could just say, Oh, calm vanished when you just made a simple, very simple minimalistic design. And you call it science fiction. You're right. But it's matching the game, but you can use it for anything else. Really? So in this version, I want to create a retro eighties looking science fiction design, So I just hope it darkens from the top, and I start to create my design. I'm using a transparent designed this time you know, having a type off a hologram mish feeling, and I'm using a lot off blue and Turkey's. So let's just this greenish bluish and sec, I said. The offer off the color and the opacity is the opacity of the whole object. The opacity goes for the stroke and the field as well. When I modify the offer, I'm only modifying at the moment the offer transparency off the field off the object. So the color in the inside. Now I go to the stroke part and I tried to pick a different color and his green is good but not totally visible. I set up a property thickness. Okay, Better. Oh, nice. No, it's risible. No, it's what I want to have. It had the more visible edge, and in the inside it's more transparent. And now, with the offer, I give a beat off the transparency to the stroke. Us. You can see. But it's not the same transparency as the field. Let's pay a bit with the color on the stroke, Okay? No, I just want to have a different shape. So I goto path and object towpath. Not stupid. So bath objective, but And what I want to do, it's pulled these notes closer to each other. I'm holding shift and I'm closing the notes close to each other. And now I have this nice shape. I'm gonna put it up here on the edge. I'm gonna sell like the top knows because I want to remove their little edge. So I said likely stopped two nodes and I click on this icon on the top. We have several icons. This one and I just remove the line connecting those two notes. It's a very good tool, and I rarely see people use it. I take care that the edge is not around it this time because I don't don't want rounded. I wanted hard edge and we page down. I put it under my logo. I kept the same logo. I'm not gonna read role that let's speak a color for it. This blue is fine. I just want to give a nice Grady int. So it's a great and from 100 opacity toe lower opacity. And then I said, the alpha again. It's OK. I just have to do it once. If I copied the same element, I can use the same object again in the game for my buttons. So now it looks very good and ghostie and really like a hologram. I really like this. So let's get a proper color for this letter. Why will get too much greenish? I am looking for an interesting color. I am looking for something which has contrast, and the which is matching my games look and feel. I think this will match. It will match the little spaceships and everything. So no, I have the buttons. I just gonna copy the text. I don't care much to read. Write it because I have it from previously. I just pick up the same color. Nice. It's very readable on this background. It just replicated and create the new game button. This time I gotta do it to be differently. Let's arrange those buttons. And now I want to arrange the maybe bigger because I'm not just gonna use text us in the previous one. I'm gonna create little bottoms coming in from the outside, and they're gonna have the same. They're going to have the same look and feel. Ask the one on the top with the object of bath. I transformed this. First I give it. Okay, the edges there. So object path Nice. And now we didn't know. Tool, I gonna move this bottom right node inside a bit. I want to take it that it has the same angle us this one up here. So let's modify it. Yes, okay. And now I because escape is remembering the last tool used. So it has the same color and the same stroke already. But I have to pick my Grady int. And I just picked the Grady and here and now I just turned around the radiant and I move it in a way that it's, ah, similar to the one to the bar on the top, under logo. I cut this line again, selecting the two notes and using the tycoon and putting the notes next to my screen. I could totally be okay without this, but I want to see how my game would look. So I just put it with the text. And I'm still not satisfied with the text color. Okay, not black. That would be overkill. These blue is not visible. Okay, this seems visible, even a smaller size. Okay, I'm back to white official. It's just more visible on the ground and it's very good with this green blue background. I have. So you see, nothing is chiseled in stone. Everything is changeable in escape, and it's very easy to change. I just duplicated now the buttons with page down. I will put them under the text, and no, because the text is arranged, I have to group up the text and the buttons, or just select the buttons and arrange them together. I rather group them up because then if later on everyone to move everything, it's easier to move. I so like them. Yes, and nicely arranged them. Put everything to the side a very bit. Okay, Better. So you see now that things are a bit out of the screen on the left, but I don't care on the bottom here, I can put every anything, but now I don't bother, but I want to do with a few outlines. So I just drove a few strokes. I gonna throw it that it's very similar and these lines will give, like, bit off a circuit board feeling orbit off a shakiness. So my lines, my buttons and my bars are not so easy there. Not so Rig it. These gonna give some dynamics. These are going to give some dynamics to my drawings, and this is fine here. I just duplicated this line. I had some notes and delete the and notes to make it shorter. Nice. So it looks more moving more alive. I like it this way. And I can on one more It has a movement. It has dynamics like the buttons are moving, and actually, this is what I would do in my game if I would be. If I would use buttons like this, I would animate them. So coming in and going out it would give a nice field. But just a small animation. Don't over animate your user interface. I'm hoping the buttons here, the icons. I will not use the circles because in the previous they were fitting nicely in the previous design, this minimalistic white design. But here I want to use the same type of buttons for my in game user interface for my HUD. I won't use the same. So I just flipped it vertically and then horizontally with pushing them buttons, Avi and age. Or I could use the icons on the top, and now we page down. I put it under my icons. I keep the text fire because I think it's a very convincing and I don't have a better idea now for ah, I can for firing. I just replicate this and I turn off the little button on the top. I turned off. The little icon is making sure that when I re sizing the button, the strokes are not resized. So all the strokes I created our remaining the same. Think us. I did them. Now let's position this. I want it positioned under the score bar. What you do know I have a cut off the edge. So I added to notes and just deleted the end this way. This edges following the angle again. I had the modified a bit, but it's fine And did ah page down. I send it behind the text and of course, make it white. I have the two special Aikens, which I did before. I will not redrow them. I could but I just keep them and I add the same but an element just in smaller size. Different I under two notes. So like the unknowns delete, I cut it off Now I duplicated well, I gonna no ive your fix the life bar and the score. But I pulled it a bit in then This one don't have to be that long What I want to do with the life. But by this time I will show also what it how it looks when a player already lost the life . So I will have the same look and feel this holographic feel for the little icons to space you buy comes as well. So I checked. What was the number off the Grady and, well, the number of So I checked the color here, and I copied the same exact color. I'm not using the eyedropper tool because it will pick up because of the color is transparent. It would pick up the background color as well, and I do the same with the stroke color, and I turned off the field. I give the stroke to all of them looks much better. So if a player is using losing life, it will have transparent space, your bike on and now I give a stroke to all of them. If you select object with different strokes, it's showing a percentage. You just set it back to pick, so they set your number and they're all of them. Has a nice stroke. Let's do the special bottom for my size. Pull them a bit closer because there is no circle around that. Why it was a distance and I don't have to put them above each other. Okay, let's figure out on mobile there is one thing that I always have to take care about how big is the jump off the player. So I decided I put them above each other but still make them easy toe bush. So I create a bit of a distance, duplicate this button, and I put them on a bar which is coming in from the outside. Agreed. Very small distance. I'll stick us the stroke. I have okay, a bit more. I have to fix up the Grady End and I add two notes again just to delete the end. Perfect page down. So I put it under daikon. I know it's under because it's the Texas getting white and I arrange it to the middle control de I duplicated. I arrange it nicely again and I arranged icon and the bar to each other. Okay, I'm very satisfied. And here on the left, I just give a circle. Now that's like my controller. I would make it invisible in the game, so the player stumbles anyway, always there because he's moving the spaceship left right up and down. I don't forget the lines as well, so I wanted to look similar. The thickness of the line smaller now. Okay, let's scale it up a bit. These little lines were looking very good and very dynamic in the title screen, so let's use it here as well. It could be also that if something is hitting your spaceship than these buttons are shaking and these little lines are shaking very much, it would give a very nice look and feel like in the old Star Trek series, when the whole cockpit was moving and everyone was shaking in their chairs. When I'm designing, I'm always thinking on ideas like these how to make my game special, how to make it more interesting. I'll end this line to the bottom, so they're on one line. It looks very nice. I'm very satisfied with this. To be honest, I like this one better than the previous one because although that one was very minimal and can be used to any game, this has the look and feel us on a really science fiction thing. I could put the score bar here on the top. I could put on the bottom. I really have a lot of opportunities. I can sleep it and put it on the other side. I have to flip it if I wanted coming from the right, but I think now this is the best. So this is the old two versions together, and I like both of them. I like the big bottom on the 1st 1 but I really like ending up with how the fire button and everything is looking on the second version because it has a coherent look and feel. It has these eighties vibe. So I hope you enjoy this lesson and you learned a lot, and I eagerly wait to see your versions off this. 15. Fantasy game UI - Part #1: in this and the coming lectures, I will guide you through the process of creating real life game user interfaces. First we start with this one sec and left. I have a tighter screen for a little fun to the game us on the right with the return night . It's the gameplay screen that zoom in and start to create a square which will be scroll. I want this old paper feeling and I not will use them. And I will not create different bottles. I will just rode the buttons on this text us I was talking about earlier. It's up to you how you create your menu. This is one way I just threw a square and the shift, controversy or path object the path. I made it into a path. And now we do know that it or to this little arrow I am modifying the shape off it. I just control click on the edges. Let's move it aside. So you see what I'm doing actually, Okay, Much better. I usually do this, so it's I'm not selecting accidentally background elements. So I were here and then I will copy it back on my screen. But I have the size in the shape, more or less I wanted. Okay, so, no, I am adding notes and I'm modifying the shape Double click on an edge. You had the note. You're not gonna make a little curve. So I added a little note and I just curved it a little bit. You can grab the edge or you can get grabbed the corner, the note, and you can modify it. It's very easy. I am just figuring out how my scroll we look and now I do the same here on the top part. It looks quite okay. I don't even have to modify it more a zoom out to see the general shape. It is already in my mind looking What I want it is already looking like a band paper. Now I selected Click on a Color and this seems all right. But I will do now throw the part which is bending backwards. I added a darker color, okay, and in the shape of it, and put it backwards. I use this icon on the top to send it behind. Or I could use the page down, or the and key on my keyboard so page down is doing this step by step. Sending in behind now. I did the shape again. Nice. I just took care that it's following the curve off the front one. You see? Yes, I move it into position. Perfect. Now I want just do the same on the bottom. But here I wanted to be in the front, so I'm using the pen tool again. It kept the color from before. I recovered later, and I just zooming and try to make it looking the same. Curve us the paper itself. I modified them, both of them, the paper and this front part to match. I added a note there on the paper. So it's not curving. Only this bottom part is occurring and I do the same here. I imagine energies perfect. A bit of wave. It's exactly how I wanted. Okay, let's make it a bit different. You can grab this little handles and play with the shape Hold, baby. You want it? How we want it. If I look at it, it's already having this shape. It's half cartoonish, half realistic looking paper, knowing escape. We cannot add different textures, or it would make the game very heavy, but we can add Grady INTs, which is halfway there and it's looking awesome. So don't be afraid if not gonna be yellow. I just did applicator this to give an edge. I put it behind and I pick a color. I was just pushing the page donkey and I gave a color to this edge. So this way the paper has a thickness. Who is not two dimensional thing? It has thickness. Now I grabbed the Pento and I make this little cuts on the side. I'm just being playful here. So if you are doing these, you don't have to copy me. I am very happy if you do your own thing. So I put some cuts here and there. If you more here. No, I said like the cuts. By holding shift and with path Union, I merge them into one object. So it's one single object. Now you see? Put it back Which shift? I'm selecting the paper and I go path difference. Before that, I was also duplicating my little edges. So I was duplicating that and I also da placate and select the back one. But before that I move it slightly down because it has a thickness. You see, it's moved. So I move it bath difference again. So what I did, I cut out the same objects from the frontal paper and from the back one which is creating the thickness. I'm adding a few notes here and there because you see, there are these gaps continuities broken. If I had some notes and pull them in, the paper will be continuous. You again. I wanted to be lazy and not adding a note. But I have to Yes, these are very, very small details. I mean, on a mobile screen, no one will zoom in and check how is the edge of your paper? But believe me, the devil is in the details. When you take care about the small things like this that will give your game a new quality , I just remove this notice. Druken. Great. It is not much visible, but I pulled it down. I want to make it correct. So it was even just a tiny pick So visible I removed it and I corrected it here as well. Okay, it's nice now, here on the bottom as well. This type this part of the paper also has thickness and here on the top as well. So let's say like them applicator them and color these parts also to some weird whatever color. So no, I just know what I do. And I move it a tiny between the coarser keys. So I'm not moving it with the mouse. I moved with the keys with the arrow keys on my keyboard and now I don't know the detour. I just lifted it and let's get to it. A nice color for no, I will just use this brighter one. OK, do the same I will do is slightly different here because I don't want to put it back because it is already as far back to the left as I want, because the paper is going backwards. So I duplicated twice. I made a yellow and in orange one which shift. I'm selecting both, and then I go to bath difference and I have a tiny edge, which is covering exactly my dark brown thing. No, I left it selected, and I picked a color from the bottom and it will be the same. I'm not really satisfied with this. Have to figure out a different color. Yeah, I really corrected later and that we used radiance to make it more texture like, as I said before. But I have to figure this out. What is good in escape, you can just hold down the button, and you can get an average color with the color picker so it doesn't have to be black or white. You can mix your grace or whatever you want, or in this case, as you see, it's creating a circle. And I have a lighter brown much better. Okay, Looking great. I select all and with control G. I grew up it up and I put it on my screen. This color looks nice on the title screen. It looks paper like, but it's not really bending. I arrange it to the middle. Which shift control? A. You see, I opened up this window and I just select both of the objects which are both of them are groups, actually, the paper and the background and I arrange it Now I want this to be a Grady int because I wanted to be looking good. Okay, not the whole group I have to control, click and select the object. Nice. Now it is a Grady and going from zero to the full color That fight when black, dark brown in the bottom Because it was transparent. You saw the paper under it, The dark one. So I made both of them 100% opacity. And what I've you do is I will create a Grady int. I pick a color which is light around the top, maybe a bit more yellowish. Nice. And I can pick the same color on the bottom and make it darker. It's always I'm picking color for ingredient for the one which is blue. You see the blue dots those I am creating the radiance for and we double quick when I'm using the Grady and Tool. I just added another note, and I gave a darker color there. So the paper seems bending backwards. I know this because off references always look at references. I added one more here, and I will make that darker as well. A bit it looks much more alive, much more real. Tiny difference. Very small. But he still works. I can move the notes. I can make the Grady and bigger sec small differences. But it really works and makes the gravy and foot fault. I look at real time objects, and I figured myself how the paper is bending when the light is coming from upwards and the paper is bending. How does that look? If my paper color is like this, it cannot be that the edge is this brown. So I have to select all the edges and give it a paper color. Looks very nice because this is what I like ingredients. The downer part of the radiant is dark, and the top part is light, and the edge is looking very nice and dark and distinct on the top by on the bottom, it's own with disappearing. Now I give the same color ingredient to the bottom one. You see, I selected the top off the bar and I picked a color from the top. I saw, like the bottom of the part. Yes, and I picked a color from the media off my big paper and the shape of the object. It is looking very paper like the only thing I have to fix this thing in the background, it's gonna be going to be very, very dark. Still, because it's in the background, but it has to be the same paper color, so I pick a color from here, a darker one. This time it will never will be that light as the top off the bending paper, because that's simply under it. There is no light going there, so I'm very happy. Everything looks fine, and the Grady ants are looking fine. I can make it wider, I can make it told her. It's really up to you. You can create your own. I make it a tiny bit wider. So my manual fitted. It's really up to you. Now Let's create the logo. I will be very creative, and we'll call my game My little night. I duplicated text to keep the text size and the phone depict before I treated a bit here. I picked the phone before, so I don't have toe go through my whole phone place now. But I do now. I copy the night from the place screen. I decided the text with the shift. I move them together and I put my little night here with control V two simple copy based Now I don't want to keep it full color. So let's speak a color which is working. I turn off the strokes on it. It has the little shape. If someone is seeing the night. If someone is knowing what it is about, it's a shape that is recognizable. I group them together. So we chief Tie selected the text in the night and color everything this dark. Dark red. Yeah, I switched it to a lighter. One looks much better besides the text to be what I want to do. I wanted to be more distinct with control five So control and 500 numerical keyboard. I switched to outline you and select this little borders. These are the little holes in the visor off my night. I could use that. Okay. And that it was too complicated. Does to detail what I want to do now I want to do a horizontal line. It will be the same color as the text. I said it very thing. Just a few pixels. Great. And its two symmetric too nice. I wanted to look like ink. So I just take the freehand tool and I just throw some really weird edges over it and I pushed control. L after that control l is cleaning up the shape. It's removing the note now I have only a few and I still modify them. But before pushing control L, it was much, much more notes. So it was very random. And now it's much nicer. Still rundown. But I am in control. I do the same. I drew it. I just play around. It's really I don't have to be very precise. I make it to be thinner and with control. L I make it easier again. You see, there are only a few knows left now. Great. No, I select. I make the edges that it's not so much straight either. And then I remarried the line into one object. I am adding my menu now. It's very simple. As I told you, not creating separate buttons. I'm just writing new game set things etcetera, etcetera, all my stuff. I will write on this parchment on the space of paper, so I will use the same type off line. I just got it up shorter. I make a square and with bath difference, I cut a hole in the middle. Now I make a wider square. Which shift? I'm selecting the object. I make it that the square is aligned with the whole I just created. I move it up, select both of them, and I go bath intersection Intersection is giving the intersection of the two objects. You guess it right? And I just put the dot there and give a bit of frog edge also to death to make it more undermines. Contro l off course. I select both the circle and the thing I just throw bath Union Union is imagine Get into one object now with this one. I fixed the edges again. It looks random enough so where we will not drove over it. I don't need it. I just fix the edges of it like it was drawn me to panic. As I said before, Details, details, details, small things. We double quick. I didn't know there so I could make a little curve on the end. If I zoom out, it's not even visible. What is reasonable? It's not a straight line, and this is what I want. I select everything and I group it up. I align it so I select everything and the line into the middle. So it's a line toe everything? No. Which shift? I select the line and the tax together and just control the i d obligated a few times just , firstly duplicate. And now I just read the text settings. We start leader. Okay, champions, that's much better than leaderboards. It's up to you. And now I select all of the text by holding shift and arrange them to the middle. I said after toll, it control G. I book it up. So it's one group. I'm moving to be down there because I can position of it. I pull it down or even because I have so my space. I want to feel up this parchment of paper. We achieve time selecting those. I select everything. So I'm just holding, shift and creaking and then arrange it to the same distance, and it's looking nice. I take care that everything is the same. Distance is the same between the text and the lines. It's looking perfect. I'm very happy with it. And now we will move on to the next lecture where I will create icons like this on the game screen. 16. Fantasy game UI - Part #2: So I told you I will create a different version for this fun to the game user interface. So let's copy the background, and I want to create now something very different. In the first version, I used a background paper, and I just had the text as the bottoms. But here I will create separate buttons. This one's so I just make your ex Red Square, and I will copy the text from there to here. And I would just arrange describes like this. This is just prototyping, like former sketching said. Like them. Arrange them yes, more or less like this. So all my buttons were fixed with all my buttons were fit. I did read those. I don't need those. Yeah, now. And as before, I moved the bottom into a cream part, and this time I would create something different. I loved the metallic effect in fantasy games, so I re colored this. I might re colored later, and I will give it a metallic edge. I want to cover the edge of the buttons so I will not make full metal buttons. I just make little squares and turned them into metallic looking edges on the buttons. It will make it a bit more tough, a bit more different than the previous design. Okay, so I just at a square, turned it into a bath and modify the shape, and now did a circle to make a dent in it. I select the both of them. I mentioned the edges off the square to the edge of the circle. I It's intentional that the edge off this now triangle is not matching totally the paper. I wanted to be outside of it like it's a frame. Now we shift. I select the edge and the circle, and I go to difference. Now I have a nice, interesting shape. I duplicated with control D and with these bottom or with simply pushing V on my keyboard. So just flattery. I flip it vertically and they position it here. I want to create a little triangle. I make it not surrounded. I rotated, and I put it here in the middle. Besides, it's a bead. I select all of them and arrange it. So even if there is no distance between elements, arrangement is working. Now I select it, and with the color picker I make it great as well. It's too pointy. I opened it up a bit because that I can on the top is turned on. I can decides the notes the distance between the notes. Okay, it's much better. It was too dominant. Before I'm happy with the shape I could magic together and I veal. But now I take it aside. So I select all of the elements that shift with contradicted application and the heavy here on the side. It looks like a letter, he. But anyway, I imagine this one and I have the previous one. I always do that when I have a good idea for character, game, user interface, design, whatever, whatever I am drawing, and I have a good idea, I put it aside and make a new version because I can go back to that now. I duplicated it and added a stroke. It's still think thinner and it's Yeah, I have to make it edgy. Nice. It's point, there's health, I said, the thickness great. It's already looking like I met the other thing. I turned the stroke into path, so this way I remove it as you see, and that's why I duplicated it. before it is a stroke. It is not a stroke anymore. It's a path. I cannot said the thickness, but I can break it apart. So what I will do now? I use the base. Here too will depend too. And at the edges where I think there will be shadows. I create little shapes just cutting at the corners. I removed the stroke off it. I don't need that and like other rethink. So I see what I do. So every time where there is a break there there is a corner. I make a little shape here again and on the take Really much care that both of the edges are aligned. So I zoom in. And yes, I always say I for the detail. You have to take care about this and I do the same here on the bottom. I only have to be presided. They had precise at the edges. I don't care what is inside which shift. I'm selecting them and I go towpath union. Now this is one object that springing this pink one I select would shift the graven and I go to break apart. My object disappeared. But what is happening Now I have different little pieces from the original stroke. This is what I wanted. Why? Because I can color them. So let's give a Grady into the background. One to have a more mentally field. I recover it later. I just tried to find a color. Nice. I would go for this blue steel feeling, at least for now, and I'm sketching. I'm thinking about the shape a lot, but I'm not thinking very much on the color. It's very easy to recovering, except you just select the object every color, a double quick. I add some more. No points and paying those white next to the white. I had two other no points to make them blue or, in this case, dark, greyish blue. And that will make the white line sharper. So it has, like a shiny part in it, start to look nice. And now let's record this edges we created. I selected them all together. The one on the left on the top is one object, so I just create them easily. This one I want to give a grade Ian because it's curving. How do I know it? Because I drove so much. I'm looking at references. I always say this. Look at references I might not should be sure about this. I'm I'm not super short, but I'm selecting the note and I'm changing the color because this is what I see in real life that this is how it is happening, how matter looks, that is shiny. And it's changing color according to the light. And this is how you make it semi realistic because I'm still drawing a cartoon style. I'm not applying textures. I try to keep it simple. If this is up, this has to be brighter. If the other one is down, that has to be darker. My idea is that the light is coming from the top, So whatever is facing down is dark. Whatever is facing up is light. I discovered here gravy and pick another one and make it a bit darker. Nice. You see, I'm not using an edge. I'm not drawing, manage. Just because the two colors meeting there are so different, it's creating an edge. What we're doing here, you can use in any type of button creation later on, and this one I just feel make the darkest. So I go to the color picker. It's too dark. OK, Night IM said. He's fine. The coal fire We came from the previous one. That's why also, I love the application and let's stretch dislike to be. These nodes have pulled him up for a bit. Which shift? I can select the notes all together and you can pull them up now. I selected Contra Gee to group it up. No, I duplicated and bullet aside, I duplicate the background. That's better because I wanted to make it has an edge like we did with the paper. This could be blue, but it wouldn't work that much on the blue background. So let's go back to this dark blood red. Okay, this could work. It's working very nice with the metallic feeling and you know, it's looking like a flag like media off like so the edge one. I gonna make a big, darker, just a tiny bit. I select everything and I group it up and I move it in the middle off my screen. I make it a bit bigger. I can on What I see is that the color is to blue. I like it very much, but I have to make it more great because it is just disappearing. And I've heard a lot and I don't want it to be disappear. I wanted to have the metallic feeling. So what do you do now? I very dro we do all the colors. I just said, like the edges give them the grayish color And because I already know what I did, I already know what I want to do. That's why it's gonna be easier to re color. I delete some notes so the white is more transparent, more visible. These will be brighter, so I make it a bit brighter. Okay, not this one on the top again. I give the Grady and decided before it's okay to re color. It's okay to move it. You see, it's this easy. And this edge also has to be brighter. If I make this ticker, it's matching very nicely the edge. But somehow it's losing this sharpness. I'm not sure I like him that it was overlooking. So what if I make it thinner again? Slightly thinner? We have talking really about pictures here, but I want to make it perfect. Now I duplicated flip it again with age, letter, age and I put it into position because the right one was still blue and this gray is much more visible in my blue sky. I arranged the elements to each other Nice and now I just copy the texts from here. I'm not choosing a new fund. I don't need to. I'm taking the champions one because there's the longest. I want that one to fit in. If that is fitting, all the others are fitting. I color it white because that wide is strongest here and it's standing off the strongest. We shift, I said, like the bread background and divide text and the lining to each other. Select everything both the text in the button and with control. G. I grouped it up, and now I did what I did before in the menu, just duplicating how you arrange them. They're a bit close so I can select them again. I moved the bottom one. Only I still like them again, and then it's arranging it, distributing them again in a new shape. Show off New game, sad things, you know, it's up to you. What do you write on your buttons and how much do you have? Just have as much as you need. You don't have to make five or six or something because someone else was doing that much. Do the buttons. How your game needs it. Okay, I made a typo. I said, like the text with shift. Select the bedroom and align it to each other. Now I have this one. The logo. I just select the line and the local co paid here. There is no background behind it. So with Contrave, I just based it here. I have to make it a bit different, so it's standing out, but it's still standing out on this light background. I arrange it to the buttons and I pull it down there. Now, as you see, this one is much more different than the previous one. I make the logo a bit bigger, and I color it to the same red. Okay, it's nice. So no, I have these ones and the previous form with the paper with the parliament, and I think it's looking good because it's different. It's up to you, which one you use for your game. In the next lessons, I will create the icons for the place screen 17. Fantasy game UI - Part #3: now, as I said previously, here I will continue and create the game user interface for the place cream. I will copied these elements or these exact look and fear into there, so it will be consistence here and there. It will be the same, but I want to create. I made a little note to myself. I want to create a heat, a jump I can some live bar or life icons and the score points. Let's say this is an endless runner or something like that. It's just a made up game for about my little night, I drew for another course of mine, So I'm again sketching a bit and figuring out where to position my elements. If this is a mobile game and this is horizontal, I'm using my Tom's on the left and the right to make my character jump and I can put the score on the top. I could make my butt in this big, but it would cover everything up. I don't need that. The only rule I need is that it has to be as big as the some of the player. It is really not rocket science. I will avoid obviously delete those and just copy the elements from the left and use them here. These dark gray blocks are just a showing What I would like to create for my game. So now you copy of this one with control. I selected the paper itself and now you put it here. I want the same color and everything. I just put it next to me as a reference. Could come in on the dope and I would type the score score there. But for now, I will just leave it there and I will use it for drawing. The first I can I make is the sort because I have a sworn here. I just copy it. I double click grubber kick again and I go into the group. Okay? Selected only the shine. I have to sword. Yes. I take your sword, little man. I control seat. I don't take it. I just hope it for myself. And I turned it to me. I don't put it vertical or horizontal. I think it's much more interesting. I deleted the background and I drove a little paper here. I already make the little edges I did before, and I decide the size. Now I pick a color. It is already looking like the paper I had on the left. Select the sword and the page up. I put it up. Okay, It's already looking nice. It's nice because it's matching the color off the night, obviously from the same place. And it is on the piece of paper. I just make the handle longer because in the animation I did for the night doesn't It's not visible, so I don't have to show it. But here I just corrected. Okay. Looking good. Doing it a bit more. I give this ingredient. You don't have to be a sophisticated us. The big paper. Just a small one. A dark part in the light part. And guess what? I will do the same as I did with the other one. I fixed the edges a bit, so it's a bit curvy. It is looking like a piece of paper with the Noto. I'm just grabbing with the little hand and I make it Kirby where I want I make some cuts also here on the bottom. Make them dark. So I see what I'm doing. Select them. Boasted shift and just path difference is looking nice already. I duplicated and they give you the dark color. I moved it down there a bit and no, I select. I hold the color picker and I select another color. Actually, I could use the same color. I think I selected here and zoom in and big this color for my thing because it was still selected when I zoomed in just easily colored it. I move it a bit on the side with the cars are keys. So the arrows on my keyboard and I give you the beat of fig. Radiant. Why? Because here on the bottom I still wanted darker. It was not dark enough for this. I do the same Us. You remember us? I did the same in the previous lecture. I am matching the edges off the paper so the thickness is not disappearing and just take the handles. Correct them. And these are again very, very small details one pixel detail in your game. But it will make it believable. And there on the left I don't have to do much. They are already in the line. I had the note here. I wanted to be lazy but it cannot be skipped. Okay, now it looking nice. I select all of them. The paper, the edge of the paper and the sword. It's control G. I make it a group. Now I make an edge here and I take care that it's aligned with the background. I have just for you to show how my button is looking. I select the group off the button, this object and I goto sleep moved it. A big donor. It is looking decent is mentioned the game, the game colors and it is also matching the paper. Now I really flip it and duplicated and use it on the right side. But because we are very good designers, we have an eye for detail, so we will change some things first. Ideally, the sword and I stay change some things as well. I arranged it to the left of it because the paper cannot be the same as it was on the other side. If it's on the right side, I don't see the inside off it, so I have to move the edge of it. And also I sell I both the background at the paper and the front I said like these things and I straight shave them a bit. So I said, like these nodes in that I select these notes and re size and the shape them a bit. Why? To randomize my design. So it is not looking. I'm just copy pasting elements. I just did. But the viewer will not notice it. It is already looking a big difference than that one. Let's play the same here on the bottom which shift Selecting both of the object, selecting these notes and moving them inside of it. It is already randomized. I like to do this in my designs because it is making them special. I moved the edge inside because if I say to pay, see the paper from this part I'm not seeing the edge and as well here. Then I have to move the edges. Bit of cleaning up. And this one I moved this one as well here I had the note and I think this edge small, small detail. This makes it work. So I know I have these two pieces of paper and they are not looking the same. What I will do now I've got some war edges here cut it in. I select the paper we achieved. I duplicated the cut and I cut it out also from the background. When you are using control and click on an object, it was selected. So I go towpath difference again Before I just did control minus which is also like path defense. And now I fix up badges again on the note here and there. Nice. So it is looking like Thorne differently and we not much effort. I created a paper which is looking different, like the one on the left side. I just deleted the big paper. I don't need it anymore. And I'm ready to create my giant icon here on the right side, just a square. I throw another square in it and rotated by holding control. I can rotate in a perfect 90 degrees angle. I drove another square around it and they calorie darker. And I said, like them both, and I go to path difference. Now I have a triangle. I make this one smaller, but that's more okay. Arrange them to each other. So like them both and with Contra Path of Path Union. I made them together. If you're going to the path menu next to every order. There is a shortcut you can use. Check that out. It's very helpful, but I'm always saying what I'm using. I want to color it like the sword. So I picked the colors from there. I don't want to make it red. Like on the previous screen. I wanted to match the sort, so I'm making a blue with shift Greek. I am adding it another color, and I'm giving it a Grady and now is looking nice. It's very simple. It is looking like the sort it is looking. My little guy, I'm very satisfied. If you look at the whole screen, it's matching nicely now, here on the top. I could use the paper again, but I just decided I make another version again like I did with the buttons. I already make the little cuts. It's a torn paper. Nice. May the edges bandit a bit, So when the little hand is happening there, I can bend it. I removed the stroke, and I will obviously change the color off it. When I'm selecting an object, read the Grady in total. I can see the number of the radiant up here, you see, and when you have a very complex throwing and you set an object to Grady and it's creating a new grading for everything. But I have this exact one, so it is not more or less the same colors. It is the exact same Grady int. That's a very good to know. I'm creating a square and I line it to the edge off my screen because I wanted to be aligned. I want to see my screen, how it would look on a mobile. I make it semi transparent, and I move. My object okay, can be can come down a bit. Bandit more, I said, like both of them and I go towpath intersection nice and you see it's matching the edge. I really like it and make some more cuts because they are always good. Yes, the Simbolon. I made the opacity high again because escape is remembering the last opacity you used. So, like the triangle on the paper Buff difference. Nice is looking nice. It just needs a thickness. So I duplicated it, and I picked this color. See, it's much darker. I move it a bit just a bit and with the page down, I put it under it. Obviously, now the edges are not matching, so I have to take care of that fix. The radiant goes on. This paper is bending outside so I can play with the great inter bit. And you see that corner is fine. That is almost fine. But there on the top, it's not. So I have to correct it. And also there on the edges. Move it a bit more. You know, it's more visible and the paper seems more thick. Just go in with that edge. It's fine at some notes here at some. Now, there on the bottom. Done. I see the left side is still good. I doubt so because I move it. It's not matching the side anymore. Good. And this one here as well I have to fix It might seem boring, but believe me again, these are the small details you want. Toe is looking good. I like it that it's lighter here is darker on the other side. It is looking nice, and it is in contrast, So what I want to do now I want to co pay the text from here because on this one. This red is showing very nicely, as I saw in the previous video are not the sort the text Come on. Controversy. Going back, clicking, going through V. Yes, and I will just change it to numbers because this will be my scoreboard. Yeah, a nice Randall number. You I will add some life bars or some icon for life. And what else I would do? I will make a heart. Now I'm showing you my process of creating a heart. Just two circles with control. Turn square 90 degrees and match the edges matched the two circles with union. So they're one object A range the square to these double circles and resize it a bit. Now if I resize on the top, there is a little edge. So I drew another square. Select both of the squares. Both difference. So what I have now is this diamond shape and the matching edge circles. And I just measure them together with Junior. This was very fast. You can t watch it again, But this is how I make a heart all the time. It's very easy and it's a good practice. This is holding skip works So now I want to make the heart, which is active, the same reddish color, a bit smaller, so it's not touching the edges. It comes through the I just throw them around and the last one, like he already lost a life. This is how it will look. I just give it a darker color, and it seems that it's pushed into the paper like dry, like a dry stamp. What a watermark. I make it a bit darker, and because it's pushed into the paper, I will give it a bit of a thickness. I duplicated device, so contradict control D the top one eye color, toe, whatever color and move it aside a bit. Select both off them. And now I have a dark edge and something I can color separately. You see, I call it a bit lighter. Here again, I have to fix the edges, but it's really seemed like like it's pushed into the paper by stamp or it's cut into the paper. Nice. I like it. You can clearly see which is active in which is not. It's not really matching the paper, so let's give it a grade. The end, just a small one. What if I flip it? Another thing. I want to flip the Grady end so you delight is coming from on the top. I think so, Yes, it works. I can make my score bigger, much more visible. I move it a bit aside so it can feel up. But then this whole paper can be smaller. I don't need us. Big aside, Drew before, and it's good. You can reshape it and you need it. The whole point is that the you why you are drawing is not getting in front of the player. It is not ruining the emergent off the player and he still sees what he's doing. So it is fine. I rearranged the elements next to each other and it seems I am done and I have to say I'm very satisfied. The icons are looking good and matching the background in the little night. This paper element in this ink is very good. With the score, it's much visible, it's very visible and the whole thing looks very current. So let's see what we do in the next lecture 18. Fantasy game UI - Part #4: So, as I said in this lecture, I will create the game icons and butters matching this title screen. It is red with the mythologies. It is very different than this one and d standing out great against the background. It has a nice look and feel. I copied icons and my little notes from the previous one because I don't have to read through them. I gonna color them differently and use them again. So I used the style and these buttons. But I will do it differently now. I copied this button with control De had implicated and move it here in the middle. Here it will be my scoreboard. I am hanging it out of the screen on purpose. I don't want it to be a button that the player wants to push. I put these buttons on the side. This time they will not hang in. They view be circular. So this one we would be just a bar holding my score and my little hearts to show how many lives I have left. I'll be the score I copied. The heart colored is white, but it's not visible, so I put with page down. I put the bar under. It can make smaller. Even I duplicate the hearts, select all three of them. It shift and I distribute them nicely. This one. I made darker lead, so I know that the player was the lost A life. I don't need more than that. I think it's good now. I can reposition a bit because I have plenty of space. So I will make the bar smaller even to make it more sure that the player doesn't think it's a button. I will bend it. I will bend it inside and I make these two red bars. Follow it. So it's I like them both and I goto path, object to path. Grab this corner notes and pull it in. Now I have to do the same on the other side, but I do not do it by hand. I simply select the to squares. And so, like this metallic bar controlled the so duplicate or three objects together, and with the age I horizontally flip it. Put it aside, I could use this icon toe flip it, but it doesn't matter because with the letter age, you can do the same Now. I wanted much shorter. So I pulled these bars inside and these one as well they remain that I just pulled them inside again. I could merge them together, but I don't care, because the edge will be covered with this nice mentally catch. That's really change things a bit more looking good. Plenty of space. Now, if you see it's different than this button and I don't want to use this type of buttons here. I will do it differently and those butter has bottom part in the tough part. But I will cut mine off, so I drove a square over it. I align it to the edge of my screen. Yes, I make it semi transparent, so I see what is under it. It doesn't matter that it's semi transparent, I said, like that and the other object, I re size it removed with a bit. Okay, which shift? I sell I both, and I go set clip. I apply the clipping mask. It doesn't matter if it was transparent. Now, holding control, I'm selecting my text and my heart's because they're too down and I moved up. It was not enough bedding under debt, so it was almost touching the edge. Now I could make this bigger bit to play more and abdicated with page down. I send it back and I give you the nice edge. Page down, page down. Okay, maybe it is not even needed has just keep it how it was. I arrange it to the middle of the screen. It's looking nice. I have a lot of space. I see my player. I can move it and I can do whatever I want now here on the side I needed two buttons I again we'll have a jumping button and the slashing button. But I want them to live the same metallic. But this time I want them to be circular. So it's very good I kept this. Do you remember the previous lesson? I kept this little shape. Obviously I've You just copied the look and fear from here and here into this circle. So I will make it look metallic with the pointy part. But it will be not square. I've you apply the same radiant to it. I select this object and check What is the number of the Grady? And you see this number. So I do this trick and I go here and look for that. Great. And charities Nice. Now automatically. The Grady int was applied horizontally. I moved it in on other angle. Now I duplicated and I pick the dark color from the tiny edge. It is already looking like a metal disc. I duplicated again and I resized the circles by holding shift and control. So they have one center. I big a red one. And now I duplicated twice and I gave a little edge. You see, it has a bit off thickness is the same trick we did with about on the same thing we did with the with the paper. It has a darker edge on the bottom. It is looking like a shield and it is red inside. Now I copy my little triangle. I arrange it to the middle. Nice. I copied this one as well. I sell are both of them and with control. Plus I will merge them together. I could also go towpath union. I do that. So they're one object now. Which shift? I'm selecting the red one and I arrange it to the background. So they have the same distance. I pick a color here but it's not really matching because I have the Grady int on two sides . So here's a trick. I duplicate my triangles twice, and I move one of them a bit above. I cut that off from the red one, and I cut out another one from the great circle behind. So this way the Grady and one is visible. The circle in the back. What if I move it down here? So I select the red one? Yes, it is looking nice because it has a big part on the left side triangle and another part on the right. No, I'm giving some dense some cuts here I fixed the opacity is looking like it's cut or it's broken is giving to the very metallic field and as well here I selected. But the difference the otherwise I didn't have to do it is just covering up is looking nice like a little shield which is buttered up. And now I am putting in my icon. Obviously, it cannot be this blue thing. I need to recover it. So for the edge, with shift holding the shift in the color picker, I'm giving the dark agree and for the gravy ins. I'm picking the light and the dark part off this Grady in I arrange it into the middle. It is looking good. I selected. And with Contra gee, I group it up. I duplicated and put it on the other side because I will not throw this little thing again . But I will put the sword inside at home. I put it on the top. I go in, I delete it. Really? The arrow resize this would. And again I arrange it. And again Ivory color it. My only thing shift. I'm recovering the edges and the the normal click. I'm recovering the insides of the sort. The darker part will be a medium gray. Yeah, it is looking already nice. So it is matching the matter leak. Feel I have I removed this from here. I don't need it. Okay, so I'm satisfied. So far, it is matching my title screen. The icons and the bottles are in very good contrast in the game. To be honest, it's too much contrast. My game is not a serious as my buttons. If the background would be different, it would be, But it's not so I could recall her these bars everything. What is red? I could you color it to the yellow one from the night or to a blue one or something like that? So it's visually matching the screen, and I want to change the user interface so it's matching the night. But I like this red one. I can also change my character. No, I'm not saying you should change your design. To match your user interface, you have to think much more than that. But in this case, the user interface is a good example. I'm showing you how it would work for a harder game for, ah, darker game as well. But here is just better if I recall her the night to beat off darker and red one. I hope you like this design. It's very different than the previous one. It has a totally different look and feel. Although the layout is very similar practice, create your own. I am very eager to see your design 19. Gemstone game UI - Part #1: in these in the coming lecture, I will show you an example or very typical gem game. All a match three game like candy crush or something. First I make the logo like I did before. I will be very creative again by the naming, just to remind you all the backgrounds and everything. I just made it to show you how your game could look. And if you have such a game, how I would solve the game user interface. So I'm changing the phone size. Let's pick a color. I'm looking for contrast. So that's why that's why I am aiming to have a nice contrast in color. It would be nice if there would be no background that I have a much better idea for this one. I grew this up. Ask me the previous letter with the previous logo's A group it up, and I put it together in a nice shape, and now I take a gem from there. This purple one is very good, and let's draw a background behind it. I am aiming to be friendly and really can be looking, so it's shiny with rounded corners. This is what you are aiming for no sharp corners. Very friendly. Put a little circle here. I arranged them to the middle. And now with control pass or path Union, I merged them together. No, I take the nodes and make this edge of it curving. You see, I just hold the control. Move this note horizontally and make the f edge curry with the control. I select the my and I put it. Okay, I got to do with the same down here would look cool, but it would cover the text this way. So I have to pull everything down there a bit. Yes, and I do the same. Arrange both union and again. I make that this notice, Kirby. Okay. It looks a bit pale. It is not I don't know. It's not strong enough. What device? Regional colors. Looking better. Still looking like a genie. But I'm still not satisfied. It has contrast. Text always has to have Contras Toby readable to eligible. But I'm not very satisfied yet. I think I have to find another color for the background. Move Disobeyed. Okay, it's better. I'm much happier with the spacing. A group everyone everything up resize it If it's my die. It'll screen if it's having a lot of buttons. I need to take care about the spacing. I like this yellow much better. It's also good with the background. It has a happy, sunny, shiny feeling. It is also good with Purple Diamond thing. I duplicated the background. I color it the darker orange, and I put it to the bottom. I could use the button end on my keyboard. All I could use this little thing. I just clicked up there and I don't want the text white anymore. I'm picking a medium orange now. I duplicated the original and then replicated it again. It's a trick I do a lot of time. So I have the word, you know, to replicated, and I moved the telephone and I goto path difference. This makes me having a little edge this way. I have the original and the little edge, which is making get beveled, which is like an inside shadow. I didn't use any FX to create this, ideally, just simply pushing the text aside a bit. You can see now I have two objects. One of them is the text on the bottom, and one of them is an object off this little edge I created. I gave you the Grady int and now I would give the same little bevel. I just duplicate everything and merge together. So I duplicated the group, then pushed Chief Contra G to get the group separated and then control plus or path union to magic together. And now I just give it a new orange color in the Grady Int and it looks like the stone has a beveled. Now I grieve to a little squares next to each other. This is how I usually do it. I drove them and I merged them together and replicate them all over the place in every corner where I want to shine and that just go bath union. So this is now one object. Bear with me. I duplicate the background, select the shines, selected the background and I go both difference. Now I duplicate the yellow er one select that in the shines and I go bath difference this time and I have the little shiny edges done. It looks a bit metallic. It still looks very curvy. Looks very nice. And I've heard so much because I gonna use the same effect for my buttons later on. Let's move this letter, son. A bit more. I'm ready with the logo. Okay, lets duplicated again. OK, but more interesting background and a nice contrast. So the text is there. It's readable. And I know want to give the same shines us I have on the buttons. One more thing. I forgot to color this one. Okay, so now I want to do the buttons. Not much. Just re your game. You can have as many as you want in the menu. I just give now three. The three I usually do. I like to sit there shines and I'm gonna color them and make the same things here. So I just make a line with the busier tool with the line to I gave it an edge. A stroke. It's transparent. So I put the all far toe the maximum 2 55 Ok, I have it. It's visible. I turn off the field. I just want to stroke. And now I said, let's see. Yeah, stick enough. I makes true that the edge is rounded so the ending is not got and it looks like a shiny little edge. I add some notes and delete some notes on the end to make it shorter. And now I do the same. Just very straight lines on the long edge. I gave it a stroke. Now it remembered what it was previously. That's right, looking the same like before and now I just scored with perfectly. I take it that the upper handle is horizontal. This one is vertical, so we're gonna have a nice car. Looks nice. I just want to break it up some parts. So, like I did with the little gemstones, I don't want it to be continues one point year. One point here I saw like them and I go to the upper part because they want to create a gap here and click this icon that are there is a gap. I'll see a lot of people are not using it, but it's a very, very good to know that it or no, I have the shines ready. First, grieve this better grade. The end. I take it that my buttons are the same color and their same friendly. So I around the edges and I used the same orange color and I use the same exact radiant. I just picked it here. I do the same thickness replicated that control De gave it a darker orange. Exactly like here. So just copy it. One orange bar warm or orange bar next to it. Great emergent together with bath union her control past. I am lucky because I just picked the color from the top. Resize it a bit. Duplicate the bottom and they go towpath intersection. No, I'm not gonna cut it like before. I just gonna hide it. One never lower. So it goes behind the yellow bar. So with the letters again, the same deal I did before and I type new game. Yeah, but that's I arrange it and they're going to give it the same little edge I did before saying colors here, the implicated advice. I move it a bit. So, like both of them, the background, which will be the dark part and this very dark bath as well. And then with control minus path difference, I just remove it, and I have a little edge. Now, I have a lot of things to do because, you see, the edges are not or perfectly matching. We're used to it receipt in three D. So now I have to take the no tool and go around and fix all the little edges. I think I'm gonna fast enough the coming part to be because it is a bit of time. So also, I go up here to the logo and fix up here, you see, on the M on these If this would be for a client or this would be for a real game, I would really, really take care that everything is in place. These are the tiny little details that matter. For example, here, with this little letters Jesus, it's it's looking horrible. So I really have to take with the M. It's looking very, very bad. I had the note here and I fixed it, and I'm gonna do the same with the same leg with the other leg. Same here with this M. When you going through a click on this little circles under note handles it, gonna remove those handles and create a straight line off a curve. This is what I used here and now. I moved the nodes just very, very fast just to be in the place. There are some or adjustment I could make around the G and the river, But I really don't want toe. I just don't want to rub your time for this. I just fixed up the obvious and I will move on soon. I promise. Okay, just this is horrible. Still So going through a quick on the handles and it's straighten up again, going through a quick on the handles. And this straight. It's a nice little trick. I selected everything and I grouped it up Nice. I duplicate the edge. So what I did, I selected the yellow Bar control D. I made it a that smaller, just a bit smaller. Toby inside. And he still has the Grady enters. Feel I will turn it off my first. I just object to path Turn of the field at some notes here and there. When I wanted to separate, I gonna do the same gap design I did before the same gapping icon. I delete these nodes and I had some nose here and now I select the last two notes and I do the same thing with the Gap icon and that's removing that whole part. I had some notes here to create a tiny gap as well. Nice looking How I want modified the shape of it. So it's better following the edge. But look at it. It's really looking like a nice shiny candy. This is what I wanted. It is the same type of shine us my little gemstones. Okay, so, no, I duplicate these button because I'm satisfied. I could put them very close together if I would, But I have a lot of space now, so I just gonna make three icons, three buttons, and I can put them wherever I want. So let's just create a bit of gap. I delete the text and this one gonna be options. The public ated twice. Give it the darker color for the edge and then whatever color to cut it up. Selig Dembele's shift part difference. I have the edge again. This is how you make simple looking three d looking text in escape. It's very, very easy. I am lucky because the the letters here in the s and then those I don't have toe fix much. I did what I did have to do. I duplicate the original. So if I made any mistake in the options it not gonna be repeated if it's not the same. I want the buttons to look the same. I want the union. I delete again this edge apart. And that changed the text. What else? Yes, Quit. I like both. Arrange it into the middle, replicated get the doctor part replicated and change it to whatever color I want. Purple doesn't matter because no, I said, like both of them achieved Not the background. The two texts? Yes. And then path difference Easy. You did it so many times. Now you have to understand it with a Q. I just have to make a tiny adjustment with the other letters. I'm fine. He didn't about him. Something bad happened. I fixed that. Okay with the other letters, it seems OK. Die anytime. Here, the tea. So it looks good. I separate them a bit and use the arrangement so they're distributed with the same distance between Now I want to show you something. How these buttons looks if it's pushed. So it replicate the last button. And I was talking about this in that lecture about button states. If this would be a real button, I always think about an old tape recorder on all old CD player. So if this is a real live button or in a TV removed, when you push, it is getting darker because it's downer. It doesn't get us much light. So I make the bottom part thinner like it's pushed and I make it darker. Obviously, I have to make the text darker as well. So the darker part the edge off the text also has to be okay. Not this much. Yes, like this one. So there is a huge difference. You can see which one is Putin, which is not. In the next lecture, we will create the heart and icons for the game itself. Stay tuned. 20. Gemstone game UI - Part #1: So in this lecture we will create the ICANN's looking the same way asked the buttons to So I duplicate my new game button. I delete the text. I don't need that now. And I just create. Oppose I can. I suppose it's just two squares next to each other. Two columns. I round it down. So it has the same friendly look and feel as the other buttons and us the phone I'm using for the text has okay, match them together and I get the same All in for this one. I duplicate and I do the same. Trick us. We need so many times in the previous lecture, the applicant give it whatever color, move it aside. So I like both of them. Shift and control minus or bath difference, I said, like them and group it together and now put it into side. Now this button is it to be too long for this? So I make it shorter and make their illness off the corners a bit smaller because it's almost like a circle. Now I gonna make also the shiny and you'll be smaller. That's why I turned off that little icon on the top. So it is not changing the size on the thickness off the stroke, I delete these and nodes and these two and I have a nice edge. And with the basic tool with the Pantelis, I call it I just continue the pot and I make it longer. I'm gonna at some notes here and they're gonna do again the same tree committed before select them and quick this nasty icon to have again fix it because it was too tiny. Perfect. I moved. I can now in the middle. Celeb. Both of them a line to the middle. Nice. No, I will fix the Grady in because it's totally out of the picture. Much better. And now I have to face the back and just pull it in. Actually, I can throw it away, Keep it for reference. I duplicate the yellow, picked the orange from this one, and with the end button, I just push it to the back island gate this or put it down. Er doesn't matter. Duplicate the orange one. Select them both and then I go to path Intersection. I I have the same shine and the bottom is looking nice. I don't need this orange anymore. Delete selector. Group it up and know Where should I put it? Can be on the bottom on the top But it definitely has to be smaller because just overwhelming everything else even smaller. Ok, nice. Okay, for now I put it here. As you see, I have a little note as well. What else? I have to draw. So the pause button score a timer and the boom or ah special I can have you used. I can put it up here or down here. I duplicated for now. So here will be my scoreboard more or less. And here will be one of the icon. You know, this is just the sketching. I delete it now because I don't need it. It could be up. It could be on the right side. I'm I'm really just trying to figure out where to feed my game user interface. What is the best possible thing for me? So I deleted and I put this little button inside. I can make it long again. I'm not using the first bottoms from the title screen because those are bigger will be bigger curves. They are. They are just bigger. It's a smaller version. Off those buttons, it's a different version. I can use this like it's hanging out of the picture, but now I just gonna use it that it's aligned toe the buttons or the background of the buttons, this one as well. So for no one, I just blind everything to the left and to this button, which is not the bottom is just a bar ideal. Put the scoreboard so I just type score. Yeah, whatever. One Brazilian. Let's make it longer, but we're effect and they can then give some space to the text and I can as well make it a bit bigger. Maybe not much, Okay, It looks nice. I do the same colors and the same duplicate. Give it an edge trick with it. So many times darker color, Replicate whatever color. Move it. So I like them both indifference. Now, if it's in your game, you have to make your own phone forties or there is a special icon forties. I just use this now for because the score gonna change all the time. I'm just using it now. Us. A reference like this is how I want my game to look. This is how my scoreboard I want to look. But if I really want to do it in my game, I have to take care that it looks like this. Ok, it's done. I made even the tiny fixes. I make it a tiny bit bigger and I give some space here. So if the number it will be bigger can be bigger now I am adding Ah, another icon. I arranged it to the bottom off the other one. So they are aligned into the same line. And this icon will not be oppose because I already have that this will be the bomb. This will be a special I can for me so I could draw a realistic shiny little bomb. But I decided because I wanted to be a button I wanted to make flat. Ah, and that it into them. But And I have So I just make a circle. I make a square. It was rounded. I made it on around it. Arrange them to the middle. So I like them both and make it one path. I drove an outline, stroked a path. Okay. Not dead before that. I shape it a bit more and now stroked a bath. Perfect. And with a little star. Now, with with a star, I create the sparkle on the top off their bomb and turned off the stroke off it. Make it to be smaller. And now imagine together and rotated Bath union or control Plus Looks nice. It has a whatever color because I gonna coloring the same orange like this one. I delete the post on I make this button a bit bigger because I want to give a number. Next. The bombs. Like how many bombs I have left? It controlled x I take it away. I double click to go inside the group off this button with Contrave. I'm calling in my little bomb. Resize it. Oh, it looks nice. I picked this orange on the same I used for the pose. I come for the letters and guess what is coming now? Yes. Replicate. Replicate again. Move it. So, like both of them is shift and path difference or control minus I give you the number. I do the same trick again with these. Make it orange. Give it a little edge. The exact same thing I grouped up the bomb. So no orange applicator, applicator, applicator and even give you the little edge. I hope you're not bored of these. The more you practice, the better you will do it. I said I both of them and I group them up so I can move them together. And I arranged it nicely to the bomb. So this is a bomb button. I can clear obviously how many bombs I have left or it can be anything else. Now in the top right part. I want to give the last thing. I need the timer. I know there can be many, many more elements in games like this, but I just want to give a little time. We're here because I know it's gonna be very similar for the score bar to the score bar. So I duplicate the base of that and I arrange these elements next to each other. So they are aligned and I also line it to the bomb one. So everything is around to the right and to the top. So it's order. I think one of the key elements of creating great u I is order. It's maybe not visible, but order has to be Because if it's too chaotic, then you're not gonna work so again. This one? Yes. I have to arrange everything properly through the size of the screen and to the size of my play board. What if I put this left and the little icon to the right? Nothing is fixed here. I really just moved The elements around for me look better that this long buttons are on the left and the little icons. The little bottoms are on the right. So what I'm creating now is a little clock or a watch. I made a circle duplicated it clouded to whatever color. Get the thickness? Yes. And then path difference or control minus. I make another little circle. Arrange it to the middle. Imagine together with union now the arms of the clock longer. One end the shorter one. We all know this. I just duplicated it, made it longer rotated it. I just take care of that on the middle. They are matching nicely. It will be very small. It's a nice small detail, but I want them to match. No, I put them in the middle and resize them. The long one is very long steel, so let's make it a bit shorter. I'm holding control and I can shorten it by keeping the thickness off the arm as well. Select everything. Imagine. Together we control plus or path union. Now I give it the bottom there with the button on the top. When this watches have I have arranged them. Make this bigger, I think. Yeah. I don't need this accident of the application. Nice. With path Union. I murdered together. I can resize it. I go into my little bar here, I think the Grady and first Okay, I go into it and I get my little watch. I rotate the bit and give it the same treatment off, giving it a little edge or in the shadow. So it replicated twice. Use whatever color I want. Shift, click. Select these element and then path difference. Nice. It looks very nice and very understandable. It's a little cloak. So what else it can be? It's the time. No. I gonna give the text the same way as it looks everywhere else and again because this is active text. You have to take care to create your own fund for your game from this type of letters. I mean, for the buttons in the menu, it doesn't matter. But here at the score and here with the time you have to create your own phone, I make it a bit shorter because it's not gonna be that long. I know that the maximum time I decide, for example, can be three minutes for or five minutes for a level. So I know it never gonna be more than four digit. Even if it's an hour is not gonna be for more than four digit. So I duplicate and do the same thing with badges. You know the deal already. Okay, I'm quite satisfied. Ability, this guide here, remove these a bit downer. Not much now. My only problem here is that the score and the time as well are looking like buttons. So I'm thinking how to rearrange it, how to do it, because it's obvious for me that everything is possible. But these things I don't want you to push these things. I don't want the user to push it. These are spinning numbers. Do you just look at it to get information. So what if I put the little buttons back to the left, this one and the bomb as well, and I just elongated so much that it's outside off the screen, so we're not gonna be feeling like a button. It's more like a bar hanging in from the outside. So I make these and cut it off. I arrange it to the edge of the screen, duplicated, So I have it twice in the same position. So, like the bar and then difference that. Ah, and it looks like it's hanging in. So I gonna do the same with the scoreboard. So I moved to the left, make it hanging out. You cannot just the text, the whole thing. Group it up. Arranged this to the other button to the left. Perfect, and this one is hanging out. I just make these longer, and I do the same throw something which I use Toe got off the part, which is not in the screen. I only do that to aesthetic reasons, so I see how my game you look. I selected difference I selected and difference on the other one again and is them? I think it's looking much cooler because it's not looking like a button anymore. I arrange it a bit more nice and it doesn't matter if it's on the left or on the right. Let's say this is a dump. I can push with my left arm. The bomb and I can use my other time toe, create the streets, the role of three elements and the do the mystery. So it's fine and the score and the time is clearly visible. So this is it. I hope you really enjoyed it as much as I did.