When I heard about PageLayers for Mac it sounded too good to be true. To be able to download a layered psd of any page of any site at any size?! Mind blowing.
Once I watched the demo video I knew I had to fork out £19.99 to give it a try. Money very well spent as far as I am concerned. The interface is simple. Re-sizing the viewport is easy and it takes next to no time to export a full layered psd. The layers and folders are labeled as per the html markup.
Why this is so useful and how I plan to use it:
I currently work in BBC Sport. We have just refreshed our mobile website and launched our first apps on Android and iOS. We are also working to make our web experience responsive and in my experience this means working closer with the development team and sometimes making design decisions in the browser when the content breaks at certain sizes.
The downside to this is my original psd designs quickly become out of date and no longer reflect what has been changed during development. Using PageLayers allows me to download the current live version of our site in a layered psd so I can quickly iterate on them without the need to first update old designs. In my opinion it’s brilliant!
Ordinarily I like my PSD files to be in order. Every layer must be named and grouped appropriately. Anything that can be vector should be vector. However, I think in this new agile way of working psd’s should be more like guides than rigid designs. Using tools like PageLayers and creating disposable psd files to iterate on is potentially a faster way of working.
Converting to vector with a photoshop action:
As you would expect all layers created using this tool will be rasterised. Text, shapes/divs etc. This isn’t a major problem but It forced me into thinking about how I could make it easy to select on any layer and quickly convert it to vector. After a quick google I couldn’t find anything so I had a play myself and created a photoshop action which should allow you to do just that. It basically takes a selection of the layer you are on, makes a work path, creates a new shape layer and replaces it’s layer mask with the path you just created. Simple and effective.
Hope this proves useful to some. It’s probably worth mentioning that this works well for square objects and content blocks. Not so good for small rounded corners or complex shapes as you would imagine.