おれだめ通信／WP

DICメタリック色：599～621を擬似的に出してみる

2008/02/20 16:18:42 | CG／映像／立体 |

..シャアザクに塗ってみたりしたよね、あとグフ..

ふと思いついたので仕事の実況をしてみましょう。たいしたことではないけど、誰かの役には立つかもしれないので。

HPの更新作業をしてるんだけど、今回の表紙はDIC621という指定がされている。（サーバーにあった、データと実物にて判断…DIC621にマゼンタをかぶせてるのかな？と推測）単純にイラストレーターのスウォッチで適用してもなんか違うので、いろいろ小細工。要するにWeb上の小さい画像でそれっぽく見れるようにするのが今回の目的。
もっとわかりやすくいうと、メタリックな感じを出すための画像加工をします。

ってことで作業開始するです。

そのまま未加工でもなんとかなるんだろうけど、まずはIllustratorで作業。

現物を見ながら、近い色でベース色を設定。CMYKだと難しいので、色見本の設定を利用するのがベストかも（印刷するわけではないので、画面表示のみで判断して深く考えないで設定…ここでは色の正確さとかはあまり関係ないし）でもって、EPSで保存。ai形式でも読み込めるかもしれないけど、習慣でなんとなくEPSで保存してます。

でもって、次はPhotoshopで作業。

ファイルメニューの開くから読み込む。読み込む際にレンダリングしてくれるので、少し大きめのサイズを指定して読み込み。

読み込むとこんな感じ。レイヤーになってるので、背景が透明。これだとトンボが見えにくいので、レイヤーを統合して背景に変換。

統合するのは、レイヤーパレットから表示できるメニューから選択（たぶん他からも選択できるはず。私はここばかり使ってるのでここしかしらない）。

トンボにあわせて正確に切り抜くためにガイドを設定する。ガイドは、上と左のメモリの部分をクリックしてドラッグするとガイドを設定できる。メモリはルーラーを表示で表示できる（どこメニューかは忘れたのでごめん、なので各自で）。

とりあえず、表紙データの素が完成。

次は、新規レイヤーを作って、ねつ造開始。

まずは、新規レイヤーを作って黒く塗りつぶします（白でも問題なし、たまたま描画色が黒だっただけのこと。色があってもなんとかなるけどここでは説明しない）。レイヤーに色情報が乗っていることがここでは重要。

白か黒だとフィルターの効果が出ないので、レイヤーをグレイに調節します。白で塗った場合は真逆の数値でやれば多分大丈夫。

調整するとこんな感じ。とりあえず、フィルターがかかればいいので、どんな明るさの灰色になっていてもいい。欲しい結果と道筋がわかってる場合はそれにあわせた明るさのグレーにするけど、ここではこのあとどのように調整するかわかってないので、中間のグレーにしておいた。

グレーにしたレイヤーにフィルター「ノイズを加える」を実行。グレースケール、ノイズの大きさはつぶれて見えなくなるかならないかくらいにするのがミソ。あんまり大きいと、金属感がなくなる。場合によってはブラーとかかけてヘアラインな感じにすることもあるけど今回はノイズのみで。

ノイズを加えた結果はこんな感じ。

で、そのレイヤーを「比較（暗）」に設定してベースを見えるようにする。さらに暗い感じがするので、明るさもすこし明るく調整。

そうするとこんな感じに…。
表面のクリアコートの奥の粒子な雰囲気のつもりです。

インチキ反射をねつ造。実物のテカリを擬似的に加算します。

新規にレイヤーを作ってそこのグラデーションを描画します。このグラデーションは空と大地っぽい感じのやつ。このあとグレーにするので、グレーグラデのデフォルトの設定をいじって設定してもいいんだけど、面倒なのでこれで…

カラー成分を彩度を低くして飛ばします。設定はこんな感じで。

彩度をなくすとこんな感じで。金属にあたった光沢っぽいつもり。

で、できたレイヤーを今度は乗算でのせてみます。いろいろためして雰囲気のでるもので…たいていは「乗算」「比較」「オーバーレイ」「ハードなんとか」なんかでいけると思う。

設定するとこんな感じ。実物を傾けたりなんかしたときの感じに近づいてきたつもり。

で、このままだと影が強いというか、コントラストがきついというかあざとい感じがするので、レイヤー全体をぼかしてみます。

結果はこんな感じ。なじんできているつもり。

とはいえまだまだ、黒い部分が強すぎなので、透明度を調整。

こんな感じになるまで調整。影が消えるか消えないかくらいのあたりで調整するのがミソ。

このままでは文字がざらざらしてるので、そこをなんとかして仕上げ。

ベース（背景）を複製して新規レイヤーとして一番上にもってきて、ベース色をマジックワンドで選択。選択設定は許容値１ピクセル、アンチあり、隣接あり。でもって選択範囲を削除して透明に…。

こんな感じで文字がはっきりとします。

ただ、まだゴミが残ってるので細かい部分を１箇所選択。そのあと「近似色を選択」コマンドで一気に選択。

細かいゴミも削除されます。

とはいえ、まだエッジが汚いので、レイヤーを「比較（明）」に設定してなじまします。

最終的にこんな感じで完成。ここでいったんPSD形式で保存して、Web用には別に新規保存。必要であれば、大きさを変更したり、名前をかえたりしておしまい。

こういう手順って、その昔『STEP-BY-STEPアート＆デザイン』っていう雑誌があって、それを読みながら試してみて覚えたことの応用とかなんだけど、今そういう雑誌ってあるのかな？MDNはたまに買うけどちょっと違う感じなんだよなぁ。ググればなにかしら情報はあるのかもしらんけど。能動的にそれらを探して習得するのは大変だよなぁ。ディアゴスティーニとかが、週刊『STEP-BY-STEPアート＆デザイン』とかやればいいのに。とか思った。