Photoshopのアートボードの基本的な使い方

アートボード機能は、Illustratorでは以前からあった機能ですが、PhotoshopではPhotoshop CC2015から実装されました。webデザインなど複数のページのデザインを作成しなくてはいけない時に、ページ間を簡単に移動できるので大変便利です。

また、保存も1つのファイルで済むため、必要なページ分大量のファイルを作成する必要も無くなります。そこで今回は、アートボードの基本的な使い方について紹介します。

Photoshopのアートボードの基本的な使い方

Photoshopを起動したら、メニューバーのファイルを押して新規を選択します。ドキュメントの種類をアートボードにしてください。

screenshot 788

アートボードのサイズを決定する

ドキュメントの種類をアートボードにすると、様々なデバイスやアイコンなどのサイズのプリセットが表示されます。もちろん自分で任意の値を指定することも可能ですが、今回は、iPhone 6 Plusを選択してみました。プリセットを選択したら、OKを押します。

screenshot 789

アートボードが作成されました。ここまではCC以前と同じような表示です。

screenshot 790

アートボードを追加する

レイヤーパネルのメニューから、アートボードを新規作成を選択します。

screenshot 791

アートボードが作成されました。

screenshot 792

アートボードツールを使って追加する

または、ツールバーからアートボードツールを選択します。

screenshot 794

アートボードツールを使うと、好きな位置にドラッグするだけでアートボードを作成できます。

screenshot 795

また、アートボードツールでアートボードを選択すると、上下左右にプラスのボタンが出ます。これを押すことでも同じサイズのアートボードを押したボタンの方向に、アートボードを作成することが可能です。

screenshot 796

上を押したので、上に新しいアートボードが作成されました。

screenshot 797

まとめ

アートボードツールから、新規のアートボードを作成すると、Webサイトのデザインを作成する際に、階層ごとに一列にまとめることができ非常に便利です。ぜひ活用してみてください。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて