月別: 8月 2023

実技 イラストロゴ作成実習①

今日のテーマ

ピクトグラムを作ろう

課題作品

ユーザーインターフェイス基礎①【オンライン】

今日のテーマ

納品する作品のテーマ

〜デザインする時は、機械の力と一緒に正確なレイアウトを心がける〜

提案の考え方について

商業デザインというお仕事は、お客様（クライアント）とその先の、お客様（ユーザー）を意識したデザインが求められる。まずは、お客様（クライアント）の希望するイメージを具体化しなければならない。様々な提案方法を確認市実装出来るようにしていこう。

ピクトグラム（pictogram）とは

ピクトグラムとは、言葉を使わなくても情報を伝えられる、単純化された視覚記号。

ロゴとは？

ロゴタイプ、通称「ロゴ」は、図案化・装飾化された文字・文字列のことで、団体名、商号、商品名、雑誌名、書名等を印刷・表示する際などに使用される。

学科ポートフォリオ作成基礎①

ポートフォリオは「未来」闇雲に作成せず、同時に応募したい企業や職種をしっかり調べて「未来」に必要な作品作成を進めていく

プレゼンテーションについて

ポートフォリオ作成のポイントとして、いかに「自分をプロデュース」するかを考えなければいけない。「見てもらいたい自分」「そう思われたい自分」「変えたい自分」そこで、改めてプレゼンテーションという手法を考えてみる。

「現在」→履歴書

「過去」→職務履歴書

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

　

マスクと色調補正の実践

写真加工のルール！

【非破壊データで作業する】

必ずこの過程を行ってから作業を始める！

本日の作品

（製作時間3時間）

制作ポイント

• 珈琲が深い味わいに見えるようクリッピングマスクを利用し色調補正を行った
• 珈琲の切り抜きをマスクを利用し行った
• 早朝に飲む珈琲をイメージしたので背景がより朝日の光に見えるように明るく調整した

<利用画像>

学科グラフィック基礎⑤

【オンライン】

本日のポイント！

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

とにかく数多くの写真で練習をする！！

マスクについて

photoshopのマスクのかけ方は、大きく分けて『レイヤーマスク』『ベクトルマスク』『クリッピングマスク』の三種類がある。

（選択ツールの調整で使うクイックマスクモードがある）

レイヤーマスク

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

特徴と使い方

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

ベクトルマスクについて

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

特徴と使い方

• パスからマスク
• シェイプ（illustratorと同じイメージ）を使う
• きれいな曲線を描くときに有効

パスパネル

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

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

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

特徴と使い方

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

ポイント

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

ラスタライズ

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

色調補正

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

色調補正の手順

覚えておきたい色調補正

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

明るさ・コントラスト

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

レベル補正

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

トーンカーブ

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

色相・彩度

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

カラーバランス

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

白黒

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

調整レイヤー

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

ヒストリーパネル

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

アンシャープマスク

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

描画モードについて

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

ポイント

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

学科 CMS構築基礎④

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

portfolioは「デザイナーが実績をアピールする為の作品集」だが、ポートフォリオサイトは応募起業様向けに利用する。「ウチの会社でできる技術はどこにある？」となれば終わり。企業側は探さない。しっかりと起業に向けたページを用意する！！

権利や守秘義務を意識してパスワード設定をした固定ページを利用しよう。

求人票の塾代をまとめるのが固定ページ

時系列を残して成長を見せる。投稿ページは、いつ作成した作品であることを残すことができる。自身の成長を見せることで、成長曲線を見せることができる。ポートフォリオサイトとして、自身能勢町曲線を見せることで、就職活動の時、起業担当の方へ未知なる仕事への可能性を伝える。

one point

多くの作品を作り、多くの企業が様々なサービスを提供しているので、これが出来れば仕事に繋がるということは絶対ない。社内に既にその技術んスタッフがいれば、間に合ってます隣契約に至るのが難しい。結論「多くの作品を用意しておく」これしかない。未来の仕事に対して、雇用主は可能性を考える。より多くの作品を用意することで、可能性を広げよう。

_{ビットマップとでクターベータ}

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

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

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

ベクターデータとは？

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

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

ブロックエデュタの主要機能

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

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

今日のテーマ

ひたすら「トレース」をして慣れる

Illustratorの基本操作

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

引き続きの基本操作

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

トレースについて

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

【本日作成したトレース作品】

学科CMS構築基礎③

今日のテーマ

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

WordPressのメディアとは？

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

one point

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

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

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

トレースについて

イラストを描き始めたばかりの人は、線が上手に描けないことが多いが、お手本の絵をトレースし続けることによって、キレイで無駄のない線が一息で描けるようになっていく。また、上手なプロの絵をトレースすることで、描き方の感覚の違いや自分の描き方のどこが甘いのかという弱点も明確になるうえに、絵を描く集中力も鍛えられるのもポイント。

one point

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

オブジェクトの塗りと線

Illustratorの最大の特徴は塗渡船で構成されているということ。この特徴を理解することで、様々な絵を描くことができるので、常に塗と線を意識してIllustratorを使いこなそう。

ダイレクト選択ツール

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

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

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

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

Adobe Illustratorのベジェ曲線のかき方

終点から「切り替えツール」でドラッグすると、アンカーポイントから正反対に伸びている2本の方向線のうち、片方を折って方向を変えることができる。

シェイプ形成ツール

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

レイヤーパネル

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

ペンツール

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

リフレクトツール

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

曲線ツール

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

はさみツール

ハサミツールはオブジェクトの一部を切り取るのに使うツール。オブジェクトのパスの上にカーソルを合わせてクリックする。これを二か所以上繰り返せば切り取りが出来る。

変形の繰り返し

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

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

今日のテーマ

「トリミング」「レタッチ」をして合成写真を作る

トリミングとは？

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

レタッチとは？

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

本日のPhotoshopの基本操作

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

• パッチツール
• コピースタンプツール
• スポット修正ツール
• 修正ブラシツール
• コンテンツに応じた移動ツール
• ぼかしツール
• シャープツール
• 指先ツール
• 覆い焼きツール
• 焼き込みツール

• スマートオブジェクト（レイヤーをラスタライズ）
• カンバスサイズ
• 画像解像度

ファイルの作成方法

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

写真加工のルール（非破壊データで作業する）

「ファイルから開く（加工したい写真を取り込む）」

↓

「レイヤーパネルで複製」

↓

「右クリックでスマートオブジェクトに変換」

↓

「背景のレイヤーを非表示」

↓

「保存」

■無料写真素材のサイト

無料写真素材写真AC　https://www.photo-ac.com

無料の写真素材はフリー素材パクたそ　https://www.pakutaso.com

one point

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

今日の課題

〜とにかく２つの写真を合成した画像データを投稿〜