イラストをうまく使ったウェブサイトはたくさんありますね。

例えば、SilverbackとかMailChimpなどは、とてもわかりやすいイラストをうまく使ったウェブサイトの例なのではないでしょうか？

一度見ると、『あぁ、あのゴリラのイラストのサイトね。』なんて覚えてもらえる確率が高まります。

イラストをうまく使う事でウェブサイトによりインパクトを与える事ができるのではないでしょうか？

noupeさんでまとめられていた『30+ Outstanding Character Illustrations in Modern Web Design』なんかのまとめも、すごく参考になります。

今回は、そんなイラストをきれいに描くために使えるチュートリアルをいろいろまとめてみました。

Drunken Monkey Photoshop Tutorial

ジャッキーチェンの酔拳をモチーフにした、かっこいいカンフーモンキーのキャラクターを描くチュートリアル。かなり細かく解説してくれています。

Digital manga illustration

かわいらしい女の子のキャラクターを描くチュートリアル。

Primitive Art Man Cartoon

ちょっぴりシュールな老人を描くチュートリアルが公開されています。

How to Create a Web Site Mascot

いろいろな場面で使えそうな男の子のキャラクター。

StudioQube Painting Tutorial

これはかなりレベル高いですね…。絵心ある方は是非、挑戦してみてください。

How to Illustrate a LeBron James Cartoon Character

バスケットボール選手レブロン・ジェームスをモチーフにしたキャラクター。似顔絵キャラクターの作り方が解説されています。

Drawing Vector-Looking Cat Illustration Using Photoshop

ちょっぴりシュールな猫のキャラクター。

Character Illustration

悪魔っぽいけど、かわいらしいキャラクターです。

Create a Twitter Style Bird Mascot

Twitterバードのイラスト

Creating vector characters in Illustrator

なんだかわかりませんが…。かわいらしいキャラクター

How to Create a Cute Bunny Vector Character

ウサギのイラストを描くチュートリアル。

How to Create a Cute Hippo Character!

カバのイラストもかわいらしいですね。

Create a Cute Panda Bear Face Icon

お目めぱっちりのパンダのキャラクター。

Create a Cute Furry Vector Monster in Illustrator

ムック？みたいなモンスター。

How to Create a Killer Chainsaw Bunny Character

ハードなチェーンソーを持った殺人鬼のキャラクター

How to Create a Cartoon Character with Expressive Lines

印象的な男の子のキャラクター

How to Illustrate a Cute Emo Kid

バンドGorillazのジャケットに出てきそうなイラスト。

Create a Vector Pirate Cartoon Character from a Hand Drawn Sketch

かわいらしい海賊のイラスト

How to Create a Stinking Zombie Flesh-Eater in Illustrator

ゾンビのイラストはあまり使い道無いかも…。

How to Create a Vector Illustration and Prepare it for Micro-Stock Sale

マップを持った男の子のイラスト。

How to Create a Rocketing, Vector Aircraft Shuttle

なんだか懐かしい昔のアニメに出てきそうなタイプの飛行機のイラスト

Create a Character Mascot with Adobe Illustrator CS4

男性のキャラクターマスコット

How to Create a Landscape Wallpaper for your Desktop

夕日がきれいな風景のイラスト

Create a Super Happy Octopus Character

宇宙人みたいなキャラクター

How to Turn a Sketch into a Fat Cat Vector Illustration

怒っている猫？のイラストみたいです。

Illustrator Tutorial – Create a Gang of Vector Ninjas

かわいらしい忍者のキャラクター

Tutorial: Creating convincing characters

シュールな女の子のイラスト

ロゴやタイトルなどにそのまま使えるテキストエフェクトのチュートリアルは、このブログでも大人気です。

以前は、『Photoshopチュートリアル　テキストエフェクトいっぱい』、『Photoshopチュートリアル　テキストエフェクト　パート2』とPhotoshop編をお送りしました。

今回は、Illustrator編をお送りします。

Creating an Environmentally Friendly Green Type Treatment

葉っぱがとっても可愛いテキストエフェクト。ロゴなどにそのまま使えそうですね。

Old School Type – Line Gradients

クールなエフェクト。バンドのロゴなどに使えるのでは？

Quick Tutorial: Adding Gradients to Text

テキストにグラデーションをほどこして、奥行きを与えます。

Create a Swirly Type Treatment

渦巻きがポップでクールなテキストエフェクト

Ornate lettering

背景の板に馴染んでとっても質感のあるエフェクトが印象的です。

Logo Design Project Step by Step Walkthrough

一見シンプルでも、iの部分が月になっていたり、テキストのスペースが無くなってつながっていたりと細部にまでこだわっています。

How to Create a Trendy Retro Type Treatment

レトロな色使いとシェイプがいい感じです。

This PLUS Tutorial is filled with Great Vector Lettering Advice

とってもかわいらしいこちらのテキストは、光のあたり具合など、細かい部分にまでこだわって作られています。

Create a Vibrant 3D Pixel Type Treatment

ブロックを組み立てたようなかわいらしいテキストエフェクト。

3 ways to apply a line pattern effect on text in Illustrator

ラインパターンをテキストに。

Blueprint-Style Text in Adobe Illustrator

手描き風のテキストエフェクトです。

Creating a crazy cool logo

グラデーションがとってもきれいなエフェクトです。

Tutorial : Grunge effect how to give it to your text

汚れた感じが絶妙なグランジエフェクト

Ornate Lettering Process

下書きから仕上げまでの行程が詳しく説明されています。

Tug and Twirl Text in Illustrator

クルクルっと可愛いエフェクト

Illustrator Tutorial – 3D lighted text effect

3Dのクールなライティングエフェクトが詳しく説明されています。

Tutorial : Create a cool water effect

イラストレーターで作る水のエフェクト

Let’s Make a Playful Yet Robust 3D Letter Design

とっても元気な印象の3Dテキストエフェクト

Illustrator Trick #10: Stitched Text Effect

縫い目が素朴でかわいらしいテキストエフェクト

Quickly Add Grunge To Text

適度に汚すグランジエフェクト

TECHNIQUE: Emboss Text Effect

車のナンバープレートのエンボス加工

Distressing Text with Live Trace in Adobe Illustrator CS2

こちらもグランジのテキストエフェクトの作り方。

Better Titles in Illustrator

ロックなテキストエフェクトの作り方。

How to Design a Logotype from Conception to Completion

シンプルなグラデーションでもこれだけ質感がアップします。

Photoshopのブラシは、かなりたくさん公開されていて、いつも重宝します。

IllustratorのブラシもPhotoshopほど、たくさん公開されていませんが、探せば結構クオリティの高いブラシが公開されていますね。

Illustratorのブラシは、印刷用にも使えるので、いろいろ使えそうです。

本日は、Illustratorで使えるブラシをいろいろとまとめてみました。

mycanthus brush pack 1

枠組みなどに使えそうな、とってもゴージャスなブラシですね。きれい！

SwirlyCurls – The Brush Kit

ちょっとしたワンポイントに使えそうな渦巻きカールのブラシ。

Funky Swirl Medina

ちょっぴりファンキーなブラシ、使い方次第では上品にもなりそう。

イラストレーターブラシライブラリ「fudeline(フデライン)」

とってもうれしい和風なブラシ。いろいろ使えそうです。

Color Mixed Brushes

とってもアーティスティックなブラシですね。こちらにまだまだいっぱいブラシが公開されています！

Browsing Illustrator Brushes on deviantART

deviantARTでIllustrator Brusheを検索しても、きれいなブラシがたくさん見つかりそうですね。

Vectorportal

VectorportalさんにもたくさんIllustratorのブラシがありました。

Adobe – Illustrator Brushes

本家、Adobeのサイトも見逃せませんね。

MUJKA -ILLUSTRATOR BRUSH SETS

上の方は、有料ですが、あきらめずに下の方までスクロールしてみると、無料のブラシも公開されています。

illustrator-brushes.com

現在51種類のブラシが無料で公開されています。

30 Illustrator Pattern Brushes for Making Flowers and Circular Designs

bittboxさんから公開されている、ブラシを使えばきれいなお花が描けます。

35 Free Abstract Illustrator Brushes

こちらもbittboxさんから公開されているブラシ。

50 Different Illustrator Hair Brush or Symbol’s

髪の毛を描く時に重宝しそうなブラシ。

お気に入りのブラシを見つけて、Illustratorにインストールしてみてくださいね！

このブログでは、あえてあまり触れてこなかったIllustrator。

わたくし、実はあまりIllustratorは使いません・・・っというのもあまり得意ではないので。。。

といっても、まったく使わないわけではなく、アイコンやロゴの制作時には嫌々使ってます。

デザインの幅を広げるためにも常々Illustratorは勉強しておかないとなぁ。っと思っております。

っちゅうわけで、本日はIllustratorのお勉強のまとめです。なるべく楽しそうで、簡単なものからまとめてみました。

1. Illustrator Pen tool exercises

とりあえず、超初級者の方は、こちらから練習しましょう。Illustratorの基本、ペンツール・エクササイズです。

2. illustrator pen tool cheat-sheet

こちらもペンツールの基本が練習できますね。

3. 7 Things You Didn’t Know Adobe Illustrator Could Do

意外に知らないIllustratorの使い方が7つ。

4. Illustrator Tutorial: How To Make 3D Vector Vintage Stars

星を3Dにするチュートリアル。

5. Illustrator tutorial – Create 3D logo

こちらも3Dのロゴを作るチュートリアル。グラデーションのつけ方がポイントです。

6. Adobe Illustrator Tutorials

おなじみsmashingmagazineさんのIllustratorチュートリアルまとめ。かなりいっぱいあります。。

7. Illustrator Tutorials

こちらも有名どころ。N.DESIGN STUDIOさんのIllustratorチュートリアルまとめ。

8. Free Tutorials

こちらもIllustratorチュートリアル６つ。

9. Illustrator Tutorials

Tutorial blogさんのIllustratorチュートリアルまとめ。

10. 130 Web 2.0 Gradient Swatches for Illustrator

130種類のIllstrator用グラデーションファイル。きれいですね。

11. Vector Illustration Trend

かわいいイラストがいっぱい。

12. The World’s Most Photorealistic Vector Art

写真に見えるけど。これ全部Illustratorで描かれてます。画像の下にある”OUTLINE”リンクをクリックするとどのように描かれているのか確認できます。

13. Adobe Illustrator & Photoshop Tutorials & Lessons

このページで紹介されている船のイラストはすごい！

がんばってIllstrator勉強しよっと。。

企業のサイトを構築していると、グラフやチャートが必要になることが多いです。

小難しいことをダラダラと書くよりも、グラフでデータを見せる方が、ユーザーの方々に分かりやすくていいですよね。

っちゅうわけで、本日はグラフを描くIllustrator系チュートリアルから、CSSを使ったグラフなど、なるべくデザイン的にきれいなものを、いろいろまとめてみました。

1. Creating graphs | Bartelme Design

Illustratorのチュートリアル。とってもきれいなグラフですね。パート2では3Dのやり方の詳細が説明されています。

2. Step-by-step Tutorial by Veerle

こちらもIllustratorのパイチャートツールを使ったチュートリアル。

3. 3D Graphs | N.DESIGN STUDIO

パイの一部がぴょこっと離れたパイチャートのチュートリアル。ファイルもダウンロードできます。

4. 3D Charts in Adobe Illustrator CS

ゼリー状のきれいなチャートもいいですね。

5. Pie Charts in Illustrator | GoSquared

シンプルな3Dチャート。

6. HowTo: Make Pretty Pie Charts | modern life.

ポップでかわいいパイチャートですね。

7. amCharts

パイチャート、折れ線グラフ、棒グラフ、バブルチャートがとりあえず、お試しでファイルをダウンロードできます。そこで気に入ってサイト上で使いたい！っと思ったら購入できます。

8. Create a Graph

チャートジェネレータです。サイト上でデータを入力して、そのままプリントもしくは、ダウンロードが選択できます。

9. Ajax MGraph

Prototype.jsベースのAjax棒グラフです。

10. PlotKit – Javascript Chart Plotting

MochiKitというライブラリをベースにしたグラフ。

11. Plotr | Solutoire.com

↑のPlotkitの派生版です。

12. Real World Bar Graphs | Khmerang.com

こちらは、HTMLとCSSできれいな棒グラフを作るチュートリアルです。

13. CSS FOR BAR GRAPHS | Apples to Oranges

こちらもCSSで作るきれいなグラフチュートリアルです。

グラフやチャートも見せ方次第でとってもきれいになりますね。。

最近よく見かける、↓のようなグラデーションのかかったグラフィック。このブログでも、右上のほうについてるやつです。。

本日は、こんなグラフィックを簡単に３分で作る方法をご紹介じゃ。。

それでは、Illustratorのご用意を！（わたくし英語版のIllustratorCS2を使っております。。日本語版でも、多少バージョン古くても、ほぼ同じのはずです。。）

1. スターツールで輪郭を描く
ツールボックスから、スターツールを選択します。

2. 輪郭を設定する
スターツールを選択して、キャンバスをクリックすると設定画面がポップアップします。輪郭の設定はお好みでどうぞ。。

3. グラデーションツールを選択する
描いた輪郭にグラデーションをかけます。

4. グラデーションの色を設定する
グラデーションの色はお好みでどうぞ。。グラデーション形式は円形にしてみました。

5. グラデーションをかける
お好みの色が設定できたら、2で描いた輪郭にグラデーションをかけます。↓みたいに左斜め上から、右斜め下にドラッグすると下のようにグラデーションがかかります。

6. 一回り小さい輪郭を作成
作成した輪郭を選択したまま、Illustratorメニューのオブジェクト>パス>パスのオフセット（実際何て書いてるか分かりませんでした。。）を選択。

7. オフセット設定
一回り小さい輪郭を作りたいので、-5pxとか設定してみました。設定はお好みでどうぞ。。

「OK」ボタンをクリックすると、↓みたいに、一回り小さい画像ができます。

8. ペンツールを選択
ペンツールを選択します。

9. 曲線を描く
下のような曲線を描きます。

10. パスファインダで分割
9で描いた曲線と、7で描いたオフセット画像を同時に選択して、パスファインダで分割します。

11. ダイレクト選択ツールを選択
ダイレクト選択ツールを選択します。

12. 画像の下半分を削除
分割した画像の下半分をダイレクト選択ツールで選択して削除キーで削除します。

13. 画像の上半分を選択

14. グラデーションをかける
残った、画像の上半分にグラデーションをかけます。グラデーション形式は線形にしてみました。色の設定はお好みでどうぞ。

15. ドロップシャドウをかける
一番最初に描いた、下の画像を選択して、ドロップシャドウを選択します。

16. ドロップシャドウを設定する
ドロップシャドウの設定をします。設定はお好みでどうぞ。。

こんな↓感じでできました？

デザインblogランキング