2

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

Improve this question
6
  • For app icons, it's always good to use vector format so that things scale nicely for different resolutions. That icon wouldn't be difficult to create in Illustrator, would you like a tutorial on how to create it?
    – JohnB
    Commented Nov 28, 2012 at 16:46
  • Well I think I could create the icon in Illustrator but my lack of knowledge comes in when it's time to save it out to a file that's usable by XCode/iOS - wouldn't I just be saving that Illustrator file to a .png ultimately which is a raster based output? I know vector will give me the ability to scale up/down, etc without losing clarity but what I've been doing in Photoshop is exactly the size I need it to be and I zoom in and try to get everything pixel perfect. Would Illustrator really be the way to go here? If so I guess I don't understand why if the ultimate output is pixel based.
    – Craig Koster
    Commented Nov 28, 2012 at 17:26
  • Should I even be saving these to .png format or is there some other forman (.ico?) that would be better suited?
    – Craig Koster
    Commented Nov 28, 2012 at 17:28
  • PNG should be fine, but to maintain sharp edges you should create and edit the icon in a vector format. I've just posted a quick tutorial for you that shows how to create the icon and get it the size you need in either Photoshop or Illustrator.
    – JohnB
    Commented Nov 28, 2012 at 17:55
  • Are you taking into account retina displays? That looks like a standard resolution on a retina display--which will always be blurry. But as stated above and below, ideally you'd use SVG (for HTML5 based apps) or convert the SVG into native UI elements for native apps.
    – DA01
    Commented Nov 28, 2012 at 18:30

2 Answers 2

Reset to default
2

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

Improve this answer
0
2

You may use PocketSVG

https://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

https://github.com/arielelkin/PocketSVG#usage

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.