INDEX
目次
前の章に戻る21章 カンバスとアートボードを知ろう
これまでの章では、1枚の写真を編集する作業でした。
Photoshopで写真の編集を行うときは、特に設定を行わなければカンバス（ドキュメントモード）という作業領域で編集をします。
イメージとしては1つの作業台があるような状態です。
Photoshopで写真の編集を行うときは、特に設定を行わなければカンバス（ドキュメントモード）という作業領域で編集をします。
イメージとしては1つの作業台があるような状態です。
アートボード（アートボードドキュメントモード）
この機能を使用すると、複数の作業台を使えるようになります。
- 主な機能
- 1つの画面で、複数の編集ができます。
- 各作業台にはそれぞれのレイヤーも作成されるのでアートボードごとに画像編集をすることができます。
- 複数の作業台が必要となるシーンとしては、同じ写真で違うサイズの画像を作成したい時に役立ちます。
【21-1】アートボードの具体的な使用シーン
1.SNS投稿で複数画像やサイズを作成する場合
2.複数のサイズのバナーデザインを行う場合
3.デスクトップ版・タブレット版・スマートフォン版の各画面サイズごとのWebデザインを行う場合
【21-2】カンバスとアートボードの違い
カンバスで作成した場合とアートボードを使用した場合には違いがあります。
新規作成の画面
- 新規ドキュメント画面で、ドキュメントサイズなどを設定します。
- この時、「アートボード」の項目にチェックを入れるかどうかで、作成される作業領域が変わります。
- チェックなしのまま作成して画像を開いた場合は、カンバス（ドキュメントモード）
- チェックありの場合は、アートボード（アートボードドキュメント）
【21-3】カンバスとは
カンバスで作成した画面
画面上には1つだけ枠が配置されて、その枠内で作業を行います。
カンバスで作成したときのレイヤーパネル
レイヤーパネルは画像や文字、効果などを作業するとレイヤーが重なっていきます。
カンバスをアートボードへ変換する方法
カンバスで作業を進めている時に途中でアートボードが必要になった場合は、レイヤーパネルで右クリックをしてレイヤーからアートボードを選択してください。
（レイヤーが複数ある場合はどれか1つ選択すればアートボードへ変換されます。）
（レイヤーが複数ある場合はどれか1つ選択すればアートボードへ変換されます。）
作業動画 Adobe Photoshop 21-1
この動画はデモンストレーション動画になります。
音声は入っておりません。
【21-4】アートボード
アートボードで作成した画面
アートボードを使用すると、同じ画面上に複数の枠を足していくことができます。
それぞれの枠は独立しています。
それぞれの枠は独立しています。
アートボードで作成したときのレイヤーパネル
アートボード毎に仕切りができます。
レイヤーもそれぞれのアートボードに対して増えていきます。
レイヤーもそれぞれのアートボードに対して増えていきます。
アートボードの作成方法
ツールから追加する
- ツールでアートボードを押す。
- オプションパネルで追加したいアートボードのサイズのタブで選択
（もしくは任意の大きさを指定） - 追加ボタンを押して、配置したい場所でクリック
作業動画 Adobe Photoshop 21-2
この動画はデモンストレーション動画になります。
音声は入っておりません。
レイヤーパネルから追加
- レイヤーパネルでいずれかのアートボードを選択すると、カンバス上にプラス（+）マークのボタンが表示されます。
- それをクリックすると選択していたアートボードと同じ大きさで追加できます。
作業動画 Adobe Photoshop 21-3
この動画はデモンストレーション動画になります。
音声は入っておりません。
アートボードのサイズの変更
バウンディングボックスから変更
- レイヤーパネルでサイズを変更したアートボードを選択
- アートボードの枠に四角いボックスが表示される
（バウンディングボックス） - そのボックスをクリックして変更したい大きさにドラッグする。
作業動画 Adobe Photoshop 21-4
この動画はデモンストレーション動画になります。
音声は入っておりません。
プロパティパネルから変更
- レイヤーパネルでサイズを変更したアートボードを選択
- プロパティパネル（ウィンドウから出す）で変更したサイズの数値を入力して変更する。
（※画像の位置は、移動ツールで調整します。）
作業動画 Adobe Photoshop 21-5
この動画はデモンストレーション動画になります。
音声は入っておりません。
アートボードの削除
クリックで削除
- レイヤーパネルで削除したアートボードを選択
- 右クリックで削除。
（アートボードのみ削除か、アートボード内のレイヤーも含めて削除か選択肢が出てくる）
作業動画 Adobe Photoshop 21-6
この動画はデモンストレーション動画になります。
音声は入っておりません。
ドラッグで削除
- 削除したいアートボードを選択
- ゴミ箱のアイコンへドラッグ
（レイヤーも含めて全て削除されます）
作業動画 Adobe Photoshop 21-7
この動画はデモンストレーション動画になります。
音声は入っておりません。
アートボードの書き出し
書き出しとは？
- 書き出しとは、編集が完了した制作物を、実際に使用するためにJPEGやPNGといった画像ファイル形式に変換する作業です。
- 書き出しを行うことで、web上でパーツとして使用することができます。
- メニューバー ファイル ＞ 書き出し ＞ 書き出し形式を選択すると、アートボードが一覧で表示されます。
- 「チェックあり」が、書き出しされる対象です。
作業動画 Adobe Photoshop 21-8
この動画はデモンストレーション動画になります。
音声は入っておりません。
- 左側の一覧でチェックボタンを避けた場所をクリックするとそれぞれの情報に切り替えることができます。
作業動画 Adobe Photoshop 21-9
この動画はデモンストレーション動画になります。
音声は入っておりません。
- 右側にファイル設定という項目があります。
- ここの項目で、選択したアートボードが書き出された時の拡張子を設定やサイズの変更などを行うことができます。
作業動画 Adobe Photoshop 21-10
この動画はデモンストレーション動画になります。
音声は入っておりません。
- 設定が完了したら右下の書き出しのボタンを押すと書き出しを行うフォルダの指定をすることができます。
- 開くをクリックすると書き出しが完了します。
- 指定したフォルダにアートボード名と拡張子で構成されたファイル名で画像が書き出されます。
- 今回はDownloadsフォルダに書き出しを行いました。 書き出されたjpgのファイル：
アートボード1.jpg・アートボード2.jpg・アートボード3.jpg
【21-5】まとめの演習 バナー広告の作り方
- これまで学んできた内容の振り返りをしながら、バナーの作成を行います。
- 設定方法がわからない場合は過去の章を参照しながら進めていきましょう！
- 最初のワークは課題を行うためのチュートリアルです。課題ではお題に沿って自分でバナーの構成を考えて作成していきましょう。
- 時間はかかっても大丈夫なので復習をしながら進めていきましょう！
演習課題
作業手順
1. アートボードを作成して調整レイヤーのグラデーションで背景の設定
作業動画 Adobe Photoshop 21-11
この動画はデモンストレーション動画になります。
音声は入っておりません。
2. シェイクの画像を読み込みレイヤーマスクをかけて切り抜く
- 選択範囲の反転、範囲拡張、ブラシツールで工夫しながら切り取りの縁を調整しています。
- ブラシの色が黒なら非表示（見えなく）になり、白なら表示されます。
作業動画 Adobe Photoshop 21-12
この動画はデモンストレーション動画になります。
音声は入っておりません。
3. シェイクの画像に調整レイヤーで色を調整する
作業動画 Adobe Photoshop 21-13
この動画はデモンストレーション動画になります。
音声は入っておりません。
4. シェイクの画像にレイヤースタイルをかけ配置する
作業動画 Adobe Photoshop 21-14
この動画はデモンストレーション動画になります。
音声は入っておりません。
5. いちごの画像を読み込み、複製を行い、レイヤーマスクをかけて切り抜きを実施する
作業動画 Adobe Photoshop 21-15
この動画はデモンストレーション動画になります。
音声は入っておりません。
6. いちごの画像を調整レイヤーで色の調整をかける
作業動画 Adobe Photoshop 21-16
この動画はデモンストレーション動画になります。
音声は入っておりません。
7. いちごの画像を複製する
作業動画 Adobe Photoshop 21-17
この動画はデモンストレーション動画になります。
音声は入っておりません。
8. いちごの画像を配置する
作業動画 Adobe Photoshop 21-18
この動画はデモンストレーション動画になります。
音声は入っておりません。
9. タイトルを作成してレイヤースタイルをかける
作業動画 Adobe Photoshop 21-19
この動画はデモンストレーション動画になります。
音声は入っておりません。
10. 日にちを入れる
作業動画 Adobe Photoshop 21-20
この動画はデモンストレーション動画になります。
音声は入っておりません。
11. 書き出しをjpgで行い完成
作業動画 Adobe Photoshop 21-21
この動画はデモンストレーション動画になります。
音声は入っておりません。
【21-6】バナーデザイン課題
これまで学んできたPhotoshopの機能を活用してバナーを作成してみましょう！
バナーのお題を元に、オリジナルデザインで作成してください。
バナーのお題を元に、オリジナルデザインで作成してください。
演習課題
バナーのお題内容
- 商品名｜WEBCHOCO Silky Bitter 70%Cacao
- キャッチコピー｜こだわりのチョコレート、贅沢なひととき
- キャンペーン内容｜新発売の販売促進で期間限定で20%offで購入可能
- キャンペーン期間｜4月1日〜30日までの1ヶ月間
- 商品の特徴
- 新商品として発売された。カカオが70%で質にこだわりご褒美に食べたくなるような高級ラインのチョコレート。
- 補足事項
- 全体的に落ち着いたトーンで、高級感がある雰囲気にしてほしい。
- サイズ｜3サイズのバナーデザインを行いましょう。
- 300×250px
- 728×90px
- 160×600px
- 書き出し形式｜jpg
- 素材｜自分で選んだ素材でもOKです。
【21-7】まとめ
お疲れ様でした！
Photoshopの基本的な機能の学習が終わりました！
繰り返し使うことで操作には慣れていきます。ここで学んだスキルをベースに、ぜひ様々な制作に取り組んでください。
ここまで学習をやり切ったご自身を、しっかり褒めてあげましょう！
Photoshopの基本的な機能の学習が終わりました！
繰り返し使うことで操作には慣れていきます。ここで学んだスキルをベースに、ぜひ様々な制作に取り組んでください。
ここまで学習をやり切ったご自身を、しっかり褒めてあげましょう！
これで「21章 カンバスとアートボードを知ろう」の解説を終わります。
最後の章に進みましょう。
最後の章に進みましょう。