: Sharpening iOS Icons I'm creating an iOS app and have a couple custom icons for my navigation bar. The first one is a plus sign and that came out pretty well. I also have a refresh icon

@Michele215

Here is how to create this icon in Illustrator:
imgur.com/a/FzZb8#0
Step 1: Open up a new Illustrator document, paste in the rasterized icon.

Step 2: Zoom up close on the icon since we're going to be doing some pixel measuring. It is helpful to place guides over the center(ish) of the icon. Nothing needs to be exact.

Step 3: Measure the width of the curve. I used the ruler tool, from center to center it is about 33.25px. Once again, does not need to be exact.

Step 4: Using the ellipse tool, create a circle of that diameter by clicking anywhere in the document then entering what you measured for both the height and width (33.25px).

Step 5: Move the circle over the curve. If you created guides, you can center it over the intersection of the guides.

Step 6: Add a stroke to the circle. I used 5.5pt which turned out to be a little bit thicker than the icon curve, you may want to use something between 5 and 5.5pt.

Step 7: Select the segment of the curve in the top right of the circle. Using the lasso tool, select a small portion of the top right (make sure your raster icon image is locked!)

Step 8: Hit delete to remove that segment so we have 3/4 of a circle.

Step 9: Edit the stroke properties: add a projecting cap

Step 10: Add in the arrow. Using the polygon tool, click anywhere to create a triangle (3 sides, 7px).

Step 11: Rotate the triangle -90° so it aligns with the arrow

Step 12: Place the triangle over the arrow and adjust the size as necessary

Step 13: Select your curve, expand the stroke (Object -> Expand)

Step 14: Save just the icon as .EPS

To export for iOS:

There's two ways to do this. In Photoshop, just open your .EPS and PS will ask you what size you want to rasterize it as. Make sure "Anti-aliased" is checked.


In Illustrator, select the whole shape and edit the size using the Transform menu on the toolbar. Then do File -> Export and save as .PNG. Make sure "Use Artboards" is not checked to just output the icon.

Vote Up Vote Down

@RJPawlick971

You may use PocketSVG
github.com/arielelkin/PocketSVG#pocketsvg
A class that converts Scalable Vector Graphics (SVG) into:

CGPaths
CAShapeLayers
UIBezierCurves
NSBezierCurves.


This makes it easy to create vector-based paths and shapes in your iOS or OS X apps.

This a fork of an SVG to bezier path parser by Martin Haywood, with fixes by Pieter Omvlee and Dominic Mortlock.

Usage

Make your drawing in a vector graphics editor such as Illustrator, Inkscape, Sketch, etc.

Save as an SVG.
Drag and drop it into your Xcode project.
Follow the steps on the link below

github.com/arielelkin/PocketSVG#usage

Vote Up Vote Down