Hacker News new | past | comments | ask | show | jobs | submit login

Perhaps I'm behind the times, but what tools do people use to make the icons like that in CSS3? Is it simply an art or can you start in photoshop and use some data there to help guide you along the way?



Not Photoshop specifically, but it would be easy to take vector art from something like Illustrator and convert it into CSS's simple shapes.


Tutorials anywhere?


usually just a text editor.


Not that I don't believe you, but really?

For example, any website I've built I can surely make with just a text editor but I'll lay it out with ps first. That way I can go back and check what colors / gradients / dimensions I used to speed up the process.

I would image this would require something similar but to the nth degree. That is, I count 20 something <b></b> tags to make the clouds in the mail icon. Is that really just guess and check?!


There's a brief writeup here ...

http://blog.graphicpeel.com/post/740928981/ios-icons-made-in...

... it's not the same guy, but the above blog post is the first time I remember seeing someone do iOS icons in pure CSS.

The whole thing is fun more than practical ... kind of like ASCII art for a new generation ;-)


Interesting. These icons don't work in the latest Firefox but the ones used for the iPhone Demo do.


"""For example, any website I've built I can surely make with just a text editor but I'll lay it out with ps first. That way I can go back and check what colors / gradients / dimensions I used to speed up the process."""

You may be a bit behind the times:

http://37signals.com/svn/posts/1061-why-we-skip-photoshop

http://24ways.org/2009/make-your-mockup-in-markup




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

Search: