Photoshopでアートボードを使う方法

Webデザインでバナーの複数サイズ違いを作ったり、アプリ画面のモックアップを何パターンも並べたり…そんな時に地味に便利なのがアートボード機能です。Illustratorではおなじみですが、実はPhotoshopにも同じような機能があります。1つのファイル内に複数のキャンバスを並べて管理できるので、レイヤーがごちゃごちゃになりがちな人にこそ試してほしい機能です。

新規ファイル作成時にアートボードを使う

ホーム画面から「新規ファイル」を開く
プリセットの詳細欄で「アートボード」にチェックを入れる
「作成」を押す

アートボードを追加する

アートボードを作成すると、キャンバスの上下左右に「+」マークが表示されます。この「+」をクリックするだけで、その方向に新しいアートボードが追加されます。バナーのA案・B案を横に並べて見比べる、といった使い方がしやすいです。

レイヤーパネルのオプションメニューから「アートボードを新規作成」を選ぶ方法もあります。「+」ドラッグの方が直感的ですが、遠く離れた位置に追加したい時はこちらが便利です。

アートボードのサイズを変更する

レイヤーパネルでアートボードを選択すると、頂点と辺の中央にハンドル(バウンディングボックス)が表示されます。これをドラッグすれば自由なサイズに変更できます。数値できっちり指定したい場合は、プロパティパネルの幅・高さの数値を直接入力しましょう。

💡 バナーサイズ違いの量産に便利

広告バナーは同じデザインでも「300×250」「728×90」のように複数サイズを納品する場面が多いですよね。アートボードを使えば、1ファイルの中でサイズ違いを並べて管理でき、共通パーツをコピペしながら作業できます。ファイルがバラバラにならないので、後から修正が入った時も1ファイルで完結して楽です。

まとめ

  • 新規ドキュメント作成時に「アートボード」にチェックを入れるだけで使える
  • キャンバス周りの「+」をクリックすると、その方向にアートボードを追加できる
  • サイズ変更はバウンディングボックスのドラッグ、またはプロパティパネルで数値入力
  • バナーのサイズ違いをまとめて管理したい時に特に便利