20251003e1

画面表示を付加した説明のページ

このページでは，Photoshopを使用した文字のフレームインとアウトのアニメーション作製の演習の部分について，手順にわかりやすいように画面表示を付加しています．

１）　まずは，Adobe Photoshopを起動します．（Photoshopは新しいバージョンが入っている場合は、それを用いてください。）

§ 今年度からは教室等のPCには、Adobe Photoshop 2024が入っており、使用前に、 AdobeIDのユーザーの登録（メールアドレス、PW等）が必要になっています。また、2回目以降も登録したメールアドレスで使用が可能になりますので、必ず登録をしておいてください。

https://www.meiji.ac.jp/ksys/it/6t5h7p00000i4mht-att/a1641975028762.pdf

§ 2024年度から、教室のPCは、Windows11にOSが代わっております。ウインドウズのメニューアイコンをクリックし、ピン留め済みのメニューの中からAdobe Photoshop2024 を立ち上げましょう．（以下の画面説明は2022のものですので、多少違う場合があります。）

２）　はじめに，用意された以下の写真をディスクトップ上に保存しておき，そのファイルを開きましょう．ファイルのアイコンをPhotoshop のウインドウ上にドラッグ＆ドロップしてもファイルは開きます．

neko2.jpg：　1024×768×24bit：169kbyte（画像に使用されているメモリではなく，ファイルの容量）

§ ディスクトップに取り込んだファイルを開きます．

§ 左横のツールバーにある横書き文字ツールで文字を書き入れます．文字の大きさは７２ポイントとし，色は右のカラーパレットで，白色（RGB共に最大値）にしましょう．

§ 写真の上に文字を入力します．

・入力した文字のレイヤー（写真の上に透明なシートを重ねて文字を書いたイメージ）をメニューバーの「レイヤー」のプルダウンのメニューの「レイヤースタイル」，さらに「ドロップシャドウ」を選択します．

・レイヤースタイルのウインドウはそのまま「OK」を選択する．

・右下のチャネル表示を選択後に，再度，レイヤーを選択して，レイヤーの状況を最新状態を表示させる．

§ メニューバーの「ウインドウ」から「タイムライン」を選択します（バージョンによってメニュー画面が異なる場合があります）．

§ タイムラインのウインドウを表示させます．さらにその中の「ビデオタイムラインを作成」ボタンの横の▽ボタンを押して、プルダウンのメニューを出します。

§ プルダウンのメニューから「フレームアニメーションを作成」を選択します。

§ 「フレームアニメーションを作成」のボタンを押して、フレームアニメーションタイムラインを出します（これはCS6の画面です）。

§ フレームアニメーション作成用のタイムラインのウインドウを表示させます（ビデオのタイムラインを選択肢してしまった場合に、フレームアニメーション作成用に切り替えるには、タイムラインの左端の画像の下のアイコンをクリックすると切り替えられます。）．

§ 表示されている画像の複製をタイムラインウインドウの下にある「選択したフレームを複製」で作成します．

§ 同じフレーム（画像）が２に表示されます．

§ 1枚目のフレームのレイヤーのうち，文字の不透明度を「０％」にします．（文字が透明になり消えます．）

§ このとき、下にある「フレーム１を反映」という部分の☑は外して□にしておきます。他のフレームに影響しないようにするためです。

§ タイムラインのウインドウにある2つの画像をShiftキーを押しながら，2つ共に選択します．

・タイムラインウインドウの下にある「アニメーションフレームをトゥーイーン」のボタンを押し，２つの画像の間を補間するアニメーションを作成します．

・トゥイーンのウインドウでは，補間するフレームの数を指定します．「５」のまま，「OK」とします．

　

・２つ画像の間に5枚のフレームが自動的に作られたと思います．アニメーションを再生してみましょう．ウインドウの下の「アニメーションを再生」のボタンを押します．

アニメーションははじめの画像に戻って繰り返しますが，その回数を変えることもできます．ウインドウの左下の無限の部分は，無限に繰り返すことをさしており，３回や一度に指定できます．

・今度は7枚目の画像を選択し，先ほどと同じように複製を作成します．

・8枚目の画像の文字のフレームで不透明度を「０％」とし，７と８枚目の画像を選択して，トゥイーンを選択して，新たに5枚の補間した画像を作成します．

合計13枚の画像ができあがり，アニメーションとしては，文字のフレームインとアウトを繰り返すものができたと思います．

・繰り返しの回数を3回に指定してみます．

§ アニメーションが完成したら，メニューバーの「ファイル」のプルダウンのメニューから，「書き出し」を選択し、その中にあります、「Ｗｅｂ用に保存（従来）」を選択します（Photoshop 2024の場合）。バージョンによっては、「Webおよびデバイス用に保存」が「ファイル」のメニュー内にある場合もあります。

§ 最適化の保存がなされますが，アニメーションGIF形式で保存されることになります．表示されたウインドウを確認し，保存をして完了します．

§ ディスクトップ上に保存して見てください．

・出来上がったアニメーションのファイルは，インターネットエクスプローラ（IE）にアイコンをドラッグ＆ドロップして，アニメーションとして再生されるかを確認してください．

・なお，アニメーションGIFのファイルをPaintshopなどで開くと1枚の画像のみが表示されることになります．