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

アートボードを利用して画像を書き出す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、「スライス」の機能を使わずにAdobeIllustratorからWeb用の画像を書き出すことが可能な「アートボードを使った画像書き出し」のテクニックについて、ご説明していきます。
講師:
11:42

字幕

このレッスンでは スライスの機能を使わずに Adobe Illustrator から Web 用の画像を 書き出すといったことが可能な アートボードを使った画像書き出しの テクニックについてご説明します Illustrator では スライスを 使った画像書き出しの他に 標準の機能として アートボード単位で 画像を書き出すことが可能です 特にPNGとSVGを楽に書き出す ことができるので Web デザインの中でこの2つの画像形式を 多く利用する場合にはお勧めの方法です 早速やっていってみましょう まず大切なのは この出来上がった Web デザインのモックアップに スライスが1つもない状態にして おいていただくということが重要です もしスライスをすでに 切ってしまった場合には メニューバーの「オブジェクト」から 「スライス」 そして「全てを削除」 こちらを選んで下さい そうしますと スライスがない綺麗な状態で 作業を始めることができます では アートボードを作っていきます 少し拡大をして作業を進めましょう このロボットのロゴマークのところ ここにアートボードを作りたいと思います この全体の大きなアートボードの中に 小さなアートボードを作って それを書き出すというイメージです レイヤーでコンテントのレイヤーにロックが かかっていませんので こちらを選択します そして「塗り」をなし 「線」がある状態に すると作業しやすいと思いますので この書き出したい部分を囲むように 長方形を作ります そして この描いた長方形を選択した状態で メニューバーの「オブジェクト」から 「アートボード」 「アートボードに変換」を 選んで下さい こうすると 描いた長方形が アートボードに変換されます この方法で作業すると アートボードがちょっとずれてしまう ということもあるかもしれません そのような場合は この目的のオブジェクトを 選択した状態でー アートボードツールを選びます そしてプリセットの部分を開いて 「選択オブジェクトに合わせる」を 選んで下さい そうしますと アートボードが今選んでいる オブジェクトにぴったりとフィットします この作業が終わりましたら 選択ツールに戻します もう1つアートボードを作ってみましょう 次のアートボードはー この写真の部分にしてみます 写真の部分に長方形を描きます 3枚セットで長方形を描いたら メニューバーのオブジェクトから 「アートボード」 「アートボードに変換」にします そして写真とぴったりサイズを フィットさせるために写真を選択して アートボードツールに持ち替えます 次にプリセットのプルダウンメニューから 「選択オブジェクトに合わせる」にすると ぴったりフィットします 普通の選択ツールに持ち替えます 今 大きなアートボードの中に小さな アートボードを2つ作ってみました このロゴマークの部分と写真3枚の部分です これを書き出すために アートボードに名前を付けます アートボードパネルを開いて下さい アートボードのパネルが見当たらない方は メニューバーの「ウィンドウ」からー 「アートボード」を選択します そして今 作ったアートボードはー こちらと こちらですので それぞれファイル名に変換するための 名前を付けます こちらのロゴマークのところの アートボードは 「Logo」にしましょう そしてこちらは 「photo」 にしておきます アートボードに付けた名前は 後ほど書き出した時の ファイル名の一部分になります 拡張子を付けなくて結構ですので 分かりやすい名前をつけておきましょう ここまで設定ができましたら まずはPNGで書き出してみたいと思います アートボードを使って PNGで書き出したい時は メニューバーの「ファイル」から 「書き出し」を選びます 「書き出し」です 「書き出し」を選びましたら 保存先を選択して この名前の部分 これが各画像名の 接頭辞になる部分ですので きちんと意味を考えて付けます 例えば 「Imgー」 ハイフンは必要ないですね 「Img」だけにしておきます そして「アートボードごとに作成」に チェックを付けて 先程 私が作ったのが 2番目と3番目の アートボードでしたので 2から3のアートボードを書き出すよ という設定にします 右下の「書き出し」をクリックします 「PNGオプション」がでてきましたら 解像度は「スクリーン72ppi」を選択して 背景色は透明にしておきます そうしますと透明に抜けている部分が あるような絵柄でしたら きちんと抜けて作成することができます 「OK」をクリックします デスクトップに2つの画像が 書き出されました アートボードを作ったところの画像が きちんと書き出されていて ファイル名が「Img」 書き出しの時に名付けたファイル名が 前半について アートボードに付けた名前が 後半に付くというルールで命名されています もう1つの方も確認すると 「Img」が頭についていてー 「photo」アートボードの 名前が後ろに付いた状態です きちんと2つのアートボードが 書き出されていることが分かります アートボードを使ってPNGファイルを 書き出すことができましたので 次はSVGファイルを書き出してみましょう もう一度 同じ Illustrator ファイルを 開きます 一度ファイルを閉じます そしてもう一度開きます 全体を表示させます では次に このロゴとフォトの部分の アートボードをSVGに 書き出してみたいと思います SVGにする時は 別名で保存です メニューバーのファイルから 「別名で保存」を選びます そして ファイル形式をSVGにします 保存先を選択して SVGの名前もー これもファイルの名前に付く 接頭辞になりますので 例えばここ「svg」にしておきましょう そして「アートボードごとに作成」で やはり2番目と3番目のアートボード この小さな2つのアートボードを 書き出したいので 範囲指定をします 「2−3」にすると 2つ目と3つ目のアートボードを 書き出すという意味になります 「保存」をクリックします 「SVGオプション」 こちらの設定ですけれども SVGプロファイルは「1.1」 フォントは文字の部分が「SVG」 サブセットは「なし」 CSSプロパティは「スタイル要素」 エンコーディングが「Unicode UTF-8」 「< tspan > エレメントの出力を制御」と 「パス上テキストに< textPath > エレメントを使用」にチェックが付いた状態 ここまでチェックしたら 「OK」をクリックします 書き出しが終わりましたので確認をします デスクトップに指定した通りの ファイルが表示されています 1つが「svg_photo.svg 」 1つが「svg_logo.svg」です ここまでPNGとSVGの書き出し方法に ついてご説明しましたけれども 最後にサラッと それ以外の JPEG や GIF への 書き出しもできるということを ご紹介します このアートボードを JPEG ですとか GIFに書き出したい場合は 選択ツールを使って 対象のアートボードをクリックします クリックをするとアートボードの淵が 少し濃くなることが お分かりいただけますでしょうか 少し濃くなった状態で メニューバーの 「ファイル」から「Web用に保存」をします ここで 対象のアートボードだけが 表示されていればオッケーです もし そうなっていない方は 「アートボードサイズにクリップ」 こちらにチェックが付いているかどうかを 確認して下さい 「アートボードサイズでクリップ」に チェックが付いていると 今 選択した小さなアートボードだけが ここに表示されます そして ここで JPEG ですとか GIF を 選択して書き出すことができます 保存を押すと 保存場所を聞いてきますので 例えば「logo.jpg」という ファイル名を付けて保存をします 確認すると 今書き出した画像がこちらに きちんと出来上がっていることが分かります ここまで このレッスンでは Adobe Illustratorで スライスの機能を使わずに Web 用の画像を 書き出すということが可能な アートボードを使った画像書き出しの テクニックについてお話ししてきました ご自分の Web サイトのデザインですとか 書き出したいファイル形式に応じて スライスと使い分けてみて下さい

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

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

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

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

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

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