

Ask HN: How do Mac software developers make realistic icons? - mcav

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/ ).<p>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?
======
Zev
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.

~~~
lrm242
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...](http://www.thedesigncubicle.com/2008/10/26-business-cards-of-graphic-
web-designers-on-twitter/). 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/>.

------
tvon
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)

------
koenbok
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.

------
arth33
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...](http://blog.cocoia.com/2008/06/13/faster-than-light-making-the-
hyperspaces-icon/)

Icon Resource is also a good place to get information.

<http://www.iconresource.net/>

------
tydok
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.

------
jemmons
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>)

------
hbien
Check out <http://iconresource.net/>

------
conanite
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 :))

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

+1, for sure.

