-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習⑤
GIFアニメーションについて

2限目
実技 ECサイトデザイン実習⑤
GIFアニメーション作成

3限目
実技 ECサイトデザイン実習⑤
GIFアニメーション作成

4限目
実技 ECサイトデザイン実習⑤
GIFアニメーション作成

5限目
実技 ECサイトデザイン実習⑤
作品発表

本日のテーマ

GIFアニメーション

GIFアニメーションについて

GIFアニメーションは、Graphics Interchange Format の「マルチイメージ」を使ったアニメーション。アニメーションGIF ともいう。マルチイメージは GIF87a で導入された機能で、複数のフレームを順に表示できる。

本日のキーワード

GIF画像で保存
GIFアニメ
Photoshop「タイムライン」
トゥイーン
レイヤーパネル
パペットワープ
カンバスサイズ

参考サイト

パペットワープ（Photoshop）

加工で写真のポーズを自由に変えたい人必見。Photoshop cs5で実装された「パペットワープ」で簡単にポーズが変えられます！座っている人が立ったり、ジャンプしたり。自由に動かして、写真の人物を元気に動き回らせることもできます。

参考サイト

パペットワープ（Illustrator）

パペットワープの機能はPhotoshopやAfterEffectsではおなじみの機能となりますが、ついにIllustratorにも搭載されました。もともとパペットとは「人形」の意味で、ワープは「歪み」となり、主に人や動物など、関節の可動を再現する変形に使用すると便利なツールになります。何かの軸を起点に歪みや回転を適用させる変形に非常に便利ですので、その使い方をご紹介します。

参考サイト

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習④

2限目
実技 ECサイトデザイン実習④
バナー作成の実演

3限目
実技 ECサイトデザイン実習④
LPとは？

4限目
実技 ECサイトデザイン実習④
psdの納品について

5限目
実技 ECサイトデザイン実習④
バナー作成

本日のテーマ

プレゼンについて

バナー制作の進め方

バナーとは？

バナー (banner) はウェブページ上で他のウェブサイトを紹介する役割をもつ画像（アイコンの一種）のこと。主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。画像にはリンクを張り、クリックするとそのバナーが紹介するサイトを表示するようになっている。横長帯状のものが一般的だが、近年は縦長のものや正方形に近いものも多い。

制作工程

作品全体の要素確認をする
文言内容の構図（レイアウト）決める
画像素材の補正・調整
画像当て込み文字の読みやすさの調整
全体のバランスを整える

【ポイント】
リテイク（修正や出戻り）に強いデータにしておくこと
レイヤーパネルの整理整頓
2パターン以上のパターンのアイデアを持つこと

1.作品全体の要素確認をする

作品作りを円滑に行う最大のコツは、最初に要件定義をしっかりまとめる事かと思います。「掲載箇所」「サイズ」「文言」「画像」「使用頻度」等をしっかり初期段階で確認しておきましょう。

必要な技術と知識の例として

「カンバスサイズ」
「画像解像度」
「CMYKとRGB」

2.文言内容の構図（レイアウト）決める

内容が固まったら、構図（レイアウト）を考えましょう。この工程では見せる順番を決める事、まずは色を使わず骨組みだけにして、構図を考えてみましょう。

必要な技術と知識の例として

「文字パネル」「段落パネル」
「定規」「ガイド」
「移動ツール」
「レイヤーパネル」

3.画像素材の補正・調整

画像の補正とサイズ調整を行いましょう。大事なことは3つ
「レタッチ」「色調補正」「トリミング」をしっかり行いましょう。
また、バナー制作時間を左右するのはココです！効率の良い作業を行うためには、この工程の工夫と予測をしておきましょう。

必要な技術と知識の例として

「レタッチ」
- パッチツール・切り抜きツール・コピースタンプツール・スポット修復ブラシツール・修復ブラシツール・コンテンツに応じた移動ツール・ぼかしツール・シャープツール・指先ツール・覆い焼きツール・焼き込みツール
「色調補正」
- 明るさ・コントラスト・レベル補正・トーンカーブ・色相・彩度・カラーバランス・白黒
「トリミング」
- 長方形選択ツール・楕円形選択ツール・なげなわツール・多角形選択ツール・マグネット選択ツール・自動選択ツール・クイック選択ツール
「マスク」
- クリッピングマスク・レイヤーマスク・ベクトルマスク・クイックマスクモード
「アンシャープマスク」

4.画像当て込み文字の読みやすさの調整

画像と文字が同じ作品に収める工程です。気を付ける事は
「文字の読みやすさ」と「世界観の維持」です。
文字は読めなくては目的が達成できなくなり、作品の雰囲気や世界観を壊してしまっても意味がありません。バランスよくデザインを考えてみましょう。

必要な技術と知識の例として

「レイヤースタイル」
- ドロップシャドウ・シャドウ（内側）・光彩（外側）・光彩（内側）・べベルとエンボス「輪郭」「テクスチャ」・サテン・カラーオーバーレイ・グラデーションオーバーレイ・パターンオーバーレイ・境界線・塗りつぶしツール
- レイヤースタイルのコピー・レイヤースタイルのペースト
「文字パネル」
- フォント選び・太さの調整
「描画ツール」
- 長方形ツール・角丸長方形ツール・楕円形ツール・多角形ツール・カスタムシェイプツール
- ペンツール・パス選択ツール・アンカーポイント切り替えツール

5.全体のバランスを整える

最後に全体の調整を行いましょう。そこで気を付ける事は、作っている本人は目が慣れてしまっているという事です。実際に見る人（ユーザー）は1~3秒程度しか見ません。制作する人は目を休めたり、一度違う作品を作ったり目をリフレッシュする事も大事な技術です。
後は、複数パターンの作り方のコツは、「2」「3」「4」の工程を見直す事です。
「2」の構図にまだ工夫の余地があるのか？
「3」の画像の扱いや種類に工夫の余地があるのか？
「4」の文字の見せ方・もともと求められている世界観を表現できているのか？
これらを考え更に良いものを作れるようにアイデアを創造してみましょう。

必要な技術と知識の例として

「Web用に保存（従来）」「書き出し形式」
「別名で保存」
「ズームツール」
「 Print Screen（プリントスクリーン）」

日	月	火	水	木	金	土
« 1月				3月 »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28