ＩＣＴメディア編集Ⅱ 2025年10月10日
バナーの作成演習(フリーソフト：GIMPでの作成)
フリーソフト：GIMPでの作成（演習）：
先週に引き続き、フリーソフトのGIMPを用いた方法での実習を以下に説明します（GIMPは前期にインストールされ、使われている方もいると思います。）。
GIMPのインストールなどは、先週の以下のWebページを参照してください。
アニメーションの作成演習（フリーソフト：GIMPでの作成での作成）
先週と同じようにGIMPを使用して，バナーの作成を体験してみましょう．
１） まずは，GIMPを起動します．
２） メニューバーの「ファイル」から「新しい画像を作成」を選択しウインドウを表示します。
３） 一番上のテンプレートの右側をクリックし、プルダウンのメニューから「Web banner leaderboard 728x90」を選択しOKボタンを押して、728ｘ90pixelのサイズでバナーを作成します。
４） 新規に728ｘ90のサイズのキャンバスを用意します（pixel単位として、高さと幅を合わせてもキャンバスを作成できます）。
５） 左側のツールバーの中の「A」のアイコンのテキスト入力のツールを選択します。左ツールバーの下に表示される詳細設定の色が白になっていると背景と同色で文字がみえませんので、色の横の白の部分をクリックし、文字色のウインドウで赤などに変え、OKを押します。文字のサイズは30pt程度にします。
６） 文字を入力します（例えば、Meiji Univ.など）
７） 右側のレイヤーのウインドウで文字のレイヤーを選択し、マウスの右ボタンを押して、サブメニューから「可視部分をレイヤーに」を選択し、レイヤーに「可視部分コピー」のレイヤーを作成します。
８） 「可視部分コピー」のレイヤーを左側のツールバーの中の「十」のアイコンの移動を選択し、レイヤーごとに右横などに移動します。
９） 「可視部分コピー」のレイヤーを選択し、マウスの右ボタンを押して、サブメニューから「レイヤーの複製」を選択し、レイヤーに「可視部分コピー#1」のレイヤーを作成します。
１０） 「可視部分コピー#1」のレイヤーを左側のツールバーの中の「十」のアイコンの移動を選択し、レイヤーごとに右横などに移動します。
１１） 「可視部分コピー#1」のレイヤーを選択し、マウスの右ボタンを押して、サブメニューから「レイヤーの複製」を選択し、レイヤーに「可視部分コピー#2」のレイヤーを作成します。
１２） 「可視部分コピー#2」のレイヤーを左側のツールバーの中の「十」のアイコンの移動を選択し、レイヤーごとに右横などに移動します。
１３） 背景を合わせて、5フレーム分のレイヤーができたことになります。
１４） メニューバーの「フィルター」を選択し、「アニメーション」の横をさらに選択し、「再生」を選択します。動画再生のウインドウで、再生のアイコン（右上の小さい再生の横向き三角形のボタン）を押して、動画の再生状況を確認します。「累積レイヤー（結合）」、「レイヤー毎に1フレーム（置換）」での表示を見てみます。
１５） メニューバーの「フィルター」を選択し、「アニメーション」の横をさらに選択し、「GIF用最適化」を選択します。新しいウインドウが開き、レイヤーに（100ms）(combine)などが表示されます。
１６） メニューバーの「ファイル」から「名前を付けてエクスポート」を選択し、ファイル名（名称未設定をtestanime1等にかえる）を入れ、一番下の「ファイル形式を選択」の部分で「GIF画像」を選択して、「エクスポート」のボタンを押します。
１７） 表示されたウインドウの中のアニメーションGIFのオプションをチェックし、また、ディレイ（100ミリ秒）やフレームを処理（気にしないをレイヤー毎に1フレーム（置換））等にし、下の全フレームにディレイやフレーム処理を使用することのチェックをし、「エクスポート」のボタンを押します。どのフォルダーに格納されるかは確認しておきましょう。
１８） 出来上がったファイルを確認します。ファイルをダブルクリックして再生してみます。文字が移動するアニメーションができたと思います。
実習課題：
新規に適当なサイズを指定し，いくつかのバナーを作成してみましょう．
加藤晋のページへ | ＩＣＴメディア編集Ⅱ | 写真を用いたアニメーションの作成演習(教室もしくは自習室：Photoshopでの作成)
| 写真を用いたアニメーションの作成演習(フリーソフト：GIMPでの作成)