Rockstar Icon Designer - Kate McInnes [54]
When I first began designing icons for Windows the developers I worked with were located away from the main office and had icons from the previous build for their tests. Because they had usable assets and didn't require new icons until a later build, I was given a deadline to create the icons by and left to work on the task alone. I didn't have many opportunities to work directly with the development team apart from the occasional rendering test to see if the technical specifications were correct. When it was time to test the icon designs, I took a screenshot of the application interface and cleaned it up in Photoshop with the Clone tool. Using the blank interface I was able to position the elements as they would appear in the application without the need to request help from the developers.
Remember, the earlier you spot any areas for improvement the more time you will have to make the necessary changes.
Name and Export the Assets
Once you're happy with the icons and they're all finished, it's time to export and save them. Make sure that each icon has a clear and easy to understand file name, not only will it help you quickly identify the icon, but it will also help you sort the icons for easy file browsing. Certain platforms such as Android, will require specific naming conventions and folder structures, so this is also a good time to double check your specification notes.
If you don't have a particular naming convention, a good one to use is the icon type then the icon function. If you're exporting single size icons adding the size at the end is also useful, an example would be "document-save.ico" or "document-save-32px.png". If you're creating an icon set for download, you may separate the icons into folders based on scale, so your folder structure may be Social Icons then PNG and EPS then 64, 32, 16. Use your best judgment, and if you're looking for further guidance on file naming, Freedesktop.org has some great documentation about this: standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html.
Depending on the format, you may need to use an icon creation program. For more details on specific formats and file types, refer to the "File Formats and Terminology" section in this book. For a list of icon creation software and file managers, refer to the "Appendix: Resources" section.
Troubleshooting
Problem: The drop shadow is creating a hazy line around the icon.
This can sometimes happen if you're applying a 90° drop shadow to a small scale icon using layer effects.
An icon with a hazy drop shadow.
As with all problems, there are a couple of ways to fix it:
Solution 1:
Okay, here's a quick way to fix the problem, but it's not great if you want to edit the effect later. Only use this technique if you're creating a Toolbar or web icon that won't need any further editing.
First make a copy of the icon and apply the drop shadow effect to the copy. Then make a blank layer above the icon copy and merge it together with the copy of the icon, this flattens the effect. After you've merged the two layers together, make a layer mask for the resulting layer and mask out the parts of the drop shadow you don't want in the design. It's not a very professional way to tackle the problem, but it's quick and sometimes quick does the trick.
1. Make a copy of the icon and apply a drop shadow, merge the copied layer with a blank layer above it. 2. Make a mask from the merged layer and fill the layer with a mid grey. 3. In the mask, delete the parts of the icon that shouldn't have a drop shadow.
Solution 2:
This technique will take a bit longer for complicated designs, but it will allow you to make unlimited changes without losing quality.
The best way to avoid rendering problems with shadow effects is to create your shadow