(102)この記事はUXPinからの翻訳転載です。配信元または著者の許可を得て配信しています。(2016-08-17)6830UIデザイナーとして、長年のAdobeユーザーとして、私は今でもアイコン、Webやモバイルのモックアップを作成するのにPhotoshopを愛用しています。過去5年間にわたり、日々のデザインワークを時間短縮するテクニックを磨いてきましたが、今回その中から、いくつかピックアップして紹介します。ワンクリックでレイヤーを塗りつぶす選択したレイヤーを現在の前景や背景カラーで塗りつぶすことができ、確実に時間の節約になります。レイヤースタイルをコピーするこのショートカットは、多分Photoshopを学んで数週間の内に覚えるものだと思います。Alt/Optキーを押したままで、コピーしたいレイヤースタイルを、レイヤーパネルの中のターゲットとなるレイヤーのFXアイコンにドラッグするだけです。スタイルが一瞬でコピーされます。図形の属性レイヤースタイルをコピーするのと同様に、属性をコピーするのも複数の図形要素をデザインする必要があるときに便利です。図形の属性をコピーすることで、色や枠線などのプロパティをコピーして用いることが可能です。属性をコピーするためには、コピーしたい属性をもつレイヤーを右クリックし、「シェイプ属性をコピー」を選択します。属性を貼りつけたいレイヤーを選択して、コピーした属性を貼りつけます。そんな時に、メニューバーから「編集>環境設定>単位・定規」をいちいち設定し直すのは、とても面倒くさい作業です。定規を右クリックして(定規を表示しておきましょう)、単位を選択するだけで変更可能なのです。リプサムを挿入する本番で使うテキストやコピーは、必ずしもモックアップ段階で用意があるとは限りません。ipsum=ダミーテキスト)の出番です。私はリプサムを生成するウェブアプリを使っていましたが、3年くらい前に、Photoshop自体にリプサムを挿入機能が搭載されていることを発見しました。ipsumをペースト」を選択することで、テキストボックスにリプサムの文章を貼りつけることが出来ます。スポイトツールをクリックする代わりに、AltかOptionキーを押しっぱなしにすると一時的にスポイトに切り替わります。キーを放すとブラシツールに戻ります。Web用に保存する長年、私はウェブ用にデザインを保存するのにメニューバーから選択して作業をしていました。完全に習慣化していました。最近になってやっと、このショートカットを使うようになりました。今、個人的に気に入っているショートカットの一つです。CCの大変新しい特徴です。UIデザイナーならば、一つのドキュメントに対して複数のアートボードを使うのは必須です。異なるスクリーンのモックアップを、まるでイラストレーターを使っているようにレイアウトすることが出来るのです。選択したスクリーンサイズでデザインを見ることができる便利な方法です。私はいつもモバイルのモックアップで、全てのピクセルと要素がデバイスにおいて完璧に表示されるかを確認するためにこのプレビューを使っています。Adobeのプレビューアプリを、スマホかタブレットにダウンロードして下さい。デバイスとパソコンが同じwifiにより接続されているかを確認すれば、設定は完了です。CSSをコピーするコードを使ってUIデザインをする場合は、この機能を使ってドキュメント内にある全ての要素のCSSをコピーすることが出来ます。レイヤーを右クリックして、「CSSをコピー」を選択すれば、クリップボードにCSSが表示されて、使うことができます。おまけテクニック:PhotoshopのデザインをプロトタイピングするUXPinを使っている場合は、静的なデザインをプロトタイピングするために、Photoshopのプラグインを使うことができます。一度プラグインをインストールすれば、下に載せたアニメーションのように、スムーズな動きのインタラクティブなプロトタイプを作成することが可能です。各レイヤーが一つの画像ファイルとして集約されないので、それぞれのレイヤーごとにプロトタイプすることが可能です。ファイルをプロジェクトの中にドラッグ&ドロップしたら、準備は完了です。Realty社のグラフィック・Webのデザイナーです。フレズノ・シティ・カレッジとアートの専門学校で、グラフィックとWebデザインを習得しました。この記事はUXPinからの翻訳転載です。配信元または著者の許可を得て配信しています。