Web2.0風デザインをやってみた

先日「Web2.0風の画像の作成方法」で取り上げたましたが
これを実際にやってみました。

GIGAZINE「Web2.0風サイトを作るのに必要なモノあれこれまとめ」
でも紹介されていました(下のほうにあります)。

ではFireworks4を使って同じようなものを作ってみる方法をご紹介

タイトルバー作成

まず矩形ツールで縦長の長方形を作成します。

塗りを線形のグラデーションにします。
ここではモノクロでまず塗っておきます。
最初から色をつけてもいいのですが、今回は後で色を変更します。

左から#333333, #444444, #666666, #CCCCCC
ポイントは真ん中二つを近づけるところです。

それから、この長方形を左に90度傾けます。

そして、バーの色を変更します。
ツールメニューの「エクストラ」→「カラー調整」→「カーブ」を選択します。
今回は青っぽい色にするので 、チャネルの青を選択し以下のようなカーブにします。

写り込み文字の作成

写り込みのある文字を作成します。
テキストツールを使って適当な文字を入力します。
入力した文字をコピーし重ねます。
そして、コピーした文字を反転させます。
「ツールメニュー」→「修正」→「変形」→「縦反転」
この文字を映り込みっぽく加工します。
簡単なのは文字の上に矩形を作成してグラデーションで塗りマスクする方法です。
こんな感じになります。
なかなかいい感じではないでしょうか?

星型マークの作成

多角形ツールを選択し、オプションで形状を星に、頂点を25に、角度は80度にします。
適度にシャドーをつけておくとかっこいいです。
また、縁取りをつけておいてもかっこいいです。
こんな感じ。

これに文字を乗せたら完成です。

完成!!