- date
- 2016.02.16
これがないとUIデザインできない!? 便利なPhotoshopの３つの機能
目次
アートボード
主な特徴
・様々なデバイスのサイズがプリセットとして用意されている
・レイヤーの複製がとても簡単
・pngファイルとして簡単に書き出すことができる
abobe CC 2015から導入されたアートボード機能は、ひとつのPSDファイルの中に複数のページを配置できる機能です。別々のPSDファイルで作業しているときに、複製したレイヤーが見当たらないという経験はありませんか？レイヤーの複製・移動がドラッグ&ドロップで出来るようになったので、レイヤーの扱いがより簡単になりました。
また、様々なデバイスのディスプレイサイズがプリセットとして用意されているので、ファイル作成前にディスプレイサイズを直に打ち込む作業がなくなり時間短縮できます。
そしてアートボードは自由に配置することができるので、ページ遷移順に配置したりデバイスごとに並べたりすることで、簡単に比較できます。
これがないと仕事にならないくらい重宝している機能です。
使い方
・アートボードを新規作成する方法
これは最初からアートボードで作業したいときに有効な方法です。
- 1. ファイル＞新規＞ドキュメントの種類をアートボードに設定
- 2. アートボードのサイズはweb、iphone、ipadなどプリセットが用意されていますので、作成するUIにあわせて選択（Adobe previewで実機確認したいときは同じデバイスを選ぶと後々便利。）
これは作業途中で新しいアートボードを生成したいときに有効な方法です。
- 1. アートボードで作業したいレイヤーを選択
- 2. 右クリックで「グループからアートボードを作成」を選択
- 3. アートボードをプリセットに選択でデバイスサイズを選択
リンクで配置
主な特徴
・ファイルが軽くなる。
・編集するファイルが一つで済むので時間短縮でき、ミスが少なくなる。
ヘッダーやフッター、共通アイコンなどでPSDファイルをリンクで配置すると、外部ファイルとして参照されます。その外部ファイルを編集すれば、リンクされているスマートオブジェクトが自動的に書き換わるので、非常に手間が省けます。
デメリットとしてあげられるのは、複数のファイルを管理しなければいけない点ですが、参照するパーツは一つのフォルダに格納し、誰が見ても理解しやすいファイル名にして管理すれば、元ファイルの紛失などのトラブルは少なくなります。
共通パーツはどんどんスマートオブジェクトに変換してリンクで配置しましょう。
使い方
・リンクを配置する
これは新しくリンクしたいスマートオブジェクトを配置したいときに有効な方法です。
- 1. ファイル＞新規＞リンクを配置
- 2. リンクしたいファイルを選択
- 3. リンクされたスマートオブジェクトとしてレイヤーが生成されます。
・ファイルに再リンクする
これは既に生成済みのスマートオブジェクトにリンクする方法です。（リンク切れスマートオブジェクトレイヤーなど）
- 1. レイヤーを右クリックして「ファイルに再リンク」をクリック
- 2. リンクしたいファイルを選択
- 3. リンクされたスマートオブジェクトに変更されます。
Adobe Preview
主な特徴
・作成したアートボードごとに表示。切り替えも簡単。
・wifi経由とUSB経由で共有。変更をリアルタイムに反映してくれる。
Adobe Previewは作成したデザインカンプを実機確認するためのAdobe純正のアプリケーションです。
使い方
- 1. iPhoneやiPadでapp storeから「adobe preview」ダウンロード
- 2. photoshopでDevice Previewを開きます。
- 3. wifi経由かUSB経由で接続します。（※wifeで接続する場合は同じadobe idを使用してログイン、同じwifiに接続する必要があります。）
- 4. 同期されたデバイスが表示されたら、実機でプレビューできる状態になります。
まとめ
SketchもPhotoshopもそれぞれ長所短所があるので、うまく使い分けることが大切ですね。皆様も是非使ってみてください！
新規事業・UXデザインのことなら私たちにご相談ください。
私たちは事業戦略に応じたプロダクトデザイン戦略策定からUXデザイン、人間中心設計に基づいたデザイン手法を実行することで事業の立ち上がりから成長までの過程を支援します。サービス開発、UXデザインのことでお困りの方は、rootまで気軽にご相談ください。
