This post is a collection of documents and tools that can improve your Photoshop workflow. It’s probably not useful by itself, but is a good place to start when you want to work more efficiently.<\/p>\n
<\/p>\n
The first step to improve your workflow is to adopt some self discipline. A neatly organized PSD file will help you work more efficiently and save time to others.<\/p>\n
If you only have the time to read one guide, Photoshop Etiquette<\/strong><\/a> is the one. It contains dozens of illustrated tips that will help you produce better deliverables. All best practices have been translated in many languages, including english, french, spanish and japanese. Also worth mentioning, the Pixel Perfect Precision<\/strong><\/a> guide from ustwo (english) and Guidelines pour produire des PSD adapt\u00e9s au web<\/strong><\/a>, by STPo (french).<\/p>\n <\/p>\n Some of these best practices have been implemented in this online tool that will analyze your PSD: <\/p>\n Once you’ve learnt how to produce proper Photoshop files, you will be happy to find tools that can help you do it faster.<\/p>\n Layer names are essential for a productive workflow. But renaming layers can be tedious when you have a very large document with many layers. These tools give you the power to rename several layers at a time. I think that layer comps are an underestimated feature of Photoshop, probably because it can be painful sometimes. Composer<\/strong> tries to improve layer comps by letting you apply layer changes to all comps easily. Cut&Slide Me<\/a>\u00a0<\/strong>is a free panel that exports folder that follow a specific naming convention as PNGs. <\/p>\n Slicy<\/a><\/strong> exports layers to individual files, based on their name Adobe is doing something similar with Photoshop Generator\u00a0for assets<\/strong><\/a>. The cool thing is that Generator is open source and hosted on Github. CSS Hat<\/strong><\/a> goes further by exporting CSS by examining your layer styles. Enigma 64<\/a><\/strong> also makes exporting single layer easy. One cool feature is the Base64 export. Great for embedding small assets and reducing HTTP requests. If you want to develop your own tools, there are libraries that can read the PSD file format in Ruby and Javascript. PSD is notorious for being one of the worst formats<\/a>, so you probably want not to reinvent the wheel:<\/p>\n When designing for mobile, it’s necessary to check on the actual device how your design will look like. You can send yourself a PNG to the device and display it fullscreen. Or you can use a tool that will make the process much faster (also note that there is a serious lack of love for Android in this list).<\/span><\/p>\n These tools can export interactive prototypes. Prototypes are great for communicating interactions that static mockups can not show.<\/p>\n FramerJS<\/a><\/strong> is an open source tool that can simulate many behaviors of native apps. You might need to write some simple javascript code, but it looks great. Composite<\/strong><\/a> is similar and looks a bit more limited, but doesn’t need any line of code. There are many more tools, and here are some that do not fall in any of the previous categories and are worth mentioning:<\/p>\n Feel free to share your favorite tools for Photoshop in the comments!<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":" This post is a collection of documents and tools that can improve your Photoshop workflow. It’s probably not useful by itself, but is a good place to start when you want to work more efficiently.<\/p>\n","protected":false},"author":1,"featured_media":2517,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,27],"tags":[48,51,50,49],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2501"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=2501"}],"version-history":[{"count":16,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2501\/revisions"}],"predecessor-version":[{"id":2525,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2501\/revisions\/2525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media\/2517"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=2501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=2501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=2501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n \u279c\u00a0photoshopetiquette.com<\/a><\/p>\n
\n\u279c\u00a0psdvalidator.com<\/a><\/p>\n Organize<\/h2>\n
\n\u279c\u00a0renamy.com
\n<\/a>\u279c\u00a0blog.kam88.com\/en\/group-layer-renaming-script.html<\/a><\/p>\n
\n\u279c\u00a0wuwacorp.com<\/a><\/div>\n
\n\u279c\u00a0www.jasonforal.com\/composer\/<\/a><\/p>\nExporting<\/h2>\n
\n\u279c\u00a0www.cutandslice.me<\/a><\/p>\n
\n\u279c\u00a0macrabbit.com\/slicy\/<\/a><\/p>\n
\n\u279c\u00a0github.com\/adobe-photoshop\/generator-assets<\/a><\/p>\n
\n\u279c\u00a0csshat.com<\/a><\/p>\n
\n\u279c\u00a0getenigma64.com<\/a><\/p>\nLibraries<\/h2>\n
\n
Previewing<\/h2>\n
\n
Prototyping<\/h2>\n
\n\u279c\u00a0framerjs.com<\/a><\/p>\n
\n\u279c\u00a0getcomposite.com<\/a><\/p>\nMore tools<\/h2>\n
\n