Page Layers: Turn a Website Into a Layered Photoshop Document

Posted by | December 19, 2011 | Apps | No Comments

There is no shortage of screenshot apps for Macs. Whether you want something with a ton of functionality like LittleSnapper, something sweet and simple like Screeny or something free and fun like Skitch, Mac developers have you covered and have for years.

However, every screenshot app that I’ve ever used shares one attribute: the ultimate result of the screenshot is a flat image. With Page Layers, developer Ralf Ebert decided to take things a step further by allowing you to take layered screenshots of websites. Intrigued? Read on to see it in action.

What Is Page Layers?

The key to understanding Page Layers lies in understanding how websites are built. It’s tricky to explain in a few sentences but basically they’re a combination of elements that are created by code and images that are created in a graphics application like Photoshop and simply dropped into the site with code. Both types of elements are added one at a time via HTML, CSS, JavaScript, etc.

Using any web browser, you can actually look into any website to see all of these little pieces individually and look at the code that puts them all into the site together in the right order and scoots them into place.

Page layers is essentially a website screenshot application that knows how to dig into this hierarchy and grab each individual element to then reassemble the entire site into a single layered Photoshop document. This means that you can take almost any website you can think of and turn it into a fully layered PSD. That’s a big promise isn’t it? Let’s see how it works.

How It Works

To see how Page Layers performs its magic, let’s run through the workflow. When you open the app, here’s what you see:

screenshot

Page Layers

As you can see, at this point it looks like a web browser and indeed there is a URL navigation bar at the top. However, don’t mistake this as a fully functional browser because it’s not. There are no back and forth buttons, bookmarks, Google search bars or any of the other things you’d expect to find in a browser. The preview is live and clickable, but for the most part the browser is simply meant for you to paste or type in the URL of the page you want to snap.

Using the little control in the top left of the interface, you can adjust the resulting screenshot size. This number intelligently updates as you resize the browser window, or you can choose a size manually. Note that the ellipsis implies that the height will automatically be ascertained based on the height of the entire web page.

screenshot

Selecting the Screenshot Size

Snapping a Page

To test this app out, I navigated to the nicely design website for CleanMyMac, mostly because it looks great and seems like it would have quite a few layers to it.

screenshot

After choosing a website

When reviewing an app, I always initially skip the directions so I can accurately assess the usability from a common sense perspective. I must admit that I was at a loss for a minute with this one. No matter which button I clicked, nothing seemed to happen! Eventually though I figured out that the little PSD and PNG icons aren’t really buttons. Instead of simply a click, you have to drag them to somewhere in the Finder to initiate the snap and save the file.

screenshot

Click on one of the icons and drag it to Finder

I appreciate that this was done in an attempt to be user-friendly, but I think it’s having the opposite effect. For slow users like me, I’d definitely recommend creating a save event that happens when one of these icons is clicked.

Once I figured out the process, I grabbed the PSD (only this option produces a layered file) and threw it to my desktop. This launched the snap, which confirmed my suspicion that this page has quite a bit to it.

screenshot

Capturing pages with hundreds of elements is a snap

The impressive part is, even with hundreds of elements, capturing this page only took a few seconds! Thus far Page Layers is starting to make me think that it lives up to its promise, but can it really deliver a solid PSD?

The Moment of Truth: The PSD

I’m a stickler for organization in Photoshop, so I have really high standards in this area. Once again, Page Layers impressed me. The snap worked perfectly and the document was neatly organized into multiple layers and folders.

screenshot

The Layered PSD

The brilliantly simple organization structure for the Photoshop document simply mirrors the HTML of the web page. If the website is nicely structured with clearly named elements (all good web developers practice this), so too will your PSD come out nice and clean. Even though there were hundreds of layers, I found the hierarchy to be quite easy to sort through. Keep in mind though that this is largely due to the fact that I’m a web developer, it might just look like gibberish to normal folk.

True to its promise, each element on the site is on a separate layer, making it super easy to grab out specific elements and shuffle everything around (sorry for trashing your site MacPaw).

screenshot

Each element of the website is fully independent

Understandably, this functionality is limited to traditionally built sites. Technology like Flash is a whole different ball game where the individual pieces are much more tightly wrapped and protected.

Conclusion: Worth a Download?

As you can tell repeatedly throughout this review, I was quite skeptical about this app. It seemed like an awesome idea, but it was also something that could easily be poorly and sloppily put together. However, Page Layers surprised me at every turn by functioning perfectly with everything I threw at it.

It’s a fantastic piece of software and I highly recommend it. I would imagine that most Mac users would have zero need for a layered PSD of a website but designers and web developers won’t ever want to take a boring screenshot again. The result is so much more useful and versatile this way. I can tell that this is an app that I’ll be using for some time.

My only real complaint is that this functionality is limited to web pages. After a little research I found a similar app, simply titled Layers, which produces both web and Mac OS X layered screenshots, and it does it for about five bucks cheaper. I’d really like to see this functionality included in Page Layers as well.

Otherwise, it’s a great app and I definitely think that you should give it a shot. Leave a comment below and let us know what you think of this and other similar apps.