PhotoshopでのUIデザインが楽になる!レイヤーの作業を便利にする無料の機能拡張 -LayerCraft

PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。

各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。

サイトのキャプチャ

LayerCraft

LayerCraftの使い方

機能は大きく分けて、2種類に分類されます。

  • 必要なエレメントのみのドキュメントを作成(レイヤー保持)
  • スマホ・タブレット用の画像作成
LayerCraftのキャプチャ

LayerCraftのパネル

まずは、「必要なエレメントのみのドキュメントを作成」。

この機能はUIデザインしているデザイナーに、非常に便利だと思います。
例えば、こんな感じにUIがまとまったものやページ全体のPSDがあるとします。

Photoshopのキャプチャ

使用素材:Green Eco Free UI

で、必要なエレメントが配置されたレイヤーをいくつか指定。

Photoshopのキャプチャ

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

Photoshopのキャプチャ

作成されたドキュメントでは、レイヤーが保持されています。

スマホ・タブレット用の画像は、「iOS」「Android」のボタンを選択し、1クリックで簡単に書き出せます。透明部分を除く時は「Trim」を選択します。

サイトのキャプチャ

iOS用の書き出し

iPhone 6 Plusの「@3x」にも対応。

サイトのキャプチャ

Android用の書き出し

LayerCraftのインストール

下記ページの下の方の「Download」ボタンをクリックして、ファイルをダウンロードします。

サイトのキャプチャ

LayerCraft

  1. ダウンロードした「LayerCraft.zxp」をダブルクリック。
  2. Adobe Extension Managerが起動するので、指示に従いインストールします。
  3. 完了したら、Photoshopを再起動。
  4. Photoshopのメニュー「ウィンドウ - エクステンション」から「LayerCraft」を起動します。

対応するPhotoshopのバージョンは、CC, CC 2014です。先日リリースされた CC 2014v2でも動作しました。

sponsors

top of page

©2018 coliss