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

-本日のアジェンダ-

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

参考サイト

カラーバランス

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

参考サイト

白黒

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

参考サイト

調整レイヤー

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

参考サイト

ヒストリーパネル

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

参考サイト

アンシャープマスク

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

参考サイト

描画モードについて

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

参考サイト

ワンポイントアドバイス

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

本日の課題

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

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

本日は成績考査

第1回成績考査

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

WordPressへの成績考査の上げ方

手順は以下の通りです。

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

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

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

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

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

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

学科 CMS構築基礎④【オンライン】

-本日のアジェンダ-

1限目
学科 CMS構築基礎④
固定ページの作り方(パスワード設定と実用例について)

2限目
学科 CMS構築基礎④
「Illustrator」トレースの復習

3限目
学科 CMS構築基礎④
課題制作(まとめの時間)

4限目
学科 CMS構築基礎④
「Illustrator」「Photoshop」グラフィックツールについて

5限目
学科 CMS構築基礎④
課題制作(まとめの時間)

本日のテーマ

固定ページを企業へ見せるページにしましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
1.「Wordpress活用法の教科書④.pdf」
2.グラフィックツールの教科書④.pdf」 

【動画①】Wordpress活用法の教科書④

【動画②】グラフィックツールの教科書④

  • ビットマップデータとベクターデータ・
    「Illustrator」「Photoshop」グラフィックツールについて
    https://youtu.be/iqVoUsXPBdc(12:15)

固定ページを企業向けページとして用意

ポートフォリオは「デザイナーが実績をアピールするための作品集」と前のスライドで
お話していますが、ポートフォリオサイトはその応募企業さま向けに、利用しましょう。
求職活動において、ポートフォリオサイトのトップページを見せても
「ウチの会社で出来る技術は何処にある?」となればそれで終わりです。
当たり前ですが、企業側が探してくれるわけはありません。
しっかりと、その企業に向けたページを用意しましょう。
権利や守秘義務を意識しパスワード設定をした固定ページを利用しましょう。

求人票の宿題をまとめるのが固定ページ

時系列を残して成長を見せましょう!
投稿ページは、いつ作成した作品であることを残すことが出来ます。
自身の成長を見せる事で、成長曲線を見せる事が出来ます。
ポートフォリオサイトとして、自身の成長曲線を見せる事で、就職活動のとき、
企業担当へ未知なる仕事への可能性を感じさせましょう!

ワンポイントアドバイス

多くの作品を作り、様々な企業にアプローチ!
当然ですが、多くの企業が様々なサービスを提供していますので、これが出来れば
仕事に繋がるという絶対はありません。
また、社内に既にその技術スタッフがいれば、まにあってます。となり
契約に至る事も難しい場合もあります。
どうしたらよいのか?
それは、「多くの作品を用意しておく」これしかないでしょう。
未来の仕事に対して、雇用主は可能性を考えるわけです。
より多くの作品を用意することで、可能性を広げましょう。
訓練時間で、より多くの作品を作れるよう意識していきましょう。

■ビットマップデータとベクターデータ

すべての画像は①ビットマップ画像(ラスター画像)と②ベクトル画像(ベクター画像)のどちらかに分類されます。写真もイラストも図形もこの2つのどちらかに分けられるのです。

ビットマップデータとは?

「ビットマップデータ(Bitmap Data)」というのは、Photoshopの画像データやデジカメで撮影した写真のことで、画像を色のついた点(ドット)の羅列・集合として表現したデータのことです。分かりやすく説明すると、ビットマップデータで表現された写真を拡大すると、細かな格子状のマス目が見えますが、ビットマップデータはこのマス目のひとつひとつに色がついたものが集まって写真を作り上げています。
ちなみに、このマス目のひとつが「ピクセル」と呼ばれる最小単位で、ピクセル数が大きければ大きいほど美しい画像に仕上がります。ビットマップデータは別名で「ラスター形式」と呼ばれることもあります。
フォーマットでは、jpg(またはjpeg)・gif ・ png などがこれに当たります。

ベクターデータとは?

「ベクターデータ(Vector Data)」というのは、ビットマップデータのように画像を点の集合で表現するのではなく、点、線、多角形などの情報を使った複雑な計算式によって色や曲線などを表現したデータのことです。簡単に言えば、「数値を使って絵を描く」というイメージです。ベクターデータは別名で「ドロー形式」と呼ばれることもあります。
フォーマットは、pdfなどがこれに当たります。

ビットマップとは?ベクターとは?画像形式の意味と違いを図解

投稿ページと固定ページ

使いやすい(見やすい)ポートフォリオサイトにするためには、投稿ページと固定ページの使い分けや適切なメニュー設定が必要です。

参考サイト

ブロックエディタ

ブロックエディタの機能を理解して思い通りのページを作成できるようになりましょう。

ブロックエディタの主要機能
  • テキスト→「段落、見出し、リスト」(改行入力、リンク設定)
  • テキスト→「コード、整形済テキスト、詩」(複数の空白や改行をそのまま表示)
  • テキスト→「テーブル」:表組型式を作成
  • メディア→「画像、ギャラリー」:写真掲載の基本
  • メディア→「カバー」:テキストをオーバレイした画像を配置
  • メディア→「メディアとテキスト」:写真と文章を並べる
  • メディア→「ファイル」:PDFファイルなどのダウンロードを配置
  • デザイン→「ボタン」:リンクを作成するのに便利
  • デザイン→「カラム」:横方向に複数欄を作成し、それぞれのメディアを指定可
  • デザイン→「続き」:抜粋に表示する範囲を指定
  • デザイン→「ページ区切り」:別ページにする時に指定
  • デザイン→「区切り」:文章と文章の間に水平線を表示
  • デザイン→「スペーサー」:空間を作成
  • ウィジェット→「ウィジェット」:色々な表示部品を指定
  • ウィジェット→「ソーシャルアイコン」:SNSへのリンクを作成
  • 埋め込み→「埋め込み」:代表的なサイトへのリンクを作成
参考サイト

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

PCの準備です。

企業と雇用関係にある場合、PCは基本支給されるものとして考えておきましょう。
また、その時の注意点などをしっかりと理解を高めておきましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
PC(パソコン)の使い方について.pdf」 

【動画】

PC(パソコン)の使い方について 01 (10:23)
https://youtu.be/nAdad4G6u7k

PC(パソコン)の使い方について 02 (12:54)
https://youtu.be/hOgp3bNIgE4

PC(パソコン)の使い方について 03 (8:48)
https://youtu.be/4Ig0R6hM6IQ

PC(パソコン)の使い方について 04 (12:42)
https://youtu.be/-BlGtD2_xOI

PC(パソコン)の使い方について 05 (12:25)
https://youtu.be/9nEAnwHOqHQ

PC(パソコン)の使い方について 06 (10:42)
https://youtu.be/ZEysTPZ3wcY

PC(パソコン)の使い方について 07 (14:10)
https://youtu.be/c8xxOyL2QiQ

PC(パソコン)の使い方について 08 (16:07)
https://youtu.be/BgKDPdjJoRM

PC(パソコン)の使い方について 09 (13:48)
https://youtu.be/xd4TQOp__L4

PC(パソコン)の使い方について 10 (14:39)
https://youtu.be/ivJ3HWizfPA

PC(パソコン)の使い方について 11 (8:04)
https://youtu.be/Ty-rQ9BkUUU

参考サイト

本日の課題

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

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

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎③
描く練習①

2限目
学科 グラフィックデザイン基礎③
描く練習②

3限目
学科 グラフィックデザイン基礎③
トレース練習①

4限目
学科 グラフィックデザイン基礎③
トレース練習②

5限目
学科 グラフィックデザイン基礎③
トレース練習③

本日のテーマ

ひたすら「トレース」して慣れましょう!

本日のIllustratorの基本操作

  • 塗りと線
  • ダイレクト選択ツール
  • パス「アンカーポイント」「ハンドル」「セグメント」
  • シェイプ形成ツール
  • レイヤーパネル
  • ペンツール
  • 曲線ツール
  • リフレクトツールと回転ツール
  • 変形の繰り返し「Ctrl+D」
  • 配置

引き続きの基本操作

  • 新規作成・開く
  • アートボード
  • 選択ツール
  • 長方形ツール
  • 楕円形ツール
  • 多角形ツール
  • スターツール
  • パスファインダー(合体・型抜き・交差)
  • プロパティパネル
  • ズームツール

トレースについて

絵の練習にトレースを取り入れることをお勧めするのは、イラスト初心者の方です。
トレースで絵の練習をすることでまず身につくのは、キレイな線の描き方だからです。
イラストを描き始めたばかりの人は、線が上手に描けないことが多いですが、お手本の絵をトレースし続けることによって、キレイで無駄のない線が一息で描けるようになってきます。
また、上手なプロの絵をトレースすることで、描き方の感覚の違いや自分の描き方のどこが甘いのかという弱点も明確になるうえに、絵を描く集中力も鍛えられるのもポイントです。
イラストを描くことに慣れてきた人でもトレースをしてみると新たな発見があるので、たまに初心に帰ってみるのも良いでしょう。

本日の課題

とにかく何かを描いたデータをご自身のWordpress(ポートフォリオサイト)に投稿してください。
※ネット上の画像には権利がありますので、あくまでも課題用として取り扱ってください。