今日はいつものテイストとがらりと変わりますが
こんな感じのデザインの作り方を解説してみたいと思います☆
カンバスを開いてガイドをかくところから説明していますので、Fireworksはじめての方でも大丈夫だと思います！
よさげな写真が撮れたので
作ってみました。
今回の見どころは、ヘッダーの装飾に使っているツイストアンドフェードで作ったオブジェクトです。
面白い機能なのでぜひ使ってみてください！
以下のステップで説明しています。
- カンバスを開く
- 作業用ガイドを引く
- 背景を配置する
- ツイストアンドフェードで装飾パーツを作る
- 光を描く
- コンテンツの背景ボックスを描く
- タイトルロゴを作る
- グローバルナビゲーションを作る
- コンテンツを描く
- 完成！
- バリエーションアイディア
それでははじめます☆
カンバスを開く
両サイドに向かって背景が消えていく感じのデザインを作りたいので、
1600px × 1400pxと横幅大きめのカンバスを開きます。
背景は黒（#000000）に設定します。
作業用ガイドを引く
作業用ガイドを引いて作業しやすくしましょう。
上と左にある定規をクリックしてドラッグするとガイドラインが引けます。
ガイドラインは、キーボードショートカット【control（command）】+【 ; 】で表示非表示を簡単に切り替えられます。
覚えておくととても作業しやすいです。
今回ははじめに6本。
背景を消したい位置に印を入れておきたいので、100pxと1500pxのところに縦のラインを、
コンテンツ幅を960pxにしたいと思いますので、320pxと1280pxのところにも縦のラインを入れます。
コンテンツ部分の余白用にさらに内側20pxづつの部分、340pxと1260pxの部分にも縦のガイドラインを入れました。
定規が出ていない場合は上部メニューバーの【表示】→【定規】で表示させることができます。
背景画像を配置する
背景にする画像を配置します。
メニューバー【ファイル】→【読み込み】で背景画像を配置します。
このままだと、背景がスパっと切れてしまっていて黒の背景となじまないので
黒のグラデーションをかけて背景となじませます。
以下の図のように３つの辺を覆うように長方形を長方形ツールを使って書きます。
それぞれの長方形に以下のグラデーションをかけます。
塗りを【グラデーション】→【線形】にして色、不透明度を以下のように設定します。
グラデーションの方向やかかりかたをそれぞれの図形で調整します。
コーディングのことも考えて、最初に引いたガイドラインの範囲内でキレイに消えるようにします。
カンバスを広めにとっているのはきちんと消えているか確認しやすくするためです。
ツイストアンドフェードで装飾パーツを作る
こんな感じの装飾パーツをとっても簡単に作ります。
背景の写真の上に重ねるといい感じになります！
楕円ツールでこんな感じの楕円を書きます。
色はお好みで。あとで変更できます。
メニューの【コマンド】→【クリエイティブ】→【ツイストアンドフェード】で設定画面を開きます。
今回は以下のように設定していますが、ランダムを押していろんな効果を試してみてお好みの効果を出してみるのもよいと思います。
お好みの効果が作れたら設定画面左下の【+】マークで設定を保存できます。
いろんな設定を保存しておくと便利です。
この機能で作成した色はあとから簡単に色を変えられます。
色によってこのように同じ効果でもまたがらっと印象が変わるのでいろいろ試してみてください！
ヘッダーに重ねてみました。
今の時点ではわかりにくいですが、このあとのオブジェクトを配置した時に際立ってきます。
光を描く
画像の上にキラキラと光った感じのオブジェクトを書いてきます。
これもとっても簡単です。
楕円ツールでshiftキーを押しながら正円を書きます。
線の設定は
色:#ffffff 線の太さ:2 エッジが柔らかい線（丸）
とします。
この円に２つのフィルタをかけていきます。
プロパティーパネル右下、フィルタの部分から
【ぼかし】→【ぼかし（ガウス）】をかけます。
0.7でぼかしをかけました。
フィルタメニューから【Photoshopライブエフェクト】を選択
【光彩（外側）】で以下のように設定します。
二つのフィルタをかけ終わったら
プロパティーパネル右下レイヤーモードを【オーバーレイ】に変更します。
黒背景の状態だとなにもみえない状態になりますが、背景部分にドラッグするとこのように光った感じの効果がかかります。
この出来上がったオブジェクトをコピーしてリサイズしてバランスよく配置します。
さらに塗りと線を入れ替えたものも配置していきます。
塗りと線の入れ替えはツールバーのボタンで簡単に切り替えられます。
こんな感じに仕上がりました。
コンテンツエリアのボックスを描く
コンテンツエリアの背景ボックスを描きます。
長方形ツールで最初に引いた320pxと1280pxのところガイドラインにあわせてボックスを描きます。
塗りは黒（#000000）で透明度を60にし、フィルタメニューから【シャドウとグロー】→【グロー】で以下のような値で設定します。
この状態だとこんな感じで下の方までボックスが延びていますが、
これも下に向かってフェードアウトするようなデザインにしたいので、上記に記載した背景の時と同様、グラデーションをかけた長方形を置いてフェードアウトするように調節します。
タイトルロゴを作る
塗りを白（#ffffff）でタイプした文字に、プロパティパネルのフィルタから【Photoshopライブエフェクト】を選び、
光彩（外側）を以下のように設定しました。
カラーは黄色にしてほんのり輝くような色に仕上げました。
グローバルナビゲーションを作る
立体感のあるグラデーションボタンも簡単に作ってしまいましょう。
現在のページ用とそれ以外とで2色つくります。
それぞれのグラデーションは以下のように適用します。
次にフィルタをかけて立体感を出します。
プロパティパネルのフィルタから【Photoshopライブエフェクト】を選択します。
【ベベルとエンボス】にチェックを入れ、以下のような値を設定します。
数値はどれも控えめに。
ほんのりかかるぐらいがきれいです。
コンテンツ部分を作る
長方形ツールや楕円ツールを使ってコンテンツ部分を書いていきます。
特に難しいテクニックは使っていないので詳しい説明は割愛します。
完成！
バランスよく配置したら完成です！
バリエーション例
背景写真をPHOTO STOCKERで配布している夜景加工写真に入れ替えてみました。
背景の入れ替えとキーカラーの変更だけでかなりイメージが変わるのでいろいろバリエーションも作れると思います！
今回のポイントはツイストアンドフェードと、レイヤーモードをオーバーレイにして配置した光の輪っかです。
ちょっとしたPhotoshopっぽいことならFireworksでもこんな感じで簡単にできて、あとで色変更も出来ます。
（あとから色変更が利くのがとても便利です…！！！）
↓こんなのも楽々。
ぜひいろいろと試してみてくださいね♪
