Ralf Ebertさんが作成したアプリ”Page Layers”を使うと、WEBページをPhotoshopで編集可能な状態にしてダウンロードすることが出来ます。

WEBサイトをキャプチャするサービスは、google Chromeのpluginでもリリースされていますが、この”Page Layers”はWEBサイトをキャプチャするだけではなく、Adobe Photoshopで編集可能な状態で、サイトをダウンロード出来るということ！使用している画像やテキストをPhotoshopのレイヤ形式でダウンロードしてくれます！

以下で使用方法を紹介します。

How to page Layers

STEP 1:解析したいサイトのURLを入れる

Page Layersを起動すると、ブラウザのようなウィンドウが表示されるので、上部のバーに解析したいサイトのURLを入力します。　　　

STEP 2:キャプチャしたい画面サイズを指定

Page Layers側で用意したサイズ以外にも、直接Page Layersのウィンドウをドラックしてサイズを変更する事も出来ます。　　　

STEP 3:保存場所を指定！

メニューの”Save as”から、保存したい場所を選んで指定します。

すると、サイトは解析され、保存されます。
　
　
　

STEP 4:Photoshopで確認！

ご覧の通り！ulタグの中身まで綺麗に階層化されて保存されています！

ちなみに、上の画像ではテキスト部分がオブジェクト化されていますが、Page Layersの設定メニューから「Generate text layers」という項目にチェックを入れると、テキストデータとしてダウンロードすることも出来ます！
　
　
　

説明動画

公式の説明動画もありますので、キャプチャでは分かりづらかった方は、動画でも確認下さい。

超便利！！
気になるサイトを調査、参考にする場合などに活躍しそうですね。
　
　
この”Page Layers”はapp storeからダウンロード購入できます。
お値段は”$34.99”と無料とはいかないものの、WEBデザイナーなら是非自分のマシンに入れておきたいアプリの一つですね！