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

SVG形式のグラフィックを書き出す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorから書き出すことができるWeb用ファイル形式のひとつである、SVGの作成方法について、解説してまいります。
講師:
10:33

字幕

このレッスンでは Adobe Illustrator から 書き出すことができる Web 用ファイル形式のひとつである SVG の作成方法について 解説してまいります 一つの前のレッスンでご説明した三つの ラスター画像形式 GIF JPEG PNG と違い SVG はベクター画像ですので 拡大縮小しても描画の滑らかさは変わりません 今 ブラウザーで同じ画像を PNG で書き出したものと SVG で書き出したもの 両方表示してあります 一見 同じ様に見えますけれども 拡大していくと違いがわかります まず PNG の方は拡大をしていきますと 段々このように縁が ぼやけた状態になってしまいます では SVG のほうを拡大してみましょう このように拡大していっても エッジのシャープさ 滑らかさは変わらず そのまま拡大することができます ウェブ閲覧環境の画面サイズですとか ピクセル密度 色々な端末がありますので 多様化が進んでいる現状です このような現状で非常に注目されている ファイル形式が SVG です ただ2014年末の時点で それなりのシェアがあるブラウザ Internet Explorer 8 がSVG の描画に 対応していないという現状があります ですので どんなサイトでも気軽にSVG を ばんばん使えるというわけでは ないのですけれども SVG が表示されないときの代替の画像 代わりの画像を準備しておきながら 導入するサイトも確実に増えています Illustrator は元々ベクター画像を扱う アプリケーションとして 非常に有名で優秀であり SVG の作成にはとても強力なツールです ということでこの .AI Illustrator のファイルから SVG を描き出す方法について見ていきましょう 基本の描き出し方は非常に簡単で メニューバーの「ファイル」から 「別名で保存」を選ぶだけです そして「ファイル形式」を SVG にします 一番下にある SVG を選んでください そして保存場所を選んで 「アートボードごとに作成」のところに 着目してください 今一つしかアートボードがない ファイルですので こちらチェックしなくてもいいんですけれども もし複数アートボードがある場合には 「アートボードごとに作成」に チェックを入れて 「範囲」にチェック そして描き出したいアートボードをこちらで 指定する という作業が必要になります 今は一つしかアートボードがありませんので このまま進めていただいて大丈夫です 「保存」をクリックします 「SVG オプション」が出てきますので 設定項目を細かにみていきましょう 「SVG プロファイル」はデフォルトの 「 SVG 1.1」にしておいてください そして「フォント」の部分の設定です 絵柄のなかに文字が含まれている場合 今はアウトライン化がされていますので 特になにもしなくていいんですけれども もしアウトライン化されていない文字が 絵柄の中に入っている場合は注意が必要です フォントのデータを埋め込んでしまうと SVG が重くなってしまいますので 今から申し上げるどちらか一つの設定にして ファイルサイズを軽くしてください 一つは「文字」の項目を SVG にして 「サブセット」を「なし」にする方法です こうしますと 文字 フォントの情報を 埋め込まないデータになりますので そのフォントをもっていない端末で閲覧すると システムフォントが使用されます もしこのフォントのデザイン 見た目を 重視したい場合は 「文字」の部分を「アウトラインに変換」をすると そのフォントを持っていない端末でも デザインを保持したまま 表示することができます 次にチェックしたいのが 「CSS プロパティ」 こちらを「スタイル要素」にしてください 「エンコーディング」の項目は 「Unicode (UTF-8)」を選びます そしてこの二つの要素に着目してください 「フォント」を 「SVG」 にしておくと 「 エレメントの出力を制御」 「パス上テキストにエレメントを使用」 というチェックボックスがつけたり 外したりできる状態になります これはつけた状態にしておいてください そして「レスポンシブ」 こちらにチェックをつけますと SVG のファイルの中に 画像の サイズ指定の記述がない状態になります つまりブラウザで表示したときに 100%のサイズに広がる感じになります CSSを使ってファイルのサイズを 制御することは可能です 「レスポンシブ」のチェックを外しますと ファイルサイズ内にこの画像のサイズが 記述された状態になります これはどちらかお好みで 決めていただいて結構です 右下の 「OK 」を押すと SVG.svg というファイル名に変わりました 別名で保存されて拡張子が svg になった状態ですので このままファイルを閉じます デスクトップを見にいってみますと ここに今別名保存した ファイルがあることがわかります ブラウザで開いてみましょう 新しいウィンドウを開いて ここにつっこんでみます ひらきました 先ほど描き出した SVG.svg がこちらに 表示されていることがわかります 基本的にこの書き出し方法で 構わないんですけれども もう一つ 実は意外な方法で SVG を描き出すことができますので ご紹介しておきたいと思います Illustrator のファイルを開いて このオブジェクトを選択します 「選択ツール」で選択します そして編集からコピーします 次にテキストエディタを開きます Mac の方は テキストエディットなどでも構いませんし Windows の方はメモ帳など 文字のスタイルを 指定できない状態にしてください テキストエディットをお使いの方は 「標準テキストにする」 文字にスタイルをつけられない プレーンなテキストエディタで 先ほどコピーしてきた画像をペーストします そうすると 数字の羅列に変わったことが おわかりいただけると思います 実はイラストレーターのなかで オブジェクトをコピーして エディタに貼り付けると もういきなり これがSVG のファイルに なっているわけです このファイルを保存して 拡張子を svg にしてあげます では 「text.svg」という名前にしてみましょう 保存をします svg という拡張子を使用していますという アラートが出ますけれども そのまま 「 ”SVGを使用” 」で進めます ファイルを閉じます この「 text.svg 」がブラウザで無事に 表示されるか確認してみましょう ブラウザの中にこの SVG ファイルを つっこんでみますと 「 text.svg 」が表示されて いることがわかります イラストレーターからテキストエディタに コピペしたデータでも きちんとブラウザの中で 表示がされるということが お分かりいただけましたでしょうか そしてこの「text.svg」は テキストエディタで開きますと この様に数値の羅列になっていることが もう一度確認できます この様にコピー&ペーストしてできた SVGファイルですけれども 少し余分な記述があったりして ファイルサイズが重く なっている場合があります そのような時に使うツールとして svgo というツールをご紹介しておきます これは SVG ファイルの中の 余分な記述を削除して ファイルサイズを削減してくれる ツールなんですけれども svgo というツール そちらはコマンド入力で利用するツールです そういったCUI 、コマンド入力の画面に 慣れていらっしゃらない方は GUI、 グラフィカル ユーザーインターフェースで 作業できるバージョンを 作ってくださっている方が いますのでこちらを利用しましょう svgo-gui で検索をすると このツールを見つけることができます こちらからダウンロードをして さきほどの方法で作成した SVG ファイルを処理しますと 余分な記述を削除して きれいに軽量化してくれます 以上 最近注目の高まるファイル形式 SVG の画像データを Adobe Illustrator から 描き出す方法についてご説明しました

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

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

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

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

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

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