木目をつくる
背景となる木目調を作成する。カンバスサイズを800×600ピクセルに設定する。
色の設定
背景色、描画色をそれぞれ設定する。
| 名前 | 色情報 |
| 描画色 | #f9f1e2 |
| 背景色 | #e0cda8 |
ファイバー
メニューの[フィルター→描画→ファイバー」を選択する。
[変化]、[強さ]スライダーを動かして好みの木目にする。
アイコンの形をつくる
角丸長方形で512pxの正方形をつくる。丸みは90pxでつくる。
アイコンの下部とそれ以外に陰影をつける。下部を明るい色にするために色を塗る。
| 場所 | 色情報 |
| 下部 | #f9f1e2 |
| それ以外 | #e0cda8 |
Photoshopの使い方がわからないので、シェイプの一部分を塗る方法がわからなかった。それで角丸長方形と長方形を駆使して色を塗った。
髪の毛を描く
髪の毛の上部
角丸長方形を幅512px,高さ自由、丸み90pxで作成する。
| 場所 | 色情報 |
| 髪の毛 | #29221A |
塗りつぶしの色は上の通り。
モミアゲ
・モミアゲ下部
曲線を描くのでペンツールでベジェ曲線を引いて、パスを作成する。
・モミアゲ上部
長方形を作成してあいているところを塗りつぶす。
モミアゲを作成したレイヤーをOpt/Altを押しながらクリックして複製する。次に水平方向に反転して、片側のモミアゲも作成する。
・参考
http://ps.zenryokuhp.com/archives/2011/03/post_7.html
目を描く
まぶた
ペンツールでパスを作成して、パスに沿って線の太さを調節する。
やり方は下の通り。
1)パス選択ツールで、描いたパスを選択
2)パスウィンドウの右上、×印の下にある小さな▼をクリックし、「パスの境界線を描く」を選択します。
4)ダイアログが出ますので、「ブラシ」を選択してOKをクリック。
5)ブラシツールで直径サイズを変更します。
6)パスウィンドウの一番下の○印(ブラシでパスの境界線を描く)をクリックします。
黒目
| 場所 | 色情報 |
| 黒目 | #29221A |
パスで領域を描画して、塗りつぶす。
他のパーツ
鼻、口、眉毛はこれまで同様にパスで作成。
左右対称にするためにパスの複製を行うのが良い。複製した後にパスを移動させるのには、メニューの下のほうにある黒い矢印「パスコンポーネント選択ツール」を使うことがポイント。
アイコンに立体感をつける
もっと立体感をつけたかったので、下のページを読んでみた。
Create an app icon using Photoshop in 20 easy steps
木目テクスチャの作成
これはもう作ったことがあったので、すぐ作れた。配色は同じ。
2つ目のレイヤーを作成
角丸長方形を複製して、ガイドを引いて、大きさを計算して縦の長さを短くする。
影になるレイヤーを編集
トーンカーブで影になる部分を暗くする。ショートカットキーは「Ctrl+m」。
次にレイヤー効果を設定する。アイコンの大きさによって適宜、影の大きさを変えるのに気を付ける。参考ページは1024pxと大きいので注意。
ブラシで影
ブラシ、光彩を使って、もう少しリアルにしてみる。木のテクスチャが参考ページと違うので、ブラシと光彩の色を変えた。
| 場所 | 色情報 |
| ブラシで影 | #856932 |
| 光彩 | #f5f5f1 |
顔と木をなじませる
もうちょっと顔と木がなじまないものかと考える。
顔のパーツにテクスチャ
木と同じ要領で、髪、目、舌にファイバーのフィルターをかけてみた。
覆い焼き
木の明るい面をレイヤーコピーして、覆い焼きカラーで明るい面を目立たせる。
・焼きこみ、覆い焼きの説明
http://handywebdesign.net/2012/07/photoshop-blend-mode-part1/
最終的にできたのがこれ・・・。リアルでおお!!と言わせるようなアイコンをつくるのはとても難しい。まだまだ練習が足りないと感じた。
反省点
こうやればよかったのでは?という点を書き出しみる。
・こけしの書き方
そもそも下書きがこけしに見えなかった。赤い模様、服を着せたほうがこけしに近い気がする。
・下準備不足
下絵をちゃんと書いていなかった。ゴールが見えないので、途中で行き詰った。できるだけ鉛筆などでどのような感じにしたいのか。書いておくべきだった。書いたのは簡単なこけしの絵だけ。
・Photoshopに慣れていない
左右対称にするためにレイヤーを用意して、そこにパスを新しく書いてコピーみたいなことをやっていたのだが、なぜかできない部分もあり、微妙に左右対称でない部分がある。練習を重ねて、パスの使い方を勉強したほうがいいと思った。
