EC studio EC studio デザインブログ

2008年02月20日投稿者:新免 孝紀

PhotoshopチュートリアルをFireWorksでつくってみる

デザイン部の新免です。

EC studioでは主にFireworksを使用して素材を作っています。

いろいろ作り方を参考にしたいと思い探してみるのですが、
Photoshopでカッコイイ素材を作るチュートリアルは
沢山紹介されていますが、なかなかFireworksを使用した
素材のチュートリアルと言うのが見つかりません。

そこで今回は、メモ的な感じでPhotoshopのチュートリアルを
参考にして、Fireworksで素材をつくってみます。

今回は
COSMO-DESIGNS.COM
こちらのサイトで紹介していたものを参考にしました。

完成

まずはファイルの「新規作成」から
・幅:400px ・高さ:400px ・解像度:72px/in
・キャンバスカラー:カスタムカラー(#353535)で
新規ファイルを作ります。

楕円ツールを選択し、好きな大きさの円を描きます。


フィルタから「Photoshop ライブエフェクト」を選択します。

「グラデーションオーバーレイ」にチェックを入れます。
・ブレンドモード:通常 ・不透明度:40
・スタイル:線形 ・角度:-90 ・拡大・縮小:100

上記の設定で「OK」をクリックします。

さきほど描いた円をコピー&ペーストし、
「ctrl+T」で縮小します。

グラデーションの「線形」を選び色を設定します。

描画モードを「オーバーレイ」に設定します。

もう一度、円をコピー&ペーストし、
描画モードを「通常に」戻し、グラデーションの設定します。
・グラデーション:放射 ・不透明度100 – 0

さらに、円をコピー&ペーストし、
「修正」→「変形」→「縦反転」を選択します。

楕円を描きグラデーションの設定をします。

最下部のレイヤーオブジェクトをコピーし、
フィルタの「Photoshopライブエフェクト」の
設定を下記の数値に変更します。
「グラデーションオーバーレイ」にチェックを入れます。
・ブレンドモード:通常 ・不透明度:40
・スタイル:線形 ・角度:90 ・拡大・縮小:100

「ぼかし(ガウス)」ぼかしの半径:2.5 で設定します。

最下部から2番目のレイヤーオブジェクトを
コピー&ペーストし、縦、横とも各2px縮小します。

最下部から2番目のレイヤーオブジェクトに
グラデーション「円錐」を設定します。

下記のようなオブジェクトを作り
グラデーションを設定します。

ブルーの円のオブジェクトをコピー&ペーストし、
「修正」→「変形」→「自由変形」で、
オブジェクトの横幅を縮めます。

変形したオブジェクトをフィルタの
「レベル補正」で
・入力レベル:0 , 0.85 , 255
に設定します。


レベル補正したオブジェクトをコピー&ペーストし、
「修正」→「変形」→「自由変形」で、
今度は、オブジェクトの縦幅を縮めます。

変形したオブジェクトをフィルタの
「レベル補正」で
・入力レベル:0 , 0.42 , 255

ブルーの円のオブジェクトを選択肢し、
フィルタの「Photoshopライブエフェクト」で、
グロー(内側)にチェックを入れ、下記の設定をします。


最上部のレイヤーオブジェクトを選択し
描画モードを「ハードライト」で不透明度:40に設定します。

更に、レイヤーオブジェクトをコピーし、
不透明度:25に設定します。

多角形ツールを使い光の部分を表現します。
・形状:星型 ・頂点:16 ・角度:44

フィルタ「ぼかし(放射状)」
・適用量25 品質:100

フィルタ「Photoshopライブエフェクト」の
グロー(内側)にチェックを入れ、下記の設定をします。

光の部分が完成します。


完成です。FireWorksを使っている方で
興味があれば一度挑戦してみてください。

もしかすると、もっと簡単に作れる方法もあるのかも知れません。
発見したかたは、是非コメントお願いします。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.