Introduction to Design
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 see an operation called masking, okay? So, in order to do that, I'm going to delete those two views and I'm going to create fresh ones. Okay, so let me create a rectangle over here and I'm going to give a blue color in the field and I'm going to lose the border, and then I'm going to create another view over here. Let me do a triangle this time, okay? Like that. And now I have a triangle and I have a rectangle, okay? Now I will just change the color so that we can see the triangle in a better way. Now I want to mask this by using this triangle. So, if I choose this views, two views together, then I can come over to my menu to the object. I can say Mask with Shape. So, it will mask the view with a shape like that. Okay, so it took the triangle out of that rectangle and it's actually masking this view right now. If I double click on that, I can just see the contents and I can just see the contents from these layers as well. If I click on that, I can see the individual views as well. So, I get to edit them later on. But it is not a great example of masking. So, let me show you a great usage or an ideal usage, a real time usage of the masks. In order to do that, we're going to need a real image. So, I believe the best way to display this is to find an image of a person, so I'm going to google myself out and I'm going to bring in an image of myself, okay? So, this is my picture. Let me copy this, okay? And close this down and paste it over here with command V, and here I have my picture. Now, what I want to do, I want to clip my picture so that I can just show a circular image. So, how do I do that? Just choose the circle over here and by holding the shift, I'm going to create this circle or an ellipse, okay? And I'm just going to leave this over here like that in the center, okay? So, choose them together and say mask, and here we go. Now, I masked my image. Now I have this beautiful circular image view that I can use on my screen and I can actually double click and edit if I'm not satisfied with how it looks, but I believe it's looking great so that you can create shapes like that. You can actually create masks with shapes like that in real life examples as well. So, let's stop here and try to export some of the views that we have done to use them in the XCode in the next lecture.
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.