Join Bill Weinman for an in-depth discussion in this video Creating the icons, part of Distributing Mac OS X Applications Through the App Store.
- View Offline
Creating icons for Mac apps is a bit different from the process of creating icons for other environments. Icons for the Mac scale continuously. Take a look at your dock and we'll go ahead and turn Magnification on, and you'll notice that the icons, they get very large as you pass your mouse over them and then they get smaller again. You can actually adjust this and make it very extreme or less extreme. It's really very flexible and it gives you an idea of what people expect from icons on the Mac.
I am going to go ahead and turn Magnification off again here. So Apple provides a tool for making the icons. It's called Icon Composer and you can find that in the root directory under Developer and Applications and Utilities and under here Icon Composer. So this is part of Xcode and it comes with Xcode when you install Xcode on your machine. So if I'll open this up and you'll see that there is a place here for 512 pixels square, 256, 128, 32 and 16 pixel square images, and you basically copy and paste those in and save it and it creates this composite icon file that has all of this information in it, and that allows the operating system to use the icon in so many different ways.
So let's go ahead and create an icon for our app. I'll come over here to the Exercise Files under Chapter 1 and icons-start. Now this is the Exercise Files off the desktop. I have just stuck it in my places over here in Finder, and you will see this file BWDemoIcon.psd. That's a Photoshop file. I am using Photoshop. You can use any image editor. Photoshop is very popular and common, and so I am using it here for demonstration purposes. Now icons are very big deal on the Mac.
People expect a lot of their icons. They expect them to look great. they expect them to work well. So I am going to give you some examples of some of the challenges you are going to find in creating icons. I have created this icon specifically to have some challenges that we can look at, so you can get an idea of the kinds of things that you're going to run into. Apple actually recommends right there in their Human Interface Guidelines that you hire a designer to design your icon, and the reason for that is that people expect a lot of their icons on a Mac.
So you want your icon to compete well in the icon marketplace. They suggest that you start on paper , that you draw it first on paper and use a bunch of ideas until you find the design that you want and then go to your image editing program and create an icon. They recommend that you use transparency. You can see that this icon here uses transparency well. That you use shadows and you see we have some shadows down here. If I turn on my white background, you can see the shadows. And inner glow on black areas. You'll notice that this area here is black and if we use a black background, it does not disappear, because it has this inner shadow, against a white background you hardly even notice that inner shadow, but against a black background, it really helps the icon itself to stand out.
So that it still shows up against that black background. If I turn off that Inner Glow there you'll see that the black just completely disappears into the background there. And you want to compose for all of your different sizes. So we are going to do that right now. This is 512x512 and if I go ahead and under the File menu here, I use the keyboard shortcut, which is Command+Option +Shift+S. So this is the Save for Web & Devices, and you will notice our image size here is 512x512. So we are going to go ahead and start by saving that and we are saving it as a PNG-24 with Transparency, and I am going to save that and I am going to put it in my Exercise Files Chapter 1 and I am going to go ahead and create a folder here called Icons and I am going to save it as BWDemoIcon-512.png.
So now I have a 512 pixel version. I'll open that up in Preview, there it is, and against the gray background there you can still see the shadows and all of that. I am going to go ahead and save this in some other sizes. Back to my Save for Web & Devices and I am going to come in here. I am going to say 256 and you will notice because I have the little lock there, it keeps the aspect ratio. I'll just press the Tab key and it goes ahead and it shows it to me in that size and I say okay, that's okay, that looks good.
I am going to go ahead and save that. I don't have to do anything to that to make that work, and I'll save that as the 256 pixel version. And we'll do exactly the same thing. And you will notice that we still need a 128 and a 32 and a 16 and so we'll just go ahead and do those. This is 128 and there it is in 128. It's still pretty good. If you have a lot of detail, you might want to use some layers that might have some detail or something like that, but that's still looking pretty good.
We are going to make some adjustments at the next size though. So this is the 128 version. I'll save that and now we are going to go to the 32 pixel version. Now you'll notice that if I do this and if I scale this down to 32 pixels, the word DEMO becomes completely illegible. There's no way that I can even read that. So I am not going to save that. Instead I am going to turn off my Demo layer here and I am going to go ahead and save it like this. And I am going to say that's 32 pixels.
So that's actually very legible there. And that 32. Obviously, there's a lot more than you can do to make it work in these different sizes if you want to, and I strongly recommend that you do. You really want it to-- but Bicubic isn't working too good. I am going to say Bicubic Sharper. That's a little bit better and we will save that as -16 and there we have our icons now. So here is all of our icons in this folder and all I have to do at this point is just drag them in and there is the 512 pixel version.
There is the 256 pixel version and I am just going to fill this all in right here. And watch what we can do now. So now we're in the Icon Composer and if we want to, we can look at it with a number of different backgrounds. Here's a light gray background. Here's the Grass Blades background. So you can see what your icon looks like against these different backgrounds, because it's going to show up in your users using of the icon. You can even specify another image if you wanted to.
And here's a white background. There is a black background. You can see our inner glow, that's working pretty well. You can pick a custom color if you want to, which is gray. The other thing that you can do. Let me bring it up against the Grass Blades. You can actually scale it down continuously and you can watch when it gets down to the different levels and you'll see the word Demo disappear, and now you just got that. Let's see.
So you can really do a lot in your Icon Composer to test your icon and make sure that it's working the way that you expect it to work. So we are going to say that this is okay and we are going to go ahead and save it now, and we are going to Save As and you will notice that it brings up the ICNS file extension, because that's what we want for Macintosh icon file. Now we are going to go into our Exercise Files folder and the icons that we just made and we are going to name it BWDemo.icns.
You wanted to have exactly the same name to the left of the dot as your application, and that's important for when we start putting the bundle together. So I am going to go ahead and save that, and now we have an icon file here and you'll notice in the Finder that it's showing the 32 pixel version right there, and you'd see it doesn't have the demo on it. Now you'll also notice that if we go here into the cover flow view and we'll go ahead and select the icon file, that it's actually showing the larger version, and you'll notice some other stuff here about this.
Notice that even though our file has all this space under the word Demo, that in the cover flow it's actually bringing it right up to the glass there, so that it can show that reflection. This is one of the little tricks that the operating system plays with these files. You want to make sure that your transparency mask is really coherent. Now we just have it automatically made by Photoshop. If you look here under Masks, you can see what the mask looks like. That's important because the operating system wants to know where are all these blank spaces around it.
So that you can use it for things like that. So that actually looks really gorgeous there. And we can see that that icon is going to work great for us. So don't skimp on your icon. Remember the user experience is everything for a Mac App. Apple provides this excellent tool in Icon Composer for creating a composite icon file with all the different images in it.
- Understanding the human interface guidelines for OS X
- Generating certificates
- Signing your app and its installer
- Setting up the Info.plist file
- Creating and testing the installer
- Registering an application in iTunes Connect
- Checking the status of an application
- Following the Apple marketing guidelines
- Linking to the App Store