 Hello everyone, welcome back to another Ethan Journal video. So it's been a while since I published a video here on the channel, but that's because I've been really busy on my trip down to Florida for my national science speed competition. And then we're also working with some family friends on their Kickstarter campaign, which you can check out in the link below for a toy crib kit, which has also taken a lot of time and a lot of effort. So I really have not had much time to actually work on stuff here on the channel. But my goal for this video is really exciting and it's taken me a few weeks of preparation also to kind of get this ready, make a cool video for you guys. As you know from the title in today's video I'm going to be showing you guys how to make some cool graphics and design some app mockups in Apple Keynote. Now this is something I've done for a really long time just for fun and a few times for school projects when we had to design an app for the school project. And it's pretty fun doing it. I thought I'd teach you guys how to do this because I enjoy it and maybe you guys will too. So without further ado let's get into today's video. So when most of the video will not be taking place here it's going to be in the computer. So let's go into the computer. Computer inside of Keynote. Now this is where you'll see anytime you open up the Keynote desktop app on Mac. Now you can actually do everything I'm going to do in this video in the mobile version, but it's just a lot easier to do and there's a lot more features when you do it in the desktop version of Keynote mostly because it's a computer and they have the ability to make stuff more advanced. So basically because you're not going to be doing much I recommend just starting with the plain old white one because you're pretty much going to be deleting most of the stuff that's already there. So let's create this. So let's move this in to my window here right here. And so this is your main presentation space to start off with. I'm going to show you how you can design some apps. So first thing you want to do is delete everything that you have here. And then what you're going to want to do is going to head over to your browser of choice. And then what you're going to do is you're going to go to developer.apple.com. This is Apple's developer website, but this is where you can actually get the bezels for an iPhone. Now you can find ways if you want to do this for Android you can do that too, but I figured because we're using Keynote we might as well do something with an Apple device. So you can click on design and then resources. And here you can find product bezels. Choose the one that you want to do for this one. I'm going to do the iPhone 13. Okay, so once you have it, it's going to be a DMG file. So what you can do is head over to PNG and basically just select the one you want. I'm going to go with just the regular 13. And I'm going to choose starlight. And we're just going to put it right in here. And then you can pretty much close out of everything else that was open. Now once you're back in the keynote window, size this down to the perfect size so that it'll fit right in your product demonstration. So I always try to center it here quick because that makes it so it'll be nice and center, and it'll look nice on the page. So now that we have this here, you can start adding in the one main thing, the background of your app. Go up here to the shape category and select this one because then you can round it to the corners of the app. So first thing I'm going to do is I'm going to change the color so it's a little bit different and we will change this later. And then we're going to basically size this up so it's the perfect size of the phone like that. And then we're going to go all the way back down like that. And I'm going to go a little bit over to the side here now too. And then because you don't want it covering up the bezels, you can actually go over to the arrange tab under format and click backwards. That's going to put this behind the phone bezel so it'll look like it's going to perfectly match up with it and make it look like it's actually a screen image on the phone screen. Now we can head right back to this and go back to style and select the actual background color that you want. I like using this kind of like off-white type kind of gray I guess you could call it. If you want to use white you can but I like using this one because it looks just nice enough and of course you can go a little bit more complex with the color window if you want to and select like an exact shade of white and honestly this one here just a little bit more white isn't actually that bad. So once you have the background here it's time to start designing your app. I recommend adding in some text first and this I'm going to be designing a web browser called one tab so I'm going to go in here I'm going to add in my text and I'm going to type in one tab like that and now you can choose your font. I like using this other one here called Futura. I think it looks pretty nice for an app design it's not the normal one that you normally see but I think it looks pretty nice and I'm going to go over here and select my exact color that I would like to use which is going to be a kind of bluish right down here and just like that we have our one tab name right there. Depending on what kind of app you can design you can basically put this anywhere like that so I'm going to come back once I have a pretty nice design made up about the design that I wished for. I kind of take you guys through a tour of what I designed here and kind of show you guys how I did most of stuff and how you guys can do it in your app design so up here at the top you guys just tell me add in the title which is just basically just a regular text box here what I did is the search bar this box here is actually just the same shape that we use for everything else this one here and then I typed into it search right there and I just grabbed an icon also from the shapes if you just if you just you can basically type in any icon you need I typed in search I added that here now the way that I got the coloring is I made it so the fill was a gradient and then I got the drop shadow here to make it kind of give that that really cool look that's the same thing I did with this search box is that also has a drop shadow there as well coming down here to this image here my goal for the app is that in the future if I end up actually making this the user can change this background to whatever they want this is just a free image that I grabbed from pexels.com not sponsored and basically what I did with this one is I added it in as a advanced image fill and then I made it so it was it was blackened so it was darkened so that more text that would be shown up above it would actually be more clear and it would look nicer in general. Looking over here I added in like my recent sites and bookmarks these are just the same things I was doing before with them just being text boxes here as you can see this one did not exactly line up like I wanted to with the recent sites but that's because that these are both text centered if you want this to line up with the one right above it you can just right justify it like that and it'll actually turn out looking pretty nice here I had just I just grabbed some icons that's my channel icon so I have like YouTube slash Ethan and then Westman Ventures is my imaginary company that and that's the logo for it so that would be the favorite content of the website and those images there are just like I was doing with the other things were just an image fill and I set it scale to fit and with this one there's a white background so it looks nice there and these underneath are actually just captions attached to the image which makes it so that it when I move if I move this around it'll stay with it down here to the bookmarks this is just the same shape that these are except we have a gradient fill and then on the inside this is another icon that I grabbed under the plus category so I just grabbed this I gave it the white fill and then I gave it a drop shadow which made it turn out looking pretty nice and overall this app looks really cool I think it was a pretty decent mock-up if I wanted to go as far as to animate it I could definitely go in and animate this and switch between different slides here and make it look pretty realistic for this video I'm not going to go that advanced into this I have done it in the past but it's just a lot of extra work that is only needed if you're actually going to be showing this to someone for like like I want this to happen you show them what you exactly what you want and maybe a developer could actually build off this I don't know for sure because I don't know much of software development but this is just what I do because it looks fun and it makes it look like it's an actually real app so let's go back to the real world and I'm going to wrap up this video take it away real Ethan or not computer Ethan or Ethan of the future I don't know so that is how I basically designed my apps you can still see in the background here because I just finished working on that part I find it really fun to do this kind of designing because it's really easy to add your creativity this without having much knowledge in software design and graphic design you can also do this in pages it just won't look as nice the reason I use keynote is they don't have to worry about like text warping options and stuff along those lines keynote just makes it really nice it also allows you to animate between different slides you can actually make your app look like you're actually doing stuff with it it's pretty nice and you can make your app as complicated as you want with keynote there's so much more stuff you can do with this more than I covered in today's video if you would like to see more videos like this I could make this a series come out with more episodes about this I'm showing you guys the more complex stuff that you can do with this I don't really know for sure if you guys want that but be sure to give this video like if you would like to see that as well and be sure to also comment down below if you thought this was really cool and again what you would think what you would want to know how to see or what you want to see and if I ended up doing another upcoming video on the same topic but other than that I just want to let you guys know I will be coming out with more videos soon I am working on a video for my science be competition it's just taking me a long time since I have so much footage to put together and I'm still waiting on some clips to actually download and stuff along those lines so I'm it's somewhat in development so maybe it'll come I don't know sometime in the next month other than that but another thing that's slowing me down it down is just a few days ago I kind of hurt my wrist I tripped on one of my baby brother coys toys and we haven't gone to the clinic yet to see if I broke anything but I had this from the last time that I fractured my wrist back in third grade so yeah this is kind of slowing me down it's hard to type like this and edit videos but I'm making it through um a little bit of pain but not too much uh as of now because it's been a few days but other than that I would like to say thank you guys for watching today's video I hope you have a great day and see you next time bye bye