ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング