Features

25 Professional Frames

Cheaper than any stock photo or an hour of a graphics artist work, the app comes with over 25 frames, already positioned properly – just add your logo and image, and you got an icon!

Frames include all the most popular iPhone frame styles – from ones with a logo area to corner cutouts, banners and even a camera image.

Layer Support

With layers you have freedom to move content the way you want – pan, scale, rotate, reflect, change order, blend using transparency.

Content From Camera and Web

Got a good camera shot? You can use it for your icon in seconds. Looking for content on the web? You can use it for the icon without the need to copy/paste, right from the app!

WYSIWYG Design

The live preview feature helps you see your icons exactly as your customers would – because you are looking at the same icon on the same device that your customers would! A preview of how your app would appear in the app store helps you pick a descriptive name for your app that will not be truncated.

Save Your Work to device and Dropbox

The Icon Maker++ App for iPhone helps you save your work to resume editing your icons in the future, or you can synchronize it with your Dropbox Account and have your icons available on other iPhones, as well as your Mac or PC.

How to Use

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.

Icon maker interface

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.

Saving

The graphical manipulations involved in building an icon take a few seconds and cannot be done instantly. This is why you need to tap “Save” to save your changes.  Once you are on the Preview screen, tap Done to complete the saving process.  Doing so completes the save process. You can move back and forth between the icon designer and preview screen, adjusting your icon to fit your needs.

Camera Layer

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.

Frame Layer

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.

Web Layer

With the web layer, you can use content directly from a web view for your icon. You can prototype icons with any image on the planet!
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.

Gradient Layer

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.

Logo Layer

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.

Text Layer

Dynamically changing the frame color

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

Save 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.

Dropbox Sync
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]

This is a preview of how your icon would look in the iPhone app store

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!

Preview Work

Exact preview of how your icons appear throughout the Apple Universe!

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.