PR

ラスターイメージ(Photoshop)ベクターイメージ(Illustrator)と変換方法

ラスターイメージ(ビットマップグラフィックス)とベクターイメージ

ラスターイメージがPhotoShopでベクターイメージがIllustrator 

千葉名人、ラスターイメージ ベクターイメージって、なんですか?

ベクターイメージというのは、計算で描かれたグラフィックデータ。

ビットマップデータというのは、点々で描かれたグラフィックなんよ。

詳しくは、これも見て→ ウィキペディア 

主なソフトとして

☑ ベクターイメージはillustrator

☑ ラスターイメージは、photoshop

で作ったり扱うものなんよ。

それぞれ得意分野が違うから、同じadobeの画像処理ソフトでも2つのソフトにわかれているんよ。

千葉名人?

ん?なんだい、アシスタントの田中君。

わかりません。意味がわかりませんです。

あ~ん!耳子も、わかんなぁ~い!

大丈夫、カンタンカンタン!初心者のうちは、なんとなく、わかればいいんよ。

もっとカンタンに画像を使って説明するね!

☑ 画像Aがベクターイメージ

☑ 画像Bがラスターイメージ

だと思って見てください。

(※実際は両方ともラスターイメージのgif画像ですが、説明用にわかりやすく表現してあります)

ラスターイメージ ベクターイメージの比較とその違い

【画像A】
【画像B】
ベクターイメージ<illustrator>
拡張子 ai,eps,PDFのデータがベクターイメージデータが多いです
ラスターイメージ<photoshop>
拡張子 gif,png,jpeg,psd,bmpなどのデータはラスターイメージです

あっ、ラスターイメージの方がなんだが「ギザギザ」してるよ!

耳子ちゃん「いいところ」に気がついたね!

ラスター画像は、点々で描かれているから「画像を拡大」するとギザギザになってくるんよ。

それに対して、illustratorのベクター画像のほうは「どんなに拡大」しても綺麗でしょ

これが、ベクターイメージのすばらしい特質なんです(^^)

なるほど!ベクターイメージいいっすね!

さらに、ベクターイメージは解像度も関係ないんよ

ラスターイメージの場合「解像度」が低いと印刷した絵もギザギザになるんよ。

ベクターイメージの場合は、印刷してもなめらかでとてもキレイだよ!

さらに、illustratorなら線幅の拡大縮小も設定ひとつでカンタンにできちゃう!

だから同じ絵を色んなところで何度も何度も使い回せちゃうんよ\(^◇^)/

だからベクターイメージは素材集の元になるデータとしてもとても重宝されています。

なるほど!

☑ ベクターイメージは「拡大縮小しても画質が劣化しない」んすね!

しかも線幅を固定したまま拡大縮小できるから、何度もイラストデータを再利用して使いまわせる特性があるんすね!

そう!あとはadobeのFlashもベクター画像を扱えるからどんなに拡大縮小したりしても画像が劣化しないアニメが作成することが出来るんよ。

Flashで使うオブジェクトはIllustratorで作成して、swf形式で書き出してFlash側でそのまま読み込んでライブラリに登録して使う作業手順をします。

具体的にはFlashの「ムービークリップ」に「インクルード」し「ライブラリ」にして活用して使います。

さらにFlashは動画なのにとても軽量なデータになります。これもベクターイメージの特徴だね!

☑ だからIllustratorが使えると他のソフトで使えるデータが色々作れるから便利なんよ(^^ )

Flash単体でもイラストを作れますが描画機能はIllustratorのほうが圧倒的に高いのでIllustratorが重宝されます。

これは、他のソフトでも同じです。例えば、InDesignなどで使う図版やイラストはIllustratorで作成されます。ウェブで利用するロゴやアイコンやイラストやサイトのパーツ。

バナーやヘッダー画像などもIllustratorで作成してPhotoshopでベクターイメージとして仕上げ加工します。

☑ ラスターイメージでキレイが高解像度の画像にしたい場合は画像サイズや解像度を上げる必要があります。するとデータがそれに比例して重くなります。

ただし、ラスターイメージでなければウェブサイトなどで使える、png,jpeg,gifなどのデータにできないんよ。

だから、ラスターイメージに最終的になるケースが多いです。ラスター形式にするとサイズ変更すると劣化原因になりますが、フォーマットとしては、いろんなソフトや場面で使えるので重宝です。

でも元はIllustratorで作成したベクターイメージだったりするわけなんよ。

すばらしいじゃないすか!Illustrator !!

せやね!

でもillustratorって、それなりに使えるようになるまで、けっこう最初が難しいんよ。基本が一番難しいからね!

だからイラレ道場の初心者用講座で練習して、ちょっとずつトレースは上達すると好きなイラストやロゴ。バナーやアイコンをオリジナルデザインしたり、製図したりオリジナルグラフやキャラクター作成、漫画作成、アニメ作成の元になるベクターデータをなんでも作れるようになります!

すごいでしょ?

さすがIllustrator!すごいわーっ♪

ベクターイメージのillustratorってとってもスゴイんだね!

ベクターイメージとラスターイメージの違い、みんなもわかったかな?

ラスターイメージ(Photoshop)ベクターイメージ(Illustrator)の変換方法

☑ Illustratorの中で作成したベクターイメージをラスターイメージに変換する方法

>> Illustratorのラスタライズの方法と使い方「いきなり下絵」をスキャンなしで作る方法

>> Illustratoのウェブ用画像の書き出し「ラスター形式からベクター形式に変換」する方法

ベクターイメージ→ラスターイメージはIllustratorの場合は上記の方法で、「ラスタライズ」と「書き出し」機能を利用することで可能です。

ラスターイメージをベクターイメージに変換する方法

変換のような手段としてIllustratorの「オートトレース機能」があります。しかし、人間がトレースしたような線と面をキレイに持ったベクターデータの変換はまだ実現していません。

昔、ストリームラインというソフトがありました。ラスターイメージをベクターデータに変換する、Illustratorのオートトレース機能の元祖のようなソフトです。スキャナーで取り込んでストリームラインで変換して利用することで、ベクターの軽いデータになるわけです。

一応、「オートトレース機能」でベクターイメージにラスターイメージを変換することができます。

☑ しかし高品質のベクターデータを作りたい場合は、トレースをする技術そのものが現在も「とても重宝」されています

ちゃんとしたトレースができる本当のIllustratorの技術者は少ないです。そういう人はCADなどの製図系の方に沢山いる傾向があります。DTPなどの場合はあまり本格的にIllustratorを使えている人はいなかったりします。

ウェブの場合はロゴやバナーなどで重宝されるので、キレイなイラストを作成するのが上手な人が多い印象でが、トレースを基本からちゃんとできる人は案外少ないと感じました。

 

Illustratorのトレース(ベクターイメージの作成)は考えて判断する訓練が必要です

Illustratorのトレースは人間が目でみて、これは線。これは面と判断する部分が非常に多いんですね。

この判断は人工知能が発達しないと、自動でワンプッシュでは当面実現できないでしょう。

オートトレース機能だけで「高品質なトレース」ができるなら仕事がすごく楽になるし「ボロ儲けだわ!」と、かなり色々研究しました。

ラスターイメージをもっとも理想的なベクターイメージにできる状態を探し求めて、何度も何度もテストを繰り返しました。

その結果、上記のような結論にいたりました。

逆にこれは、Illustratorのトレース技術はこれからも重宝される技術です V (^_^ ※)

☑ だから、初心者用講座イラレ道場でトレースの練習しましょうね(^v^)/

自分で出来る人は自分のイメージ通りに好きなイラストを書けるので「ものすごく羨ましい」と言ってもらえたり、お仕事にも役立つ「お宝技術」となります!

コメント