2012年4月16日

イコライザーをFireworksで描いてみました

asial

Pocket

こんにちは。和田です。

最近、会社の中で音楽を趣味にしていたり音響に詳しい人たちが増えて来たように思えます（今まで知らなかっただけかもしれませんが…）。
ということで、今回は音楽ネタを描こうと思います。

じゃあ、何を描こうかな…と思った時に、ふとイコライザーが頭に浮かんだので、今回はイコライザーをFireworksで描いてみようと思います。
今回も例によって簡単に出来るので皆様も是非描いてみて下さい。

それでは作成したいと思います。
まず始めに640×500pxの新規ファイルを作成します。

そして、

1.背景を作成します。
1-1.背景の矩形を作成します
　・サイズ：640×500px
　・塗り：線形グラデーション
　　　　　#404040　→ #202020
　・フィルタ（ノイズを追加）：適用量 = 2

↓背景はこんな感じになります。

1-1.背景にハイライトを追加します。
質感をつけるためハイライトを加えます。
□上段の楕円　
・サイズ：505×162px程度
　・塗り：ベタ塗り（#FFFFFF）
・エッジ：エッジをぼかす（100程度）
・ブレンドモード：オーバーレイ
・不透明度：50%

□下段の楕円　
・サイズ：373×184px程度
　・塗り：ベタ塗り（#FFFFFF）
　・エッジ：エッジをぼかす（94程度）←100でかまいません。
・ブレンドモード：オーバーレイ
・不透明度：30%

↓こんな感じになります。

2.インターフェース部分の作成。
2-1.溝の矩形を作成します
　・サイズ：9×214px程度
　・塗り：ベタ塗り（#999999）

これに、

　・ブレンドモード：ソフトライト
　・丸み：2px

　・フィルタ：Photoshopライブエフェクト
　　→ドロップシャドウ
　　　・不透明度：40%
　　　・距離：1px
　　　・角度：180度
　　　・サイズ：0
　　　・スプレッド：0
　　→シャドウ（内側）
　　　・不透明度：90%
　　　・距離：4px
　　　・角度：180度
　　　・サイズ：80px
　　　・スプレッド：10
　　→カラーオーバーレイ
　　　・不透明度：40%
　　　・カラー：#000000

↓そうすると、こんな感じになります。

そして、横方向に等間隔にコピーします。
一番右端の溝はLevelのコントロール部分にしようと思うので、右に少しずらしました。

2-2. 目盛の線を作成します
等間隔にそれらしいラインを下記の画像のように作成してみて下さい。
　・線：1 or 3px
　・カラー（#FFFFFF）
　※ 今回は目盛の間隔を15pxにしました。

そして、溝の間にも目盛を描き、全部の目盛に対してブレンドモード（ソフトライト）をかけます。
こうすることで、目盛が背景になじみます。

2-3.ツマミの矩形を作成します
ツマミは下記の画像のように６種類の矩形を作成します。
形はそれっぽく作ってみて下さい。

❶　塗り：ベタ塗り（#2E2E2E）
❷　塗り：ベタ塗り（#202020）
❸　塗り：ベタ塗り（#171717）
❹　塗り：ベタ塗り（#111111）
❺　塗り：ベタ塗り（#3C3C3C）
❻　塗り：ベタ塗り（#4D4D4D）

※ 上記６種類の矩形にフィルタ（ノイズを追加：適用量 = 1）をかけます。
こうすることで、ザラッ(?)とした質感を出します。

次に❸の矩形にハイライトをつけるため下記のフィルタをかけます。
・フィルタ：Photoshopライブエフェクト
　→ベベルとエンボス
　　・スタイル：ベベル（内側）
　　・テクニック：ズーム
　　・方向：アップ
　　・深さ：140
　　・サイズ：0
　　・ソフト：0
　　・角度：90度
　　・ハイライト：20（#FFFFFF）
　　・シャドウ：0（#000000）