投稿日:

    カテゴリー 日常 / プライベート

    photoshopアセットと角丸パーツ

    以前記事としても書いたのですがPhotoshopのアセット出力機能は大変便利でこれがないとお仕事ができないくらいお世話になっています。アセット出力はレイヤーに出力用の拡張子を書けば、勝手に出力してくれるという言わずもがなな機能です。ですが、アプリ用に各解像度別に出力する際、ちょっと面倒な弱点があります。こちら簡単にご紹介。何事も万能とは行かない物ですね…。%e8%a6%8b%e6%9c%ac上図こちら正円を座標、大きさ共に整数で作成したものが左図、大きさ共に小数点以下があるもので作成したのが右図になります。ベクトルデータデータ的には同じ正円です。これをpngでアセット出力してみます。 %e5%86%86それがこちら。細かく見て頂きたいのが右図。xyなど座標を小数点以下で作成したものは円の端が1ドット切れていますね。円に限らず、座標に小数点が入っているアセットは端が削られてしまいます。例えばiPhone5用に作った画像全体をiPhone6用に変更する…、などといった場合全体を拡大縮小する訳ですがそれぞれの構成パーツが整数サイズに収まるとは限りませんので、そのままアセット出力するとパーツの見た目が削れるということになります。小さいアセットになるほど見た目の影響は大きくなります。adobeがアセット出力範囲を1ドット多くしてくれたらこんな事で気を病む事も無かったのですが…。リサイズ時にもアセットを活用しようとする場合、対処策としては角丸や円などのパーツは全て整数になっているか見直す、というアナログな方法しか今のところはありません。以前 photoshopアセット出力の罠 という投稿をしていますがこちらも併せて気をつけて頂くとミスの無い効率化ができるかと思います。