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デザイナーなら是非自分のマシンに入れておきたいアプリの一つですね！