初心者がクラウドワークスで2連勝したIllustratorアイコン作成勉強法
ビギナーズラックかわかりませんが、Illustratorの勉強を始めてほぼ土日だけの二週間でクラウドワークスのコンペで2連勝してしまいました。仲間を増やしたいので、この二週間何をやったかまとめてみたいと思います。
なお、性格にもよると思うので、この勉強法が合わない人もいると思います。
こちらが証拠の私のクラウドワークスのページです。自己PRとかなんも書いていませんw
では、2週間何をやったか書いていきます。
イラレでアイコンを作るという作業を体で理解する
最初はこちらの本を買いました。
ちょうど娘がインフルで私は暇だったこともあり、土曜だけで7時間くらいやったんじゃないでしょうか。
本の3分の1くらいひたすらやりました（7時間で1/3。意外と時間かかる）。
この本はただ書いてある通りにやるだけできれいなアイコンができます。
これでイラレでアイコンを作るという作業がどういうものなのか体に覚えさせます。
この「きれい」というのが重要です。ある意味成功体験を積み重ねているとも言えます。
これが次の基礎的な練習を続ける気になるモチベーションになります。練習が何につながるのかわからないと続けられなくないですか？私は続けられません。
本を参考にオリジナルアイコンを作る
これは結果的に自分に一体何が足りないのかを認識するための作業になりました。
私の場合は意外ときれいにできちゃって少し手応えを感じてしまいましたが、ここで全然できねーってなったらなったで練習するモチベーションになるのでよいと思います。
ここで私は以下の不足点を認識しました。
- この本ペンツール全然出てこないけど、図形の組み合わせって限界あるよね？ペンツールできないとまずくね？
- イラレって機能やたら多いから一通り知っといた方がいいかも。
- 配色むずい！一番時間かかる。
ちなみにこんなのができました。
ここまでは以下の記事にも書いています。
ペンツールを練習しよう
この本の…章までをやるのが早いと思います。作例はかっこよくないのですが、たぶんこの技術の習得が必要！と認識した今ならモチベーション高く続けられるはずです。
一冊目をこれにしてたらきっと私はつまらなくて挫折したと思います。
用意されている練習用の下書きファイルがとてもよくできてるので、とても練習しやすいです。
続いて以下の記事を読みます。この記事はわかりやすいです。書いてある通りトランプのマークとフォントのトレースの練習をしてみます。
ちなみに私は本よりこっちを先にやりましたが、本の方が一から書いててわかりやすいと思います。
何回かやってどんどん早くできるようになりましょう。タイムアタックゲームで高得点を狙う気分でやれば楽しくできると思います。
スピードを上げるためのコツは以下の記事にまとめたのでこちらも参考になると思います。
イラレの機能を一通り知る
「Illustrator トレーニングブック CS6/CS5/CS4対応」の続きを暇な時にちょこちょことやりましょう。でも、私もまだ半分くらいしか終わってないです。もうモチベーションが続きません。
でも、たまにこうやりたいんだけどどうすんだ〜ってググるとこの本に載ってることだったりします。先にやっておいたらこの悩む時間が短縮できたんだろうな―って思うことがあるので、やった方がいいと思います。。。
配色
配色はまださっぱりわかりません。やりながら試行錯誤ですね。
今のところ私は以下のようにしています。それで、まあ自分が許せる範囲にはなっています。
でも、悩み出すとすごく時間がかかるのでやっぱりよくわかりません。
1. [スウォッチライブラリ] > [Web]
[スウォッチライブラリ] > [Web]から適当にメインカラーを選ぶ。
数が少ないので選びやすいです。（RGBなんて255*255*255=16581375色もあるんですよ。選べませんてw）
たぶんこのスウォッチはWebセーフカラーのことなんじゃないかなー。知らないけど。
2. カラーガイド
他の箇所の色は、カラーガイドで適当になんかいいかなーって思った配色方法（類似色とか。▼のところ）を選んで、下に表示された色を塗っていきます。
参考）配色が苦手な人は、イラストレーターの「カラーガイド」がおすすめ。 | Handy Web Design
3. オブジェクトを再配色
やっぱり色が気に食わないな～と思ったら、[編集] > [カラーを編集] > [オブジェクトを再配色]で丸ごと違う色にします。
Illustratorテクニックファイル アイコン&マークデザイン のP.24やIllustrator トレーニングブック CS6/CS5/CS4対応 のP.122に載っています。
クラウドソーシングに応募
ここらでクラウドソーシングに応募してみましょう。
何をないところから作るのは大変ですが、クラウドソーシングだといろいろと制限をつけてくれるので考えるのが楽ですし、もし採用されたらおこづかい♡とか思うとモチベーションも上がります。
リスクは自分の作品が公開される恥ずかしさくらいです。ここは勢いで行ってしまいましょう。
これが意外と勝負になります。私が2連勝しちゃうくらいですから。
特に募集も応募もなぜか少ないiPhoneアプリアイコンが狙い目です。
フラットアイコンが流行っているのも勝負になっちゃう理由の一つかなと思います。写実的なアイコンはこの時点の習得技術では作れないが、フラットアイコンはけっこうそれっぽいの作れます。
事前準備
日本語フォントが必ず必要になります。商用利用可能なフリーフォントを集めておきましょう。
以下のシルエット素材も場合によっては使えます。覚えておきましょう。
クラウドソーシングに応募するコツ
こんなことを考えながら、応募していました。
- たまにすごくうまい人がいるのでできるだけ真っ向勝負を避けアイデアで勝負する。
- 意外と他の応募作品はフラットアイコンじゃない。フラットアイコンで攻めよう。（他のは作れないとも言う）
- フラットアイコンのトレンドを抑えておく。なんか素人くさい時はトレンドを追加するとそれっぽくなる。
- かっこいい他のアプリのアイコンを真似よう。
フラットアイコンは、「2014年も続く人気トレンド、フラットデザインの無料アイコンセットまとめPhotoshopVIP |」を見て、こんなもんかーって知っておく。
トレンドは、「フラットデザインをより魅力的にする、新スタイルトレンド５個まとめPhotoshopVIP |」この辺を読んで頭にいれておく。
かっこいいアイコンは、思いついたアイデアでGoogle PlayやApp StoreやIconfinderを検索すると良いです。iOSのデフォルトアイコンもグラデーションの雰囲気とか真似るといいと思います。
事例としてクラウドワークスのコンペのときの思考過程を羅列しておきます。参考になるかな？
事例１）クックパッドのレシピ検索アプリ
事前調査
既に割りといい応募作品があった。カラフルで主婦層にウケそう。
しかも文字装飾。文字装飾技術はまだ俺にはない。別の方向から攻めよう。
しかし、みんななぜかクックパッドの検索アプリなのにクックパッドっぽくないな。
クックパッドっぽい方がわかりやすいんじゃね？
思考過程
というわけでクックパッドを想起させる感じで差別化しよう。
コック帽を使って、オレンジ系で作ってみよう。
かわいいと、きっと主婦にウケる！
ちょうどコック帽だし顔つけよう！
レゴ顔にしとけばだいたいかわいい！レゴ顔最強！
色がのっぺりだと微妙だ。iOSの電話アイコンやFacebookアイコンくらいの淡いグラデーションをつけてみよう。
できた！
事例２）探偵風の街探索アプリ
事前調査
ロゴとアイコンのコンペを別々に募集している。
既に応募している他の人のロゴは上手。でも、アイコンはそうでもない。
なぜか両方に応募している人はいない。
思考過程
どう考えてもロゴとアイコンでテイストが同じのを選びたくなるはず。両方応募すれば採用確率は上がるはず。
他の人のロゴが上手なので同じ方向性はだめだ。ひねろう。
他の人がやってないの…他の人のでは表現できていなそうなこと…探索…街…地図！
かっこいい地図アプリを探せ―。Google PlayやApp Storeで探す。こんな昔のGoogle Mapsアプリっぽいのがいいかな…
でもこれじゃあ狭いので、Googleマップを真似るか。地図って分かればいいので適当に長方形ツールとかで書いて―。
探偵はシルエット素材から持ってきて。
色はオレンジという要望だが、探偵をオレンジにすると、地図の色と合わない…
探偵を黒にしてマップをオレンジベースにしてみたらいい感じ（オブジェクトを再配色）
でも、なんか物足りない…
ロングシャドーが流行ってるとか書いてたな。
ロングシャドーじゃないけど、本で影つけてたな。影でもつけるか。
できた！
ロゴ…ロゴはまだ作ったことない…
まあとりあえず手を動かそう。試しにアイコンベースで作ってみよう。
アイコンだと四角は変だから丸くして、影は字の下に伸ばすとバランスいいかな―。
フォントは商用フリーのフォントをいくつか当てはめてよさそうなのを…あれ意外といい。
しかし、なんか物足りない。
あー、字の一部を絵に変えると玄人っぽくね？俺そういうの好き。
しかし、思いつかん…
娘よ、娘。この字の一部を絵に変えたいんだけど、なんか思いつかない？「点を足あとに変えたら？」「おー、いいね」
できた！
終わりに
意外と作れるから、みんなイラレやろうぜ！
という締めでいいかな？w
さらにはイラレだけでWebデザインもできちゃうらしいので、Photoshopには手を出さず、そのままアプリの画面デザインに進んでみようかと思います。
