学科 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へのリンクを作成
  • 埋め込み→「埋め込み」:代表的なサイトへのリンクを作成
参考サイト

本日の課題

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

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【資料】

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

下記のファイルをダウンロードしましょう。
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度回転した図形をコピーで生成できます。

本日の課題

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