Photoshop has been a part of web design for years, and it’s very likely to continue as such for a long time. If you design for the web using Photoshop, or you’re a developer who handles coding up PSDs, it’s likely there are a few issues you run into on a regular basis. Even if you've transitioned from Photoshop over to Sketch for the design stage of your workflow, you'll still face the issue of coders needing access to software they otherwise wouldn't use. With either of the two programs, it's likely you'll hit speed bumps that are just par for the course when using tools whose primary purpose is design, not generating code for the web. Made by Source The guys at Source have been producing extensions for Photoshop since 2012. Their plugins are designed to ease some of the most common issues in the design to code process, such as creating CSS that accurately represents a design, and exporting images efficiently. I’ve been a long time fan of their CSSHat plugin, which generates CSS or preprocessor code from Photoshop layers. I also use their PNGHat plugin almost every time I use Photoshop, for exporting images to PNG, JPEG or Base64. You can see both of these plugins in action in my two part tutorial: How to Improve Your Photoshop Workflow With CSSHat and PNGHat How to Code a Photoshop Layout With CSSHat, LESSHat and PNGHat These plugins are focused on the developer stage of the site creation process; turning PSDs into fully functional websites.
↧