PhotoshopでのUIデザインが楽になる！レイヤーの作業を便利にする無料の機能拡張 -LayerCraft
Post on:2014年10月9日
sponsors
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
