PhotoshopでのUIデザインが楽になる!レイヤーの作業を便利にする無料の機能拡張 -LayerCraft
Post on:2014年10月9日
PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。
各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。

LayerCraftの使い方
機能は大きく分けて、2種類に分類されます。
- 必要なエレメントのみのドキュメントを作成(レイヤー保持)
- スマホ・タブレット用の画像作成

LayerCraftのパネル
まずは、「必要なエレメントのみのドキュメントを作成」。
この機能はUIデザインしているデザイナーに、非常に便利だと思います。
例えば、こんな感じにUIがまとまったものやページ全体のPSDがあるとします。

使用素材:Green Eco Free UI
で、必要なエレメントが配置されたレイヤーをいくつか指定。

LayerCraftの「複製して新規ドキュメント作成」ボタンをクリックすると、そのレイヤーだけのドキュメントが作成できます。

作成されたドキュメントでは、レイヤーが保持されています。
スマホ・タブレット用の画像は、「iOS」「Android」のボタンを選択し、1クリックで簡単に書き出せます。透明部分を除く時は「Trim」を選択します。

iOS用の書き出し
iPhone 6 Plusの「@3x」にも対応。

Android用の書き出し
LayerCraftのインストール
下記ページの下の方の「Download」ボタンをクリックして、ファイルをダウンロードします。

- ダウンロードした「LayerCraft.zxp」をダブルクリック。
- Adobe Extension Managerが起動するので、指示に従いインストールします。
- 完了したら、Photoshopを再起動。
- Photoshopのメニュー「ウィンドウ - エクステンション」から「LayerCraft」を起動します。
対応するPhotoshopのバージョンは、CC, CC 2014です。先日リリースされた CC 2014v2でも動作しました。
sponsors