ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > PhotoshopとImagereadyで太陽のアニメーションを作る方法

PhotoshopとImagereadyで太陽のアニメーションを作る方法

投稿日:2010年07月27日   レベル:初級者    ソフトウェア:PhotoShopimageready

このチュートリアルでは、Photoshop(フォトショップ)とImageready(イメージレディー)を使って、太陽のアニメーションを作る方法を紹介します。

Step1:夜明けの画像に太陽を描く

暗い夜明けのように見えるように、「フィルタ」−「描画」−「照明効果」を適用したものです。

夜明けの風景

新規レイヤーを作り、円を描きます。
太陽っぽく輝かせます。

輝く太陽



Step2:太陽が空にのぼるようにマスクする

太陽を描いたレイヤー上で右クリックし、「新規スマートオブジェクトに変換」を選択します。
これにより、これから作るマスクは動かなくなります。

新規スマートオブジェクトに変換

レイヤーの右下にアイコンが出てきます。
レイヤーがスマートオブジェクトであることを表しています。

スマートオブジェクト

レイヤーにマスクを追加します。

マスクを追加する

新しくマスクを選択し、ブラシツールブラシツールに切り替えます。
不透明度を30%くらいに低く設定しておきます。
太陽と山が重なっている部分は完全にマスキングし、山からはみ出ている部分はマスクを少しだけにしておきます。
これにより、アニメーションをかけたときに、太陽が昇るにつれて明るくなるように見えます。

マスクする

参考までに、私のレイヤーはこのようになっています。

マスクしたレイヤー





Step3:朝焼け色のレイヤーをつくる

新規レイヤーを作り、描画モードをカラーに変えます。
再びブラシツールブラシツールを選択し、明るいオレンジ色で写真の空や木や岩を塗っていきます。
不透明度は0%に設定しておきます。

オレンジ色のレイヤー



Step4:アニメーションをつくる

「ウィンドウ」−「アニメーション」を選択します。

アニメーションを選択する

アニメーションを作るには、アニメーションパレットでフレームを複製し、太陽レイヤーを少しずつ上げていきます。
私は、11レイヤー作りました。
6番目からオレンジ色のレイヤーの不透明度を2〜3%ずつあげていきます。

アニメーション

アニメーション

オレンジレイヤーの不透明度の例です。

オレンジレイヤーの不透明度を設定する



Step5:完成

アニメーションで太陽が動き、色が変化します。

アニメーション

アニメーションをクリックすると、再生して確認することができます。
「ファイル」−「web用に保存」で、「.gif」の拡張子で保存します。

完成



引用:Web Design Library 著者:Lombi 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

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