FireworksマニアTOP > Fireworksチュートリアルまとめ,Fireworksデザインレシピ > アーティストのサイトのようなデザインをFireworksで作るレシピ!

アーティストのサイトのようなデザインをFireworksで作るレシピ!

カテゴリー: Fireworksチュートリアルまとめ,Fireworksデザインレシピ

今日はいつものテイストとがらりと変わりますが

こんな感じのデザインの作り方を解説してみたいと思います☆
カンバスを開いてガイドをかくところから説明していますので、Fireworksはじめての方でも大丈夫だと思います!

892-001

よさげな写真が撮れたので

892-003

作ってみました。

 

今回の見どころは、ヘッダーの装飾に使っているツイストアンドフェードで作ったオブジェクトです。

面白い機能なのでぜひ使ってみてください!

以下のステップで説明しています。

  1. カンバスを開く
  2. 作業用ガイドを引く
  3. 背景を配置する
  4. ツイストアンドフェードで装飾パーツを作る
  5. 光を描く
  6. コンテンツの背景ボックスを描く
  7. タイトルロゴを作る
  8. グローバルナビゲーションを作る
  9. コンテンツを描く
  10. 完成!
  11. バリエーションアイディア

 

それでははじめます☆

 

カンバスを開く

両サイドに向かって背景が消えていく感じのデザインを作りたいので、
1600px × 1400pxと横幅大きめのカンバスを開きます。

背景は黒(#000000)に設定します。

892-004

 

作業用ガイドを引く

作業用ガイドを引いて作業しやすくしましょう。
上と左にある定規をクリックしてドラッグするとガイドラインが引けます。

ガイドラインは、キーボードショートカット【control(command)】+【 ; 】で表示非表示を簡単に切り替えられます。
覚えておくととても作業しやすいです。

今回ははじめに6本。

背景を消したい位置に印を入れておきたいので、100pxと1500pxのところに縦のラインを、
コンテンツ幅を960pxにしたいと思いますので、320pxと1280pxのところにも縦のラインを入れます。
コンテンツ部分の余白用にさらに内側20pxづつの部分、340pxと1260pxの部分にも縦のガイドラインを入れました。

定規が出ていない場合は上部メニューバーの【表示】→【定規】で表示させることができます。

 

892-005

 

背景画像を配置する

背景にする画像を配置します。

メニューバー【ファイル】→【読み込み】で背景画像を配置します。

892-006

このままだと、背景がスパっと切れてしまっていて黒の背景となじまないので
黒のグラデーションをかけて背景となじませます。

以下の図のように3つの辺を覆うように長方形を長方形ツールを使って書きます。

892-007

それぞれの長方形に以下のグラデーションをかけます。

塗りを【グラデーション】→【線形】にして色、不透明度を以下のように設定します。

グラデーションの方向やかかりかたをそれぞれの図形で調整します。

892-008

コーディングのことも考えて、最初に引いたガイドラインの範囲内でキレイに消えるようにします。

カンバスを広めにとっているのはきちんと消えているか確認しやすくするためです。

892-009

 

ツイストアンドフェードで装飾パーツを作る

こんな感じの装飾パーツをとっても簡単に作ります。
背景の写真の上に重ねるといい感じになります!

892-010

楕円ツールでこんな感じの楕円を書きます。
色はお好みで。あとで変更できます。

892-011

メニューの【コマンド】→【クリエイティブ】→【ツイストアンドフェード】で設定画面を開きます。
今回は以下のように設定していますが、ランダムを押していろんな効果を試してみてお好みの効果を出してみるのもよいと思います。

お好みの効果が作れたら設定画面左下の【+】マークで設定を保存できます。

いろんな設定を保存しておくと便利です。
 

892-013

この機能で作成した色はあとから簡単に色を変えられます。

色によってこのように同じ効果でもまたがらっと印象が変わるのでいろいろ試してみてください!

892-012

ヘッダーに重ねてみました。

今の時点ではわかりにくいですが、このあとのオブジェクトを配置した時に際立ってきます。

892-014

 

光を描く

画像の上にキラキラと光った感じのオブジェクトを書いてきます。

これもとっても簡単です。

892-015

楕円ツールでshiftキーを押しながら正円を書きます。

線の設定は

色:#ffffff 線の太さ:2 エッジが柔らかい線(丸)

とします。

892-016

この円に2つのフィルタをかけていきます。

プロパティーパネル右下、フィルタの部分から

 

【ぼかし】→【ぼかし(ガウス)】をかけます。

0.7でぼかしをかけました。

892-017

フィルタメニューから【Photoshopライブエフェクト】を選択

【光彩(外側)】で以下のように設定します。

892-018

二つのフィルタをかけ終わったら
プロパティーパネル右下レイヤーモードを【オーバーレイ】に変更します。

892-019

黒背景の状態だとなにもみえない状態になりますが、背景部分にドラッグするとこのように光った感じの効果がかかります。

892-020

この出来上がったオブジェクトをコピーしてリサイズしてバランスよく配置します。
さらに塗りと線を入れ替えたものも配置していきます。

塗りと線の入れ替えはツールバーのボタンで簡単に切り替えられます。

892-021

892-022

こんな感じに仕上がりました。

 

コンテンツエリアのボックスを描く

コンテンツエリアの背景ボックスを描きます。

長方形ツールで最初に引いた320pxと1280pxのところガイドラインにあわせてボックスを描きます。
塗りは黒(#000000)で透明度を60にし、フィルタメニューから【シャドウとグロー】→【グロー】で以下のような値で設定します。

892-022

この状態だとこんな感じで下の方までボックスが延びていますが、

892-023

これも下に向かってフェードアウトするようなデザインにしたいので、上記に記載した背景の時と同様、グラデーションをかけた長方形を置いてフェードアウトするように調節します。

 

892-024

 

タイトルロゴを作る

塗りを白(#ffffff)でタイプした文字に、プロパティパネルのフィルタから【Photoshopライブエフェクト】を選び、
光彩(外側)を以下のように設定しました。

カラーは黄色にしてほんのり輝くような色に仕上げました。

892-025

 

グローバルナビゲーションを作る

立体感のあるグラデーションボタンも簡単に作ってしまいましょう。

現在のページ用とそれ以外とで2色つくります。

それぞれのグラデーションは以下のように適用します。

892-026

次にフィルタをかけて立体感を出します。

プロパティパネルのフィルタから【Photoshopライブエフェクト】を選択します。
【ベベルとエンボス】にチェックを入れ、以下のような値を設定します。

数値はどれも控えめに。
ほんのりかかるぐらいがきれいです。

892-027

コンテンツ部分を作る

長方形ツールや楕円ツールを使ってコンテンツ部分を書いていきます。

特に難しいテクニックは使っていないので詳しい説明は割愛します。

892-028

 

完成!

バランスよく配置したら完成です!

892-001

 

バリエーション例

背景写真をPHOTO STOCKERで配布している夜景加工写真に入れ替えてみました。
背景の入れ替えとキーカラーの変更だけでかなりイメージが変わるのでいろいろバリエーションも作れると思います!

892-002

 

今回のポイントはツイストアンドフェードと、レイヤーモードをオーバーレイにして配置した光の輪っかです。

ちょっとしたPhotoshopっぽいことならFireworksでもこんな感じで簡単にできて、あとで色変更も出来ます。

(あとから色変更が利くのがとても便利です…!!!)

↓こんなのも楽々。

ぜひいろいろと試してみてくださいね♪

最後までお読み頂き、本当にありがとうございました。お気に召しましたらぜひ共有orクリップして頂けますと幸いです。またお会いできますように♪

Check このエントリーをはてなブックマークに追加 この記事をクリップ! コメントを見る Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

関連エントリー

このサイトを運営している人

YUKIと申します。福岡で働く会社員WEBデザイナーです。
フロッグマンオフィス所属。ショッピングカートのCS-Cartとかもやってます。

仕事以外でも趣味でいろいろサイトを作っています。
こういったTipsサイトや無料の素材屋さんにたくさんたくさんお世話になりながら勉強して、今ではWebデザインをお仕事としてやらせてもらえるようにまでなりました。

私もいつか誰かの役に立つサイトを作りたい!とずっと思っていたので、あいた時間を見つけてはこうしたサイトを作っています。
すこしでもお役に立てればとてもうれしいです^^

まわりの人にもご紹介いただけるとうれしいです。

たくさんの方に見ていただき、たくさんのご意見を頂くことは、記事の正確さや有益性を高めるだけでなく、新しい記事を書くモチベーションになります!
お気に召しましたらぜひまわりの方にもご紹介いただけるとうれしいです。リンクはご自由にどうぞ!

Fireworksマニア

バナーが必要な方はこちらをどうぞ♪
サイト名:Fireworksマニア URL:http://fw.v-colors.com/