実技 ECサイトデザイン実習②

-本日のアジェンダ-

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

2限目
実技 ECサイトデザイン実習②
GIFアニメーションの使い方

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

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

5限目
実技 ECサイトデザイン実習②
発表会

本日のテーマ

GIFアニメーションを作ってみましょう

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

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

参考サイト

本日の操作のキーワード(Photoshop)

  • ウィンドウ>タイムライン【New】
  • タイムライン> フレームの作成・削除【New】
  • タイムライン> トゥイーン【New】
  • 編集 >パペットワープ 【New】
    (Illustratorと異なり、ツールバーにアイコンがありません)
  • Web用に保存(従来)

パペットワープ(Photoshop)

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

参考サイト

パペットワープ(Illustrator)

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

参考サイト

実技 ECサイトデザイン実習①

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習①
課題発表

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

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

4限目
実技 ECサイトデザイン基礎①
バナー作成

5限目
実技 ECサイトデザイン基礎①
バナー発表

本日のテーマ

サイズ違いでバナーを作成してみましょう。

デザインはまず真似をする事が上達の近道です。
「参考にするバナー」を読み解き、デザインの3要素を真似しましょう。

【1】文字デザイン
【2】配色デザイン
【3】レイアウトデザイン

本日の課題(1つ目)

  • お題:まずは、真似をすることで昨日テーマのブラッシュアップしましょう。
  • サイズ:自由です。
  • 1個作りましょう。
  • 提出先:【作品】バナー⑤
  • 3限目修了迄に提出

提出ファイルの形式について

①参考にしたバナー: task_(お名前)_(日付)_a1.jpg(またはpng)
②作成したバナー: task_(お名前)_(日付)_b1.jpg
※2個目の作成は、末尾にa2, b2 という名前を付けてください。

画像取得時の留意点

Chromeで、画像を右クリック>「名前をつけて画像を保存」をしようとして、WebP形式のファイルだった場合
①画像を右クリック >「新しいタブで画像を開く」
②新しいタブのURLを画像の形式(JPG等)に変更する。
③ 「名前をつけて画像を保存」

拡張子「WebP(ウェッピー)」のファイルをJPEGやPNGなどに変換する方法

Photoshopの操作

  • (横書き・縦書き)文字ツール
  • 長方形ツール
  • 整列ツール(等間隔に分布 ・〇〇方向に分布 )
  • レイヤースタイル(境界線・ カラーオーバーレイ・ 光彩(外側)・ドロップシャドウ)
  • アートボードツール
  • 書き出し形式…(①ファイル>書き出し②レイヤー右クリック)
  • グラデーションツール(レイヤーマスクへの適用)
  • レイヤーの『不透明度』と『塗り』(境界線の掛け方)