2xup.org

Photoshop でつややかな表現をわりと簡単に実現する

tsuyayaka001.png 140px*140pxIllustrator などを利用してベジェ曲線で書いた絵に Photoshop を利用してつややかな表現を加える方法は何通りもあり、すでにたくさんのノウハウが存在しますが、それなりのものならほんの少しの作業で実現できます。いつも違う方法でやってしまいあとで苦労する事があるので、自分自身の忘記録も兼ねてその Tips をまとめておきたいと思います。Photoshop CS で作成したデータですが、サンプルファイルも用意しているのでもしよろしければダウンロードして使ってみてください。

feed-icon.png 100px*100pxサンプルファイルはせっかく角丸の四角形で作成したので、Feed Icon として利用できるように、オレンジで描いたレイヤーと、アンテナ部分を描いたレイヤーも追加してあります。

レイヤースタイルを設定する

Illustrator や Photoshop のパス、角丸長方形ツールなどで基本的な型を生成したら、そのレイヤーにレイヤースタイルを設定します。設定するレイヤースタイルは以下の3つです。以下の値はサンプルファイルの値になっているので、それぞれの設定値は必要に応じて変更すると良いかもしれません。

ドロップシャドウ
tsuyayaka002.png角度と、不透明度の設定が重要です。
グラデーションオーバーレイ
tsuyayaka003.pngグラデーションはポイントを3つほど用意し、濃い部分で2点、濃い色と同系色の明るい色で1点利用します。サンプルファイルを参考にいろいろな色で試してみてください。
光彩(内側)
tsuyayaka004.pngほとんど初期値で使用します。ソースはエッジで、サイズやチョークはプレビューしながらお好みで設定してください。

反射を表現する

つややかな表現の決め手はおそらくこの反射部分にあると思います。今回は割と簡単にという事で進めていくので、この部分も簡単にできる方法で進めたいと思います。

  1. 基本的な型が描かれているレイヤー上を Ctrl を押しながらクリック(Mac の場合は Cmd を押しながらクリック)して選択範囲を作成します。『選択範囲』メニューから『選択範囲を変更 > 選択範囲の縮小』を選択肢、選択範囲を 2px ほど縮小します。
  2. 新規レイヤーを作成し、先ほど縮小した選択範囲を白で塗りつぶします。
  3. 白く塗りつぶしたレイヤーの不透明度を 80% ほどにしておきます。
  4. 先ほど白く塗りつぶしたレイヤーの下半分ほどを円形選択ツールで選択し、選択した部分を削除します。
  5. クイックマスクモードに変更し、グラデーションを描きマスクを作成します。
  6. 画像描画モードに戻り選択部分を削除して完成です。
tsuyayaka005.png 300px*200px

今回はすべて Photoshop で作業しましたが、Illustrator でパスを作成して、Photoshop でつややかな表現を追加。なんて事も可能だと思います。

2 Comments

shige2006年11月 2日 11:20

これで一つ勉強になりました!有り難うございます。
早速私も試してみたいと思います。

浜村拓夫2007年1月 2日 13:21

最近よく、こういうツヤツヤな画像パーツを目にする機会が増えたような気がします。
(Web2.0風!?)
参考になります☆(・∀・)