in CSS Design

CSS Design using Edge Animate

Update: the export CSS feature is already live in the December update to Photoshop CS6. Thanks Tom!

I have been doing a lot of CSS design recently and have tried many different tools and workflows. One of my favorite is a workflow that is a little different in that it uses Edge Animate, which is available with a free Creative Cloud account, to generate my finished CSS code. Now Edge Animate is an amazing CSS animation tool, but in addition to that you can also easily get the finished CSS code using the developer tools.

The video above combines design techniques with a little bit of developer skills towards the end where we create some reusable CSS classes. I also quickly show the new CSS export feature coming in that is already in the latest update of Photoshop, which can save you an immense amount of time. Below is the finished result running in CodePen.


1
 
Check out this Pen!

If you want to follow along with the video, you can download the start image that I based the designs on. Remember that this CSS code would need to be properly cleaned up and prefixed for production use.

I’d love feedback if you have any,
Lee

Write a Comment

Comment

11 Comments

  1. heya, im a webdeveloper, and saw your project on dribbble. Your work is very very good for webdesigners(and me). I’m going to recommend this site to any of my buddies to make them a greater artist. Thank you very much lee!!

  2. It is a nice tutorial nevertheless I don’t get the point of the advantage using Edge Animate for this job. I would say I could do this in the same amount of time or less just with my text-editor and sass. What are you aiming for?

    • This would be something that a designer could easily do. That’s the difference. Plus you can quickly rough something out visually and then tweak away in a text editor. But what I showed won’t be ideal for everyone.

      • As primarily a motion graphic designer learning how to code I can definitely see the appeal of this.

        I work mostly in After Effects and Edge Animate seems to feel a lot like that. I’d be much faster (at the moment at least) using something like this to create buttons that HTML / CSS.

  3. I just downloaded Edge Animation but there is no gradient options and also there is no color picker. Am I doing something wrong.

    • I mentioned in the video that those were features coming in CC version. It comes out in less than 2 weeks.

  4. Released too early. Not enough features to be actually useful. It just makes you redo all the work. Plus, it’s too dependant on Chrome.

    • How is it dependent on Chrome? And just curious what you mean when you say “it makes you redo all the work”?

  5. Sorry if this is a dumb question. Is edge animate available in standalone application, what I mean is there a sold-separately version. I live in Indonesia and adobe keep rejecting my CC purchase. It said is not available for Indonesia yet. Why on earth is that happening? You guys at Adobe just want us to buy CS6 boxed software or use cracked version? :(