FireworksマニアTOP > Fireworksデザインレシピ > Fireworks初期搭載のパターンだけでできるグランジ風デザイン

Fireworks初期搭載のパターンだけでできるグランジ風デザイン

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

今日はこんな感じの焼き込んだようなデザインを、特別な素材など使わず、Fireworksだけで作ってみたいと思います!
背景もすべてFireworksに最初から搭載されているパターンを上手く工夫して使用しますので、Fireworksだけあればすぐにできます!

それでははじめます☆

 

新規カンバスを開く

1136-01

新規カンバスを開きます。今回は600px×400pxとしました。

長方形ツールで画面いっぱいの長方形を描く

1136-02

長方形ツールで画面いっぱいの長方形を描きます。ツールから長方形ツールを選択して長方形を描画します。

パターンで塗りつぶす

1136-03

描画した長方形をパターンで塗りつぶします。【プロパティインスペクタ】から塗りの種類で【パターン】を選択し、プルダウンから【ブルーペイント】を選択します。

1136-04

このように適用されます。

フィルタメニューから色味を変更する

1136-05

フィルタ効果を使って色味を変更します。【プロパティインスペクタ】の【+】マークをクリックし、【カラーを調整】→【色相・彩度…】を選択します。

色相・彩度の値を設定する

1136-06

今回、このように値を変更し、黄色にしました。

オブジェクトをコピーして、色相・彩度を変える

オブジェクトを選択したままの状態で【⌘(control)】+【Shift】+【D】を押して複製を作ります。

複製したオブジェクトを選択した状態で【プロパティインスペクタ】の【色相・彩度】をダブルクリックします。

1136-07

【色相・彩度】のパネルが開きますので、図のように値を調整し、緑色にします。

描画モードを変更する

1136-08

緑色のオブジェクトを選択した状態で【プロパティインスペクタ】から描画モードを【焼き込み(カラー)】に変更します。緑色のオブジェクトが焼き込まれ、図のような茶色に変化します。

お好みの濃さに微調整

2つのオブジェクトの重なりをずらしたり、オブジェクトの透明度(上の画像で71となっているところの数値を調整)を変更したり、ハンドルを動かしてパターンの掛かり具合を調整するなどしてお好みの具合に調整してください。

長方形ツールで長方形を描く

1136-09

フチにさらなる焼き込んだイメージを作るため、長方形ツールで長方形を描画します。

グループを解除する

1136-10

描画したオブジェクトを右クリックして【グループ解除】を実行しておきます。

パス領域変形ツールを使ってパスを変形する

1136-11

パス領域変形ツールを使ってパスを変形していきます。図の位置を長押しすると切り替えられます。

【プロパティインスペクタ】からサイズや強さを調整します。今回は図のように調整しました。

1136-12

長方形のパスを選択した状態でこのツールで線をなぞっていくと、パスをこのように変形させることができます。

描いた長方形を拡大して、ストロークの太さを調整する

1136-13

ランダムなパスにし終わったら【⌘(control)】+【T】を押して拡大・縮小ツールに切り替えてはみ出すように配置します。
ストロークの太さを67とし色は#000000、塗りはなしにしています。

ぼかして描画モードを変更する

1136-14

【プロパティインスペクタ】から描画モードを【オーバーレイ】に変更します。
次に【プロパティインスペクタ】横の【+】をクリックし、フィルタメニューから【ぼかし】→【ぼかし(ガウス)】を選択します。値はお好みで調整してください。

文字を入力して重ねる

1136-15

テキストツールで文字を入力し、【⌘(control)】+【T】で回転させます。

描画モードを変更する

1136-17

テキストの描画モードも【オーバーレイ】に変更します。

フィルタメニューでぼかす

1136-19

このままでもよいのですが、今回は【プロパティインスペクタ】横の【+】をクリックし、フィルタメニューから【ぼかし】→【ぼかし(ガウス)】を選択してオブジェクトをぼかします。

コピーして貼付け

1136-20

このままだと薄いので【⌘(control)】+【Shift】+【D】で同じ位置にコピーします。こげたような質感になりました。

完成!

文字をコピーしてたくさん配置してみました。

こんな感じで完成です!

完成ファイルのダウンロードはこちら

今回のポイント

今回のポイントは3つ。

  • 既存のパターンを【色相・彩度】を変えて使い回す
  • 描画モードを変更して重ねてみる
  • パス領域変形ツールを使ってパスを変形してみる

です。

特に「パス領域変形ツール」は今回はじめてご紹介したのですが、なにかと使える便利なツールです。
ぜひ特性を覚えて、活用してみてくださいね!

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

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

関連エントリー

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

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

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

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

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

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

Fireworksマニア

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