Join Justin Seeley for an in-depth discussion in this video Generating icons for desktop applications, part of Creating Icons with Illustrator.
- View Offline
In addition to creating icons for mobile applications, you may need to create application icons for desktop apps as well. So in this movie I'm going to talk you through how to do that. I'm going to be using the Icon Slate application again but again, you can use any type of icon generation software that you want. You can also just save these out for the web as well. In Icon Slate, what I'm going to do is create a new file by going to File > New Project, and then here what I'm going to do is I'm going to select the Apple Icon Package over here.
Make sure that all those are there. And then I'm also going to make sure Windows is selected as well, and let's go ahead and turn on the sizes for those as well. We want to include all of these in here and then we're going to hit Done. So as you can see, this is going to generate a big pile of icons. And so in order to create this, what I'm going to do is on my desktop I have a cam-icon.png. You have access to this file in your Exercise Files folder. It's called cam-icon.ai. What I want you to do is just go ahead and save that out for the web, File > Save for Web, and if we look inside of the Icon Slate file, the biggest file is 512 at 2x.
So that's 1024 by 1024. So in Illustrator we want to make sure it is 1024 by 1024, hit Save, and you can save that wherever you like to make it convenient for you. As I said, I already have mine out on the desktop, cam-icon.png, and what I'm going to do is drag and drop that over. And so once we have that over here, here's one of the interesting things about Icon Slate that makes it so useful, in my opinion. Let me do this right here, I can actually come up here to the top right corner and click this little button to toggle the preview in the dock. Then I'm going to come down here to my dock, and you can actually see.
There is my icon right there in the dock. And if I were to go up to my preferences, Dock and go to Dock Preferences for a second here. Let's turn magnification on and crank it up. You can actually see this thing up close and personal to see exactly what it looks like. So that's a really interesting feature. You can actually test this directly from within the dock right there on Mac OS X. Then, when you're ready you can of course go to the build up here at the top. I'll go to Desktop, create a New Folder, I'll just call this App Desktop, and then hit Create.
And, then what I'm going to do is hit Build. That's going to build that icon. Unfortunately, one of the things that happens to me occasionally with Icon Slate is it does quit. Let's just open that up again. Hopefully it recovers your file. So we'll go to File and then we'll choose Build and Desktop. And let's go out to App Desktop. It actually created most of mine, I think. The original export that I had. So let's go out and open those up, Desktop. Let's go to the App Desktop, there we go.
There is the .icns file that you can use. And then also, the icon set that you can use as well, so that's going to give you the Windows icon file as well as all of the files that you need for the Apple icons as well which you would then use in an application like Xcode or something like that to determine the app icon. You can also just take these and replace existing icons on OS X as well so if you want to design your own icons for Photoshop or whatever you want, all you have to do is take this and you can copy and paste that in to use as your own app icon.
There are tutorials all over the web on how to do that, which is actually a pretty neat little thing. But, as you can see, it's pretty straightforward to create these new application icons directly from an application like this, especially one that just builds out all of these. You could just as easily create yourself an artboard in Illustrator that contained all of these different files and then use the PNG export or the SVG export that I talked about earlier to create multiple versions of the files. The unfortunate thing is that of course Illustrator does not do the .ico or .icns files that you need for certain applications.
It will only do the PNG which can be used by iOS and certain parts of Mac OS X. If you're going to export out for Windows you will have to find another generator, for that, but for the most part this is how I create all of the icons that I make. I use this piece of software right here. It's very quick and easy. It's drag and drop pretty much. You get that nice dock toggle up there and you can also view all of the icons at 1x or 2x. And then you can build it out at any format that you want, very quickly and efficiently.
So there you go. That's how I build my desktop application icons for both Mac and Windows.
- Exploring file formats, sizes, perspective, and platform guidelines
- Choosing an icon style
- Creating sketches and assigning color schemes
- Building a grid system for icons
- Redrawing icons with shapes
- Saving icons
- Generating icons for different operating systems