2011年10月24日月曜日

Fireworksで気楽にカラフル素材を作る方法

スポンサーリンク

主に単純な形状に適した方法になりますが、カラー素材の気楽な作り方を記事にします。作る過程ではあまり色を気にしないでも良く、後々に再利用しやい方法です。
もちろん、色を意識して作ればよりよい素材が作れます。


前提


私は基本的にFireworksで素材を作成しますので、この記事はFireworksでの作業を前提としています。しかし、作成方法自体はPhotoshopでも簡単に再現できますから適宜読み替えてください。

目的


素材作成の際に悩みやすい要素の一つは色です。今回は色を気にせずに作り始めて、完成手前で色をつけて素材を作ることが目的です。
この方法であれば元の素材がそのまま残りますので、色やテクスチャを変更する事で簡単に再利用ができます。

例えば立方体を作る場合、最初に何色の立方体にするかを考えてから各面の色を決めて作ります。この方法だと思い通りにできる反面、色決めに時間がかかります。アクセント的に使う場合、そこまで注力できない事もあるでしょう。そんな時に役立つかもしれません。

Step1:モノクロームで作成


まずはモノクロームのグラデーションで作成します。

なお、この記事で言うモノクロームのグラデーションとは白から黒へと変化するグラデーションであり、無彩色の色相です。最初に無彩色で作成することが今回の肝でもあります。

試しに球体を作成してみます。

Step1-1:球体の作成



球体を作る際はシェイプで円を作ります。Fireworksの場合、楕円ツールを使います。とりあえず正円が作りやすいでしょう。

Step1-2:グラデーションで立体感をだす



作った正円にグラデーションで立体感を付けます。グラーデーションを作る際には丸いボールをイメージします。具体的には、一点から光が差し込み陰影が出来ている状態ですね。




光源を設定し陰影のイメージができたら、塗りのグラデーションを使ってイメージを再現します。Fireworksでは塗りで楕円のグラデーションを選択します。




ハイライト(白:#FFF)の部分を左上に移動するだけで立体感が簡単に出ます。左に動かすとグラデーションの範囲が円全体に及ばなくなるため、範囲を少々拡張します。

Step1-3:グラデーションを調整してさらに立体感をだす



グラデーションのハイライトを適用しただけでも立体感は出ますが、少し手を加えるとより良くなります。具体的には、陰影を濃くし、ハイライトを和らげ、照り返しを作ります。

この辺りは自然の観察が役立ちますが、機械的にパターンを適用してもなんとかなります。なぜなら、誰しも無意識のうちに立体感を感じる要素を何となく理解しているからです。グラデーションを弄ると、どこかの時点でしっくり来るでしょう。

Step2:色をつける


続いて、モノクロームの球体に色を付けます。この工程が肝でして、前段のグラデーションを壊す事無く着せ変えるように色を変える事が出来ます。

Step2-1:フィルタの「カラーの塗り」で色をつける



ここで活躍するのはフィルタです。元の画像を傷つけずに様々な効果を得られます。今回はまず「カラーの塗り」を適用します。




適用するだけではべた塗りで塗りつぶしただけですので、ここで重ね方を乗算にして適用量を調整します。
これで色付きの球の完成です。

Step3:色を変える


続いて色を変えてみます。簡単に色を変える事ができるのがこの方法の良い点です。

Step3-1:カラーの塗りの色を変える



方法は簡単でStep2-1でフィルタに設定した色を変えるだけです。とてもカンタン。

色を変えるだけでなく適用量や重ね方を変える事で、更にイメージに近い球体が作れます。普段使わない重ね方が意外と一番良い結果を生む場合もあります。元の球体は痛みませんので、自由に色や重ね方を変えてみてください。

もちろん、この時点で元の球体の色を濃くしたり薄くしたりする事も有効です。

更に手を加える




仮にメイン素材に使う場合には、更にテクスチャを重ねたり、作成したカラーの素材に色を変えたバージョンの素材を乗算やオーバーレイで重ねたりします。微量な適用により色に幅が出て、より魅力的な素材に仕上がります。

結び


いかがでしょう?意外と簡単ではないでしょうか。
今回は分かりやすく球形で行いましたが、モノクロームであれば立方体でも写真でも同じようにできます。

最初に無彩色のモノクロームで作る理由は単純で、上に色をのせた時の変化が単純だからです。仮に色がついた素材を基本にすると、色の重なりを最初から考慮しなければなりません。グレーであれば、その心配は無くなります。

立体感だけではなく、統一感をもった微妙な色の表現をしたい場合にもお試しください。

スポンサーリンク

0 件のコメント :

コメントを投稿