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

Web用のファイル形式を理解する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorの「Web用に保存」をする時に指定できるファイル形式の特徴と違いについて、お話ししていきます。
講師:
09:59

字幕

このレッスンでは Adobe Illustrator の 「 web 用に保存」する時に指定できる ファイル形式の特徴と違いについて お話をして行きます ここでお話しするファイル形式は Illustrator だけではなく Photoshop ですとか  他のアプリケーションで書き出す際にも 同じ知識を応用することができます 今 「 web 用に保存」の画面を開いています 右上のドロップダウンメニューを開くと 中に4つファイル形式が入っています 最近の web サイト製作で利用されている 画像のファイル形式は ここでみられるように GIF JPEG PNG それから ここにはありませんけれども SVG その4種類が ほとんどの割合を占めています このうち SVG だけは「 web 用に保存」から 書き出すことができないのと 実は自由に縮小拡大が可能な ベクター画像ですので 別のレッスンで詳しく ご説明することにします このレッスンでは残りの3つ つまり GIF JPEG PNG こちらの3種類のラスター画像 ビットマップの画像のファイル形式について お話をして行きます まず1つ目は GIF です GIF の最大の特徴は書き出した時に あらかじめ指定した256色 こちらだけをファイル内にもつことが できるということです 色情報を256色しか持てないということは 階調が豊かな写真などを 圧縮するのには 向いていないことがお分かり いただけるかと思います 今ご覧いただいているような 色数が少なくて はっきりしているイラストレーションですとか アイコン そういったものを ファイルサイズを小さく 書き出すことに非常に長けている そういったファイル形式です また GIF は透明な部分を もつことができます 今このロボットのロゴマークの部分は 透明な所がありませんので 透明な所をつくってみましょう 背景画像がない状態に変えてみて もう一度「 web用に保存」をして 確認をしてみます このロボットのロゴマーク部分を GIF にすると 先ほどとは違って 後ろが市松模様に変わりました Illustrator や Photoshop で この灰色の市松模様の部分は 透明ですよ という意味になっています 今背景に何もオブジェクトがありませんので 透明な部分をもった GIF 画像を 書き出すことが できるよ というプレビュー画面です これが 背景が赤いHTMLに この画像を貼り付けますと ここが赤になりますし 背景が白でしたら ここが白になるというように 使うことができます GIF の透明な部分というのは 透明もしくは透明ではないという0、1の情報で 半透明の部分を持つことができません ですので透明なグラデーションですとか そういった複雑な形は 縁がガタガタになって 汚くなってしまいます やはり色数が少なめ この縁が はっきり分かれているような こういった絵柄に向いています また余談ですけれども GIF は 中にアニメーションのー コマの情報を持つことができます web サイトを閲覧しているときに ピコピコ動くアイコンですとか もしくは写真の1部だけが ループして動いているシネマグラフなど そういった画像を見たことが あるかもしれません そういうアニメーションの 情報をもっている画像 それも GIF で書き出すことが’できます では次に JPEG について見て行きましょう JPEG は圧倒的に写真を圧縮するのに 向いてるファイル形式です ただし非可逆性圧縮 元に戻すことができない圧縮の形式で JPEG の画像を開いて 編集して保存し直すたびに 画像が劣化するという特徴があります ですけれども その分 ファイルサイズが軽くできるー という特徴があります ですので大きめの写真を なるべく軽くしたいという時には JPEG を使うのがおすすめです さらに JPEG は この ドロップダウンメニューにありますように 画質を細かく設定することができます たとえば低画質を選びますと この左下を見ていただくと 書き出した後のファイルサイズを 確認することができるんですけれども 28.06kB にすることができます 非常に軽くなりますけれども 拡大してみますと・・・ 行き過ぎてしまいましたので もう一度拡大をしてみます 手の所を拡大してみますと 何か四角い筋のようなものが 浮いているのが分かります これは JPEG の画質を 下げすぎたときに出てくるー ブロックノイズと呼ばれる模様です こちらが出てくると美しくありませんので もう少し画質を上げてあげます やや高画質にするとブロックノイズが 目立たなくなってきました そしてファイルサイズが70.66kB になる このように「 web用に保存」の ダイアログボックスでは 画質がどれくらい落ちるかということと ファイルサイズを どれくらい軽くできるかということを バランス良く確認しながら 設定して行く必要があります では最後に PNG のファイルフォーマット ファイル形式について 確認をして行きましょう このロボットの画像で確認をしてみます PNG ですけれども 後ろに8という数字がついたものと 24がついたものの2種類あることが お分かりになるかと思います PNG の8を選びますと 実はこれは GIF と非常によく似ていまして 256色だけをファイルの中に 持つことができる そういった特徴を持つファイル形式です じつは PNG は GIF が圧縮技術の 特許の問題で論争になったときに 代わりになるファイル形式として 開発された歴史があります ということで PNG8 は256色の色を持つという意味で GIF と似た部分があります そしてPNG24 こちらのほうは フルカラーを持つことができます さらに透明な部分を持つこともできます 透明な部分の情報を持つというのは 先ほど GIF でもお見せしましたけれども PNG24と GIF の透明な部分については 明らかに違いがあります 違うファイルを使って ご説明をして行きましょう こちらにあるのはピンクから透明に向かって グラデーションになっている そういうオブジェクトのファイルです これを「 web用に保存」した場合 GIF と PNG24では 明らかに違いがあります まずは GIF で確認して行きます 拡大をして行きますと この透明な 市松模様の部分からいきなり白 そしてだんだんピンク色に変わって行く というような見栄えになっています 先ほどお話ししたように 透明か透明でないかという情報を 0か1 半透明の部分を持てないという 情報の仕組みになっていますので このような見た目になってしまっています ではこれを PNG24に変えると どうなるでしょうか 市松模様がきれいに透けたグラデーション こういったものが書き出せることが お分かりになるかと思います この状態で 下に いろいろな画像が入ったとしても きれいにピンク色の グラデーションがかかった状態で 画像を重ねることができます PNG24のファイル形式ですと このきれいな半透明状態を 作ることができる ということを 覚えておいてください その特徴を上手に使うと 背景にどんな色が来ても きれいに縁がなじむような画像を 作ることができます 以上 Adobe Illustrator で 「 web用に保存」をする時の ファイル形式 GIF JPEG PNG の特徴と種類について お話をしてきました 次のレッスンでは もう1つ残ったベクター画像形式の SVGについてお話いたします

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

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

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

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

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

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