Yuya Furusato
3,504 views

これがないとUIデザインできない!? 便利なPhotoshopの3つの機能

UIデザイナーの古里です。
今回はPhotoshopでUIデザインする際に便利な3つの機能をご紹介します。
※Adobe CC 2015を使用しています。

 

アートボード

主な特徴

・様々なデバイスのサイズがプリセットとして用意されている

・レイヤーの複製がとても簡単

・pngファイルとして簡単に書き出すことができる

abobe CC 2015から導入されたアートボード機能は、ひとつのPSDファイルの中に複数のページを配置できる機能です。別々のPSDファイルで作業しているときに、複製したレイヤーが見当たらないという経験はありませんか?レイヤーの複製・移動がドラッグ&ドロップで出来るようになったので、レイヤーの扱いがより簡単になりました。

また、様々なデバイスのディスプレイサイズがプリセットとして用意されているので、ファイル作成前にディスプレイサイズを直に打ち込む作業がなくなり時間短縮できます。

そしてアートボードは自由に配置することができるので、ページ遷移順に配置したりデバイスごとに並べたりすることで、簡単に比較できます。

これがないと仕事にならないくらい重宝している機能です。


使い方

・アートボードを新規作成する方法
これは最初からアートボードで作業したいときに有効な方法です。

  1. 1. ファイル>新規>ドキュメントの種類をアートボードに設定
  2. 2. アートボードのサイズはweb、iphone、ipadなどプリセットが用意されていますので、作成するUIにあわせて選択(Adobe previewで実機確認したいときは同じデバイスを選ぶと後々便利。)

スクリーンショット 2016-02-15 12.23.54

・既に作成されているレイヤーからアートボードを作成する

これは作業途中で新しいアートボードを生成したいときに有効な方法です。

  1. 1. アートボードで作業したいレイヤーを選択
  2. 2. 右クリックで「グループからアートボードを作成」を選択
  3. 3. アートボードをプリセットに選択でデバイスサイズを選択

スクリーンショット 2016-02-15 12.16.47

 

リンクで配置

主な特徴

・ファイルが軽くなる。

・編集するファイルが一つで済むので時間短縮でき、ミスが少なくなる。

ヘッダーやフッター、共通アイコンなどでPSDファイルをリンクで配置すると、外部ファイルとして参照されます。その外部ファイルを編集すれば、リンクされているスマートオブジェクトが自動的に書き換わるので、非常に手間が省けます。

デメリットとしてあげられるのは、複数のファイルを管理しなければいけない点ですが、参照するパーツは一つのフォルダに格納し、誰が見ても理解しやすいファイル名にして管理すれば、元ファイルの紛失などのトラブルは少なくなります。

「埋め込みで配置」は以前からある同じような機能ですが、スマートオブジェクトを外部から参照する「リンクで配置」とは違い、埋め込み型なので、容量が大きくなりがちです。

共通パーツはどんどんスマートオブジェクトに変換してリンクで配置しましょう。


使い方

・リンクを配置する
これは新しくリンクしたいスマートオブジェクトを配置したいときに有効な方法です。

  1. 1. ファイル>新規>リンクを配置
  2. 2. リンクしたいファイルを選択
  3. 3. リンクされたスマートオブジェクトとしてレイヤーが生成されます。アートボード 1 のコピー

・ファイルに再リンクする
これは既に生成済みのスマートオブジェクトにリンクする方法です。(リンク切れスマートオブジェクトレイヤーなど)

  1. 1. レイヤーを右クリックして「ファイルに再リンク」をクリック
  2. 2. リンクしたいファイルを選択
  3. 3. リンクされたスマートオブジェクトに変更されます。アートボード 1

 

Adobe Preview

主な特徴

・作成したアートボードごとに表示。切り替えも簡単。

・wifi経由とUSB経由で共有。変更をリアルタイムに反映してくれる。

Adobe Previewは作成したデザインカンプを実機確認するためのAdobe純正のアプリケーションです。

wifiとUSB経由で簡単に同期でき、複数のデバイスでリアルタイムにプレビューできます。アートボードを切り替えるときは、左右にスワイプするか、ヘッダーをタップして表示したいアートボードを選択します。
実機でカンプを確認すると、完成イメージと違ったという経験はありませんか?
その都度、実機で確認しながら作業すると、手戻りが発生する頻度を少なくすることができます。

使い方

  1. 1. iPhoneやiPadでapp storeから「adobe preview」ダウンロード
  2. 2. photoshopでDevice Previewを開きます。
  3. 3. wifi経由かUSB経由で接続します。(※wifeで接続する場合は同じadobe idを使用してログイン、同じwifiに接続する必要があります。)
  4. 4. 同期されたデバイスが表示されたら、実機でプレビューできる状態になります。

12715571_1047555078623680_3578180790576413383_n

まとめ

いかがでしたか?とても重宝している3つの機能をご紹介しました。
Sketchで作業するデザイナーも多くなり、photoshopを使うデザイナーが少数派になりつつありますが、まだまだphotopshopも使えます。

SketchもPhotoshopもそれぞれ長所短所があるので、うまく使い分けることが大切ですね。皆様も是非使ってみてください!

 新規事業・UXデザインのことなら私たちにご相談ください。

私たちは事業戦略に応じたプロダクトデザイン戦略策定からUXデザイン、人間中心設計に基づいたデザイン手法を実行することで事業の立ち上がりから成長までの過程を支援します。サービス開発、UXデザインのことでお困りの方は、rootまで気軽にご相談ください。

Yuya Furusato

Yuya Furusato

UIデザイナー。ロンドンでファッション・写真を学ぶ。帰国後BASE, Inc. でアシスタントデザイナーを経た後、2015年秋から入社。

SNSをフォローする

人気の記事

問い合わせ

プロジェクトに関するご相談やお見積依頼はこちらからご連絡ください。社内で検討されたい方のために事業紹介をまとめた資料をお送りすることも可能です。

採用情報

rootのカルチャーに興味があり一緒に働きたいとお考えの方はこちらをご覧ください。正社員、パートナー、インターン等雇用形態に限らず受け付けております。