FireworksマニアTOP > Fireworksデザインレシピ > Fireworksで簡単にフェルト風アイテムを作る方法

Fireworksで簡単にフェルト風アイテムを作る方法

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

みなさんこんにちは!
今日も他では見当たらないような、
超簡単なかわいいFireworksのTipsをご紹介しますよーー!

今日は、【Fireworksで簡単にフェルト風アイテムを作る方法】です。

今回も特別な素材は一切使用しません。
Fireworksだけあれば大丈夫です!

Mac版Fireworks CS4で作業していますが、特別な新しい機能は使用していないので
メニューの表記など異なる部分があるかもしれませんが、
古いバージョンでも同じように作れると思います。

303

完成イメージはこんな感じ

それでは作ってみましょう!

まず、ファイルの新規作成から新規ドキュメンドを開きます。
今回のサンプルでは504×300でやっています。(500にしたつもりがなぜか504になってた…!)

303-1

まずは、背景となる布をかきましょう。
以前紹介した

Fireworksで表現する シンプル&カラフルな布の作り方

と同じ手法です。

長方形ツールを使い、画面いっぱいに長方形を描きます。

303-2

黒で四角を書きました。

303-3

塗りを設定します。
塗りを【パターン】→【グレーの布】に設定します。

303-4

グレーの布に設定しました。

303-5

フェルトアイテムに対してこのままだとグレーの布の編み目が大きすぎるので、
目を細かくします。

303-6

描いた長方形を選択した状態にすると、以下のようなバーが出てきます。
これを動かすことによって、布目の向きや目の細かさが調整できます。

303-7

目を細かくしました。

303-8

背景の色を調整します。
プロパティパネルの【フィルタ】→【色調・彩度…】を選択します。

色は
色相:349
彩度:10
明度:-38
に設定しました。

今回の作り方では背景は暗めの色に設定しないと
望んだ効果が出ません。
サンプルのような暗めの色を設定しておいてください。

次にフェルト風に表現したいアイテムを描画していきます。

どんな図形でもOKです。
今回は、テキストツールで文字を書きました。

303-9

オブジェクトの【塗り】の色は#F0F0F0にします。
オブジェクトの色の調整は、最後にフィルタメニューから行いますので
ここの色はお好みの色にせず、上記の色にしてください、

描いたオブジェクトに【線】を設定していきます。

303-10

【クレヨン】→【基本】に設定します。
中心のストロークで線の幅を2にします。

303-11

ふちがふわっとなりました。

303-12

線の色も#F0F0F0に設定します。

303-13

次に、塗りにテクスチャをあてます。

【テクスチャ】→【スクラッチパッド】
を選択します。

27%でテクスチャをかけました。


303-14

303-15

フェルトっぽくなってきました。

303-16

フィルタをあてて、立体的にしていきます。

フィルタは

  • ベベル(内側)
  • ドロップシャドウ
  • 色相・彩度

の3つをかけます。

303-17

まず【フィルタ】→【ベベルとエンボス】→【ベベル(内側)】を設定します。

値は以下のように設定します。

303-18

フラット
幅 2
濃さ 50
ぼかし 3
角度 135
隆起


303-19

立体感が出てきました。

次にドロップシャドウをかけます。
【フィルタ】→【シャドウとグロー】→【ドロップシャドウ】
値は以下のように設定します。

303-20

幅 3
濃さ 44%
ぼかし 2
角度 315
ノックアウトのチェックはなし

303-21

わかりにくいかもしれませんが、すこし影が入っています。

最後に色を調整していきます。

【フィルタ】→【カラーの調整】→【色相・彩度】
値は今回は以下のように設定しました。

お好みでどうぞ。

303-22

色相 202
彩度 48
明度 -11

303-23

これで完成です!

フェルトっぽくできましたか??

303-24

いろんなカラーで調整して、スタイルに登録しておけば、
いろんなオブジェクトを描いて、あとはオブジェクトを選択した状態で
お好みのスタイルをクリックすると、なんでも簡単にフェルト風アイテムにできちゃいます!

スタイルの登録方法は以下のTipsの最後の方をご参照ください

Fireworksでさくっと縫い目を表現する方法

303-25

↑オブジェクトをいっぱい描いて

303-26

↑オブジェクトを選択した状態でお好みのスタイルをクリック!

303-27

↑お好みの色に自在に変更できます!

303

↑出来上がりサンプル

ペンツールでふにゃふにゃと図形を描いて
このスタイルを適用すれば、いろんな形のフェルト風アイムが自由自在です!

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

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

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

関連エントリー

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

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

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

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

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

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

Fireworksマニア

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