The course is part of this learning path
This course explores the fundamentals of how to design an iOS app. You'll learn what you need to consider in the design process and the various tools available.
- Learn the fundamentals of iOS app design
- Learn how to use Adobe XD
- Understand the various design components you can use for your apps
This course is intended for anyone who wants to learn how to develop apps on iOS.
To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.
Hi, within this lecture, we're going to learn how we can export the images that we have created in the Adobe XD so that we can use them in the Xcode. So, in fact, let me tap to select image thing one more time because we actually need that thing in real life. So, let me come over here and give some color to our rectangle. And I'm going to lose the borders because we won't be using them. And then, let me bring in some text and I'm going to call this tap to select image. Like this. Like we have done before. So, after that, let's select the Select tool and make this a little bit bigger so we can make this central and we can see every text. Now, once we do that, actually we can around this rectangle up a little bit. So, if you choose this right option over here, you can give some values to run this up. For example, rather than zero, you can come over here, you can see changes, the first corner. So, rather than zero, you can just say six over here and it will run this up. So, you can give the same amount, same value to every corner so you can have a rounded rectangle. And by rounded, I mean smooth corners. Now, if I choose these views together, and I want to group them so that I can export them. So, I want to right click on those views, and you can just select Group from this menu in order to create a group. And then you can come over here and you can just click on this, double click on this to change the name of the group that you have created. So, I'm going to name this something like taptoselectimage. After that, we got to make sure that we select this to export. So, once we do that, when we export some stuff out of this project, only the selected items will be exported, not the others. For example, let me draw a circle over here since I'm not tagging this to be exported. And you will see when I export something, it won't be exported. So, let me come over here to Export, Batch. Once you select that, as you can see now we are saving this into some folder and even the name is select to image, taptoselectimage. And we are not actually exporting the circle that we have drawn. And rather than Cloud, I'm going to save this to Desktop. And we generally go with PNG rather than JPAC. So, if we have any transparent background, the PNG shows this transparently and JPAC doesn't show it transparently, it shows it in white. So, we generally use PNGs. And rather than Web or Design, I'm just going to go with iOS, because we're working with iOS. It's actually indicating that it will create something called 1x, 2x, 3x. You will see what this means. So, let me save this project as well. So, I'm going to save this on my Desktop here, not in the Cloud. So, I'm going to come over here and say Select and let me name this something like select image so that we can see how XD projects look like as well. So here we go. Now we have the XD project, and we have the images, and we have three of them. Why do we have three images? So, let me open every each of them so that you can see for yourself that we have the bigger sizes. Now, 1x means this base image, the smallest image over here, and 2x means this bigger image in the middle and 3x means the biggest image. Why do we have all those? Because we have different screen sizes in iPhones and in iPads. So, Xcode will actually work and try to figure out which one to use when it's necessary. So if we're using a big screen iPad, it will only use the 3x one. And if we're using an iPhone SE, it will probably use this 1x one. So, if we don't do that, it will be too much pixelated in the big screen sizes. So, it won't look good. So, let me create an Xcode project and show you what I mean. So, I'm going to just call this DesignTest, because we're not going to do much over here, we're just going to bring in those assets. So, I'm going to create this under my regular iOS Project folder. I don't believe I need to upload this to the Github later on anyway. But right now, I'm just creating this and I suggest you do the same as well so that you can get a hold of what it feels like to work with assets. As you can see, now I can bring in the 1x. But now, I can just bring in the 2x and 3x as well. And since I've done that separately, didn't understand, but I can just drag this down. I can just delete the other one, the empty one. I can just go with that, I can even change its name to whatever I want. So, right now, I have three versions of this image. Even though I'm only going to use one in the main storyboard, it will understand which one to use when it's necessary. So, let me bring in some image view for example, and let me make this a little bit bigger. And if I come over here to image, I can only see one, because I only have one image anyway. But I have different sizes, different options for that image. So, if I work with a big size, it will use the 3x. If I work with a small size, it will just use the 1x. And if you click one of those, you can see the attributes, you can see the properties as well. For example, you can come over here if you really want to do something specific to iPhones, you can just choose it or you can just go for iPads as well. But if you're developing an app for iPhone and iPad at the same time, you can just go for Universal, like it's the default option. If you're working something for Apple TV, I suggest you go just check this out and create some images exclusively for Apple TV as well. But in our case, most of the time we want to work with Universal thing, and we have to supply the 1x, 2x, and 3x images over here. So, you can see the other properties over here like the size of the image, the name of the image. And I believe that's it for the properties. Now you know how to export images and how to bring them in and how to use them for different screen sizes. And you know how to work with Adobe XD at least in an introductory manner. So, you know the basics, you know how to use the views. You know how to use the operations and stuff. Now, I believe it's time for us to stop here. And within the next section, we're going to practice what we have learned so far.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.