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 and it’s not as sharp as the plus sign. Obviously having a circular shape and having to do anti-aliasing play into this somewhat but I feel like the refresh icon should be way sharper than it is.

I’m not an expert in Photoshop or graphic design so I’m looking for tips on how to get the refresh icon to be a little clearer and crisper. Here’s how I went about creating it:

1) Started with background elements in Photoshop
2) Found refresh icon I liked that had royalty free licensing.
3) Took icon that was in .png format and imported it into Photoshop.
4) Did color replace of icon from original gray to current white using the color replace tool.
5) Saved out the white refresh icon to .png file.
6) When back to my other Photoshop document (with background, etc) and did a ‘File’ -> ‘Place’ and placed the white refresh .png into the document. Did not resize at all.
7) Added identical stroke effect to refresh icon as the plus sign icon.

I know there’s got to be a better way to do this to get a better result. Do I just have to bite the bullet and go to Illustrator and try to draw my own? I don’t have a vector representation of that icon I found – only Photoshop and .png.

Any tips would be much appreciated. Attached is the screenshot of the navigation bar with both icons.

enter image description here

Answer

Here is how to create this icon in Illustrator:

http://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.
enter image description here

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.
enter image description here

Attribution
Source : Link , Question Author : Craig Koster , Answer Author : Community

Leave a Comment