not good but great

プログラミング、アート、映画・本の感想について書きます。

Illustratorで電話のボタンを描く

チュートリアルPhotoshop

チュートリアルPhotoshopなのですが、Illustratorの練習としてやってみることにしました。

・参考
Create a Realistic Telephone Keypad Using Layer Styles

制作工程

f:id:naoyashiga:20140122104025j:plain
これまでやってきたずらして型抜きや、パスのオフセットで外枠をつくったりとやってみたものの・・・ダサい感じになってしまいました。

内側にシャドウをつける

これを参考にしてみたものの、ぼかしを入れるので、きれいにならなかったです。内側シャドウはあきらめました。
http://nanameue.jp/blog/illustrator-innershadow/


f:id:naoyashiga:20140122111103j:plain
少し修正してみました。

フォント変更

フォントを「DF超極太ゴシック体 Std」から「DHP 極太ゴシック体」に変更しました。斜体はないので斜体の加工はシアー10度にしました。

淵を明るくして立体感を出す

真ん中の丸のグラデーションを円形グラデーションにしました。真ん中を暗く、淵を明るくしました。ボタンは飛び出ているので、淵の外側に影ができます。それがよくわかるように淵を明るくする必要があると考えました。

外側のグラデーション

外側のグラデーションを二つの色だけでやっていたので、単色で塗っているように見えました。3色にして、変化の位置を狭めることによって、狭いエリアでもグラデーションが出るようにしました。

外枠のハイライト

外枠のハイライトは大きすぎると、飛び出しているように見えるので、幅を狭くさせました。背景に対して、引っ込んだ場所に、ボタンを配置するようにしているからです。

テキストの内側シャドウ

コピーしてずらして、前面型抜きすれば内側シャドウができるのではないかと思いました。やってみる型抜きができません。どうやらアウトライン化しないとできないようです。

http://helpx.adobe.com/jp/illustrator/kb/236490.html

f:id:naoyashiga:20140122112608j:plain
アウトライン化した後に、シャドウとして濃い色で塗りつぶしましたが、影ができる位置がおかしくてうまくできませんでした。

http://illustrator-mania.com/illustrator-textshadow/
結局上のリンクにあるやり方を参考にしました。光彩内側ぼかし、変形で移動です。移動量は0.5pxくらいにして小さめにしました。

感想、気づいたこと

f:id:naoyashiga:20140122120809j:plain

粒状フィルム

背景に粒状フィルムを使うと、とても処理が重たくなることがわかりました。特にサイズが大きかったり、解像度が大きい?ときには注意が必要だと思いました。

立体感の練習

今回はへっこみと出っ張りの部分を意識することが多かったので、今後アイコンを作るうえで少しは役に立ちそうな気がします。

フォントの選択、位置

フォントについては何となく選択したので、フォント名でどんなフォントかわかるくらいにならないとだめだと思いました。個々のフォントが持つイメージというのも自分が持っているものと、ほかの人が持っているものは違うかもしれないので、そのへんも調べるのが大切なのかなと思いました。

数字一つをとっても1と4は幅が違うので、位置をそろえるためには、文字によって大きさや位置を変える必要があるのかなあと思いました。そうなるコピペで整列ができなくなるので、どうやって整列すればよいのかわからなかったです。今回は1と4だったり、下のアルファベットの文字数によって位置を変える必要がありましたが、適当にやってしまいました笑。