FireworksマニアTOP > Fireworksチュートリアルまとめ,Fireworksデザインレシピ,ストローク > クリスマスカードにも使える!キラキラデザインの作り方

クリスマスカードにも使える!キラキラデザインの作り方

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

こんにちは!YUKIです。
今日はクリスマスですね!というわけで
Fireworks Lover Advent Calendar 2013も最終日です!

クリスマスということで、今日はこういうキラキラデザインを特別な素材なしでFireworksのみで作ってみたいと思います!

card2

キラキラさせるためのオブジェクトを描く

まずは各形状の書き方です。とっても簡単!

1329_01

円は楕円ツールを使って作成します。シフトキーを押しながら描くと正円がかけます。
塗りのみを適用したものとストロークのみを適用したものを作ります。

六角形の形状はスマート多角形ツールを使います。
黄色いハンドルをドラッグして六角形にします。

星やキラメキ模様は星ツールで作成します。
星ツールでこんなふうな形状の作り方がわからない!という方はこちらの記事Fireworksの星ツールで書けちゃう模様いろいろを参照してくださいね!

今回はこの3つのツールで作った形状を使っていきます!

オブジェクトの質感を調整する

作ったオブジェクトをぼかしていきます。
プロパティパネルから【フィルタ】→【ぼかし(ガウス)】を選択します。

1329_02

こんなかんじでぼかしていきます。
(わかりやすいように黒い背景に白い塗りで描画してぼかしました)

1329_031329_04

ぼかすだけでなく、透明度も調整してみてください。
同じくプロパティパネルの不透明度の設定部分を調整して透明度を調整します。

1329_05

キラキラのラインを描く

次にキラキラのラインを書いてみたいと思います。
まずペンツールを使ってラインを引きましょう。

1329_06

こんな感じ。

1329_07

ひいたらストロークの種類を変更します。
ストロークの見た目を変えていくので初期設定は本来どれてもいいのですが、ストロークによってプロパティがロックされていて変更できないものがある場合があるため、どのプロパティも変更することができるストロークを選んでおく必要があります。

クレヨンの基本はすべてのプロパティが変更できるストロークなので、こちらを選んで作業をはじめたいと思います。

1329_08

このようなキラキラのストロークになるよう調整していきます。

1329_09

プロパティパネルの【ストロークを編集】ボタンをクリックします。

1329_14

【ストロークを編集】画面の【シェイプ】タブを選択します。
四角形のチェックボックスにチェックを入れ、角度の部分を45度にします。
エッジと縦横比は100、サイズはお好みで調整してください。
サイズはこの画面からでなくてもプロパティパネルから簡単に変えることができるので、この時点では大体でかまいません。

1329_10

次に【オプション】タブを選択します。
間隔の部分を100%以上にします。

ブラシの間隔が空き、四角形の星が等間隔に並びます。

1329_11

次に感度を変更します。
いろいろなプロパティがありますが、今回はサイズと拡散のランダム値を設定します。

1329_12

1329_13

このようにランダムに星がちりばめられたストロークができました。

1329_15

プロパティパネルのこの部分からサイズを調整できます。

1329_16

command+Dでラインを複製したりして重ねるとこんなかんじになります。
パスなので自由に調整することができます。

1329_17

背景を描画する

背景を作成します。
今回は以下の様な円形のグラデーションを作成しました。

1329_18

オブジェクトを散りばめる

この上に上記で作成したオブジェクトを散りばめていきます。

1329_19

描画モードを変更してみる

オーバーレイ

描画モードを変えてみるといろいろな変化が楽しめます。
変更したい丸や星のオブジェクトを選択し、プロパティパネルの描画モード変更エリアから【オーバーレイ】を選択してみましょう。

1329_20

白い円2つを選択して、描画モードを変更してみます。

1329_19

1329_21

このようにオーバーレイされ、明るくなります。

スクリーン

次に色味を足してみましょう。
どれかひとつオブジェクトを選択して、塗りの色を変更します。

1329_23

1329_24

描画モードを【スクリーン】に変更します。

1329_25

スクリーンはそのオブジェクトがある部分の背景色によっていろのつき方が様々に変化します。
また、真っ白な部分の上には色がつかない特徴があります。

1329_26

位置や色を調整していきます。

1329_27

完成!

最後にテキストツールで文字を入れて完成です!

card3

アレンジ例

背景色を変えたりするとまたガラッとイメージが変わります。

1329_28

card1

card2

 

おまけで描画モードの話

描画モードごとの特徴を理解しておくと表現の幅が広がります。
Fireworksに限らず、他のツールでも同じような効果が得られますので知っておくととても便利です。

例えば上記の手順で以下のような画像を作ります。

1329_000

これに以下のような画像をあわせます。

pink

まずは今回作成したもののように【最背面】に背景として引いた場合(描画モードは通常のまま)

1329_002

次に【最前面】において、描画モードを【オーバーレイ】に変更

1329_001

次に【最前面】において、描画モードを【覆い焼き(カラー)】に変更

1329_003色を変えてやってみます。

orange

【最背面】に背景として引いた場合(描画モードは通常のまま)

1329_005

描画モードを【オーバーレイ】に変更

1329_004

描画モードを【覆い焼き(カラー)】に変更

1329_0016

blue

【最背面】に背景として引いた場合(描画モードは通常のまま)

1329_008

描画モードを【オーバーレイ】に変更

1329_007

描画モードを【覆い焼き(カラー)】に変更

1329_009

このように描画モードをうまく使えば簡単に雰囲気を変えて作ることができます。

ちなみにFireworksで作ると、基本的にひとつひとつがパスオブジェクトになっているので、位置の調整や削除、サイズ変更といったことが簡単にできます。

たとえば上に文字を置くことになって飾りがじゃまになった!という時も丸やきらめきの位置を変えたりといったことがすぐできます!

1つ作っておくとこの季節のバナーの背景などにも使えると思うので
いろいろ試してみてくださいね!

元データを置いておくのでご興味のある方はぜひ見ていろいろアレンジしてみてください☆

btnDl

それでは、Fireworks Lover Advent Calendar 2013最終日、YUKIがお届けしました。

みなさまステキなクリスマスを!

※メリークリスマスのスペルをすこぶる爽快に間違えていたので修正しました…!
さえさんご指摘ありがとうございました><

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

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

関連エントリー

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

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

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

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

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

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

Fireworksマニア

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