Illustratorを使ったWebデザインのテクニック

「Web用に保存」の機能を理解する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorでスライスした画像に対して、個別に名前、ファイル形式、圧縮率などを設定し、最適化して書き出す方法をご説明していきます。
講師:
11:38

字幕

このレッスンでは Adobe Illustrator で スライスした画像に対して 個別に名前 ファイル形式 圧縮率などを設定し 最適化して書き出す方法をご説明していきます 一つ前のレッスンでは 完成したウェブサイトのモックアップを スライスしてこの様に 小分けにする方法をご説明しました このレッスンではこのスライスを利用して 「Web用に保存」の機能を使って書き出す という作業をしていきましょう まずは個々のスライスにつける 書き出した後のファイル名の設定から始めます ツールパネルから「スライス選択ツール」 右列の下から二番目の「スライス選択ツール」を選びます そして予め作ってあるスライスを クリックして選択した後に メニューバーの「オブジェクト」から「スライス」 そして「スライスオプション」を設定します この名前の部分を消して 半角英数でファイル名のベースとなる 単語を入力します この場合でしたら logo と名付けてみます 拡張子の例えば JPEG ですとか GIF と いったものは付ける必要はありません 拡張子はこの後のステップで 自由に設定することができまして Illustrator が自動で 拡張子をつけてくれますので ここではファイル名のベースとなる部分 単語の部分だけを入力すればOKです 注意していただきたいのは ここで二単語で 構成される様なファイル名をつけたい場合です 例えば logo robot というような ファイル名にしたい場合は 必ずハイフン もしくはアンダースコアで つないでください この logo と robot という単語の間を あけてしまいますと 後々コーディング等で不具合が起きる 可能性がありますので 必ずハイフン もしくは アンダースコアでつないで なにも空きがない状態をつくってください これが設定できましたらOKをクリックします 二つ目のスライスにうつります 二つ目のスライスを選択して メニューバーの「オブジェクト」から「スライス」 「スライスオプション」を選びます 次は main-image というファイル名にします そしてOKをクリックします この様に一つ一つのスライスに対して 名前をつけていくわけなんですけれども 一々メニューから選んで スライスオプションダイアログボックスを出して というのがすこし面倒くさい感じです そこでもう少し手順を単純化するために 「Web用に保存」の機能を使いましょう メニューバーの「ファイル」から 「Web用に保存」を選択します 「Web用に保存」の ダイアログボックスが出てきました 上に三つのタブがあります この中で元画像というのは 今 Illustrator で作っているー そのままの状態を見せてくれる画面です 最適化 こちらのタブは書き出した後に この様に変わりますよ という プレビューを見せてくれる画面です 例えば書き出した後の色数を すごく減らした場合 この様な見た目になりますよということを 予めプレビューで教えてくれます 2アップは元画像と書き出した後の画面を 同時に見比べることができる画面です ここでは最適化 書き出した後を プレビューする状態で 作業を続けていきたいとおもいます では画像の表示倍率を少し下げて 作業を進めていきましょう 左上に小さなツールパネルがありますので 「スライス選択ツール」を選んでおきます 上から2番目にあります こちらで先ほどつけたこの logo-robot main-image 以外のスライスに対して 名前を設定していきましょう スライスをダブルクリックするだけで このように「スライスオプション」の ダイアログボックスがでてきます この部分を image-robots にしてみたいと思います そして下の一枚の画像の部分を image-robot-single という名前に仮にしておきたいと思います それから右上 こちらを btn-search という名前にしておきます 今 自分で切り出した5枚のスライスに対して それぞれダブルクリックして 名前を付け終わりました 次にご紹介したいのは 個別のスライスに対して 別々のファイル形式を 選択することができるという点です 例えばこのロボットの ロゴマークの部分でしたら 今 「GIF」を選んでいますけれども 「JPEG」に変更することも可能です 次にこのメイン画像の部分は 例えば「PNG24」を選択します この下の3枚のロボット画像の部分は また「JPEG」にする といったように それぞれ違うファイルフォーマットを 個別に選択することができます またその下にある圧縮率ですとか 画質も個別に選択することができます この三枚のロボット画像の部分は中画質にしよう 上のロゴマークの部分は最高画質にしよう というように個別に変更することができます このどのファイルフォーマットを選ぶのが 一番最適なのかということについては 次のレッスンでご説明します 絵柄に応じてそれぞれ 最適なファイル形式がありますので 細かい部分については 次のレッスンでご説明をしましょう もう一つ気にしておいていただきたいのは ここでファイル形式を変えると この右下の部分でそのファイル形式で 書き出した時のファイルサイズを 見ることができるという点です このロゴロボットをGIF画像で 色を2色にした場合は2.517KB 色を256色に増やした場合は10.91KB という様に どのようなファイル形式と 圧縮率を選んだかによって その結果描き出される このファイルサイズが変わるよ ということを見ることができます 例えばメイン画像のところは JPEG で最高画質にしたい けれどもこのファイルサイズが206.8KB すごく重くなってしまうので では少し減らしてやや高画質にしておこう そうすると71.26KB まで ファイルサイズを削減することができる というようにファイル形式と圧縮率 そして書き出し後のファイルサイズを ご自分で色々比較検討することができます 次にご紹介しておきたい機能が ユーザー定義スライスだけを書き出すかどうか という設定です ユーザー定義スライスというのは 今この画面でブルーの数字が ついているスライスです こちらは私が自分の意思で 切り出したスライスです そしてそれ以外の このグレーの数字がついている部分は Illustrator が自動で埋めるために 作ってくれたスライスです ユーザー定義スライスだけ ここでいうと 5枚だけを書き出す設定にするのか それとも周りのグレーの部分も含めて 全て書き出すのか ということは この右下の こちらのドロップダウン メニューから選ぶことができます 「すべてのスライス」を選択すると 外側のグレーの数字の部分も含めて 全てを描き出してくれます 2番目のすべてのユーザー定義スライス こちらを選択すると 今ブルーの数字がついている 5枚だけを描き出してくれることになります では個別のスライスに ファイル名を付け終わりまして それぞれファイル形式も指定し終わりました そして「すべてのユーザー定義スライス」 青い部分だけを描き出す という設定が終わったところで 右下の保存をクリックします そして保存する場所を指定します ここではデスクトップに新規フォルダ 「 img 」というものを作って 作業をしていきましょう 名前のところも 任意で名前を つけていただいて結構です 今は仮に「web-images」という ファイル名にしまして保存をクリックします デスクトップを見てみましょう 先ほど作った新規フォルダ「 img 」の中に もう一つ「 images 」があります そしてその中に 先ほど スライスオプションで命名した通りのー 名前がついた 切り出された画像が 入っていることがわかります こちらをダブルクリックして プレビューしますと それぞれ指定した範囲内で 切り出されていることがわかります いかがでしたでしょうか このレッスンでは Adobe Illustrator で スライスした画像に対して 個別に名前 ファイル形式 圧縮率などを設定し 最適化して描き出す方法をご紹介しました 次のレッスンでは様々なファイル形式の 特徴と違いについて解説します

Illustratorを使ったWebデザインのテクニック

このコースではIllustratorを使ったWebデザインの方法を学びます。IllustratorをWebデザイン用の設定に変更するところから始め、各種端末向けのドキュメントやユーザーインターフェイスの作成ができるようになるまで順を追って説明します。このコースを見れば、整理されてエレガントなIllustratorドキュメントが制作できるようになるでしょう。

7時間03分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月09日

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

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

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