PSD to CSS
Adobe Photoshop is usually used for creating images and design. In Photoshop CC, you can generate Cascading Style Sheets, and create an HTML page by "save for web". It is meant to try and make web designers’ jobs easier. Imagine designing a layout or mockup in Photoshop and then just exporting the css to create a great looking website. Photoshop CC is just getting started with this interesting feature. The enhanced CSS support allows you to generate CSS code for colors and other design elements, like rounded corners, and then copy and paste the code into your web editor to get the exact results you want.
Integrating CSS in Photoshop is a good concept, but if you are looking for advanced features, you may be a little disappointed. A lot of CSS3 features are missing, and they just haven’t been translated into the integration of this feature. It does show some promise, but they have a long way to go before it is style to style translation of the effects you applied in Photoshop.
Overall, the fact that Adobe tried to add this feature in Photoshop CC shows a good effort. It’s nice that they try to make web development easier for everyone, but there is still a lot of room for improvement. It is definitely a good start for basic web development from visual design work.
PROS and CONS for Generating CSS in Photoshop
Pros:
- Copy CSS code from Photoshop to Dreamweaver.
- Changes are a lot faster (including changes to borders, colors, and to some extent to fonts).
- When you're laying the page out as HTML, you're showing the client something a lot closer to what the final product will look like.
Cons:
- Photoshop mockups aren’t interactive; they don’t give you a feeling for the flow of the app; they encourage you to focus on details too early on.
- Not all visual designers can create a mockup in HTML. It will have to be a two person task. An HTML person and a Photoshop person.