Skip to main content
Participating Frequently
October 2, 2022
Answered

少しだけ傾けた線を綺麗にくっきり表示させたい

  • October 2, 2022
  • 2 replies
  • 4558 views

直線や、ある程度傾けた線は綺麗にかけるのですが、

添付画像下のような8度ほど起こした線、8度ほど倒した線はもやもや、ギザギザが強く、くっきり表示されません。

 

印刷物ではなく、パソコン上で綺麗にくっきり表示されるように作りたいのですが、

解決方法をご存知の方がいらっしゃいませんか?

それとも、ピクセルで表示されるパソコン上では直せないのでしょうか?

 

アンチエイリアスはオン、ラスタライズ高解像度化も試しましたが、気にならないレベルまで綺麗にはなりませんでした。

 

 

環境

製品:illustrator 2022(ver26.5)
OS:macOS Monterey 12.4

This topic has been closed for replies.
Correct answer Ckun

やはり「拡大」をなさっていたのですね。

 

新たにご投稿いただいた「拡大していない表示」を拝見しますと、これは正常な範囲です。ギザギザに見えてしまうのは、ピクセルで表示されるラスター画像の限界です。

 

添付していただいた画像を大きく拡大した画像を添付します。

段差は1ピクセル四方ですから、これ以上滑らかにすることは原理的に不可能です。

 

※白から灰色のグラデーションのピクセルが段差を埋めるように並んでますが、視覚的にがたがたが目立たないようにする処理です。これが無いとシャープにはなりますがガタガタがより目立ちます。

線の傾きが小さい場合、変化の割合が小さくなりますから、有限のピクセル数で画像を構成するラスター画像では、どうしても段差が目立つようになります。

 

 

最終用途がわかりませんのでとりあえず一般論ですが、Retinaディスプレでは通常倍の密度で表示されるかと思いますので、例えばWeb用映像で通常のディスプレイで800×600ピクセルで表示させたい写真などのラスター画像を1600×1200で作成して50%で表示させると、Retinaディスプレイ上できれいに見えるといったテクニックはありますね。

2 replies

Ckun
Community Expert
Community Expert
October 2, 2022

私は主にPremiere Proを使用している者でIllustratorは少ししか使用していにのですが、少し気になりましたので返信してみます。

 

添付していただいた画像を見てみますと、アンチエイリアス処理されたうえで400%の拡大がされているように見受けられます。

 

このスクリーンショットはどのような状況でとられたものでしょうか。例えば、Illustratorの表示ではなく、書き出した何らかの形式(PNGなど)の画像を、何らかのアプリケーションを用いてMacのRetinaディスプレイで表示したもののスクリーンショット、といったことがわかりますと、原因が分かりやすくなるのではないかと思います。

5FFB3999Author
Participating Frequently
October 2, 2022

Ckunさん、お返事とアドバイスをありがとうございます。

 

先ほど投稿致しましたスクリーンショットは、illustratorのスクショを拡大したもので、表示はMacのRetina 5Kディスプレイです。

 

拡大せずに表示すると、こんなかんじです。

画像上の直線に比べ、下の斜め線はギザギザしています。

illustrator上で表示しても、pngとして書き出しても同じ状態になってしまいます。

 

Ckun
Community Expert
CkunCommunity ExpertCorrect answer
Community Expert
October 2, 2022

やはり「拡大」をなさっていたのですね。

 

新たにご投稿いただいた「拡大していない表示」を拝見しますと、これは正常な範囲です。ギザギザに見えてしまうのは、ピクセルで表示されるラスター画像の限界です。

 

添付していただいた画像を大きく拡大した画像を添付します。

段差は1ピクセル四方ですから、これ以上滑らかにすることは原理的に不可能です。

 

※白から灰色のグラデーションのピクセルが段差を埋めるように並んでますが、視覚的にがたがたが目立たないようにする処理です。これが無いとシャープにはなりますがガタガタがより目立ちます。

線の傾きが小さい場合、変化の割合が小さくなりますから、有限のピクセル数で画像を構成するラスター画像では、どうしても段差が目立つようになります。

 

 

最終用途がわかりませんのでとりあえず一般論ですが、Retinaディスプレでは通常倍の密度で表示されるかと思いますので、例えばWeb用映像で通常のディスプレイで800×600ピクセルで表示させたい写真などのラスター画像を1600×1200で作成して50%で表示させると、Retinaディスプレイ上できれいに見えるといったテクニックはありますね。

r360studio Kazue Mori
Community Expert
Community Expert
October 2, 2022

5FFB3999さん、こんにちは。

 

念のための確認です。Illustratorには、「表示>ピクセルプレビュー」というモードがありますが、そちらがチェックされてたりしませんか?

 

もしも、ピクセルプレビューがチェックされていると、ベクターがビットマップとして表示されているので、ギザギザに見えることがあります。

 

スクリーンショット的に、ピクセルプレビューほどはギザギザではなさそうなのですが、念のためにお伺いしますね。

5FFB3999Author
Participating Frequently
October 2, 2022

Kazue Moriさん、こんにちは。

お返事いただき、ありがとうございます。

 

ピクセルレビューにはチェックが入っていないようです。

 

r360studio Kazue Mori
Community Expert
Community Expert
October 2, 2022

5FFB3999さん、お返事ありがとうございます。

 

↓が、私の環境(Win10)のIllustratorで表示した状態(400%拡大・表示>GPU表示・表示>オーバープリントプレビューもピクセルプレビューもOFF)ですが、これぐらいのギザギザ度合いです。Illustratorの表示に関しては、標準でこんな感じかなと思います。

 

<元のAiデータ>
https://r360studio.com/adobecommunity/p13239525/Illustrator.ai

 

また、書き出した画像データですが、PNG形式の場合はビットマップ画像なので、どうしても荒れてしまいます。

 

形式が許せば、SVG形式で書き出せばベクター形式となるので綺麗に表示されます。

 

<PNGの2倍拡大とSVGの表示の違い>
https://r360studio.com/adobecommunity/p13239525/

※PNGもSVGも↑の「元のAiデータ(500×500px)」から書き出しています。SVGはベクターのため原寸サイズが指定されておらず、表示の時に1000pxを指定しています。


以上、解決のヒントに繋がりますと幸いです。
.
※参照元のデータは、2週間ぐらいしたらサーバーから削除します。