Fireworksでウェブデザインをもっと素敵に、効率よく。FireworksマニアはWebデザイナーに贈る、Fireworksの使い方、チュートリアル、デザインアイディアを紹介するサイトです。
FireworksマニアTOP > Fireworksデザインレシピ > Fireworks初期搭載のパターンだけでできるグランジ風デザイン
カテゴリー: Fireworksデザインレシピ
今日はこんな感じの焼き込んだようなデザインを、特別な素材など使わず、Fireworksだけで作ってみたいと思います!
背景もすべてFireworksに最初から搭載されているパターンを上手く工夫して使用しますので、Fireworksだけあればすぐにできます!
それでははじめます☆

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

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

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

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

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

今回、このように値を変更し、黄色にしました。
オブジェクトを選択したままの状態で【⌘(control)】+【Shift】+【D】を押して複製を作ります。
複製したオブジェクトを選択した状態で【プロパティインスペクタ】の【色相・彩度】をダブルクリックします。

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

緑色のオブジェクトを選択した状態で【プロパティインスペクタ】から描画モードを【焼き込み(カラー)】に変更します。緑色のオブジェクトが焼き込まれ、図のような茶色に変化します。
2つのオブジェクトの重なりをずらしたり、オブジェクトの透明度(上の画像で71となっているところの数値を調整)を変更したり、ハンドルを動かしてパターンの掛かり具合を調整するなどしてお好みの具合に調整してください。

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

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

パス領域変形ツールを使ってパスを変形していきます。図の位置を長押しすると切り替えられます。
【プロパティインスペクタ】からサイズや強さを調整します。今回は図のように調整しました。

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

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

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

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

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

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

このままだと薄いので【⌘(control)】+【Shift】+【D】で同じ位置にコピーします。こげたような質感になりました。
文字をコピーしてたくさん配置してみました。
こんな感じで完成です!
完成ファイルのダウンロードはこちら
今回のポイントは3つ。
です。
特に「パス領域変形ツール」は今回はじめてご紹介したのですが、なにかと使える便利なツールです。
ぜひ特性を覚えて、活用してみてくださいね!

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

Comments
Powered by Facebook Comments