ツール

【Photoshop】アートボードの使い方【新人デザイナー向け】

Photoshopのアートボードって何だろう?
アートボードってどうやって使うのだろう?

アートボードを使うメリットやデメリットってあるのかな?

こういった疑問に答えるよ!

Naoya
Naoya
やぁ!みんな!元気?

デザイナーの@Naoyaです。

Youtube

※動画概要欄に目次があります

目次

  • Photoshopのアートボードとは?
  • アートボードの使い方
  • アートボードのメリットデメリット
Naoya
Naoya
ではゆこう!
【7日間の体験版】Photoshopを無料で始める手順【失敗しない学習法】Photoshopの学習をしたいけど、どうやって始めるんだろう? 使い方も分からないし、いくらかかるんだろうか、、、。 これからPhotoshopを学習したいので「失敗しない学習法」を知りたいです。 こういった疑問に答えます。...

Photoshopのアートボードとは?

Photoshopのアートボードツールは一つのpsdファイルで、複数のデータ管理ができるよ!

よくある質問:psdって何ですか?

Photoshopデータの拡張子です、難しく考えずPhotoshopのデータという認識でOK!

【Photoshop】psdとは?作り方と解説【新人デザイナー向け】Photoshopのpsdってなんだろう? こういった疑問に答えるよ!...

アートボードツールのショートカット

  • V

アートボードツールのショートカットはこんな感じ!

移動ツールから、Shift+Vでアートボードツールに切り替えることができるよ!

  • 通常のpsdファイル=一つのデータ
  • アートボードを使ったpsdファイル=複数のデータ

アートボードを使う場合と使わない場合はこんな感じ!

Naoya
Naoya
順番に解説するよ!

通常のpsdファイル

通常のpsdファイルは一つのデータしか扱うことができないよ!
ワークスペースの画面はこんな感じ!

よくある質問:ワークスペースって何ですか?

Photoshopの作業画面のことだよ!

【Photoshop】 ワークスペースの使い方【新人デザイナー向け】ワークスペースってなんだろう? 自分の好きにカスタマイズとか出来るのかな? ワークスペースの保存方法はどうやってやるんだろう? こういった疑問に答えるよ!...

ドキュメントを作る時にこんな感じでアートボードにチェックを入れなかった場合だね!

【Photoshop】ドキュメントの使い方【作成方法とサイズ変更】Photoshopのドキュメントの使い方がよく分からない。 ドキュメントのサイズ変更ってどうやってやるんだろう。 ドキュメントが作れないと何もできないし、どうしたらいいのか分からない。 こういった疑問に答えます。...

アートボードを利用したpsdファイル

アートボードを利用したpsdファイルは複数のデータを扱うことができるよ!

アートボードツールのショートカット

  • V

アートボードツールのショートカットはこんな感じ!

移動ツールから、Shift+Vでアートボードツールに切り替えることができるよ!

ドキュメントを作る時にこんな感じでアートボードにチェックを入れた場合だね!

【Photoshop】ドキュメントの使い方【作成方法とサイズ変更】Photoshopのドキュメントの使い方がよく分からない。 ドキュメントのサイズ変更ってどうやってやるんだろう。 ドキュメントが作れないと何もできないし、どうしたらいいのか分からない。 こういった疑問に答えます。...

アートボードの使い方

アートボードの使い方について見て行こう!

  • アートボードの作成
  • アートボードの追加
  • アートボードドのサイズ変更
  • アートボードの削除
  • アートボードの書き出し

アートボードの使い方はこんな感じ!

Naoya
Naoya
順番に解説するよ!

アートボードの作成

まずは、アートボードの作り方!

メニューバーの「ファイル」から「新規」を選択!

アートボードにチェックを入れてドキュメントを作成!
今回は幅1280px、高さ720px、解像度72とするね!

【Photoshop】ドキュメントの使い方【作成方法とサイズ変更】Photoshopのドキュメントの使い方がよく分からない。 ドキュメントのサイズ変更ってどうやってやるんだろう。 ドキュメントが作れないと何もできないし、どうしたらいいのか分からない。 こういった疑問に答えます。...

レイヤーパネルを見てみるとアートボードが作成されてるよ!

レイヤーパネルが表示されていない人はメニューバーの「ウィンドウ」から「レイヤー」を選択してね!

アートボードの追加

続いてアートボードの追加方法!

レイヤーからアートボードを選択!

レイヤーパネルが表示されていない人はメニューバーの「ウィンドウ」から「レイヤー」を選択!

ツールバーから、アートボードツールを選択!

上下左右に+のマークが表示されるよ!

追加したい方向の+を選択して、アートボードの追加完了!
ここでは、右の+を押したので右方向にアートボードが追加されたよ!

アートボードのサイズ変更

続いてアートボードのサイズ変更!
サイズはアートボードを作った後からでも変更できるよ!

変更したいアートボードをレイヤー上で選択!

ツールバーから、アートボードツールを選択!

オプションバーに幅と高さが表示されるよ!

好きな数値を入力して変更完了!

同じ操作はプロパティパネルでもできるよ!

プロパティパネルはメニューバーの「ウィンドウ」から「プロパティ」にチェックを入れると表示できるよ!

アートボードの削除

続いてアートボードの削除!

削除したいアートボードを選択して、ゴミ箱を選択!

「アートボードとその内容」を選択!

選択したアートボードが削除できたね!

アートボードの書き出し

続いてアートボードの書き出し!
アートボードはそれぞれ別々に書き出すことができるよ!

「ファイル」→「書き出し」→「書き出し形式」を選択!

アートボード書き出しのショートカット

  • Mac=option+Shift+Command+W
  • Windows=Alt+Shift+Ctrl+W

アートボード書き出しのショートカットはこんな感じ!

書き出したいアートボードにチェックを入れて、形式を設定後、書き出しを選択!

書き出す場所を選択して、書き出し完了!

アートボードのメリットデメリット

最後にアートボードのメリットとデメリットについて解説するよ!

アートボードのメリット

  • デザインの案出し
  • バナーのリサイズ

アートボードのメリットはこんな感じ!

デザインの案出し

アートボードはデザインの案出しに便利!

何故かというと複数のデザインデータを一つのpsdファイルで管理できるからっ!

体験談:現場のデザイナーも臨機応変にアートボードを使っている

実際に@Naoyaも色々なデザインの現場で働いてきたけど、現場のデザイナーもデザイン提案の時にアートボードを使ったり臨機応変に対応しているよ!

Naoya
Naoya
似たようなデザインを管理するのに最適!

バナーのリサイズ

アートボードはバナーのリサイズの時にもめっちゃ便利!

なぜかというと同じレイヤーファイルをすぐにコピーして使えるからっ!

体験談:実際にバナーリサイズの時に使ってる

実際に@Naoyaもバナーのリサイズをする時はアートボードを使ってるよ!
使うレイヤーが同じだからすぐにコピーできるのが、マジで助かる。

Naoya
Naoya
小さい積み重ねが時短に繋がる!
【新人Webデザイナー必見!】バナーリサイズ対応の極意。Webデザイナーの登竜門でもあるバナーリサイズで困っている方必見です!主な項目→1.スタイルの調整を行ったか? 2.サイズに合った文字組み、レイアウトになっているか? 3.背景画像やエフェクト等、リサイズを考慮しているか? 4.情報を全て入れようとしていないか?...

アートボードのデメリット

  • 容量が重くなる
  • 操作が重くなる

アートボードのデメリットはこんな感じ!

容量が重くなる

アートボードを使うと容量が重くなる…!

当たり前なんだけど、一つのpsdファイルで管理してるからレイヤーが増えれば増えるほど、容量が重くなるんだよね…。

体験談:LP等のレイヤーを多く使うデータはアートボードはおすすめしない

ランディングページ(LP)と呼ばれる長い画像を作る時はアートボードはおすすめしない!
LPって一ページ作るだけでも、結構容量が重くなるんだよね…。

ランディングページ

因みにこういうのがランディングページだよ!

見るからにレイヤーめっちゃ使ってそうでしょ?笑

Naoya
Naoya
だからレイヤー数が多いデータにアートボードはおすすめしない!

動作が重くなる

アートボードを使うと操作が重くなる…!

これも一つのpsdファイルで管理してるのが原因だね…。

体験談:レイヤーが増える度に動作は重くなる

レイヤーが増える度に動作が段々と重くなるから、レイヤーをかなり使うようなものをアートボードで複数管理しようとするとPCのスペックによっては動作の重さが気になってしょうがない、マジで仕事にならないレベル。

個人的にはアートボードはバナーのリサイズとか容量が軽く済みそうな時にしか使わない!

Naoya
Naoya
容量が大きくなるものはアートボードで複数管理はしない!
質問:PC選びはどうしたら良いですか?

PhotoshopとIllustratorを使うぐらいだったら、CPU=Corei5、メモリ=8GB、ハードディスク=500MBあれば大丈夫!

【最低限から始めよう】Webデザイナー初心者のパソコン選び【疑問解決】Webデザインに必要なパソコンが知りたい。 Webデザインはどんなソフトを使うのかな。 パソコン選びはMacとWindowsどっちがいいんだろう? ノートパソコンにしたら良いのかデスクトップにしたら良いのかもよく分からないし。 Webデザイン初心者なので、Webデザインを始めるのに必要なパソコンの知識が知りたいです。 こういった疑問に答えます。...
Naoya
Naoya
今日も来てくれてありがとう、またね!
【無料あり】Webデザインスクールおすすめ3選【決定版】Webデザインを学びたいけど、どんなスクールが良いのだろう。 調べてみるとデザインスクールは山のようにあるし、そもそもなに基準で選んだ...
【7日間の体験版】Photoshopを無料で始める手順【失敗しない学習法】Photoshopの学習をしたいけど、どうやって始めるんだろう? 使い方も分からないし、いくらかかるんだろうか、、、。 これからPhotoshopを学習したいので「失敗しない学習法」を知りたいです。 こういった疑問に答えます。...

COMMENT

メールアドレスが公開されることはありません。