IllustratorでWeb用に保存・保存領域の設定をするには
クラスメソッド株式会社山崎 基央
福田 寅成
2009/10/20
画像要素の印刷可能領域「アートボード」とは
Illustratorでは、書類を新規作成する際にアートボードの設定を行います。「アートボード」は画像要素の印刷可能領域のことです。最初はB5の大きさで作っていたものが、収まりきらなくてA4サイズに設定したいときや、もしくはA5の方がしっくりくることがあるかもしれません。そんなとき、最初に設定したアートボードを変更する必要があります。
図1の[アートボードツール]では、編集中の書類のアートボードの大きさを自由に変えられます(CS3までは、「トリムツール」と呼ばれていました)。
![]() |
| 図1 アートボードツール |
[アートボードツール]を選択すると、現在扱っているアートボードについての情報が画面上部に出ます。
![]() |
| 図2 アートボード詳細情報(画像をクリックすると、拡大します) |
ここの数字を入れたり、キャンバス上で選択中のアートボードの端をドラッグすることで、直接大きさを変更できます。
画面上部の数値変更機能を使うときはどこにアートボードの中心を持ってくるか、注意する必要があります。なぜなら、アートボードの変更は中心点を起点として行われるからです。
複数のアートボードを扱うには
CS3までは、1つのアートボードしか使用できませんでしたが、CS4からはアートボードを複数持つことができるようになりました。複数ページにまたがるリーフレットの作成や、ペーパー(紙)プロトタイプの作成などは、より容易に作成できるようになったのではないでしょうか。
複数のアートボードを持つことは簡単です。アートボードツールを現在グレーアウトされているキャンバス上でドラッグするだけで2枚目、3枚目のアートボードを作成できます。
![]() |
| 図3 複数のアートボードの作成(画像をクリックすると、拡大します) |
「SVG」としてWeb用に保存するには
[Web用に保存]ダイアログでは、現在選択されているアートボードについて書き出しが行われます。Illustratorでは、Photoshopと違い、「SVG」という形式で書き出せます。
SVG形式は、画像をベクタデータとして扱うことが特徴的です。SVGをサポートしているWebブラウザでは、ラスタとは違う、拡大してもギザギザにならない画像を再生できます。W3CによってSVG形式はオープン標準と勧告されているので、ベクタデータしか使わない場合は、ぜひ使用してみてはいかがでしょう?
| D89 デザインTips インデックス へ |
TechTargetジャパン
- 次のモバイルアプリはどのフレームワークで作る? (2012/5/24)
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する - 「LESS&専用エディター」でCSSをシンプルに書こう (2012/5/23)
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう - 学校が世界一のデジタル環境になったら (2012/5/18)
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない - 1000万ドル調達も夢じゃないクラウドファウンディング (2012/5/15)
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ
|
|
キャリアアップ
スポンサーからのお知らせ
- - PR -



