Illustratorを使ったアイコンのデザイン

画面に書き出し

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アートボードから様々なプラットフォームに対して最適な形で書き出す方法について解説します
講師:
07:03

字幕

このレッスンではアイコンを様々なプラットフォームに対して最適な形で書き出す方法について解説します。まずこの完成したアイコンのグループをそれぞれ独立したアートボードに分けていきます。ここでまず「表示」メニューから「定規」を表示させます。この時に今単位が「インチ」になっているのでWeb やデバイス用の単位である「ピクセル」に変更します。それではここでアイコンそれぞれに対してアートボードを1つずつ作っていきます。ここでは汎用性の高いサイズである 64 ピクセル × 64 ピクセルのサイズにアートボードを設定していきます。まずアートボードパネルを開いてアートボードを新規作成します。そこでアートボードパネルのオプションメニューからアートボードのサイズを設定します。ここに 64 ピクセルの幅と64 ピクセルの高さを入力します。そして OK をクリック。ここにアイコンが9つあるのでアートボードも同じものを9つ複製していきます。それにはアートボードツールでWindows の Alt キー、またはMac のOption キーを押しながら移動させます。これにより複製を作っていきます。そして選択ツールに戻って確定します。 そしてここにそれぞれのアイコンを縮小して配置していきます。ここでの縮小ですが幅 64 ピクセル、高さ 64 ピクセルこのサイズに合わせていくということがわかっているのでコントロールパネルの「変形」オプションから幅に 64 ピクセル高さに 64 と入力して下さい。そうすると、このアイコンは先程作ったアートボードにぴったり重なるサイズになります。同じようにして残りのアイコンも配置していきます。残りのアイコンも配置して整理していくと、この様になります。これで書き出しの準備が整いました。まず「ファイル」メニュー>「書き出し」ここから「画面に書き出し...」を選択します。ここでまずアートボードが選択されていることを確認して下さい。今複数のアートボードがすべて選択されています。すべて書き出す場合には変更はしなくて構いません。しかしこの項目のチェックマークを外すことにより選択範囲を指定することもできます。またはドキュメント全体を選択し1つのグラフィックとして書き出すことも可能です。次に書き出し先を設定して下さい。設定方法は、この横のフォルダーアイコンをクリックして保存先のフォルダーを設定します。そしてフォーマットを設定していきます。 ここでは Web で使用するアイコン、またはデスクトップアプリケーション用のアイコン等を想定しますのでそれに対応したフォーマットそれに対応したサイズ、形式を選んでいく必要があります。そのためにまず PDF 形式はここでは不適切なのでこの✕印をクリックして削除します。PNG フォーマットはこのアイコンのようにこの白い部分が透明に表示されるわけですから透明部分がある場合にはPNG フォーマットが最適です。その他、JPG 等も選ぶことができます。そして目的によってサイズも選択していきます。元の図形が 64 ピクセル × 64 ピクセルなので通常の Web で使う場合であれば1倍である 64 ピクセルで使う場合半分の 32 ピクセルで使う場合というのが一般的だと思います。またデスクトップで使う場合のアイコンについては、8倍の 512 ピクセルまたはそれ以上の大きさのアイコンが必要になってきます。この場合、元の画像が64 ピクセルのサイズなのでそこから何倍に拡大したものが必要なのかそれを設定していきます。またよく使う倍数はここにプルダウンメニューとして選択できるようになっています。例えばここでそのままのサイズ1倍のサイズが必要で1.5倍、2倍この様に複数のサイズを設定することもできます。 ということは、この9つのアイコンに対してそれぞれ3つの違ったフォーマットの書き出しを行うということになります。それがここに表示されている「選択済み:9」これが9個のアイコンを示しています。そして書き出されるファイルの数がここに3種類設定されていますので合計27のファイルとして書き出されるということになります。もちろんここで複数のファイル形式を設定することもあると思います。SVG 形式もよく使う形式でこれは SVG の Vこれが Vector を表しているので拡大、縮小に関しては設定する必要がありません。この様に複数のサイズ複数のファイル形式を複数のファイルから、元のファイルから書き出すことができる大変便利な機能です。すべて設定が良ければ「アートボードを書き出し」をクリックして下さい。そうすると自動で保存された場所のウィンドウを開いてくれます。そうするとこの様にそれぞれのアイコンが違う形式で書き出されているのがわかると思います。このレッスンではアイコンをアートボードから様々な形で書き出す方法について解説しました。

Illustratorを使ったアイコンのデザイン

Illustratorはアイコンのようなシンプルかつ鮮明な図形の作成に最適です。このコースではアイコンデザインの基礎概念から実際のデザイン過程までを詳しく解説します。さらに完成したアイコンをさまざまな媒体に対応したデータに書き出す方法まで詳しく解説しており、とても実用的な内容になっています。

49分 (13 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年08月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。