月: 2023年2月

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

-本日のアジェンダ-

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

2限目
学科 グラフィックデザイン基礎⑥
調整レイヤーについて

3限目
学科 グラフィックデザイン基礎⑥
描画モードについて

4限目
学科 グラフィックデザイン基礎⑥
ヒストリーパネルについて

5限目
学科 グラフィックデザイン基礎⑥
合成写真の作成練習

本日のテーマ

色調補正です！

色調補正について

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

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

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

覚えておきたい色調補正

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

明るさ・コントラスト

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

参考サイト

レベル補正

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

参考サイト

トーンカーブ

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

参考サイト

色相・彩度

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

参考サイト

カラーバランス

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

参考サイト

白黒

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

参考サイト

調整レイヤー

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

参考サイト

ヒストリーパネル

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

参考サイト

アンシャープマスク

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

参考サイト

描画モードについて

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

参考サイト

ワンポイントアドバイス

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

本日の課題

本日作成した画像「jpg」をドロップボックスのご自身のフォルダにUPしてください。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

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

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

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

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

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

5限目
学科 グラフィックデザイン基礎⑤
マスク（トリミング）の練習

本日のテーマ

マスクは理屈で理解しておきましょう！

マスクについて

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

参考サイト

レイヤーマスクについて

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

特長と使い方

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

参考サイト

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

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

特長と使い方

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

参考サイト

ベクトルマスクについて

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

特長と使い方

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

参考サイト

パスパネル

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

参考サイト

ワンポイントアドバイス

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

スマートオブジェクト

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

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

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

写真加工のおすすめルール(復習)
【非破壊データで作業しましょう】

「ファイルから開く（加工したい写真を取り込む）」⇒
「レイヤーパネルで複製」⇒
「右クリックでスマートオブジェクトに変換」⇒
「背景のレイヤーを非表示」⇒
「保存」

■写真素材（練習用）

■練習用素材まとめページ

本日の課題

本日作業した画像「jpg」のデータをドロップボックスのご自身のフォルダにUPしてください。
ファイル名は「20230227_（苗字をローマ字）.jpg」と付けて下さい。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

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

-本日のアジェンダ-

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

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

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

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

5限目
学科 グラフィックデザイン基礎④
作品講評

本日のテーマ

本日は成績考査

第1回成績考査

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

WordPressへの成績考査の上げ方

手順は以下の通りです。

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

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

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

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

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

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

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

-本日のアジェンダ-

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

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

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

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

本日のテーマ

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

【資料】

Dropboxにある資料をダウンロードしましょう。

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 / 【STEP1】基本操作の理解・・・
1.「Wordpress活用法の教科書④.pdf」
2.「グラフィックツールの教科書④.pdf」　

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

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

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

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

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

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

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

ワンポイントアドバイス

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

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

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

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

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

ベクターデータとは？

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

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

投稿ページと固定ページ

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

参考サイト

ブロックエディタ

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

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

本日の課題

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

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

本日のIllustratorの基本操作

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

引き続きの基本操作

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

トレースについて

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

本日の課題

とにかく何かを描いたpdfのデータをドロップボックスのご自身のファイルにUPしてください。
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

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

-本日のアジェンダ-

1限目
学科 CMS構築基礎③
「WordPress」メディアについて

2限目
学科 CMS構築基礎③
「Photoshop」選択範囲とレタッチの復習

3限目
学科 CMS構築基礎③
ダイレクト選択ツールについて

4限目
学科 CMS構築基礎③
トレースについて

5限目
学科 CMS構築基礎③
本日のまとめ

本日のテーマ

写真やイラストでよりクリエイティブに！

【資料】

Dropboxにある資料をダウンロードしましょう。

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 / 【STEP1】基本操作の理解・・・
1.「Wordpress活用法の教科書③.pdf」
2.「グラフィックツールの教科書③.pdf」　

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

【動画②】グラフィックツールの教科書③ [Illustrator]

WordPressのメディアとは？

メディアライブラリとは、WordPressにアップロードされた画像を保管している場所のことです。すでにアップロード済みの画像を記事に挿入する場合、この「メディアライブラリ」という機能を利用します。
WordPressの投稿画面から「ブロックの追加」を選択した後、「メディアライブラリ」を押下してください。

参考サイト

ワンポイントアドバイス

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

ダイレクト選択ツールについて

ダイレクト選択ツールはすでに作成した図形などのアンカーポイントを選択して、部分的に操作するためのツールです。

トレースについて

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

ワンポイントアドバイス

Illustratorで作成するデータはパスの組み合わせで作られます。
トレースをしながら「塗と線」「アンカーポイントとハンドル」
この仕組みをまず理解してみましょう。

次回のIllustratorの基本操作

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

引き続きの基本操作

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

オブジェクトの塗りと線

Illustratorの最大の特徴は塗と線で構成されているという事です。この特徴を理解することで、様々な絵を描くこと下出来ますので、常に塗と線を意識してIllustratorを使いこなしてみましょう。

参考サイト

ダイレクト選択ツール

選択ツールがオブジェクト全体の移動や複製に使用するのに対し、ダイレクト選択ツールは、オブジェクトの部分を編集するのに使います。

参考サイト

パス「アンカーポイント」「ハンドル」「セグメント」

Illustrator で描画したオブジェクトは「パス」で構成されています。「パス」には、図形を構成する点として「アンカーポイント」が存在します。 この「アンカーポイント」 を操作することで、 オブジェクトを多彩な形に変形することができます。
パスは「アンカーポイント」「セグメント」「ハンドル」の3つの部位からなりたっており、これら3つの部位を含んだすべてを「パス」といいます。

参考サイト

アンカーポイント切り替えツール

Adobe Illustrator（アドビ イラストレーター）のベジェ曲線の描き方（切り替えツール）を解説しています。 … 終点から「切り替えツール」でドラッグすると、アンカーポイントから正反対に伸びている2本の方向線のうち、片方を折って方向を変えることができます。

参考サイト

シェイプ形成ツール

Shaper ツール を使うと、シェイプをまとめて描画、スタック、配置して、単に結合、マージ、削除、移動することで複雑かつ美しいデザインを作成できます。以前は複数の操作を必要としていた操作を、シンプルで直感的に行うことが出来ます。

参考サイト

レイヤーパネル

複雑なアートワークを作成する場合、ドキュメントウィンドウ内のすべてのアイテムの場所を把握しておくことは難しい問題です。小さなアイテムが大きなアイテムの下に隠れてしまうと、アートワークを選択することは困難になります。レイヤーを使用すれば、アートワークを構成するすべてのアイテムを管理できます。

参考サイト

ペンツール

ペンツールによる直線セグメントの描画 ペンツールを使用して作成できる最も単純なパスは直線です。ペンツールをクリックして 2 つのアンカーポイントを作成すると、それらのアンカーポイントを結ぶ直線が作成されます。

参考サイト

リフレクトツール

リフレクトツールはオブジェクトを反転させるツールです。鏡に映したような状態にするので鏡面反転ともいいます。反転したオブジェクトをコピーすることもできるので、左右対称のイラストなどを作る時に便利な機能です。

曲線ツール

曲線ツールを使用すると、パスの作成と描画を簡単で直感的に行うことができます。新しいツールでは、スムーズポイントまたはコーナーポイントの作成、切り替え、編集、追加または削除を行うことができます。

参考サイト

参考サイト

はさみツール

はさみツールはオブジェクトの一部を切り取るのに使うツールです。 オブジェクトのパスの上にカーソルを合わせてクリックします。 これを2箇所以上繰り返せば切り取られます。 選択ツールで切り離してみましょう。

参考サイト

変形の繰り返し「Ctrl+D」

[Ctrl]キー+[D]キーを押下すると、メニューの[変形の繰り返し]をクリックしたときと同じ動作になります。 [Ctrl]キー+[D]キーを押すごとに6度回転した図形をコピーで生成できます。

本日の課題

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

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

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎②
画像の加工方法について

2限目
学科 グラフィックデザイン基礎②
選択範囲について

3限目
学科 グラフィックデザイン基礎②
レタッチについて

4限目
学科 グラフィックデザイン基礎②
合成写真を作ってみましょう

5限目
学科 グラフィックデザイン基礎②
本日のまとめ

本日のテーマ

「トリミング」「レタッチ」をして合成写真を作りましょう。

トリミングとは？

「トリミング」とは、画像の加工ができるソフトウエアが持っている機能のひとつで、画像の周囲にある不要な部分を非表示にすることで画像の表示範囲やサイズを調整することができます。

レタッチとは？

写真編集とは、アナログ/デジタルを問わず、写真画像を修整する技法を意味する。 フォトレタッチとも。これを職業とする人をレタッチャーという。英語発音からの他のカタカナ表記でフォトリタッチ、リタッチャーとする場合もある。

本日のPhotoshopの基本操作

  • 選択範囲
  • レイヤーパネル
  • レイヤーマスク
  • ブラシツール
  • 描画色と背景色
  • ファイルの移動とコピー
  • 切り抜きツール
  • 自由変形（ctrl + T）
  • Web用に保存（従来）
  • パッチツール
  • コピースタンプツール
  • スポット修復ブラシツール
  • 修復ブラシツール
  • コンテンツに応じた移動ツール
  • ぼかしツール
  • シャープツール
  • 指先ツール
  • 覆い焼きツール
  • 焼き込みツール
  • スマートオブジェクト（レイヤーをラスタライズ）
  • カンバスサイズ
  • 画像解像度

ファイルの作成方法

Illustrator・Photoshopともファイルの作成は「新規作成」「開く」「読み込む」で出来ています。
制作した元データ「 Illustrator ならai」「 Photoshopならpsd 」から、WEB用に「jpg」「gif」「png」「pdf」等のファイル形式にすることが出来ます。

写真加工のおすすめルール
（非破壊データで作業しましょう）

「ファイルから開く（加工したい写真を取り込む）」⇒
「レイヤーパネルで複製」⇒
「右クリックでスマートオブジェクトに変換」⇒
「背景のレイヤーを非表示」⇒
「保存」

■写真素材（練習用）

■練習用素材まとめページ

■無料写真素材のサイト（外部）

ワンポイントアドバイス

とにかく数多くの写真を加工してみましょう！
出来る出来ないの判断の引き出しを多く理解することが、様々な作品を作る第1歩です。

本日の課題

とにかく2つの写真を合成して「jpg」のデータをドロップボックスのご自身のフォルダにUPしてください。
※ネット上の写真には権利がありますので、あくまでも課題用として取り扱ってください。

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

1限目
学科 CMS構築基礎②
「Wordpress」テーマとウィジェットについて

2限目
学科 CMS構築基礎②
Illustratorの基本操作の復習

3限目
学科 CMS構築基礎②
Photoshopの選択範囲について

4限目
学科 CMS構築基礎②
Photoshopのレタッチについて

5限目
学科 CMS構築基礎②
本日のまとめ

本日のテーマ

WordPressの見せ方

【資料】

Dropboxにある資料をダウンロードしましょう。
［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 / 【STEP1】基本操作の理解・・・
1.「Wordpress活用法の教科書②.pdf」
2.「グラフィックツールの教科書①.pdf」　
3.「グラフィックツールの教科書②.pdf」

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

【動画②】グラフィックツールの教科書① [Illustrator]

【動画③】グラフィックツールの教科書② [Photoshop]

WordPressのテーマとは？

WordPressのテーマとは、Webサイト全体のテンプレートのことです。テーマは複数のファイルの集合体で、デザインなどの内容が一式セットになっています。
そのため、テーマを変更すれば複雑な処理を行うことなく、Webサイトのデザインや構成、機能などを変えることができます。

参考サイト

ワンポイントアドバイス

テーマは後からでも変えられます。自作も出来ます。ただし細かい事は他人が作ったモノなので、思っていたのと違うときは、別のテーマに変更しましょう。

ウィジェットとは？

WordPressのウィジェットとは、Webサイトのサイドバーやフッターにさまざまなパーツを設置できる機能です。 記事検索、最近の投稿、人気記事一覧、カテゴリー、タグ一覧、プロフィール…など、さまざまな機能を持ったパーツを設置することができます。

参考サイト

ワンポイントアドバイス

ウィジェットを使えば、簡単に検索機能やカレンダーを設置できます。
ポートフォリオサイトとして、企業担当さんが「あなたの学んだ技術」を探しやすいように工夫をしてみましょう！

トリミングとは？

「トリミング」とは、画像の加工ができるソフトウエアが持っている機能のひとつで、画像の周囲にある不要な部分を非表示にすることで画像の表示範囲やサイズを調整することができます。

次回のPhotoshopの基本操作

  • 選択範囲
  • レイヤーパネル
  • レイヤーマスク
  • ブラシツール
  • 描画色と背景色
  • ファイルの移動とコピー
  • 切り抜きツール
  • 自由変形（ctrl + T）
  • Web用に保存（従来）

ファイルの作成方法

Illustrator・Photoshopともファイルの作成は「新規作成」「開く」「読み込む」で出来ています。
制作した元データ「 Illustrator ならai」「 Photoshopならpsd 」から、WEB用に「jpg」「gif」「png」「pdf」等のファイル形式にすることが出来ます。

選択範囲

選択範囲によって画像の一部分または複数の部分が分離されます。特定の領域を選択することで、選択していない領域を元のままに保ちながら、画像の選択部分を編集したりエフェクトやフィルターを適用したりすることができます。

  • 長方形選択ツール
  • 楕円形選択ツール
  • なげなわツール
  • 多角形選択ツール
  • マグネット選択ツール
  • 自動選択ツール
  • クイック選択ツール

参考サイト

オブジェクトの選択と移動と削除・コピー

オブジェクトを移動させるには、｢マウスドラッグによる移動｣、｢移動コマンドによる数値指定での移動｣、｢変形パネルを使った移動｣、｢矢印キーを使った移動｣があります。選択ツールで移動したいオブジェクトを選択し、そのままドラッグします。 削除は「Delete」キーで削除出来ます。

参考サイト

レイヤーパネル

Photoshop のレイヤーは、積み重ねられた透明フィルムのようなものです。レイヤーの透明部分では、下のレイヤーが透けて見えます。レイヤーは、透明フィルムをスライドさせるように動かして、レイヤーのコンテンツを希望の位置に配置することができます。また、レイヤーの不透明度を変更して、コンテンツを部分的に透明にすることもできます。

参考サイト

レイヤーマスクについて

レイヤーマスクとは、通常のレイヤーや調整レイヤーの一部だけを表示したり、非表示にしたりすることができる機能だ。 レイヤーマスクを扱う最も大きなメリットは、元の画像を変更せずに部分的な補正や切り抜きが行えることである。 後に修正が必要になっても、レイヤーマスクを変更するだけでよいので非常に効率がよい。

参考サイト

描画色と背景色

描画色と背景色について に移動 – Photoshop では、ペイント、塗りつぶしおよび選択範囲の境界線の描画には描画色が使用され、消去された領域やグラデーションには … アルファチャンネルでは、初期設定の描画色はホワイトで、背景色はブラックです。

参考サイト

ブラシツールとは？

photoshopのブラシは、サイズやエッジのやわらかさを自由に変更して画面内に色々な色や形でペイントすることができます。 エアブラシ効果や特殊効果をつけたストロークを描くことができます。 ブラシの設定をカスタマイズして、専用のライブラリに追加、呼び出して利用することもできます。

参考サイト

切り抜きツールとは？

【Photoshop基本操作】［切り抜きツール］とは、画像を切り抜くためのツールです。 ドラッグした範囲を四角形に切り抜き、回転や変形などを同時に行う機能を持っています。 切り抜き確定後でも、トリミング領域の移動や仕上げサイズの変更といった再編集が可能です。

参考サイト

自由変形（ctrl + T）とは？

自由変形の使い方 Photoshopの自由変形を使うことで、全体の仕上がりを見ながら画像の大きさや角度などを編集することができます。

参考サイト

Web用に保存（従来）とは？

「Web用に保存（従来）」は、圧縮率を調整するなどして保存後のデータ容量を調整できます。

参考サイト

ワンポイントアドバイス

次回は、Photoshopで選択範囲の取り方を行います。
覚えておく用語が多いので、名前だけでも把握しておきましょう。

レタッチとは？

写真編集とは、アナログ/デジタルを問わず、写真画像を修整する技法を意味する。 フォトレタッチとも。これを職業とする人をレタッチャーという。英語発音からの他のカタカナ表記でフォトリタッチ、リタッチャーとする場合もある。

明日のPhotoshopの基本操作（レタッチ）

  • パッチツール
  • コピースタンプツール
  • スポット修復ブラシツール
  • 修復ブラシツール
  • コンテンツに応じた移動ツール
  • ぼかしツール
  • シャープツール
  • 指先ツール
  • 覆い焼きツール
  • 焼き込みツール
  • スマートオブジェクト（レイヤーをラスタライズ）
  • カンバスサイズ
  • 画像解像度

参考サイト

・パッチツール

パッチツールとは、画像上の不要なものを、画像上の他の部分をパッチのように使って削除したりして画像を修復するツールです。

参考サイト

・コピースタンプツール

コピースタンプツールとは、画像の一部分を別の場所に複製することができるツールです。そのまま画像を重ねるイメージです。

参考サイト

修復ブラシツール

修復ブラシツールとは、修復したい箇所の上に、重ねたい画像の部分をブラシで塗り重ねるようなツールです。周りの画像となじむような処理がされます。

参考サイト

スポット修復ブラシツール

スポット修正ブラシツールとは、写真内の汚れやキズ、シミなど小さな範囲をすばやくキレイに修復することができるツールです。 

参考サイト

コンテンツに応じた移動ツール

コンテンツに応じた移動ツールとは、写真の一部を選んで位置を変えることができます。

参考サイト

ぼかしツール

ぼかしツールとは、画像のぼかしたところをただブラシでなぞるだけで簡単に画像をぼかすことができるツールです。

参考サイト

シャープツール

シャープツールとは、ドラッグした部分を鮮明にするツールです。

参考サイト

指先ツール

指先ツールとは、指先でこすったような効果を加えるツールです。油絵のようなイラストレーションを描きたいときや、ぶれた動きをつくりたいときなどに便利です。

参考サイト

覆い焼きツール

覆い焼きツールとは、ドラッグした部分を「明るく」するツールです。

焼き込みツール

焼き込みツールとは、ドラッグした部分を「暗く」するツールです。

参考サイト

ワンポイントアドバイス

次回は、Photoshopでレタッチを行います。
画像に様々な変化を加えられる事を学んで行きましょう。
また逆に、出来ない事も理解していきましょう。

本日の課題

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

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

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎①
ファイルの作成方法について

2限目
学科 グラフィックデザイン基礎①
オブジェクト移動方法について

3限目
学科 グラフィックデザイン基礎①
図形の描き方について

4限目
学科 グラフィックデザイン基礎①
描いてみましょう

5限目
学科 グラフィックデザイン基礎①
本日のまとめ

本日テーマ

保存：「Ctrl」＋「S」 はこまめにしましょう。

本日のIllustratorの基本操作

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

新規作成・開く

Illustratorを起動すると、スタートワークスペースが表示されます。
「新規作成」をクリックして、新規ドキュメントダイアログボックスを開きます。

保存(ai)・別名で保存（pdf）

Illustrator ドキュメントを保存すると、アートワークデータはファイルに書き出されます。 データの構造は、選択したファイル形式によって異なります。アートワークを保存できる基本的なファイル形式には、AI、PDF、EPS、FXG および SVG の 5 種類があります。
またWEBサイト用の画像「jpg、gif、png」に保存することもできます。
あと、もう一つ専用ソフトが無い方にも見てもらえるように「pdf」への保存も可能です。

ショートカットキーについて

　
Windows版
　保存：「Ctrl」＋「S」
　別名で保存 ：「Shift」「Ctrl」＋「S」
　Web用に保存（従来）： 「Alt」「Shift」「Ctrl」＋「S」

参考サイト

ワンポイントアドバイス

新規ファイルを作成したらまず「保存」をしましょう。

アートボード

アートボードは、絵画にたとえればアートワークを作成するためのキャンバスのようなものです。 アートボード内にアートワークを作成することで印刷時に書き出される範囲の目安になります。

参考サイト

選択ツール

オブジェクト全体（グループ含む）を選択するツールです。このツールで選択されたオブジェクトは、周囲にバウンディングボックスが表示され、オブジェクトの拡大・縮小・回転などを行うことができます。基本的な使い方は、オブジェクトをクリックして選択、もしくはドラッグして選択するだけです。

参考サイト

図形ツール

イラストレーターでオブジェクトを描画する方法は多数存在します。その中で、四角形や円など簡単な図形を描くのに向いているのが「図形ツール」です。図形ツールを使うことで、単純な図形を素早く効率的にアートボード上に作ることができます

参考サイト

パスファインダーツール

パスファインダーとは複数のパスを合成させたり、逆に一方のパスからもう一方の形を切り抜いたりする事ができる一連の機能の事です。 手作業では再現が難しい幾何学的なパスも工夫次第で比較的簡単に作ることができます。

参考サイト

プロパティパネル

Illustrator CC2018のプロパティパネルとは、ウィンドウ上部に表示されていたコントロールパネルをさらに使いやすくしたものになります。

ズームツール

画面上を拡大表示や縮小表示して作業しやすくします。 細かい作業をするために拡大表示がしたい、または全体を確認したいので縮小表示したい場合があります。 そんなときにはズームツールを使用します。

本日の課題

とにかく何かを描いたpdfのデータをドロップボックスのご自身のファイルにUPしてください。
※pdfのファイルは必ず「最小ファイルサイズ」でUPしてください。

学科 CMS構築基礎①

-本日のアジェンダ-

1限目
学科 CMS構築基礎①
WordPrsssとは？

2限目
学科 CMS構築基礎①
CMSとは？

3限目
学科 CMS構築基礎①
投稿ページ基本①

4限目
学科 CMS構築基礎①
課題制作

5限目
学科 CMS構築基礎①
課題制作

本日のテーマ

目標は100ページ！

【資料】

Dropboxにある資料をダウンロードしましょう。
［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 / 【STEP1】基本操作の理解・・・「Wordpress活用法の教科書①.pdf」　

【動画】

WordPressとは？

WordPress(ワードプレス)は、ブログやサイト（ホームページ）を作成できるソフトです。今や、世界中のサイトの約3分の1はWordPressで作られていると言われています。日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。

参考サイト

CMSとは？

コンテンツ管理システムは、ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツマネージメントシステムとも呼ばれる。 ウィキペディア。

参考サイト

WordPressの初期設定

まず皆さん用のアカウントを用意してあります。
講師の指示に従って初期設定を行ってください。
初期設定が出来たら、投稿ページをいじってみましょう。

WordPressの利用方法について

ログインURLについて

まずURLに
/wp-login.php
付け加えてください。

※ワードプレスのログインURLは初期設定の場合はサイトURLのあとに「/wp-login.php」を付けたものになります。

権限について

WordPressはいくつかの権限に分けることが出来ます。運用方法に合わせてうまく使い分けていくと便利です。

参考サイト

投稿ページとは？

wordpressの投稿ページとはwordpressというCMS （Content Management Systemの略） を利用して、簡単にページを作れる仕組みです。
Webページの仕組みをここから確認していきましょう。
投稿ページは、日時ごとにページを作成することが出来ます。
コーポレートサイト運用では、新着情報のページに使われることも多いです。

投稿ページの主な項目

  1. タイトル
  2. 文章入力とブロック(クラシックの追加)
  3. ステータスと公開状態
  4. 公開する・更新する・予約する
  5. パーマリンク

タイトル

ページの見出しやページタイトルに反映します。
また、投稿一覧ページやトップページの記事一覧の箇所に反映されます。
ページのタイトルになる事を想定した見出しを考えましょう。
※検索エンジンのキーワードに重要な存在になります。

文章入力とブロック(クラシックの追加)

ページの内容の部分になります。
「段落」「見出し2～６」「リスト・番号付きリスト」
等を選ぶことが出来ます。
更に
「文字の揃え位置（右揃え・真ん中揃え・左揃え）」
「太字」や「イタリック」
「リンク」・「新しいタブで開く」
「打消し線」
の設定が可能です。

参考サイト

ポートフォリオについて

Webデザイナーの就活で使用するポートフォリオとは、これまで作成してきた作品を1つのファイルにまとめた「作品集」のことをいいます。自分のスキルや個性を評価してもらう資料であり就活時に提出が求められます。履歴書だけでは伝わらない技術力やセンスなどを視覚的にアピールできます。

参考サイト

ワンポイントアドバイス

ポートフォリオサイトの記事は、訓練校での6カ月間で何をやって過ごしていたかの証明になります。
未経験の方であれば、何を学んでいたのか、自身が普段どんな生活をしているのか、
企業担当者が知りたいのは、「どんな人物なのか？」です。
日々の訓練で学んだ事だけではなく、遊びに行った事や、プライベートで読んだ本、見たYouTubeなどの動画なども載せて自分らしい作品にして行きましょう。

本日の課題

企画でまとめた内容を投稿ページにしてみましょう。
※時系列は訓練日にしておくと良いです。