20251010c

ＩＣＴメディア編集Ⅱ　2025年10月10日

バナーの作成演習(教室もしくは自習室：Photoshopでの作成)

この演習については、ソフトウエアの関係で、Photoshopを用いたものであるため、大学の教室や自習室での作業となります。

※明治大学12号館のメディア教室、自習室、教員用端末室でAdobe Creative Cloudを利用する場合、 AdobeIDが必須となります。以下のPDFをよく読んで、対応ください。

Photoshopを使った作成（演習）：

とにかく，まずは，先週と同じようにPhotoshopを使用して，バナーの作成を体験してみましょう．　

１） まずは，Photosopを起動．

２） ハーフバナーの２３４ｘ６０pixel（72pixel/inch）のサイズでバナーを作成します。

３） 新規に２３４ｘ６０のサイズのキャンバスを用意します（カスタムにしてpixel単位として、高さと幅を合わせる）。

４） 先週と同じ手順で、まずは文字を入力します（文字の大きさは３０ｐｔ程度）。

５） タイムラインのウインドウを開き、フレームアニメーションを、作成を選択します。タイムライン上でのコピーとなります。

６） １枚目の画像の文字のレイヤーの不透明度を０％にします。

７） ２枚の画像間にトゥイーン機能を使って補間画像を作成します。

８） アニメーションを再生し、動きを見ましょう。

９） 背景や文字の装飾などを行なってみましょう（背景と最後のフレームに何か描いてみましょう）。

１０） 新規に1枚目のフレームにレイヤーを新規に作成し、ブラシのツールで丸などを書いてみましょう。

１１） レイヤーの1フレームを反映という部分のチェックをはずして、ツールバーの左の一番上の移動ツールを使って、フレーム自体を動かす形で丸などの絵を移動させてみましょう（１つ１つの絵をフレームごとに動かしてみましょう）。

１２） 他のフレームと異なった画像がおかれていれば、アニメーションとしての動きを出すことができます。再生して、確認しましょう。

１３） 文字においてもフレーム間で位置を移動してアニメーションを作成することができます。複製をとった文字のフレームを動かして動きをつけてみましょう（トゥイーン機能で補間してみます）。

１４） 最後に、書き出しでWebおよびデバイスの保存で、アニメーションGIF形式で保存します。

実習課題：

新規に適当なサイズを指定し，いくつかのバナーを作成してみましょう．