画像ソフト:Illustrator  安倍

Illustratorは、Adobe社 PhotoShopの兄弟ソフトで、画像をベクタ(ドロー)で処理をする。ベクタ画像とは、直線、曲線、円形、などの基本図形の集まりとして表現する。
拡大しても劣化はなく解像度という概念はない。
この特徴から、文字やイラストに適している。 写真や絵画のビットマップ(ラスター)画像処理をする PhotoShop とともに、Adobe社の2大画像処理ソフトとして老舗です。
単純なボタンの作図例を下に示す。 左図上の小さな画像を幅800pixel に拡大後にjpeg 変換-保存したものです。
下図の変換後の画像はjpegですから、これをさらに拡大すると画質は低下します。


このように ベクタ作図では拡大しても解像度の劣化はない。  でも、こんな単純な図でも***.aiの容量はなんと1.1MB もあります。
上のjpg図(ビットマップ圧縮)はどちらもたった 9KB です。
ちなみに、(ビットマップ非圧縮)PhotoShop(***.psd)ファイルに 変換したら90KB でした。

すなわち、この例では、ファイル容量比は
(ビットマップ圧縮)jpg :(ビットマップ非圧縮)psd :ベクタ ai
= 1:10:100 で、ベクタのIllustrator容量は大きい。

大きい理由の一つは、Illustratorでは PhotoShop と同じくレイヤーを重ねて 加工できますが、重ねたレイヤーを統合することはできない。
統合するとベクトルが維持できないからです。 また同じ理由でファイル容量を小さく圧縮することもできない。
ここがビットマップ加工 の PhotoShopと違うところです。

紙印刷の場合、Illustratorは巨大ファイルのまま印刷業者に渡しますが、 HPの場合は、閲覧者がIllustratorソフトを持っていたとしても、
これを そのまま掲載するのは無理ですし、メール添付も無理です。

Illustratorへのビットマップ画像の挿

Illustratorへビットマップ画像を挿入する場合、挿入後に画像を縮小しても元の画像データは保持されるので、無駄にメモリを消費する。
Word の場合と同じ。 従って、挿入前に画像を縮小しておくことが望ましい。

ファイル受け渡し と 互換性

Illustrator のファイル: ***.ai は多くの部品で構成されていて、その扱いはVersion によって微妙に異なり、自身のVersionや
Windows のVersion(XP/VISTA/7)によっては構成する部品が正確には 再現されないことがあるようです。
この互換性の問題はPhotoShop以上らしい。
また、フォントが分離され、別PCで ***.ai を開けるとフォントが再現されないことがある。
このため、WEB用目的で他人に渡す場合はJPEG など、他の形式に変換して渡すと無難である。

なお、ベクタ形式 ***.ai から ビットマップ形式への変換は可能だが逆の変換はできない。変換ソフトはあるが不正確である。

JPEG 形式に変換
「ファイル」 → 「書き出し」 または 「WEB用に保存」 → JPEG  あるいは、
「ファイル」 → 「保存」 → PDF で、JPEG や PDF で渡すことが望ましい。
「書き出し」でjpeg保存する場合はサイズ指定はできないので以下の方法がよい。

方法: Illustratorで、
「ファイル」→「WEBおよびデバイス用に保存」→  画面右端に作業窓が表示されるので、ここで
・画像形式をJPEGにする。
・その下に「画像サイズ」指定があるので、これをクリックして
幅をピクセルに指定。→ 保存 で指定ピクセル幅のJPEG画像が保存される。

JPEGへの変換例:

Illustrator ファイル ***.ai を開ける。  (ボードA)
・ここの中の画像の1つを選択(赤い枠ができる)  
・編集 → コピー
・ファイル → 新規  ピクセル指定し、幅、高さを設定して新しいボードを開ける。(ボードB)
・このボードB で、 編集 → ペースト
・幅、高さを ドラグしてボードのサイズに合わせる。(画像を拡大しても画質の劣化はない。)
・「ファイル」 → 「Webおよびデバイス用に保存」 。

PhotoShop との連携
Illustrator で送られてきた ***.ai が開けられない場合、あるいは部品画像が欠けた場合、PhotoShopで開けられることがある。

例: ***.ai を
・Illustratorで読込み →×
・PhotoShop で読込み →***.ai 保存 → Illustratorで読込み →×
・PhotoShop で読込み →BMP保存 → Illustratorで読込み→ ◎ ( Illustratorで読込み後、ツールBOXの X,Y,W,値でパレット幅を変える)

Illustrator の HomePage への応用:

ページ全体を Illustratorでデザインすると自由度が増す。 ページ全体を画像にすると大きな容量になるのでかつては避けられていたが、
ブロードバンドの普及に伴いページ全体をIllustratorで1画像にすることが可能になった。
Homepage Builder の「どこでも配置モード」でも配置を自由にできるが、絶対座標でしか位置決め できないから小型モニター、大型モニター、両者に対応するには画面左端 に寄せる必要がある。
Illustratorでページ全体を1画像にすればそのような制約はない。
ページ内の画像文字や部分画像からのリンク先はクリッカブルマップ(DreamWever)、イメージマップ(Homepage Builder )でできる。
この場合、画像文字は検索対象にならないのでソースの中にキーワードやコメント文字で入れるとよい。

Illustratorは紙印刷用が多いので標準設定(デフォルト)は CMYK になっている。 CMYKは、紙印刷用の4原色で、webは、RGBの3原色です。
CMYKで作図した後にjpeg(3原色)に変換すると、色調が若干変わるので初期設定は「web」または「基本 RGB」にしたほうがいいようです。

Illustratorは、ベジェ曲線 ※)を使って自由にイラストが描けるプロ用ソフトとして有名でしたが、今では殆どの画像ソフトがベジェ曲線を描けるようになり、その特長は薄れたようですが、下覧に示すような3D処理や、写真からの自動トレース機能が充実しているようです。


※) ベジェ曲線: 1).始点の位置、 2).終点の位置、 3).始点からの方向、 4).終点への方向、の4条件を与えることにより、その間のなめらかな曲線を描く手法。

 

 原画写真
↑Illustratorの 「ライブトレース」によによる加工 ↑PhotoShop /
PhotoShop-E
のフィルター加工(スケッチ − スタンプ)
Illustratorの 「ライブトレース」はベクタを繋いでトレースする。
PhotoShop の「フィルター」と比べると写真に近いイラスト画となるようだ。
  ← 3D作図機能はVer.CS以降
  ただし、テキスト文字フォントのみ。
 



← グラフ作成機能

Excel 自身にもグラフ作成機能があるし、Excel のほうがデータ変換が不要だから簡単です。
それに、イラストを使った棒グラフの場合、Illustratorでは既製の画像イラストは使えず自作する必要があるらしい。不可解。

 

Version10 以降の機能で、重ねた画像の透明度を指定して下層を見えるようにできる。
ウインドウメニュー → 透明  パレットで数値を設定。

 


ホームページ作成体験

 

inserted by FC2 system