6 ms·

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 d

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?

lukeholder 15y ago
usually just a text editor.
- willwashburn 15y ago
  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?!
  - openbear 15y ago
    There's a brief writeup here ... http://blog.graphicpeel.com/post/740928981/ios-icons-made-in-pure-css 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 ;-)
    - hendrik-xdest 15y ago
      Interesting. These icons don't work in the latest Firefox but the ones used for the iPhone Demo do.
  - dextorious 15y ago
    """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://37signals.com/svn/posts/1061-why-we-skip-photoshop http://24ways.org/2009/make-your-mockup-in-markup http://24ways.org/2009/make-your-mockup-in-markup
lazugod 15y ago
Not Photoshop specifically, but it would be easy to take vector art from something like Illustrator and convert it into CSS's simple shapes.
- quizbiz 15y ago
  Tutorials anywhere?

lukeholder 15y ago

usually just a text editor.

willwashburn 15y ago
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?!
- openbear 15y ago
  There's a brief writeup here ... http://blog.graphicpeel.com/post/740928981/ios-icons-made-in-pure-css 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 ;-)
  - hendrik-xdest 15y ago
    Interesting. These icons don't work in the latest Firefox but the ones used for the iPhone Demo do.
- dextorious 15y ago
  """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://37signals.com/svn/posts/1061-why-we-skip-photoshop http://24ways.org/2009/make-your-mockup-in-markup http://24ways.org/2009/make-your-mockup-in-markup

lazugod 15y ago

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

quizbiz 15y ago
Tutorials anywhere?