Icon Maker++ for iPhone is an icon maker app designed for iPhone developers.
Initially I built the icon maker app for myself to be able to quickly generate icons for my apps and demo projects. It can be incredibly difficult to push the project to completion. All the code is written, but there are still bugs to fix. At this point the developer is hit with the daunting task of designing Apple-quality graphics, promotionals screenshots, writing a sales copy and setting up a support page for the app. All this while all you want to do is upload the binary and be done with it!
I found that a couple my projects died because I could not push them to completion. This is why I’m building tools to help me, and other developers get stuff done. Get it published and tested before investing major amount of money into graphics design, sales copy writing and other services.
Working with layers
While this may seem alien and unfamiliar, layers are actually very cool and intuitive. You will like them. Every part of an icon can be moved around, scaled, resized, rotated, reflected. To help the app know which part of the app you are trying to manipulate, there’s a bar on the right of the icon with buttons. Tapping on a button selects a part of the app you are trying to control.
Layers are represented with the rounded square buttons on the right of the icon frame. You can scroll this view up and down to see more layers.
To change the layer order, you can long press and drag layers buttons above and below each other. Doing so changes the layer order making some layers visible and hiding others
An active layer is marked in blue – all gestures in the green bounding box apply to that layer:
- Pan with one finger to move the image around.
- Rotate with two fingers to turn content around
- Pinch with two fingers to scale layers up and down
Additional actions for the selected layer are listed on the panel below the icon:
- Reset layer – this resets the layer’s position, orientation and text to the default value. This is to help with “undoing” changes.
- Rotate layer – this is a 90 degree counterclockwise rotation, primarily used to turn the frame image around
- Reflect layer – creates a vertical mirror image of any layer.
The transparency slider can make any layer partially transparent. Tapping on a layer shows transparency slider for that particular layer.
Building icons with Layers
The app does not come with any kind of clip art. All you have are the frames, gloss effect, gradient and text – everything but the main content of the icon. You can get this content from camera or web. Everything else is just to make your icon look pretty and professional.
It is important to understand that the order of layers in your icon is represented by the stack of buttons on the right. The topmost button is the most visible layer. Everything under the top button is partially obscured by layers above it. Some layers are completely invisible (like the web view by default). If something is obscured, drag it’s button higher until it is fully visible.
The primary purpose of the text icon layer is to add a tiny text label to your icon. To edit the text, select the text layer, then tap on the text. You can long press to move the cursor around, the text layer has 4 lines that you can use to add more sophisticated labels to your icon. Text layer can be moved, rotated, flipped
This can be the HD, LITE, FREE, etc. Selecting the text layer brings up the font controls where you can pick from ANY font installed on your iPhone! Unlike name-only selection, the font selection shows you a live preview of how your label would look! This way you can customize your label with strict or playful fonts!
You can change the font color with the provided color picker.
The current font size control does not work, you can scale the font with gestures
Frame layer is probably the most important layer that everyone will be using. There are 27 frames, from classic gray to colorful to mesh, wood, as well as cutout flags where you can display your text.
Adding a frame to any image makes it look more professional! Tapping on a frame layer brings up a horizontal scrollable frame selector at the bottom of the screen. You can scroll it sideways to show more frames. tap on a frame image to apply it to the icon.
A slider above the frame selector named “Frame Color” allows you to change color of red frames. Moving that slider turns a red frame into blue, green, etc by changing the frame’s hue.
To get the precise look and feel you want, you can rotate the frame, reflect it and even scale it a little bit to bet thinner or thicker border.
Logo layer is your opportunity to stand out in the app store. Defining a custom logo brands your app. I think this is very important and will help you as a developer to stand out from the rest of the competition. You can define your default logo in the app’s preferences. Alternatively, you can take a photo (live camera feed is displayed in place of logo) or pick one from your camera roll.
A logo is saved along with your icon’s files, so the logo that you have selected is available in the future.
A logo is always round, and is scaled to fit.
Apple’s built-in gloss can be turned on or off, and in most cases it makes the icon’s colors appear washed out. It masks black and fades vibrant colors. Unfortunately there’s no way to preview this effect in the xCode. To help you with the gloss troubles, I added a gloss layer. The intensity of gloss is controlled with the “transparency” slider. Move the slider all the way to the left, and there’s no gloss. Move it to the right and the gloss is more intense.
You can even move the gloss layer around, selectively excluding some layers from having gloss effect applied to them. For example my logo is very colorful, and I like to keep it over Gloss. With the iPhone Icon Maker++ I can do that!
Please note that there are a few frames with built-in gloss effect that looks different from the apple provided one.
Camera layer is the main workhorse of the iPhone Icon Maker. There are two ways to work with the camera – selecting images from your photo gallery or taking live images of objects.
To take a photo of an object you need good light and a steady hand – point the camera and tap the record button at the bottom. The camera feed will be activated. Tap the record button again and the live camera feed stops, leaving the last image in place.
If you have pre-built graphics, you can email them to yourself, save them to your camera roll and access them by tapping the “select image” button on the camera panel.
Camera image that you use with the icon is saved along with your icon file, allowing you to resume editing the icon file at a later time.
Gradient layer creates quality linear gradients for your icons. Tapping on the gradient button brings up 5 buttons on the bottom:
- Top – selects the top gradient color. In my case, I use lighter colors on the top
- Style 1 – a gradient with the top defined as top left corner, bottom as bottom right corner (diagonal)
- Style 2 – a top down linear gradient
- Style 3- top color is in top right, bottom color is in the bottom left.
To change the intensity of the gradient, you can generate a gradient, and then move/rotate/resize it with gestures.
To create a solid color background, make the top and bottom color the same, in most cases you will only want black or white solid background.
By default, the web view is hidden, you need to scroll the layer stack down to see the “Web” button. Drag that button up until the web view is visible.
Web layer is really cool – there’s a full feature web browser in the app. It is small, so in most cases you would drag the web layer on the very top before doing any web searching.
Web layer has two modes, defined by the user interaction enabled switch.
When the switch is on, you can type into the web view, use web page specific gestures (for example google search results uses side swiping), you can pan the content of web pages, scale web pages, etc.
When the switch is off, you can move the web view around, rotate, resize it.
It takes practice to learn to operate the switch. IF YOU CANNOT TYPE INTO THE WEB VIEW, MAKE SURE THE SWITCH IS ON!
Additional controls defined for the web view are:
- Back– returns to the previous page, useful for getting out of google full size image preview
- Home – displays your home page (settable in preferences).
- Loading – indicates that the web page is loading. Tap that button to stop loading.
- Help – displays a mini-help for the web view.
Ornament layer is a text layer using Bondoni Ornaments font. This allows you to use keyboard to create ornaments. This is your last resort if you do not have a logo – make some sort of ornament!
Saving your work
iPhone Icon Maker allows you to save your work and resume working on icons later, exactly how you left them off! This took a very very very long time to implement, and it is likely that there are still some bugs somewhere.
To edit an icon, tap on it from your icon list. This restores the icon file. Do your changes.
To save your changes, tap the blue “SAVE” button in top right. This saves the local changes. There’s still one more step to do:
Next, you need to name your icon on the preview screen. This creates a local folder for your icon files and stores all the generated icons in that file.
From the preview screen you can also email yourself all the icons you need – 512, 144, 114, 72, 57, as well as 58,29 and 50 pixels white, transparent PNG. I’m pre-rounding corners based on Apple provided recommendations, so your icons would look the same regardless of whether they are displayed by apple or are listed on your websites, etc.
iPhone Icon Maker++ pushes iOS to it’s limit. There are a lot of views, transforms and details that need to be saved. The iOS is capable of saving it, but the progress may be slow on iPod Touch and older devices. I do not support iPhone 3GS. If you somehow get it on that device, the app is unlikely to work as expected.
Previewing your work
Up until now, the only way to see how your icon would look is to publish your app. WIth the preview feature, you are looking at how your icon is likely to look in the app store. It’s not perfect, but it’s really close. App store is built using iOS, and I’ve precisely laid out iOS controls to imitate both the App store search results as well as the detail app view. Look carefully – this is the face of your app. Very frequently the customer will be deciding whether to look at your app’s details or not based on this preview.
Additionally, I’m showing you the real size icon preview as it would appear on the devices. The icon’s name allows you to pick a short 11-12 character name that is guaranteed to fit the home screen without truncating. This field allows you to quickly prototype icon names, seeing which names fit and which ones do not. This is how I found that Icon Maker++ actually fits!
Additionally, I”m showing you how your app’s icon would appear in preferences screen.
Icon maker makes icons quickly and easily.
Last, but not least, you can save your work progress, along with all your generated icons using Dropbox Sync. To do so, tap the dropbox button on your icon list.
[notice]For best results, you need to have the dropbox app installed. There have been numerous complaints that the dropbox web authentication API does not work. Logging in with the dropbox app works every time.[/notice]
To start the sync process, you need to authorize the icon maker app to access a folder within dropbox. I can only see one folder, and the app manages the contents of that folder.
Next, tap the perform sync button. The total number of tasks remaining would be displayed. Each task is the upload/download or delete operation. Some of the tasks are instant, others are lengthy. It is recommended that you sync on wifi.
Dropbox sync puts all the icon files, along with the icon JSON file and a camera/logo image to dropbox. You can sync another app with the same dropbox account, it will download all the files, deserialize the JSON and create exactly the same icon file on another device! You can then continue work on your icon, but be warned – the latest modified file always wins. There’s no merging changes, and it’s possible to overwrite each other’s changes.
Please spread the word!
The Icon Maker app does not have the luxury of having a keyword optimized website built for it (yet). As such, I rely on word of mouth and your feedback to promote this app. At 5$, this app costs far less than any icon making service, or a stock photo. I hope you enjoy using the app. Good luck with your app store sales!
Why Icon Maker is a Singularity worthy app.
Part of the reason why I started work on the icon maker is that this app uses iPhone to make graphics – the an app builds a part of another app. An iPhone generates content for itself. The content can then be propagated to other devices via dropbox sync, where it can be mutated and re-uploaded. As such, I see the icon maker as a mini-life form 🙂 While far from “robots make robots”, I think this was a worthy effort!