UIデザイナーとして、長年のAdobeユーザーとして、私は今でもアイコン、Webやモバイルのモックアップを作成するのにPhotoshopを愛用しています。
過去５年間にわたり、日々のデザインワークを時間短縮するテクニックを磨いてきましたが、今回その中から、いくつかピックアップして紹介します。
１. ワンクリックでレイヤーを塗りつぶす
選択したレイヤーを現在の前景や背景カラーで塗りつぶすことができ、確実に時間の節約になります。
MAC：Alt+Backspace （前景カラー） または Cmd+Backspace （背景カラー）
WINDOWS：Alt+Delete （前景カラー）または Ctrl+Delete（背景カラー）
２. レイヤースタイルをコピーする
このショートカットは、多分Photoshopを学んで数週間の内に覚えるものだと思います。
Alt／Optキーを押したままで、コピーしたいレイヤースタイルを、レイヤーパネルの中のターゲットとなるレイヤーのFXアイコンにドラッグするだけです。スタイルが一瞬でコピーされます。
３. 図形の属性
レイヤースタイルをコピーするのと同様に、属性をコピーするのも複数の図形要素をデザインする必要があるときに便利です。図形の属性をコピーすることで、色や枠線などのプロパティをコピーして用いることが可能です。
属性をコピーするためには、コピーしたい属性をもつレイヤーを右クリックし、「シェイプ属性をコピー」を選択します。そして属性を貼りつけたいレイヤーを選択して、コピーした属性を貼りつけます。
４. 単位を素早く変更する
新規ドキュメントを作成する時に、ピクセルではなくインチ表示になっていて、イライラしたことはありませんか？ そんな時に、メニューバーから「編集＞環境設定＞単位・定規」をいちいち設定し直すのは、とても面倒くさい作業です。
しかし、定規を右クリックして（定規を表示しておきましょう）、単位を選択するだけで変更可能なのです。これだけです、簡単でしょう？
５. リプサムを挿入する
本番で使うテキストやコピーは、必ずしもモックアップ段階で用意があるとは限りません。それでリプサム（lorem ipsum＝ダミーテキスト）の出番です。
私はリプサムを生成するウェブアプリを使っていましたが、３年くらい前に、Photoshop自体にリプサムを挿入機能が搭載されていることを発見しました。Photoshopでテキストボックスを作成したら、メニューバーから「書式＞lorem ipsumをペースト」を選択することで、テキストボックスにリプサムの文章を貼りつけることが出来ます。
６. スポイトのショートカット
ブラシツールを使っていて、他の画像からのカラーを抽出する必要がある時はありませんか？ スポイトツールをクリックする代わりに、AltかOptionキーを押しっぱなしにすると一時的にスポイトに切り替わります。キーを放すとブラシツールに戻ります。
MAC：Optionキー
WINDOWS：Altキー
７. Web用に保存する
長年、私はウェブ用にデザインを保存するのにメニューバーから選択して作業をしていました。完全に習慣化していました。最近になってやっと、このショートカットを使うようになりました。今、個人的に気に入っているショートカットの一つです。
MAC：Cmd+Shift+Opt+S
WINDOWS:：Ctrl+Shift+Alt+S
８. アートボード
これはPhotoshop CCの大変新しい特徴です。UIデザイナーならば、一つのドキュメントに対して複数のアートボードを使うのは必須です。
異なるスクリーンのモックアップを、まるでイラストレーターを使っているようにレイアウトすることが出来るのです。
９. Adobeのプレビュー
選択したスクリーンサイズでデザインを見ることができる便利な方法です。
私はいつもモバイルのモックアップで、全てのピクセルと要素がデバイスにおいて完璧に表示されるかを確認するためにこのプレビューを使っています。Adobeのプレビューアプリを、スマホかタブレットにダウンロードして下さい。そしてデバイスとパソコンが同じwifiにより接続されているかを確認すれば、設定は完了です。
10. CSSをコピーする
コードを使ってUIデザインをする場合は、この機能を使ってドキュメント内にある全ての要素のCSSをコピーすることが出来ます。
レイヤーを右クリックして、「CSSをコピー」を選択すれば、クリップボードにCSSが表示されて、使うことができます。
おまけテクニック：Photoshopのデザインをプロトタイピングする
UXPinを使っている場合は、静的なデザインをプロトタイピングするために、Photoshopのプラグインを使うことができます。一度プラグインをインストールすれば、下に載せたアニメーションのように、スムーズな動きのインタラクティブなプロトタイプを作成することが可能です。
各レイヤーが一つの画像ファイルとして集約されないので、それぞれのレイヤーごとにプロトタイプすることが可能です。ファイルをプロジェクトの中にドラッグ＆ドロップしたら、準備は完了です。
