アイコン作りに特化したチュートリアルの数々!とにかく真似まくった先にオリジナルを作る意識!

WEBデザイン

世の中にあるチュートリアル見まくって、沢山の技術や表現力を得て自分自身のオリジナルへと昇華させようぜ!的な記事を以前書かせて頂いたのですが、この記事を友人にもみてもらい、感想もらったりした結果、中々具体的な作る目的が無いと、チュートリアルとか出さないのが正直な所なのかもしれませんね。「これ、作るぞ!」みたいなやる気というかそういうの。

しかし、色々な人の話しを聞いている中で、以前のチュートリアル記事の中で、アイコンを作るチュートリアルに関して多くの人からコメントを頂きました。「おぉ、アイコンつくるチュートリアルすかー」みたいな。んで、もしかしたら、アイコンという誰しも一度は作ってみようと思う物を通したチュートリアルであれば、結構楽しくスキルアップできるんじゃないかと思った訳です!

アイコンであれば色々なところで必要になるし、ミニマルだろうが、ポータルだろうが、コーポレートだろうが、ECだろうが、アイコン系であれば使う機会が多い!チュートリアルを通して学んで置いて損は無いかも?!ってことで、アイコンチュートリアルを通して様々なチュートリアルを見て、自分の引き出しを増やしていこう!ってな内容は、これからツールを使えるようになってモノづくりがしたいって人も、既にプロだけど更なる表現を可能にしたい!って人にも必要とされやすいチュートリアルなのかもしれないと思い、とりあえず僕の手元にある(or 最近知った)「アイコンを作ろうチュートリアル!」の数々をまとめさせて頂くことにしました!

僕自身、見ていて居てもたってもいられなくなり、とりあえず上のようなバッチっぽいのを作らせて頂きましたが、やっぱチュートリアルなぞるの楽しー!

そういう訳で、ここからはいつも通り完全に独断と偏見で僕自身が見ていて凄く楽しかったチュートリアルの幾つかを、この場を借りてご紹介させて頂ければと思います!

Stylish Metallic Button in Photoshop | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials

上の方でも掲載させて貰っているよう、今回試しに作ってみたアイコン…というかボタンか?リアルな感じのアイコンは実は意外と簡単に作れるんですよ。加えて、レイヤースタイルの扱い方さえちょっと工夫すれば(or 他のチュートリアルと組み合わせると)、応用を利かせたアイコンもすぐ作れるようになるかと思います!

Create a High-Gloss Graduation Hat Icon Design | Psdtuts+

グロッシーな帽子のアイコン!光の使い具合、細部の作り込みなど、今回ご紹介するアイコン作成の中でも難しい方かなと思うのですが、学ぶこと多しでとても面白い!是非お試しあれ!

Create a Cardboard Box Icon in Photoshop

ボックス型のリアルアイコンって光の具合とか光彩のかけかたとか、すごい勉強になるので、結構僕はおすすめしています!創造力を働かせて見せ方を工夫してみると楽しいこと間違いなしかと!

Make a Handy 3D Vector Calendar Icon | Vectortuts+

紙ペロンってめくれるタイプが作れる人は多いですが、その応用でこんなアイコン作ることもできる!紙がめくれるタイプは一度コツをつかむと平面、側面、ちょっと立体などいろんな場面で応用が利くので楽しいです!

しかし、これイラストレーターかー。あんま得意じゃないんで、なんとかしないとなー。

How to Create a Vector Safari Compass in Illustrator

こいつもイラレかー!!でも、Safariアイコンとかイカしてますね!ってことでイラレだけど勉強したいイラレでも作れるようになりたいとオモタ!

Create a Vector RSS Icon with Illustrator

普段見慣れたRSSのアイコンもちょっとテカった感じを加えるとこんな具合にリアルに。どのアイコンもそうですが、今回紹介しているリアルな感じのアイコンのメインキーワードは光の当たり具合かなと!

って、これもイラレだー!!!!

Create a Speed Gauge and Watch Icon in Photoshop ‹ RJDesignz – Design Blog and Portfolio of Rahul Joshi

一件簡単そうで、すごい細部の質感まで考えられてるなーと思ったので共有!黒白の極端なグラデーションで凸凹加減を強調するのもうまい!

Craft a Delicious Chinese Food Icon | Vectortuts+

同じ箱型でも斜めに!しかも折り目の部分の影とか考えないといけないからちょっとめんどくさそう!でも、一度つくってしまえばこういった応用も色々利きそうですね!

How to Create a Transparent Battery Icon | Vectortuts+

iPhoneユーザーな皆様は見慣れたもんじゃないですか?あの電池マークを津くっちまおーぜっていうチュートリアル!普段見慣れた物を作るのは、何時どんな時見ているアイコンか知ってるし色々な応用を利かせることが出来そうで楽しいですね!

Design a Detailed Compass Icon in Photoshop | Psdtuts+

コンパスのアイコンを作ろうぜのチュートリアル!こいつはやってることはすごくシンプルなので、チュートリアルも追いやすそうですね!

Glossy RSS icon

RSSアイコン第二弾!こちらはドラゴンボール的な感じで面白い!球体を作る時の光の当たり具合って、色々なパターンが合って面白い!様々な球体アイコンを作ってみて、様々な質感にチャレンジしてみましょう!

Giackop Design / Giacomo Coppola » Blog Archive » World Icon Tutorial

キレーダナーとかぼーっとしてる暇はない!前項どうよう球体アイコン!こちらは先ほどの物に比べると手が込んでいますね。(決してさっきのが手が込んでないという意味ではありません!)

以前ご紹介したブラシの調整 をうまく作ってパーティクルを演出しているのですが、綺麗に作っていますねー!

Computer Icon Tutorial by ~gakuseisean on deviantART

ダウンロードすると動画チュートリアル付きで作り方を解説してくれています!30分程の動画ですが、なかなか中身が濃いので一読の価値ありかと思いますよ!

How to Turn Glasses into a Great Geek Icon | Vectortuts+

さて、チュートリアルを見ると実写メガネからアイコンを作っていますね。たまに、絵心ないからアイコン無理ぽげ!と思う人もいるかと思いますが、そういう人はこちらのチュートリアルで紹介されているように、実際にあるものから適当にパスとって作るなんてことも全然アリではないでしょうか!?

Welcome to the Icon Deposit – Icon Deposit

さて、ここまで見てしまうとチュートリアルだけじゃ物足りなくなってくるかも!?そんな時はこちらのIcon Depositというサイトがおすすめ!こちらのサイトが素晴らしいのが、めっちゃ大量のPSDアイコンデータがダウンロードできるだけじゃなく、チュートリアル関連まで充実の内容で文句なし!更に自分のスキルを高めたい時に見てみると何かしらの発見があると思います!

 

さて、いかがでしたでしょうか?

何度もこのブログではチュートリアル関連は紹介してきたかと思いますが、僕は本当にデザインとかそういうののセンス皆無だったので、作りたい物が出来たらまずはめっちゃ大量のチュートリアルをなぞることから始めます

その度に、なぜ、どうして?は尽きることはありませんが気合で乗り切りましょう(笑)!チュートリアルの中には単に技術だけで終わらず、表現の意図や応用を教えてくれる物もありますので、もし自分にはデザインのセンス的な物が無いからぁーと思っている方で、それでも作ってみたいのであれば、こういったチュートリアルをなぞりつづけ、自分の引き出しを増やし続け、いつか自分の技術として引き出せる状況を作るようにするという意識を持つのも、もしかしたら良いのかもしれませんね!

というか、僕自身がそういった方法しかしらないということもありますが(笑)

是非是非、皆さんもチュートリアルやってみたらこんなものが出来たよ!って物がありましたら共有していただけると嬉しいです!そこから何を学び取ったのかを人と共有すること自体も、自分自身のスキルやセンスを向上させる方法の一つだと僕は信じて、今日も相変わらず世の中色々なチュートリアルを見ながらニヤニヤしていければと思います!

あ、Facebook辺りで今日僕が作ったアイコンのPSDはダウンロード出来るようにしとくんで、よければ僕のFacebookページ もよろしければよろしくどぞー!

Pagetop