An app's icon displays its first introduction to the app's users, and is incredibly important. This video explains how to create and apply icons to your applications.
- Setting an icon three application is actually a fairly straight forward process. To do it, select Assets.xcassets in your main group folder, in your project. From there, click on app icon, and you should see little squares that represent your icon images. Here we have one x and two x squares for every point size. The two x squares are for retina displays that have a more dense pixel distribution.
Those sizes must be twice the point width and twice the point height of what we see in the root size. For example, it says 16 point right here and at one x or at standard resolution, 16 points is the same as 16 pixels. But, on a retina display, that has twice the pixels horizontally and vertically, that would be twice 16 points wide and high, so it would be 32 pixels wide by 32 pixels high.
So for 32 points, the one x is 32 by 32, and a two x is going to be 64 by 64. So really all you need are images that are the right size. You also, don't have to, but you can save quite a bit of time, if you name them appropriately. I'll tab over to finder where I have some icon images. For those of you who don't have access to the exercise files, you can create as many or as few of these as you want to see this exercise in action.
The way that I name these files is icon under score 16 x 16, and then for the two x version, same name with @ two x at the end. That's the naming convention I followed for all of these. The great thing about following the convention is that you can actually select all of these, and then just drag and drop them into app icon. Now when you do that, a lot of the time it works pretty well. It looks like just about all of the images went to the right locations, except for this unassigned one, icon 512 by 512.
So for that, I can simply click and drag that into the one x slot for Mac 512 points. You can also drag images from finder one by one into these squares if you want, as well. So the reason why I gave these icons these numbers is because I want you to see on my screen where the different icons apply. Normally when you develop an application, your going to want a similar, or even the same icon for each size.
Just a better high quality version of the icon as the icons are at higher sizes. Let's build this project, So, command, B to build. And then under products, I should see distributing.app. You'll notice that the icon has actually changed to my icon here, it's actually showing 512. Let's show this in finder by right clicking it and choosing show in finder. So here's my application. In my finder window I can see right now it's using the 16 point icon.
But in this preview window, I see the 256 point icon. I can click and drag this and see if that changes anything, and right now it doesn't. Well, what happens if I choose a different way to view the files? Change the window size, go all the way to the right, and then I'm going to view this as icons. So I click the icon button, and now I am seeing the 128 version. Then if I go to cover flow, I'm seeing 256.
But I can actually expand it, to go to 512, if I make it bigger. So when you are creating an application, you want to provide all of these image files. If you only provide a low resolution file, your going to see the ugly low resolution one, when you scale it up, and it's going to look fuzzy. So remember to create image icons that are the right size, so that you can control how your icons look, at every size and every possible view in Mac OS. And to set the icons, simply find your image files and then click and drag them into your app icon section in Next Code.
- Installing your development tools
- Working with Xcode and the MVC pattern
- Creating basic interactions
- Creating delegate classes
- Building a user interface
- Laying out the UI
- Working with data and table views
- Binding data objects to the UI
- Debugging your app
- Distributing the app