スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeグラフィック講座 > Fireworksで徐々に消える画像を作る方法

Fireworksで徐々に消える画像を作る方法

投稿日:2009年12月15日   レベル:初心者    ソフトウェア:Fireworks

このチュートリアルでは、Fireworksで徐々に消える画像を作ってみたいと思います。

Step1:はじめに

このシンプルな記事は、あなたが徐々に消えていくエフェクトを画像に加える手助けになります。
私たちは、徐々に消えていくエフェクトをマスキングと呼んでいます。
普段あなたがWebページをデザインする時、このようなエフェクトを使った画像を加えたくなるかもしれません。
Webページに画像を加えたいとき、そのページの背景色を使ってうまく修正したら、うまくいくでしょう。
背景色を使った修正は、ページにプロフェッショナルな見た目を与えます。
このチュートリアルを読んで練習するだけで、イメージマスキングと呼ばれるエフェクトを手に入れることができるでしょう。



Step2:お好みの画像を開く

お好みの画像を開いてください。
私の場合では190×142ピクセルのJPEG画像です。
私のWebページの背景は白です。
「修正」-「キャンバス」-「キャンバスカラー」で、白に変えてください。

これはエフェクトを使っていない画像です。

お好みの画像





Step3:長方形で画像を覆う

矩形ツール矩形ツールを使って、画像の上に長方形を描いて、長方形で画像を覆ってください。
私は白で長方形を描きました。

長方形

長方形を作って、画像の上に移動させました。

長方形

こんな感じです。

長方形



Step4:グラデーションをかける

長方形を選択し、プロパティを開いて、塗りの種類を線形にしてください。
ドロップダウンメニューから設定できます。

塗りの種類 線形

塗りの種類をクリックして、プリセットを白、黒にしてください。
これは、画像の右側に徐々に消えていくエフェクトを与えるために必要です。

徐々に消えていくエフェクトが欲しいので、次の画像のように長方形の上に線を引いてください。

グラデーション



Step5:マスクとしてグループ化する

ctrl + Aを押してすべてを選択し、「修正」-「マスク」-「マスクとしてグループ化」してください。

マスクとしてグループ化

今、あなたはこのエフェクトをゲットしています。

エフェクト

プロパティで、グラデーションを調節することによって、エフェクトを変化させることができます。

グラデーションを調節



Step6:完成

私はDreamweaverでこの画像を使って、表の中にそれを付け加えています。
あなたにアイデアを与える画像がここにあります。

完成



引用:Web Design Library 著者:www.macronimous.com/ 翻訳:日下部



スポンサードリンク

コメント

ランダム記事5件

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