FireworksマニアTOP > Fireworksデザインレシピ > Fireworksで作る、お手軽ネオンサイン

Fireworksで作る、お手軽ネオンサイン

カテゴリー: Fireworksデザインレシピ

今日はこんな感じで、Fireworksでネオンサインを作ってみたいと思います。

これも所要時間5分程度でさくっと作れます。

もっとそれっぽく凝ることもできるのですが、しばらくはお手軽さを重視したいと思います。
まずはFireworksに慣れることに集中しましょう!

いつもPhotoshopで作ってるよー!という方も、Fireworksに慣れるつもりで作ってみてください☆

今回もMac版Fireworks CS4の画面でご説明しますが、
昔からある機能を中心にしていますので
旧バージョンでも同じように作成できるかと思います。

過去のバージョンで、このバージョンでもできました!といった報告
大歓迎です!コメント欄にご記入いただけますと助かります!!

まずは【新規作成】から新しいカンバスを開きます。

プロパティからカンバスカラーを変更します。
(画面上、何も選択していない状態だとプロパティパネルでカンバスの設定が変更できます)

新規作成するときに色を付けておいてもよいです。

このとき、【カンバスカラー】を黒(#000000)以外の色にしておいてください。
ほんのりでいいので真っ黒じゃない色(#060606とか#080808など)にしておいてください。

真っ黒だとこの後の効果が一部反映されません。

背景を黒よりもほんのすこしだけグレー(今回は、#080808)に設定しました。

背景色を設定したら、【テキストツール】でお好みのフォントで文字を入力します。
色はグレー(#666666)に設定してください。

文字を入力したら、効果を設定していきます。

入力したフォントを選択して、プロパティパネルのフィルタの横にある【+】をクリックします。

以下の3つを順番に設定していきます。

この順番で適用して下さい。
(順番を間違えてしまったらドラッグアンドドロップでこの順番に入れ替えれば大丈夫です。)

※Windows版は【グロー】→【光彩】という表現になっています。

ベベルとエンボスベベル(内側)
値は以下のように設定します。

【シャドウとグロー】→【ドロップシャドウ】
値は以下のように設定します。

※Windows版は【シャドウと光彩】→【ドロップシャドウ】

色は#A9A9A9

シャドウとグローグロー
値は以下のように設定します。

※Windows版は【シャドウと光彩】→【光彩】

色は#424242

すべて設定が終わると

このような感じになります。

これを、コピーアンドペーストして2つ重ねます。
キーボードのcommand(control)+c →command(control)+vで複製しましょう。

同じ文字が二つ重なりました。

重なった文字を範囲選択して2つとも選択状態にしておきます。

選択状態にしたら、この文字のカラーモードを変更します。

ツールバーのフィルタの上にある【通常】となっているところを【覆い焼き(カラー)】に変更します。
上記のようになると思います。

半透明のネオン管ができあがりました。

さて、ここからがクライマックスです!
ネオンに明かりを灯しましょう♪

色を付けて仕上げていきます。
色づけにはフィルタの色相・彩度を使います。

先ほどと同じく、【プロパティパネル】の【フィルタ】の横の【+】をクリック、
【カラーを調整】→【色相・彩度…】を選択します。

色を付けるとプレビューにチェックマークを入れ、
色相、彩度、明度のスライダーを調整して色付けしていきます。

今回はこのように設定しました。
お好みの色に調整していただいてかまいません。

こんな感じで点灯しました!
いかがですか?あっという間にネオン風になりました♪

これで基本のファイルは出来上がりです!

以下は活用サンプルです。

ネオンっぽさが出るように、背景にイメージを引いて
さらに文字をコピーして合計4枚重ねてみました。

色相・彩度は4枚まとめてそれぞれ以下の設定です。

完成です。

覆い焼きにしているので、背景にテクスチャ素材を引くといい感じに透けてなじみます。
レンガやブロックなどと組み合わせるとカッコいいですよ!

背景素材の色によってはネオンらしく見えない場合もあるので、
ドロップシャドウの色やグローの色、幅、重ねる文字の数などを調整して
お好みの具合を探してくださいね。

今回のポイントは、色調・彩度の調整を使ってあとから色を変えるところです。

最初から、グレースケールではなく、それぞれ任意の色を選んで効果を設定していってもよいのですが、それだと色を変えるときに

  • 文字の塗りの色
  • ドロップシャドウの影の色
  • グローの影の色

すべてをひとつひとつ変えなくてはいけなくなるのですこし非効率です。

ベースのネオン管をグレースケールで作っておけば、
色相・彩度の調整だけでカラーバリエーションが比較的簡単に作れます。

ボタン作成のときなどもわりと使えるテクニックですよ☆

完成したネオン管のスタイルは
前回書いた方法でスタイルに登録しておくと
いつでも使えて便利です!

とっても簡単ですのでぜひ試してみてくださいねー!^^

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

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

関連エントリー

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

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

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

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

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

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

Fireworksマニア

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