Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。PhotoshopのGenerator機能で、めんどうな画像書出しとサヨナラする2015-06-08PhotoshopのGenerator機能で、めんどうな画像書出しとサヨナラするこんにちは、HOME'Sアプリのデザイナーをしている、こいずみです。iOSのアプリを担当しています。Webやアプリのデザイナーの方なら必ずやる、パーツ書出し。この作業って地味に大変ですよね。スマートデバイスは年を追うごとに様々な解像度のデバイスが発表され、それぞれに合わせたパーツの書出し工数はどんどん膨らんでいくばかりです。そこで、今回はPhotoshopの便利な機能「Generator」を使って、iOSの3種類の解像度をいっぺんに書出す方法をご紹介します。14.1から搭載された機能です。今まではWebやアプリ用の書出しと言えば「Web用に保存」だったのですが、Generatorを使うことで、より早く効率的に画像を書出すことができるようになりました。使い方に関しては、結構前から色々なブログにも載ってますがこちらでも一応触れようと思います。1,PSDファイルを用意2,書出したいレイヤーや、フォルダに「hoge.png」のように拡張子を追加。(pngのほかに、gifやjpegでもOK)3,[ファイル]→[生成]→[画像アセット]にチェックを入れます。4,PSDファイルと同じ階層に、「◯◯-assets」フォルダが自動生成され、その中に「button.png」と「card_homeskun.png」が自動で書出されています。@1x、@2x、@3xを一瞬で書出したい。上記の機能を応用して、iPhone用の3種類の解像度の画像を一瞬で書出すことができます。先ほどレイヤーやフォルダに付けた「button.png」や「card_homeskun.png」に「50%」や「@3x」などを付けて、書出しサイズを変更します。button@3x.png」と付けて生成します。すると先ほどのように、自動でサイズ調整された画像がassetsフォルダ内に書出されます。やってみるとわかるのですが、境界線の太さや、スマートオブジェクトも綺麗にサイズ変更してくれています。座標に端数があったり、スマートオブジェクトじゃないものがあるとボケてしまうこともあるので注意です。このフォルダ名をつけるのも、めんどうなうえに手入力してると気づかないうちに間違えたりしていて、Generatorさんが怒って「errors.txt」をassets内に吐き出してしまうので、これも自動化。この自動化に関しては、当初必死に手入力をして、全身から煙が出始めた私たちデザイナーを見かねて、エンジニアがゴニョゴニョしてくれました。言うと、「50%」や「@2x」や「.png」がレイヤー名やフォルダ名につくようにスクリプトを組んでもらってPhotoshopに組み込みました。button@3x.png」となってくれます。エンジニアさん本当にありがとう!まとめ書出しの時間を減らすことで、より必要なところに時間をさくことができますし、個人的には、これらを使うことで作業効率がかなり上がった気がします。コーディングメインの制作さんも、もらったデザインファイルからパーツを書出すときにべんりと思います。読者になる関連記事2024-04-05モバイルでのタップ成功率を可視化するツールの開発こんにちは。エンジニアの小林建太です。賃貸領域でフロントエンドエンジニアをしている齋藤です。LIFULLエンジニアの吉永です。Centricで行きたい私たちLIFULLの中島です。プロダクトエンジニアリング部の吉永です。株式会社LIFULL「LIFULL」とは、世界中の人々の人生やくらし(LIFE)を満たす(FULL)企業へと成長していきたいという想いをこめた造語です。LIFULLはてなブログをはじめよう!nextdeveloperさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。