Creating app icon art with iPad

I thought it would be an interesting challenge to illustrate a high-resolution app icon using the iPad. The beauty of using vector art is that the artwork can be scaled to any size without the loss of quality - this is ideal for  the high-resolution capabilities of the retina display on both the new iPad and the new MacBook Pro.

There are several apps you can use to create professional quality vector illustrations. I decided to use Inkpad as it is familiar to me, and in my opinion, very much worth the price in the App Store. Sadly though, Inkpad has not been updated in over a year. So those of you with new iPads (3rd gen) may not find the graphics to be as crisp as the Retina Display optimized apps. 

One small aside before we get into the tutorial...For those of you who are you interested in drawing apps, there has been an interesting Apple patent published recently. Could we possibly see a vector-based app produced by Apple for both Mac line and iPad line? We shall see. I hope so.

The following is the process I used to create a fictitious drawing app icon (pictured to the left). One thing to note before beginning, I've used multiples of 32 when calculating dimensions as that is a common base for building icons.

1. Begin by creating a new square canvas (I selected 1024 x1024 pixels for this example). Set the grid spacing to 32 pixels, ensure the grid is visible, and that Snap to Grid is also on.
   
   
   
   
2. Select the rectangle tool.
   - Set the corner radius to 96 pixels.
   - Draw a rectangle that fills the canvas.
   Note: in the final product I scaled up the corner radius to more closely resemble an app icon. In this case, this is close to the largest radius that Inkpad will allow so we will work with it for now. Your results should look something like this.
   
   
   
   
3. If you look closely at app icons, you’ll notice a very thin one pixel line encircling each icon that serves to highlight it and to give it a subtle 3-D look. Since there is no tool in Inkpad to achieve this task (offset a path) will have to use the following workaround.
   - Copy the rectangle.
   - Create a new layer entitled “Highlight”. Rename your original layer to “Background” and lock it by clicking the lock symbol.
   - Paste the rectangle into the new “Highlight” layer.
   - Access the Fill Tool and set the fill to none.
   - Access the stroke tool and set it to 24 points. This will give you the equivalent of a 12 point stroke when we are finished.
   - Under the “Path” menu, select “Outline Stroke”.
   - Paste the rectangle originally copied at the start of this point
   - Next, select both the pasted rectangle and the newly created stroke.
   - From the “Path” menu, select the “Intersect” option. This remove any areas that are not intersected between the two shapes. You should not be left with a thin line that extends around the shape of the rounded rectangle.
   
   
   
   
4. Next we’ll reproduce the curved reflection that appears on almost every app icon. To create this, begin by selecting the circle tool.
   - Draw a circle similar to the picture below. Fill it with a radial gradient fill and set the gradient to originate from the center of the circle. Take particular note of the gradient stops and their locations on the gradient. Note that the first and last gradient stops are set to be completely transparent.
   - Add white to the middle stop and set the transparency in the range of 20 to 30%.
   - Paste the copied rectangle once again, and select both the circle and rounded rectangle. From the “Path” menu, select the “Mask” option. This will mask the reflection to the boundary of the app icon.
   
   
5. Create a new layer entitled “artwork”. We will use this as an artwork layer that sits between the background color and the highlight layer.
6. On the “Artwork” layer begin to draw the components of your paintbrush. I split mine into three components: the bristles, the handle, and the ferrule (the metal component that clamps the bristles to the handle).
   
   
7. To add detail to the bristles I used the following method.
   - Select the freehand brush.
   - Roughly sketch out the shape that you like the bristles to take.
   - Optimize the number of anchor points (generally the fewer the better as you can get smoother curves with fewer)
   - Use the selection tool to refine your sketch by selecting and moving anchor points to their desired position. Note: you can “break” the handles by placing a second finger down when you have a handle selected. This will allow you to create crisp, sharp points.
   
   
8. Next we will use the same technique we used to create the highlights on the rectangle to create a highlight on the bristles.
   - Using the Freehand Tool, sketch out a rough highlight over one edge of the bristles similar to the picture below. Ensure it completely overlaps one side as it will be cut out by using the intersect tool.
   - copy the bristles outline
   - paste the copied bristles outline on top of your highlight.
   - select both the bristles outline and the highlight. Use the intersect tool (Path>Intersect) to cut out the highlights.
   
   
9. Continue to add detail to your paintbrush. Using the same technique that you used to create the detail on the bristles, create woodgrain on the handle. The handle texture can be masked using the same technique we used to mask components earlier in this project.
   
   Note: This step may require a lot of refinements and a great deal of patience. It’s also a good idea to take a break from your work if you find you’re getting frustrated. A clear head and fresh look at your art will often help you see which direction to head in once you resume drawing.
   
   
   
10. To create the background burst effect seen in some of Apple’s icons:
    - Create a new layer below the “Artwork” layer and name it “Burst”
    - Create a circle and fill it with a radial gradient with the origin at the centre of the circle.
    - Use two gradient stops and set the outer stop transparency to 0%
    
    
11. Select the scale tool and perform a non-uniform scale on the circle (use a second finger once you begin scaling).
    - Duplicate the beam once you’re happy with it’s width (Edit>Duplicate in Place).
    - Select the rotate tool and rotate the duplicated beam.
    - Set the object’s transfer mode to “Overlay” (Shadow and Opacity>Blend Mode>Overlay).
    
    
12. Continue duplicating and rotating beams until you are happy with the result.
    
    
13.  The drop shadow below the brush was created in a similar fashion below the brush:
    - Create a layer below the “Artwork” layer named “Shadow”
    - Create a circle and fill it with a radial gradient (2 stops) - place the origin of the gradient at the centre of the circle
    - Set the outer stop transparency to 0%
    - Perform a non-uniform scale on the circle with the scale tool.
    - Rotate the shadow into place
    - Repeat the process with additional shadows if necessary
14. The last step is to make sure your icon works well as a whole. Your eye should be able to quickly identify it. Remember it will be sitting beside many other icons. For example, I experimented with a brush stroke behind the brush (see below) but determined that the composition might be too busy to take in when it was scaled down. Zoom out and take a fresh look at the colors, composition.
    
    Here are some suggestion if you feel your icon needs tweaking:
    - bring the “Artwork” layer to the top (above all gradients, etc). this will help the artwork to pop out.
    - experiment by turning layers on and off (e.g. the “Shadow” layer)
    - Does the main object in your icon have a definite light source?
    - What about reflected light?
    - Experiment with layer transparency to de-emphasize areas
    
    


That’s it. Happy icon making on the iPad.