[Nebagakid]

Okay, so, how does the TextEdit icon look? It is not a simple rotate and perspective tool job. The closest I could get is to rotate it, then distort the bottom right corner out, but it still does not look the same. What is the method for the tilt of the TextEdit-style of icon? And what is with that yellow shape behind the sheet of paper. I understand the presence of the pen and the piece of paper, but the yellow shape, gah?

[dru]

Originally posted by Nebagakid:
Okay, so, how does the TextEdit icon look? It is not a simple rotate and perspective tool job. The closest I could get is to rotate it, then distort the bottom right corner out, but it still does not look the same. What is the method for the tilt of the TextEdit-style of icon? And what is with that yellow shape behind the sheet of paper. I understand the presence of the pen and the piece of paper, but the yellow shape, gah?

It's another paper, perhaps a "yellow legal pad" which is common in the States.

The Mac OS X icons were done using Cinema 4D and not drawn out with a package like Photoshop. Offhand I forget the artist's name, I seem to remember he's a Latino. They weren't done "in house" by Apple.

Visually speaking, the added background paper is to add visual interest and set the front paper apart from the background further. Both the TextEdit and AppleWorks icons use the same design trick the only differences being the colors: yellow and grey, respectively.

If you look carefully, the yellow bits peeking through from under and the pen form a kind of "V" and the eye reads that as emphasizing the opening between the \ & / parts: the top paper. It is the top paper which most defines the application.

I'm not saying you *have to* render your icons with a 3d package, I'm just saying that's how the specific icons were created. Some people have used drawing packages like Illustrator or Canvas. You can probably do it in Photoshop as well with careful use of layers.

I realize that isn't a tutorial but I don't have the time. Perhaps there is one online, though. If you find one, please do put up a link in this topic.

[Steb Mad]

Originally posted by dru:
Offhand I forget the artist's name, I seem to remember he's a Latino. They weren't done "in house" by Apple.

Where did you heard about this? I'd love to read any articles about this. Thanks.

[sushiism]

just looks like it could be done with a skew

[Nebagakid]

3d programs, eh?
That must be how people can get their icons looking so ****ing great, and here I am using photoshop like a fool, making boxes and cylanders like a dummy!

I was thinking that these people were icon masters

[Steb Mad]

Originally posted by Nebagakid:
3d programs, eh?
That must be how people can get their icons looking so ****ing great, and here I am using photoshop like a fool, making boxes and cylanders like a dummy!

I was thinking that these people were icon masters

I think most of the icons was done with a mix of photoshop and 3D app.

Mail.app, System Preferences, iSync, iPhoto, iTunes, Internet Connect, Stickies, and few others icon are obviously done in photoshop.

[Dace]

I think you just have to have a basic understanding of "perspective". If you can hand draw an object in perspective, then using the computer for the same task isn't that much different. 3D apps automate the task for you a bit, calculating the shadows and angles...but if you are good at drawing and observation, you could pull it off using just Photoshop.

I only use Photoshop, sometimes Illustrator...but most often just Photoshop. And I don't like using the "perspective transform", I prefer using the "distort transform" for creating a perspective. And do one object at a time, first the paper then the pen. And finally, practice, practice, practice. Eventually perspective will become automatic. That's my 2 cents.

[dru]

Originally posted by Steb Mad:
Where did you heard about this? I'd love to read any articles about this. Thanks.

I'm not sure where I read it. I think it was a post on Ars' OpenForum but I can't recall.

As for the Cinema 4D claim, I did find a post here which repeats what I had read before.

I may be mistaken on the actual designer used. It has been so long since I read this that I didn't want to misattribute. Sorry.

[aaroncs]

Just to stop some of the misinformation before it gets out of hand, I attended an icon design kitchen at apple a couple years ago where two in-house designers gave a group of about 15 outside designers tips on how to get that aqua look for their application icons. Almost all work on the icons was done with photoshop, with some use of adobe dimensions to rough out the shapes in the icon.

Someone else who attended an icon design kitchen at apple wrote up notes from their experience online.

http://softmagic.weblogger.com/stories/storyReader$193

At the bottom of the page you can see the notes from where we were taken through the icon creation process in photoshop layer by layer for the TextEdit and battery meter icons.

[Steb Mad]

Originally posted by aaroncs:
Just to stop some of the misinformation before it gets out of hand, I attended an icon design kitchen at apple a couple years ago where two in-house designers gave a group of about 15 outside designers tips on how to get that aqua look for their application icons. Almost all work on the icons was done with photoshop, with some use of adobe dimensions to rough out the shapes in the icon.

Someone else who attended an icon design kitchen at apple wrote up notes from their experience online.

http://softmagic.weblogger.com/stories/storyReader$193

At the bottom of the page you can see the notes from where we were taken through the icon creation process in photoshop layer by layer for the TextEdit and battery meter icons.

Don't forget that that notes was dated 2001 so I'm sure lot of things have changed since.

[Nebagakid]

am I the only one who feels like the post above is incredibly cryptic?

[Steb Mad]

Originally posted by Nebagakid:
am I the only one who feels like the post above is incredibly cryptic?

Are you talking about my post or the one before me?

If it's me then I'm not sure why you think my post sound incredibly cryptic. I don't work at Apple but I do know lot of stories behind OS X icons

[edit: actually, you're right.. there's something cryptic about who I am.. ]

[Drifter]

What the Hell is Infini-D?

If only I knew how to use 3-d�sniff

But I know how to use Mask Pro to steal those Pens and ****.

[Steb Mad]

Originally posted by Drifter:
What the Hell is Infini-D?

If only I knew how to use 3-d�sniff

But I know how to use Mask Pro to steal those Pens and ****.

Infini-D is a 3D app just like Cinema 4D, Maya, Lightwave, etc

[Bombia]

I have attached some screenshots how to do a simple pencil with the cool new feature; "revolve" in Adobe Illustrator CS!









Lights, shadows and some details are made in photoshop.

[Cerbero]

Originally posted by Bombia:
I have attached some screenshots how to do a simple pencil with the cool new feature; "revolve" in Adobe Illustrator CS!

Cool. Thanks for the tip

[Nebagakid]

that is excellent!

that is what we need, more How-To's on how to do common Icon creating things. i mean, look at one of the guy's at IconFactory (http://www.pixelhuset.se/pixelhuset.html) , he just seems to be able to make the common OS X icons styles with no trouble at all. I mean talking about Objects and the Document and Tool (TextEdit), there are common ways that the icons look like.


So, any chance of getting more how-to's?

[Nebagakid]

This is a first try of taking a 8.5x11 sized canvas, making a document, then scaling it down, rotating it -11.25 and distorting the bottom right corner out a bit. I added some gradient for shading the bottom. Also, the shadow for the document fades as it goes to the top of the image.

[Bombia]

Here are some screenshots on how to create a harddisk icon with Illustrator and Photoshop.

Screenshot of the creation of the icon in Illustrator

[angelmb]

Originally posted by Bombia:
I have attached some screenshots how to do a simple pencil with the cool new feature; "revolve" in Adobe Illustrator CS!

(...)

Lights, shadows and some details are made in photoshop.

that pencil looks so nice !

[elementality]

This thread may seem basic to some, but these tips have been great so far for beginning icon designers. Keep em coming...

Specifically, Bambia (or anyone else), would you care to elaborate on the lighting effects technique you used on the pencil icon? I know lighting is very subjective and will change from icon to icon, but some general practice would be awesome if you wouldn't mind.

Cheers...

[dru]

Originally posted by aaroncs:
Someone else who attended an icon design kitchen at apple wrote up notes from their experience online.

http://softmagic.weblogger.com/stories/storyReader$193

Unfortunately it seems that URL isn't working anymore.