Posts in Category: WEB

イラレ原稿からRetina画像をつくるまで

最近もっぱらWEB屋さんと化しています。

デザイナーさんからいただく原稿はWEB用としてちとつらいillustratorでくるのがほとんどなのですが、
ここにきてRetina対応は必須となり、Retina画像を切り出すフローに頭悩ませる日々でした。

イラレ原稿もらってもそのまま切り出せるはずもなく、パーツの区別なくオブジェクトがまぜこぜになっているため
パーツ用として切り出しやすいように、まずはオブジェクトの小数点座標排除&レイヤーを再構成
なんだかんだいってこれが一番時間がかかる作業。。。

レイヤーわけまで終わったら、PSDへ書き出し。
いままでは72dpiで書き出していましたが、Retinaへ対応させるため144dpiで書き出します。
もちろんレイヤーは保持したまま

スクリーンショット 2014-03-30 15.00.05

書き出したpsdをphotoshopで開き、ドキュメントの解像度を72dpiへ直します。
単純にSlicyなどで書き出す場合は144dpiのままでいいとは思うのですが、
@bounds設定で使いたいものがあるのでひと手間加えます。

開いた状態ではこの設定。 144dpi
横幅ピクセルを覚えておきましょう(例では600px)
スクリーンショット 2014-03-30 15.00.33

これをまず、 72dpi へ書き換えると幅が自動で300pxへ変わります。
これを再度600pxにします(縦は自動で変わります)

スクリーンショット 2014-03-30 15.00.49

これでOKです。

あとは、Slicyで書き出す際、Slicyを3倍速で使うExtentionを使いレイヤー名,@Boundsを追加していきます。これほんとに楽。ドネーション確実モノ。

じつは 144dpiのまま AddBounds を使うと、あさっての場所に@boundsシェイプが追加されてこまっていたのですが
解像度が72dpiではなく144dpiだったためにおこる現象でした。

PhotoshopCCになってから Generate機能が追加されましたが、まだSlicyのほうが細かいところでよいですね〜
倍サイズであれば 非Retina画像は縮小してくれるのでやっぱり楽

Share on Facebook