Aiでアイコンを作成してWEB用に変換するとき線が外側になったり内側にはみ出るのを防ぎたいのですが方法をご教示ください

[浩喜大4666172]

Ai（CC）でアイコンを作成してタッチパネル用にPNGに吐き出しています。

その時に線の中心（色の濃いところ）が外側に来たり内側に来たりします。

線幅ツールを使って調整していますが全部が内側や外側にきれいにそろいません。

うまくそろえる方法をご教示ください。

[assause]

まず気になるのは、ピクセルグリッド関連の設定をどうされているかという点があります。

整数値ではなく端数が出ているのであれば、その影響が出る可能性があるためです。

あわせて、具体的なバージョン（CC 2017.1など）やOSバージョン等の記載も必要です。

[浩喜大4666172]

OSはWin7　バージョンはCC2017です。

アートボードは40ｘ40ピクセルで設定しております。

線の太さは整数であればよかったのですがかなり小さくなるため視認性とバランスを見て1.4ピクセルにしております。

アートボードのXYの位置も端数なしで設定しております。

ある程度はみ出ることは想定しておりますが縦線ですと左側に出たり逆になったりします。

はみ出る方向を線幅ツールでコントロールしようとしましたがコの字型のものはきれいにそろいませんでした。

以上でご理解いただけましたでしょうか。

よろしくお願いします。

[assause]

1.4pxは、数値上は入力できますが、実際のピクセルとしては処理できないものになってしまいます。

ピクセルグリッド関連もそうですが、そこは整数値で必ず設定するようにしてみてください。

特に今回の場合、極小サイズのピクセル数なので、影響度は非常に高いと思います。

[浩喜大4666172]

了解しました。

先にピクセルの端数が出ないようなデザインをするべきでした。

ありがとうございました。

[monokano]

視認性とバランスを見て1.4ピクセルにしております。

それはDTPの世界の発想です。

ディスプレイ表示の世界は1ピクセルが最小単位であって、端数は（きつい言い方をしますが）無駄です。

[浩喜大4666172]

ありがとうございました。

ディスプレイのデザインを行うときはピクセルを考慮して行うべきでした。

[kawacoco]

1pxが最小単位なので、細く見せたい場合や太く見せたい場合は明度を変えるテもありますよ。
同じ1px幅の線でも#000000より#808080のほうが細く見えます。

また、整数であるだけでなく特に四角形の場合、パスの内側外側にも強く影響しますのでご参考までに。

[浩喜大4666172]

見え方にかなり差が出ますね。

参考になります。さっそく試してみます。

ありがとうございました。

[monokano]

以下のページを参考にしてください。

IllustratorでWeb向け、ピクセルベースの作業を行う上での設定（完全版） - DTP Transit

[浩喜大4666172]

ご教示いただいたものを試してみます。

ある程度設定はしていたのですがところどころぬけがあったようです。

ありがとうございました。