イルカのアイコン作りました。そのうちAndroid Appのアイコンとして見られるようになると思います。はー、楽しかった。ノークレーム・ノーリターンでお安く好き勝手作っています。気が向いたときに作っているので、エンジニアさんはぜひわたしにアイコン作らせてください。
さすがにdribbbleで見られるような一流のアイコンデザインはできないのですが、いくつか見ていてそれっぽく作るコツが見えてきましたのでメモします。
アイコン制作の基本的な流れ
- ラフ絵を書く
- 荒くトレースする
- ガイドを引く
- 線を書いていく
- ここまでの工程はここに詳細書いてたりします。 http://blog.woopsdez.jp/archives/2747
- Photoshopで開く
- Illustratorファイルをphotoshopでレイヤー分けして読み込む方法 http://blog.woopsdez.jp/archives/2804
- 塗る
- 陰影をつける
- エフェクトをかける
- 完成
となります。
Facebookに買収されたSofaなどは3Dグラフィックソフトなども使っているようですが、自分はIllustratorとPhotoshopのみです。3Dグラフィックソフトも覚えたいので、メーカーさん、ぜひわたしにソフトをください！
Photoshopで光沢プリプリな着色をしよう
今回はとくにPhotoshopで開いてからの塗りと陰影というような質感？表現のところを紹介したいと思います。
※尊敬しているデザイナーさんのデータとかみるとIllustratorで作りフィルターなどを駆使してキレイに質感を表現するのですが、自分はそれがまだできないのでPhotoshopに頼ります。
Illustratorで作ったイルカはこんな感じです。完成図を見ると全然違いますね。
キモはブラシツール
塗る
これがイルカボディの塗りレイヤーです。試行錯誤しながら塗ってみて、あとから回転かけていい感じになるように位置調整しています。動画では省いています。
色をチョイスしてブラシのサイズや透明度を変えながらグリグリ塗ります。
カラーピッカーの位置をそのままにスライダーだけ変えていけば良いです。寒色から暖色への変化だけは彩度が合わなかったりするので適宜調整してください。
ブラシサイズを変えるショートカット
二通りあります。
ひとつはキーボードで「 [ 」と「 ] 」を入力すること。「 ] 」は大きく、「[」は小さくなります。
もうひとつはCtr+Optを押しながらキャンバスでドラッグ。左右にドラッグするとサイズをその場でプレビューしながら決められます。上下にすると硬さが変えられる。
ブラシの透明度を変えるショートカット
これに合わせて数字キーを押していくことで透明度も変更できます。
※CS6から透明度もCtr+Opt+キャンバスドラッグで変えられるらしいのですが、その設定方法が分かりません。誰か教えてください。
素早いマスクにはクリッピングマスクを使う
あらかじめ選択範囲を作って色塗りをするのはとてもめんどうです。クリッピングマスクを使うと下のオブジェクトに合わせて塗りつぶしたものがマスクかけられるので多用しましょう。
ショートカットキーは「Cmd」+「Opt」+「G(rouping)」です。好き勝手塗ったレイヤーを選択しながら、実行すればOK。
レイヤーがインデントされ矢印マークがついた。キャンバスを確認すると下の図形に合わせてマスクされている。
はみ出している部分もデータは残っているので、あとからやり直したいときも便利。
陰影をつける
レイヤースタイルはすごく便利なのですが、そればかりに固執してしまうと輪郭とグラデーションかけるくらいになっちゃう。一番楽チンなのはブラシツールで「乗算」「スクリーン」を多用して塗っていくことです。雑に塗ってもそれなりになるからラク。
演算モードを変えるショートカット
これ、今まで使ってなかったんですが後悔するくらいちょう便利ですね。
「Shift」+「+」で順番に変えることができます。
乗算は「Shift」+「Opt」+「M(ultiplication)」
スクリーンは「Shift」+「Opt」+「Ctr」+「S(creen)」※Ctrがつくことに注意
エフェクトをかける
まずレイヤーを新規作成します。次にペンツールで適当な図形を描き、白で塗りつぶします。塗りつぶしたレイヤーの透明度を20%にします。今回はイルカのしっぽに近づくにつれてフェードアウトさせているので左へ行くごとに5%ずつ透明度を減らしています。
highlight無し
そしたらレイヤーのふちに強い光を入れます。これはブラシツールがラクかなーと。レイヤーを新規に作成して白 100%のブラシで慎重にふちをなぞります。これも透明度を60%などにしていけばOK。
highlight入れた
こんな感じでレイヤーはバカ多くなりますのできっちりフォルダ分けして命名しましょう。グリッピングだけじゃややこしくなってきたら、全部フォルダに入れてまるっとマスクかけてあげると楽チン。
レイヤーやブラシの透明度を変更するショートカット
英数字のまま数字を入力すれば勝手に変わります。30%にしたければ「3」と入力しましょう。素早く32などといれれば「32%」と変更されます。100%にしたいときは「0」です。
こんな感じで完成！おつかれさまでしたー！
最後にステマ
本書きました。本屋さんで立ち読みして気に入ったら買ってやってください。
アスキー・メディアワークス
売り上げランキング: 1,941
関連エントリー
-
ティーザーというのは「じらす」を英語で言った言葉のようで、Webサービスもオープン前に告知したりイイネを募ったり、メールで今後のアップデートをお知らせできるようにしたりといろいろありますね。 こけむさズも綿村さんと名前や…
-
「勝手に! NGワード診断」 Facebookアプリデザイン | ウープスデザインブログ (デザイナーまめこ) で「NGワード」というのが伝わりやすいように口にバツマークをつけたイラストを作りました。 タイトルロゴを作る…
少しでも役だったらシェアしたり、コメントもらえると記事を書くモチベーションが跳ね上がります！
【動画付き】雑なブラシツールでそれっぽくなる！質感たっぷりなアイコンの作り方のコツ http://t.co/2WMjhgBd
【動画付き】雑なブラシツールでそれっぽくなる！質感たっぷりなアイコンの作り方のコツ http://t.co/olNgAsOS
【動画付き】雑なブラシツールでそれっぽくなる！質感たっぷりなアイコンの作り方のコツ | ウープスデザインブログ (デザイナーまめこ) http://t.co/olNgAsOS via @woopsdez
“【動画付き】雑なブラシツールでそれっぽくなる！質感たっぷりなアイコンの作り方のコツ | ウープスデザインブログ (デザイナーまめこ)” http://t.co/JCHyvJwL
【動画付き】雑なブラシツールでそれっぽくなる！質感たっぷりなアイコンの作り方のコツ (via @Pocket) – http://t.co/JQhgkqns
動画付きでかなり気合入ったチュートリアルです。テーマは「それっぽい」。 / “【動画付き】雑なブラシツールでそれっぽくなる！質感たっぷりなアイコンの作り方のコツ | ウープスデザインブログ (デザイナーまめこ)” http://t.co/2SBHFQHJ