デザインが全くできないのです。仕事的にはデザイナーに頼めばいいのですが、できたらな〜って想いがいつもあったので、ちょっと勉強してみることにしました。

ということでお勉強1日目の記録です。
「Illustratorテクニックファイルアイコン&マークデザイン」という本を読んで、その日のうちにオリジナルでiOSアプリアイコンを作ってみました。
ちなみにIllustratorはほぼ全く触ったことがないので、それを頭に入れてお読みください。

何から手を付けるか

WEBデザインとモバイルアプリのデザインができるのがゴールですが、そもそも何からやればいいのかわからないので、そこから調べてみました。

19のステップで、まったくのゼロから、独学でWebデザイナーになる方法 - ウェブデザイナーになるには

３大グラフィックソフトのうち最初に学ぶとよいのが、Illustratorである。

Web制作のための、Illustratorの独学方法 - ウェブデザイナーになるには

一冊目として、おすすめなのは『Illustrator トレーニングブック』である。安定した内容で、これ以上分かりやすく解説するのは難しいくらいの構成になっている。

入門書を例として２冊あげたが、実際のところなんでもよい。リファレンスや逆引き形式の本ではなく、チュートリアル形式の本を選ぶことである。あと、作例が簡単すぎず、ある程度ボリュームがあって、作例の質が高いかどうかも選ぶ際のポイントになる。

ふむ。とりあえずIllustratorのチュートリアル本をやればいいのね。

まず、本屋でおすすめという「Illustrator トレーニングブック CS6/CS5/CS4対応」を見てみたのですが、作例があまりかっこよくなくモチベーションを保てなそうだったので、「なんでもよい」と書いてたし他のを探しました。「Illustratorテクニックファイルアイコン&マークデザイン」が作例がかっこよかったので、買ってみました。

Illustratorテクニックファイルアイコン&マークデザイン

というわけで1日で3分の1くらいやってみました。
書いてある通りにそのままやると以下のようなアイコンができました。

f:id:a_kimura:20140302133440p:plain

なかなかですよね。うん。自分がこんなアイコンを作れるというのはなかなかうれしいものです。
ちょっとフラットデザイン的なトレンドからは外れている気がしますが、今まで何も作れなかったことを思えば素晴らしいものがあります。

しかし、この本は意外にもベジェ曲線はほとんど出てこなくて、図形とその変形・切り抜きによってアイコンを作っています。それが普通なのかは知りませんが、そうやっていました。
本には以下のように大きさ、色、変形や効果の度合い全て数値で書かれているので、それを言われた通りに入力していくだけです。すると、できあがる。なんで葉っぱ作るのにその変形したよ？とか思うけど、なぜかできあがる。
ほぼ魔法であるw きっと呪文を詠唱するとできる的なあれだろう。

f:id:a_kimura:20140302134156j:plain

「アピアランスを分割」とかしょっちゅうするけど、一体それが何なのかはわからない。でも、できあがる。

本当にIllustrator初心者なので、「塗りをC85にする」とか言われてもそこからわからなかった（その辺は本には書いていない）が、その辺はそれっぽいとこを適当に触っていたらできた。

オリジナルアイコンを作ってみる

言われた通りに作業するだけなので、全くオリジナルを作れるようになった気がしない。この知識と経験でできるもんなのかちょっと試してみました。

個人的に構想中のインコアプリのアプリアイコンを作ってみよう。

まず鉛筆でラフを書いて。
この辺の手順は本には書いていないけど、とりあえず案考えないとアイコン作れないよね。
左上がましなのでそんな感じで作ります。下手とか言わないでw

f:id:a_kimura:20140301223710j:plain

これを図形の組み合わせで作る。。。うーん。。。
あー、首のところはシールドアイコンの上に似てるよね。
くちばしはシールドアイコンの下が使えるな。
吹き出しのちょろっと出てるやつはクローバーアイコンの茎が使えるな。ほっぺたのところは水滴アイコンの途中がこんな形だったよな。

f:id:a_kimura:20140302141606j:plain

と、今日得た知識だけを元に作っていくと、、、

できた！

f:id:a_kimura:20140302135639p:plain

あれ？意外といいんじゃないか？

しかし、ある程度形ができてからの微調整に時間がかかりました。
配色をどうするのかとか、効果はどれをどれくらいかけるのかとかが悩みに悩みました。本だとそこは入力するだけだったからねw
色をちょっと変えるだけでひどくなったり、グラデーションをうっすら入れるだけで少し素人っぽさが減ったり。
吹き出しはLINEが地の色を抜いてたりするから、そんな風にしたらそれっぽいんじゃね？と真似したらちょっとよくなったり。
ドロップシャドウ入れてみるかと入れて、入れ具合を微調整したり。
微妙に変えていくうちにすこーしずつ良くなっていった気がします。

終わりに

Illustrator初心者が「Illustratorテクニックファイルアイコン&マークデザイン」を1日やるとこれくらいはできるようになるよという話でした。
Illustrator初心者でも理屈は後でいいからとりあえず作ってみたい人にはおすすめできます。こんな風にしたいときはこうしたらいいかもしれないなとかを少しわかるようになります。なった気がします。

ただ、結局ベジェ曲線は全然やっていないのと、図形変形して書くより下絵をトレースして書く方が楽なんじゃね？とやってて思ったので、次は「絵を描く仕事を始めたい! Illustratorキャラクター制作の教科書」でもやってみようかなあと思っています。表紙があれなんですが、これができたら動く絵本アプリとか作れるかなあと。

それが終わったら、Webデザインの一連の流れを学ぶために以下の本をやってみようかなあって思ってます。スライスとかわかんないし。

あと配色か。。。

おすすめの勉強法とか本とかあったら、@a_kimuraまで教えて下さい。