知ってなきゃ損をする！イラレを超効率的に使うために知っておきたい14の小技

ちょっとしたデザインワークだとPhotoshopを使うのが定番な感じがしますが、「この画面内にこんな感じの情報、入りきるかなー？」などと全体のレイアウトをするときにIllustratorも便利で、よく使っています。

共通の部品をコンポーネント化したり、コンポーネント化した部品に変更を加えると画面上の部品にも変更が適用される、といったイラレの動きは、実はかなりプログラマ向きの作りをしているのではないかなと思います。プログラマがちょっとしたデザインワークをする場合は、今回ご紹介するサイトの14の小技を覚えておくだけで大体事足りるかも知れません！　というか事足ります！　この機会にみなさまもIllustratorをぜひ触ってみてくださいー。

イラレを超効率的に使うために知っておきたい14の小技

そんな訳でこのサイト、Speed Design with Illustratorで14の小技が紹介されています。具体的な操作方法はこのサイトの動画で紹介されているので、それを参考に実際に操作してみて欲しいのですが、とはいえ英語のサイトなので、どんな内容なのかざっくり日本語で紹介してみます。こんなことができるようになりますよー。

1. DYNAMIC BUTTONS

入力したテキストに対して動的にボタンのようなスタイルを施してくれます。文字入力するだけでボタンができる！

2. TEXT STYLES

同じ装飾をしている段落のスタイルを一気に変更することができます。スタイルシートみたいな感じですね。

3. GLOBAL COLORS

同じ色を使っている箇所の色を一気に変更することができます。

4. MODULAR DESIGN

ページ内の部品をコンポーネントとして扱うことで、同じコンポーネントを利用しているページであれば、コンポーネントを編集するだけで全てのページに適用するといったことができます。

5. ICON FONTS

アイコンフォントを使えば、ちょっとしたアイコンを使いたいときに便利です。パネルから選択するだけでアイコンフォントを使えます。

6. CSS FRAMEWORKS COLUMNS

グリッドを指定することもできるので、自分の使っているCSSフレームワークのグリッドとあわせておくとコーディングのときに便利です。

7. SNAP TO THE GRID

デザインをグリッドにあわせるようにしておくと、ウェブデザインの場合はバチッとハマります。

8. MULTIPLE SCREEN DESIGN

アートボードは99個まで使えるので、アートボードを上手く使えば1つのファイルで全てのページのデザインをすることも可能ですね。

9. RESIZE WITHOUT DISTORTING

ベクタ画像なのでリサイズしても歪みません。

10. IMAGE MASKS

画像のクロッピングもできます。簡単な画像加工であればPhotoshopを使う必要もないです。

11. STARTER TEMPLATES

あらかじめテンプレートを用意しておくと作業が楽に進みます。

12. GRAPHIC STYLES

ライブラリを利用することでボタンやメニューのスタイルを簡単に変更することができます。

13. TEXT WRAPPING

画像の置き場所にあわせてテキストを回り込ませることもできます。

14. ROUND INDIVIDUAL CORNERS

それぞれの角を丸めることが可能です。

素材も掲載されてる！

記事の中で紹介されているこんなテンプレートや、

フリーで使えるアイコンなんかも掲載されています。これは捗りますね。

これは知ってなきゃ損するなーと思いました。イラレを敬遠していた人も、この機会に使いはじめてみてはいかがでしょうか。時代はマルチ解像度＆レスポンシブなので、いろんな解像度に対応できるベクタ画像は、どんどん需要が増していくと思います。

今回ご紹介したサイト：Speed Design with Illustrator 14tips to create interfaces in minutes