Print
Adobe Illustrator 10 新機能活用 - オブジェクトベースのスライス page: 1 2
4 テキストにSVGフィルタを適用する

テキストなどベクトルベースのグラフィックには、ライブSVG効果を適用することができます。この機能を使うと、ドロップシャドウやぼかしなどの効果をベクトルアートワークに追加できます。SVG効果は、そのファイルがブラウザ内で表示されるまでラスタライズされないので、データサイズが小さく、どのようなサイズでも美しく見えます。SVG効果を適用するには、オブジェクトを選択して、「効果/SVGフィルタ」から好みのものを選択します。また、エフェクトをかけたテキストでも文字として認識されますので、テキストのコピーが可能です。

SVGフィルタを適用する
llustrator10 新機能活用


1.ライブ変形機能
 -エンベローブ ツール
 -ワープ ツール
 -リキッド ツール
2.シンボル機能
 -シンボルツールの使用
 -SWF形式への書き出し
3.オブジェクトベースのスライス  
4.データ駆動型グラフィックス  
5.紙色のシミュレート  

5 スライスをSVG形式で保存する

4でSVG効果を適用したテキストをベースに「オブジェクト/スライス/作成」」でスライスを作成し、Web用に保存します。このテキストデータにはSVG形式を選択しましょう。

スライスをSVG形式で保存する

このようにライブSVG効果を適用し、SVG形式で保存したテキストは、ブラウザ上で表示してもテキスト属性が失われません。このとき、SVGフィルタはクライアントサイドのWebブラウザで適用されるので、サーバ側のデータサイズが大きくならないというメリットもあります。


フォントも埋め込まれ、ドロップシャドウも追加されているが、テキストの選択ができることを確認してみよう

※画像を表示するにはSVG Viewerが必要です。ダウンロードはこちら

6 手作業でスライスを作成

スライスは手作業でも作成できます。ツールボックスでスライスツールを選択し、アートワーク上でドラッグすると、スライスが作成されます。


Illustratorで書き出したサイトを見る
SVG形式画像の特長

SVGメニュー
SVGメニュー
SVG形式の画像上で右クリック(Win)またはcontrol+クリック(Mac)でSVGメニューが表示される

テキスト選択状態
テキスト選択状態
文字情報が保持されているのでテキストのコピーが可能

ズームインしたSVG画像
ズームインしたSVG画像
SVG形式の画像はWeb上での拡大・縮小が可能。地図情報などの細かい情報も確認でき、ベクターフォーマットなのでどのようなサイズでも鮮明に表示される




トップへ戻る
back