●HOME
●カテゴリ  

●WEBサービス

●WEBデã‚イン

●WEBåˆä½œ

●ツール

●フォント／タイポグラフィ

●便利サイト

●情報収集

●留学

●考察

●英語
 

●留学相談
●その他  

●海外就職相談
 ●このブログについて
 ●お問い合わせ
  




バンクーバーのうぇぶ屋








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


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ページ ã‚‚よろしければよろしくどぞー！

関連する記事

もうシンプルアイコン探しには困りたくない！フリーのシンプルアイコンを厳選26選！もうシンプルアイコン探しには困りたくない！フリーのシンプルアイコンを厳選26選！
 アイコン関連ブックマーク激増の2012年を振り返って、今年見てきたアイコン系リソース全部紹介！アイコン関連ブックマーク激増の2012年を振り返って、今年見てきたアイコン系リソース全部紹介！
 これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！
 これだけあればシンプルアイコン探しには困らないかも！全部フリーのシンプルアイコンを一挙紹介！これだけあればシンプルアイコン探しには困らないかも！全部フリーのシンプルアイコンを一挙紹介！
 激簡単にHTMLとCSSの共有が出来るリアルタイムオンラインエディタScrathpadが良い感じ！激簡単にHTMLとCSSの共有が出来るリアルタイムオンラインエディタScrathpadが良い感じ！
 WEBデザイナー／フロントエンドデベロッパーが英語と技術を学べる超おすすめのサイトWEBデã‚イナー／フロントエンドデベロッパーが英語と技術を学べるè…おすすめのサイト
 「公開一週間で10000PV」ダメブログを見直し月間10万PVのブログにするまでの激闘「公開一週間で10000PV」ダメブログを見直し月間10万PVのブログにするまでの激闘
 使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！
  









人気記事  ã‚ªã‚¹ã‚¹ãƒ¡è¨˜äº‹  


高卒でバカなのに最高に楽しい僕の生き方と守りぬいてきたこと 199.9kä»ã®ãƒ“ュー
 è‡ªåˆ†ã®ã‚„りたい事を仕事にしてる僕らに見られる10個の特徴 125.5kä»ã®ãƒ“ュー
 ä»Šæ›´èžã‘ない？！WEBデã‚イナーなら最低限知っておきたい有名フォントの数々 108.5kä»ã®ãƒ“ュー
 ç¾ä»£ã«ãŠã‘る留学が無意味だと思う5つの理由と、目標とすべき5つのこと 83.5kä»ã®ãƒ“ュー
 ã€Žæµ·å¤–に住めば英語は出来るように成る』は本当か？５年間カナダに居座った僕が体感したTOEICとかの意味 82kä»ã®ãƒ“ュー
 è‹±ä½œæ–‡ã«æ™‚間をかけるな！英語圏のWEBåˆä½œç¾å ´ã§ã‚ˆãä½¿ã‚ã‚Œã‚‹è‹±èªžè¡¨ç¾ãƒ†ãƒ³ãƒ—レート集！【メール編】 60.4kä»ã®ãƒ“ュー
 è…かっこいいタイポグラフィを駆使した映像の数々！息をのむ程魅入った映像総まとめ 48kä»ã®ãƒ“ュー
 ãƒãƒ¼ãƒ é–“のコミュニケーションを円滑にしたい時に試してみるべきツールやWEBサービス色々 46.2kä»ã®ãƒ“ュー
 èª°ã§ã‚‚簡単にかっこいいロゴが作れる『Squarespace Logo』 43.6kä»ã®ãƒ“ュー
 ã‚·ãƒ³ã‚°ãƒ«ãƒšãƒ¼ã‚¸ãªã‚µã‚¤ãƒˆã‚’デã‚インする上で、知っておいて損は無いかもしれないプラグインとか色々！ 43.5kä»ã®ãƒ“ュー
  
  • 日本の人材不足が深刻で世界ワースト2位なのは、それが日本の良い所だからという話2017.10.29
  • 『学び続ける』という事は『つらい』事なのか？僕が自由を手に入れるまでに見てきた学びのステージングの話2017.09.02
  • 英語学習者の強い味方、英文チェックツールの「grammarly」が超優秀でオススメ！2016.06.07
  • 2016年は情報収集力が鍵！IT業界の人がチェックするべき海外ブログやメディア25選！2016.03.17
  • 現代における留学が無意味だと思う5つの理由と、目標とすべき5つのこと2016.03.15
  • 今だからこそ安定を求めるべきなんじゃないかっていう考えについて2016.03.05
  • 海外就職に成功した日本人WEBデベロッパー達が使ってるオンライン学習サイトのまとめ2015.11.10
  • やりたいことを実現する為に、頭磨り減るくらい考える事の大切さについて2015.01.18
  • グローバル時代に備えて！IT業界の英語レジュメ（履歴書）とカバーレターの書き方！（テンプレート付き）2014.05.12


    •
    Pagetop




    ●クリエイター留学の『Frog』
    ●このブログについて
    ●お問い合わせ
    ●海外就職相談
     







    © 2015 Frog Creator Production Inc. All Rights Reserved.