ブログのアイキャッチをイラレの練習も兼ねて自分で作っているんですが、画像を書き出すとなんか微妙にアートボードのサイズよりデカくなるという謎の現象に見舞われていました。アートボードのサイズは横600pxの縦300pxで指定してるのにも関わらず、横が611pxの縦331pxみたいな感じで微妙にズレていたんですね。

別に大して問題があったわけではないんですが、なんとなくそのままにしておくのも気持ち悪かったので、解決する方法はないのかな～と思って調べていたらYahoo!知恵袋で直し方を紹介してくれていました。いつもは2ch的な感じで見ているんですが、たまに真の知恵袋が混ざっていることもあるので侮れないですね。

方法１

Yahoo!知恵袋で紹介されていた方法は、[ファイル]→[書き出し]→[書き出し形式]を選択してアートボードごとに作成にチェックを入れればOKです。

ここにチェックが入っていないと、アートボードの範囲をはみ出した部分まで書き出し範囲として認識されてしまうっぽいです。僕のようにアートボードよりデカめの長方形とかを設置して背景色として使っていたりする場合は、特に似たような状況になりがちだと思うので注意したほうがいいです。

ただ、このやり方だと[uhouho_アートボード１.jpg]みたいな感じで、画像名に[_アートボード１]とかの余計な文字が付けられます。このやり方を知ってしばらくは我慢してリネームしていたんですが、先日GatsbyをアップデートしてmicroCMSから画像名に日本語が入っているものを引っ張れなくなったので、次のやり方に変更しました。

方法２

現在は、[ファイル]→[書き出し]→[Web用に保存(従来)...]→[保存]というやり方にしています。

この方法だと画像名の後ろに余計な文字がつくこともないので、リネームする手間もかかりません。

また、上の画像のようにデフォルトで[アートボードサイズでクリップ]にチェックが入っているとは思いますが、入っていない場合にはチェックを入れないとアートボードをはみ出したオブジェクトの部分まで画像サイズに含まれてしまいます。

また、画像を保存するフォルダのパスや画像名に日本語などが使われていると、上の画像のように[保存されるファイルの中に、ラテン文字以外の文字が含まれています。これらのファイル名と互換性のないWebブラウザーやサーバーがあります。]というメッセージが表示されますが、特に影響はないので無視するかフォルダ名や画像名を変更してあげましょう。

参考サイト

イラレCS5jpeg書き出しサイズが大きくなってしまい困ってい... - Yahoo!知恵袋

Photoshopの「Web用に保存」で「保存されるファイルの中に、ラテン文字以外の文字が含まれています。」というメッセージが表示される場合の対処: 小粋空間