Tuesday, January 1, 2013

Preparing High-Res Icon Files with Automator

Preparing High-Res Icon Files with Automator:
Preparing HighRes Icon Files with AutomatorThis week's post is for all those Mac app developers out there. If you're not an app developer yet, it's a new year, and I'm sure becoming an app developer is at at the top of your resolution list. In any case, if you plan to develop apps, then you need to prepare icons for those apps. Apple provides very specific requirements for generating high resolution icons, which you can find listed on the Apple Developer Connection website.
In the past, Xcode came with a tool named IconComposer, which could be used to generate icon files. This tool, however, didn't generate high res icon files, so Apple now discourages its use. Instead, Apple provides instructions for generating icons using an iconset, a folder of image files that can be converted to an icon file using either Xcode or the iconutil command line tool. There are, of course, other ways of creating icons. In this post, however, we'll focus on an iconset.
To manually generate an iconset folder, you start by creating a square image to serve as your icon. Next, you generate versions of the image scaled to 16x16, 32x32, 128x128, 256x256, 512x512. These scaled versions are to be named as follows:
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
icon_256x256.png
icon_256x256@2x.png
icon_512x512.png
icon_512x512@2x.png
You place all of these images into a folder named FolderName.iconset. Then, you can process it with iconutil to generate an icns file.
Sure, creating scaled images and processing them isn't too difficult, but it's a lot of repetitive work. If you create icons regularly, it can get tedious. You're probably thinking, surely, Automator can be used to streamline the process. It can. Here, we'll create an application workflow you can run anytime you want to convert an image to an icon file. Let's get started...
Note: If you're an iOS developer, feel free to adjust the workflow below accordingly.
Creating the Workflow
Launch Automator and create a new Application workflow.
Preparing HighRes Icon Files with Automator
Next, insert and configure the following actions.
Note: This workflow is pretty long and repetitive. It's easy to get lost. If you get stuck, don't worry, you can download the complete workflow here, along with a sample icon image.
1. Ask for Finder Items - Set this action to ask for an image file at least 1024x1024 in size.
Preparing HighRes Icon Files with Automator
2. New Folder - Set this action to create a folder named MyIcon.iconset on your Desktop.
Preparing HighRes Icon Files with Automator
3. Set Value of Variable - From the popup menu in this action, choose New Variable and create a variable named iconset folder.
Preparing HighRes Icon Files with Automator
4. Get Folder Contents
Preparing HighRes Icon Files with Automator
5. Change Type of Images - Set this action to convert images to PNG format.
Preparing HighRes Icon Files with Automator
6. Scale Images - Set this action to scale the image to a size of 1024 pixels.
Preparing HighRes Icon Files with Automator
7. Rename Finder Items - Set this action to name a single item's basename only to icon_512x512@2x. This represents a 1024 image (i.e. a Retina display ready size) when the icon is created. Note that this action's title changes in the workflow to reflect the type of naming, in this case Name Single Item.
Preparing HighRes Icon Files with Automator
8. Duplicate Finder Items
Preparing HighRes Icon Files with Automator
9. Scale Images - Set this action to scale the image to a size of 512 pixels.
Preparing HighRes Icon Files with Automator
10. Rename Finder Items - Set this action to name a single item's basename only to icon_512x512.
Preparing HighRes Icon Files with Automator
11. Duplicate Finder Items
Preparing HighRes Icon Files with Automator
12. Rename Finder Items - Set this action to name a single item's basename only to icon_256x256@2x.
Preparing HighRes Icon Files with Automator
13. Duplicate Finder Items
Preparing HighRes Icon Files with Automator
14. Scale Images - Set this action to scale the image to a size of 256 pixels.
Preparing HighRes Icon Files with Automator
15. Rename Finder Items - Set this action to name a single item's basename only to icon_256x256.
Preparing HighRes Icon Files with Automator
16. Duplicate Finder Items
Preparing HighRes Icon Files with Automator
17. Rename Finder Items - Set this action to name a single item's basename only to icon_128x128@2x.
Preparing HighRes Icon Files with Automator
18. Duplicate Finder Items
Preparing HighRes Icon Files with Automator
19. Scale Images - Set this action to scale the image to a size of 128 pixels.
Preparing HighRes Icon Files with Automator
20. Rename Finder Items - Set this action to name a single item's basename only to icon_128x128.
Preparing HighRes Icon Files with Automator
21. Duplicate Finder Items
Preparing HighRes Icon Files with Automator
22. Scale Images - Set this action to scale the image to a size of 64 pixels.
Preparing HighRes Icon Files with Automator
23. Rename Finder Items - Set this action to name a single item's basename only to icon_32x32@2x.
Preparing HighRes Icon Files with Automator
24. Duplicate Finder Items
Preparing HighRes Icon Files with Automator
25. Scale Images - Set this action to scale the image to a size of 32 pixels.
Preparing HighRes Icon Files with Automator
26. Rename Finder Items - Set this action to name a single item's basename only to icon_32x32.
Preparing HighRes Icon Files with Automator
27. Duplicate Finder Items
Preparing HighRes Icon Files with Automator
28. Rename Finder Items - Set this action to name a single item's basename only to icon_16x16@2x.
Preparing HighRes Icon Files with Automator
29. Duplicate Finder Items
Preparing HighRes Icon Files with Automator
30. Scale Images - Set this action to scale the image to a size of 16 pixels.
Preparing HighRes Icon Files with Automator
31. Rename Finder Items - Set this action to name a single item's basename only to icon_16x16.
Preparing HighRes Icon Files with Automator
32. Get Value of Variable - Set this action to get the iconset folder variable you created way back at the beginning of the workflow. You also need to set this action to ignore its input, so it doesn't continue processing the 16x16px image from the previous action. Select Action > Ignore Image.
Preparing HighRes Icon Files with Automator
33. Run Shell Script - Set this action to pass input as arguments. Then, enter the following command:
iconutil -c icns "$@"
Preparing HighRes Icon Files with Automator
Preparing the Run the Workflow
Before you begin running the workflow, you need an image you can convert to an icon. Note that iconutil requires this image to be square. So, make sure it is. If you really want to be sure it's square, you can insert a Crop Images action between steps 5 and 6, and configure it to crop to 1024x1024, scaling to the shortest side before copping. However, if your image contains transparency, this action will remove it. So, it's best to prepare your starting image as a square.
Running the Workflow
When you run the workflow, you're first asked to choose an image. Select the desired image and click Choose.
Preparing HighRes Icon Files with Automator
The workflow runs, an iconset folder is created on your Desktop and passed to iconutil, which generates an icns file.
Preparing HighRes Icon Files with Automator
You're ready to plug your icns file into your app. Now, any time you need to generate an icon, just create a square image and trigger your workflow. Happy New Year and Happy App Developing!
Preparing High-Res Icon Files with Automator originally appeared on TUAW - The Unofficial Apple Weblog on Mon, 31 Dec 2012 11:00:00 EST. Please see our terms for use of feeds.
Source | Permalink | Email this | Comments

DIGITAL JUICE
Posted by at

No comments:

Post a Comment

Thank's!

Subscribe to: Post Comments (Atom)