月: 2023年8月

学科 グラフィックデザイン基礎⑤【オンライン】

-本日アジェンダ-

1限目
学科 グラフィックデザイン基礎⑤
マスクについて

2限目
学科 グラフィックデザイン基礎⑤
リテイクとは？

3限目
学科 グラフィックデザイン基礎⑤
素材集について

4限目
学科 グラフィックデザイン基礎⑤
色調補正について

5限目
学科 グラフィックデザイン基礎⑤
調整レイヤーとは？

本日のポイント

出来るデザイナーはリテイクに強い！！

とにかく数多くの写真で練習してみてください！！
最近では様々なスマホアプリでも搭載されていますし、
スマホの写真機能自体にも色々ありますので確認しておきましょう。

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「マスクについて.pdf」
「色調補正について.pdf」

【動画】マスクについて

マスク機能とは・リテイクとは (8:25)
https://youtu.be/ZAZOw42bqvY

非破壊データで行う(7:20)
https://youtu.be/T6YueLz5Hc8

拡大縮小ができる形式を利用 (7:10)
https://youtu.be/IlIEM44mIxY

バックアップと復元する方法を徹底的に！(5:01)
https://youtu.be/TGiKZecEnL4

レイヤーをしっかり管理する(6:59)
https://youtu.be/TK41xPqYxPE

ワンポイントアドバイス「マスクは理屈で覚える」(2:51)
https://youtu.be/AVwmTlCWuc4

マスク機能① レイヤーマスク(10:19)
https://youtu.be/tJ7KVhu4LJo

マスク機能② ベクトルマスク(11:02)
https://youtu.be/E4Qh5n3X95k

おまけ パスパネル(12:09)
https://youtu.be/RQeJA0YGSQs

マスク機能③ クリッピングマスク(11:17)
https://youtu.be/w745LFgkB_Q

番外編1 クイックマスクモード(5:23)
https://youtu.be/nN1UmZ5ZgNw

番外編2 シェイプマスク(3:01)
https://youtu.be/eTbKK82BWrs

まとめ(3:58)
https://youtu.be/zHGAQscV69A

参考サイト

マスクについて

Photoshopのマスクのかけ方は、大きく分けて『レイヤーマスク』、『ベクトルマスク』と『クリッピングマスク』の3種類があります。
それと選択ツールの調整で使うクイックマスクモードがあります。

参考サイト

レイヤーマスクについて

レイヤーマスクは、レイヤーに追加する機能です。画像の一部を隠したい場合に使用します。白黒に塗り分けられた画像から、表示する部分と、隠す部分の「マスク領域」を指定します。レイヤーマスク自体が、ドキュメントに表示されることはありません。対象となる画像の一部が、切り抜いた型紙を通り抜けて、背景に投影されるようなイメージです。

特長と使い方

  • 選択範囲からのマスク
  • 白から黒の領域（中間色は半透明）
  • 曖昧なトリミングに有効

参考サイト

ベクトルマスクについて

ベクトルマスクは、ペンツールやシェイプを使用して作成するマスクです。ベクトルマスクは、画像の拡大や収縮を繰り返しても、マスクが劣化しないので、解像度を気にすることなく編集できます。

特長と使い方

  • パスからのマスク
  • シェイプ（Illustratorと同じイメージ）を使う
  • 奇麗な曲線を描く時に有効

参考サイト

パスパネル

パスパネル（ウィンドウ／パス）には、保存されたパスごとの名前とサムネール画像、現在の作業用パスおよび現在のベクトルマスクが一覧表示されます。サムネールの表示をオフにすると、パフォーマンスが向上します。パスを表示するには、まずそのパスをパスパネルで選択する必要があります。

参考サイト

クリッピングマスクについて

クリッピングマスクとは、マスクが適用されるレイヤーをグループ化したものです。一番下のレイヤー（ベースレイヤー）がグループ全体の表示範囲を定義します。例えば、ベースレイヤーにシェイプがあり、その上のレイヤーに写真があり、一番上のレイヤーにテキストがあるとします。写真とテキストは、ベースレイヤー上のシェイプのアウトラインを通してだけ表示されると、ベースレイヤーの不透明度を継承します。

特長と使い方

  • 図形（文字も可能）からのマスク
  • 他のレイヤーに影響する
  • Illustratorにもあるので注意

参考サイト

ワンポイントアドバイス

マスクはデータを維持したまま作業を進める方法として、最も使われる手法です。逆に他人が作成したデータを編集しなければならない時に、「わからない」が発生するポイントがここです。しっかりと理解を高めておきましょう。

スマートオブジェクト

スマートオブジェクトとは、「縮小と拡大を繰り返しても、劣化をしない画像データ形式」のことです。Photoshopで画像を扱うときにスマートオブジェクト化していない場合、1度でも縮小すると画像が劣化してしまいます。画像の質を保ったまま縮小・拡大をしたいときは、スマートオブジェクトに変換する必要があります。

スマートオブジェクトの解除方法「ラスタライズ」

スマートオブジェクトは画像を劣化させずに保つ形式なので、多用するとデータが重くなりがちです。スマートオブジェクトを解除することを「ラスタライズ」といいます。スマートオブジェクトをラスタライズすると、元のビットマップ画像に戻ります。

色調補正について

色調補正とは、画像データをイメージどおりに調整することです。 色調補正の目的は、色を調整したり、鮮やかさを調整したり、明るさを調整したりさまざまです。

【動画】

調整レイヤーとは (3:27)
https://youtu.be/cBGBmpYlmec

明るさ・コントラスト(4:35)
https://youtu.be/pkHhMYNfRdw

レベル補正(6:48)
https://youtu.be/3RncVkb2I2M

トーンカーブ(3:02)
https://youtu.be/RvcaTVH7cbc

色相・彩度(4:33)
https://youtu.be/TYvFsrZ07W4

カラーバランス(3:46)
https://youtu.be/XErTM613gw4

白黒(2:32)
https://youtu.be/uqnlIARGrF0

アンシャープマスク(3:23)
https://youtu.be/_9m8TR-sLws

色調補正の手順①陰影の調整 (12:20)
https://youtu.be/zqyIgTbdCaw

色調補正の手順②色味の調整(9:03)
https://youtu.be/K7X1dz-g2IU

色調補正の手順③鮮明度の調整(6:45)
https://youtu.be/WsHUkohfjpI

おまけ(9:30)
https://youtu.be/U5R4iMAu-XE

おススメの色調補正の手順

1.明るさ・コントラスト
（素材写真の明るさを調整し、コントラストをくっきりさせる）
2.レベル補正やトーンカーブ
（素材写真の一番黒い箇所と白い箇所を設定する）
3.色相・彩度やカラーバランスや白黒
（素材写真の色味を変更する）
4.アンシャープマスクで仕上げ
※部分的に調整する場合は、レイヤーマスク（選択範囲）を併用。

覚えておきたい色調補正

  • 明るさ・コントラスト
  • レベル補正
  • トーンカーブ
  • 色相・彩度
  • カラーバランス
  • 白黒

明るさ・コントラスト

コントラストとは、ひとことで言えば、「画像の明るい部分と、暗い部分の『明るさの差』」のことです。 「コントラストが高い」とは、「画像の一番明るい部分と、一番暗い部分の『明るさの差』が『大きい』」ということ。 よって、コントラストを高くすると、「画面の明るい部分はより明るく、暗い部分はより暗く」なります。

参考サイト

レベル補正

レベル補正とは. ヒストグラムは、画像内のピクセルが各階調にどのように分布しているのかを示しています。横軸が0～255の明るさの階調、縦軸が明るさごとのピクセル数を表したものです。

参考サイト

トーンカーブ

トーンカーブの補正では、画像の色調の範囲全体に配置されたポイントを補正します。画像の色調は、最初は直線の対角線としてグラフに表示されます。RGB 画像を調整する場合、グラフの右上の領域はハイライトを表し、左下の領域はシャドウを表します。

参考サイト

色相・彩度

Photoshopを使った色調補正の基本の機能の１つ「色相・彩度」は、画像の色相・彩度・明度の３つの値を調整することで、画像の色調を補正する機能です。 画像を編集する上で、色合いを変更するとても重要な機能なので、しっかりと使いかたを理解しておく必要があるでしょう。

参考サイト

カラーバランス

「カラーバランス」はシャドウ（暗い部分）、ハイライト（明るい部分）、中間調（中間の明るさの部分）に分けて色を調整できるようになっています。

参考サイト

白黒

【Photoshop基本操作】［白黒］とは、カラー画像を「白黒」画像に変換する機能です。 色の系統別に詳細な設定ができるので、素材に応じた「モノクロ」表現の幅が広がります。

参考サイト

調整レイヤー

【Photoshop基本操作】調整レイヤーとは、ドキュメントやレイヤー単位で色調補正が行えるオプション機能です。 調整レイヤーを作成すると、元画像の内容をそのまま保つことができ、設定した後でも再編集が加えられるので大変便利です。 

参考サイト

ヒストリーパネル

ヒストリーパネルとは ヒストリーパネルには、Photoshopで画像に対して行った編集操作が履歴として表示されます。 履歴をたどって行った操作を確認したり、やり直したりすることができます。

参考サイト

アンシャープマスク

「アンシャープマスク」は、画像内の個々のピクセルの周囲にある、異なる色情報を持ったピクセルを検索して、指定した量だけピクセルのコントラストを高めるフィルタです。 アンシャープマスクをかけるときは、「量」・「半径」・「しきい値」を設定します。 色の濃さの度合いを決め、数値が大きくなるほど、くっきりとした輪郭になります。

参考サイト

描画モードについて

描画モードは下層にあるレイヤーと合成する機能です。 通常、不透明度の変更などを行っていない場合は上のレイヤーが100%表示されますが、描画モードを変更することで下のレイヤーと合成した色が表示されます。

参考サイト

ワンポイントアドバイス

前の「マスク」と「色調補正」は作品作りの素材づくりの基本です。
特に後のバナー作成でとても重要になる技術ですので、しっかりと理解と自然に操作が出来るように身に着けていきましょう。

本日の課題

オンラインは課題無しです。
※不明点等は次の来校日に質問出来るようにまとめておいてください。

学科 グラフィックデザイン基礎④

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎④
成績考査・提出方法について

2限目
学科 グラフィックデザイン基礎④
成績考査

3限目
学科 グラフィックデザイン基礎④
成績考査

4限目
学科 グラフィックデザイン基礎④
成績考査

5限目
学科 グラフィックデザイン基礎④
成績考査

本日のテーマ

本日は成績考査

第1回成績考査

WordPressの固定ページに、
IllustratorとPhotoshopそれぞれで作成したグラフィック作品をUPしましょう。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

WordPressへの成績考査の上げ方

手順は以下の通りです。

①固定ページに新規投稿で作成します。

②タイトル（タイトルを追加の部分）に「第１回成績考査」、
次のブロックに見出し(H2)で氏名（漢字フルネーム）を入力して下さい。

③次のブロックに作品を「画像」にてアップロードして下さい。

④公開状態を「パスワード保護」にします。
パスワードは「test」と設定して下さい。

⑤投稿設定のパーマリンクの「URLスラッグ」にgrade-check_20230815を設定して下さい。

⑥「公開」にして終了です。
固定ページ一覧に作成したページが出来ているか確認して下さい。