スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > PhotoshopとImageReadyでスピーカーのGIFアニメーションを作る方法

PhotoshopとImageReadyでスピーカーのGIFアニメーションを作る方法

投稿日:2010年01月22日   レベル:初心者    ソフトウェア:PhotoShop PhotoShop

このチュートリアルでは、PhotoshopとImageReadyでスピーカーのGIFアニメーションを作ってみたいと思います。

Step1:はじめに

Photshopを起動して、アニメーションさせたい画像を開いてください。

アニメーション画像

クリックして拡大



Step2:スピーカーに効果を加える

ペンツールペンツールもしくはあなたが使いたい切り抜くためのツールを選択し、
スピーカーの周囲を切り抜いてください。私はペンツールペンツールを使うのがベストだと思います。

スピーカー

クリックして拡大

スピーカーを新しいレイヤーに2回コピーしてください。
それぞれに、「スピーカー1」「スピーカー2」と名前をつけてください。

レイヤーコピー

スピーカー1レイヤーを選択し、「フィルター」−「ぼかし」−「ぼかし(移動)」へ行ってください。
10ピクセル以上ぼかさないでください。

ぼかし(移動)

OKをクリックして、ぼかしを適用してください。
このステップをスピーカー2レイヤーに対しても適用して下さい。ただし、ぼかし(移動)の角度は変えてください。
ぼかしを適用したら、目のアイコンをクリックして、2つのスピーカーのレイヤーを非表示にしてください。





Step3:ImageReadyで編集する

次に「ファイル」−「ImageReadyで編集」に行ってください。
初めてImageReadyを使う場合、アニメーションウィンドウが開かないかもしれません。
その時は「ウィンドウ」に行き、「アニメーション」にチェックを入れてください。

あなたのレイアウトはこのようになっているはずです。
私たちが要するものは、私が動かした3つのボックスのみです。

これから使うアイコンにラベルを付けました。下の画像を参考にしてください。

アイコンにラベル

クリックして拡大

すでにアニメーションウィンドウには1つのフレームがあります。私たちはこれを4回複製する必要があります。
レイヤーをクリックして、複製するフレームボタンを4回クリックしてください。

これでフレームが5つになったはずです。

アニメーションウィンドウ

クリックして拡大

フレーム2を選択し、スピーカー1レイヤーを表示してください。

フレーム2を選択

クリックして拡大

レイヤー4をクリックして、スピーカー2レイヤーを表示してください。

レイヤー4選択

クリックして拡大

「0秒」となっているレイヤー2とレイヤー4の小さい黒の矢印を
クリックし、レイヤー2とレイヤー4のディレイを2.0秒にセットしてください。

ディレイ

クリックして拡大

アニメーションウィンドウの下にあるプレイをクリックして、どのように表示されるか見ることができます。

私のはこのように表示されています。

プレイをクリック

クリックして拡大



Step4:完成

ディレイを変更したり、もっとフレームを追加することで、バスのリズムを調節することができます。

バナーに作り替えることもできるでしょう。

ぼかし(移動)

クリックして拡大



引用:Web Design Library 著者:hv-designs.co.uk 翻訳:日下部



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング