海外デザインブログDesignmodoで公開された「4 Tips for Prototyping with Adobe Photoshop Artboards」の著者より許可をもらい、まとめて日本語抄訳しています。
数週間前にAdobe社がPhotoshopでの「アートボード」機能を追加したことで、著者自身を含め、デザインコミュニティーで大きな話題となっています。
アートボード機能の重要性は、スクリーンデザイナーの作業を考えることで見えてくるでしょう。より正確に言うと、スクリーンデザイナーがこれから増えてくることを意味しています。
ウェブサイトやモバイル・アプリなどのプロトタイプ・デザインを制作するとき、フォトショップ画面に着目して作業することでより効率的に、より素早いデザイン開発を可能にします。いくつもあるモバイルアプリすべての画面をまとめて確認でき、すべてのファイルはひとつのPSDファイルで整理されます。
そんなアートボード機能をうまく利用するために覚えておきたい、アートボード初心者のための、4つの便利テクニックをまとめてご紹介します。これらのテクニックを修得することで、はじめからアートボード機能を知っていたかのように、使いこなすことができるでしょう。
詳細は以下から。
01.異なるアートボード間を移動する
実際にいくつものアートボードを利用した、複雑なPSDドキュメントで作業をする場合、素早く各アートボード間を移動したいと思います。そんなときは、レイヤーパレットよりOptionキーを押しながら、移動したいアートボードをクリックしましょう。フォトショップが自動的に、選択したアートボードまでスクロールしてくれます。
このテクニックは、特にたくさんのアートボードを利用しているケースでは不可欠になってくるでしょう。
02.すべてのアートボードを一度に開く/閉じる
アートボード機能がまだ新しいこともあり、レイヤーパネル内での表示方法は、基本的にグループフォルダのように展開され、作業を進めていくうちに、レイヤー数がすごいことになってしまうこともあるかもしれません。
レイヤーパネル内をCommand/Ctrlキーを押しながらクリックすることで、すべてのアートボードをまとめて展開、閉じることができます。たとえば作業をしているときに、「レイヤー２のコピー2」と名前付けされたレイヤーが、どこにあるのか分からないといったシチュエーションにも有効なテクニックです。
03.グループからアートボードを作成する
アートボードを使わずにデザイン編集をはじめたとしても、作成したグループより簡単に、アートボードを作成することができます。グループ分けされたレイヤーを右クリックし、「グループからのアートボード（Artboard from Group）」を選択だけのシンプルな作業のみで実現できます。
アートボード機能には、素早くエクスポートできたり、InVisionサービスのようにスマートにプロトタイプをシンクロされたりと、素晴らしいメリットがあります。ほんの数クリックだけで、アートボードを使ったPSDファイルをさまざまな用途に活用することができます。
04.アートボードをPNGファイルにクイック書き出しする
PSDファイルからアセットを抽出する方法として、新しく「クイック書き出し」機能が追加されました。レイヤーパネルから抽出したいレイヤーやグループをアートボードの中から選択し、右クリックで「PNGとしてクイック書き出し」を選択すれば完了です。
手軽に高画質なPNG画像スクリーンを作成でき、チームと共有したり、Dribbbleなどでポートフォリオとして公開するのにも最適です。
素早く動かし、整理された環境を。
新しいアートボード機能の登場によって、フォトショップによるデザインプロセス、ワークフローや、ドキュメント管理がよりスピーディーになりました。ウェブサイトやモバイルアプリのプロトタイプを、より素早く作成し、整理された状態を保つためにも、アートボード機能を利用してみてはいかがでしょう。
スクリーン画面デザインは、スペシャリスト達による成熟された（英: Full-blown）業界へと成長しています。いい理由として、洗練されたスクリーン画面デザインは、業界全体を驚かすでしょう。
新機能「アートボード」で編集サクサク！すごい無料UIコンポーネント素材まとめ
Adobeが公式に公開した、iOS 9のUIデザインキットは、アートボード機能を利用したPSDファイルで収録されています。
参考記事: アートボード | Photoshop ヘルプ
参考記事: アートボードでのデザイン | Adobe Photoshop CCチュートリアル
参考記事 : Work with Artboard | Adobe Illsutrator CC Tutorials
参照元リンク : 4 Tips for Prototyping with Adobe Photoshop Artboards – Designmodo
