2014/03/03

本物にしか見えない!?photoshopでメタリックな質感を表現する方法

本物にしか見えない!photoshopでメタリックな質感を表現する方法

前回、photoshopで高級感ある金色を表現する方法をご紹介しましたが、今回はメタリックな質感を表現する方法を詳しく解説していきます。テキストやアイコンなどに重ねることによって実際に金属で作られたような見た目になります。

様々な部分で応用出来ると思いますので、ぜひ一度実際に試してみて下さい。

目次

サンプル

メタリックサンプル

今回作成するサンプルはこちらです。

実際に金属で作成されたかのような見た目になります。また、テキストでも同様の手順で再現することが可能です。

作成方法

それでは実際に手順を解説していきます。

メタリックな質感にしたいアイコンを用意

カンバスにアイコンを配置します。

アイコンを用意

グラデーションを設定する

光沢を出すために光の反射を表現します。

グラデーションの設定

【グラデーションの設定値】

グラデーションの設定値

  • ■描画モード:通常
  • ■不透明度:100%
  • ■スタイル:角度
  • ■角度:35°
  • ■比率:143%

【グラデーションの配色】

グラデーションの配色

【グラデーションを設定した結果】

グラデーション設定の結果

メタリックな質感を再現する

グラデーションの設定だけでもメタリックな色合いは再現出来ているのですが、一手間加えることによって質感が向上します。

【新規レイヤーを作成】

新規レイヤーを作成し、#FFFで塗りつぶして下さい。

新規レイヤーを作成

【フィルター > ピクセレート > メゾティント】

メゾティント

メゾティント設定値

  • ■種類:細かいドット

【メゾティントを設定した結果】

メゾティント設定の結果

【フィルター > ぼかし > ぼかし(放射状)】

先程メゾティントを設定したレイヤーにぼかし(放射状)を設定します。

ぼかし(放射状)の設定

ぼかし(放射状)の設定値

  • ■量:80
  • ■方法:回転
  • ■画質:高い

【ぼかし(放射状)を設定した結果】

ぼかし(放射状)設定の結果

レイヤーを重ねる

作成したレイヤーをアイコンに重ねます。そのままではグラデーションオーバーレイが効いていますので、アイコンをフォルダに格納し、フォルダに対してレイヤーをマスクします。

透明度の調整

重ねたレイヤーの透明度を20%に設定します。

完成

背景の変更やドロップシャドウの設定を行い立体的な表現にします。

まとめ

いかがだったでしょうか。かなりリアルな質感を表現することが出来たと思います。

フィルターの実行結果などを把握しておくと様々な表現の発想が出来るようになります。ぜひ色々試しながら質感の再現に挑戦してみて下さい