Hacker News new | past | comments | ask | show | jobs | submit login
Ask HN: How do Mac software developers make realistic icons?
29 points by functional-tree on March 20, 2009 | hide | past | favorite | 10 comments
I work with Adobe Fireworks regularly, and a bit of Illustrator/Photoshop. Mac developers in particular seem to be well-versed in creating extraordinarily sleek-looking icons (e.g. http://culturedcode.com/ ).

Do they use Illustrator to create them? Likewise, know any good resources or books for that teach techniques for creating those types of icons for someone who knows the basics of Illustrator?




Unless the developer is particularly talented, they most likely outsourced it to a company that specializes in graphic design / icons. A very good (and expensive) icon making company is Iconfactory (http://iconfactory.com).

However, I think you were asking how to learn on your own? In that case…

Short answer:

Pick your tool and get to know it very well. Photoshop is my recommendation.

Get on twitter and follow some graphic designers / icon makers. There's a lot of very good artists on twitter who don't seem to mind answering questions about starting off.

Longer answer:

Pay close attention to detail. It doesn't matter if you won't see it 99.99999% of the time, the overall icon looks better if you act as if that .00001% will come up daily. You know how you want to account for every possible edge case when coding? Do that, only with art.

Know what you want from the icon. Match it to your product. I don't just mean what you want it to look like. What about your app do you want it to represent? Will your icon have a Dock badge that shows off information? etc.

If you start with a vague goal of "Making a realistic looking icon for my program that does $foo", you won't get a very good icon. But if you start with "I want to make an icon for program $foo that identifies it as being an app for $bar", you'll end up with a much better result. Look at Pages.app. Gorgeous icon from Apple. Its undeniable that its an inkwell and a pen. But its not very realistic. But it fits in well with what Pages.app does; Typographic layout and creation.

Few examples of details. Since you mentioned Cultured Code, we'll look at Things.app:

- If you open the App.icns it comes with in Preview, you can see lines for individual sheets of paper in the front of the tray, and if you look at the back corners of the paper, its not perfectly aligned.

- Lighting. Theres a ton of attention to lighting in this icon. The paper has a slight gradient around the paper, so its not one consistent shade. The tray keeps up with this lighting as well, if you examine how the tray looks in the front left corner vs the front right corner. And if you look at the back corner of the tray (or the bottom dip in the front), you'll notice there's a slight highlight in the left corner, but not the right corner. Even the check mark on top has a gradient on it.

- The curve on the corner of the icon match the curves found in Mac's (same curve in iPods and iPhones, if you're curious).

//edit: The link tvon gave to a thread on MacThemes is full of great links to read.


This post has a list of 26 designers on twitter along w/ the design of their business card: http://www.thedesigncubicle.com/2008/10/26-business-cards-of.... If you're looking for folks to follow, this would be a good place to start your search. There is also this directory: http://justtweetit.com/graphic-designers/.


You might have better luck asking in the MacThemes forums: http://macthemes2.net/forum/index.php

Also, the "so you want to make an icon" thread might be helpful: http://macthemes2.net/forum/viewtopic.php?id=16791388

(I'm not a graphic designer so I can't really say how much help that will be)


We [http://www.madebysofa.com] make some icons too and use a mix of Cinema and Photoshop. We mostly sketch in 3D to get the lighting right, and then redo the entire icon in Photoshop ending up with a bunch of shape layers with lots of layer styles.


You could use a 3D software to render beautiful images and then with that images as a visual guide you can create icons, ie in Photoshop, by using layers and vectors.


I really like Sebastiaan de With's stuff. If you read his blog he sometimes explains the development process he uses. Here's a post he had on an icon he made for Hyperspaces.

http://blog.cocoia.com/2008/06/13/faster-than-light-making-t...

Icon Resource is also a good place to get information.

http://www.iconresource.net/


Sadly, there's no real trick to it other than being a good graphic designer. Please note this is a career unto itself with all the traps and pitfalls "career" implies. Before you decide to spend a weekend learning Photoshop to cook yourself up an icon, consider the scorn with which you would look upon someone who turned out an application after only a week of study of the frameworks, languages, philosophies, and methodologies involved.

If you care about your application's icon[1], your users will thank you to hire a professional.

[1]: And you should. As the HIG says, "Application icons are the most visible to users. Since they are seen in the Finder and the Dock even when your application is not running, they form a significant part of a user’s first impressions" (http://tinyurl.com/d82lkq)



you might like to take a peek at http://iconfu.com - it's pixel-oriented, only for smallish icons, not the great big vector icons you get with Illustrator. Some icon design resources are listed at http://iconfu.com/resources/list/icon_design/0.html

(iconfu is my current project, please be nice :))


I was just asking myself this question the other day. I really hope to see some good responses here, soon.

+1, for sure.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: