アプリ開発用画像加工ツールPrepoを導入&実際に使ってみた

エンジニアの土屋と申します。 iOSアプリの開発で、サムネイルやアイコンの画像サイズがいまいち合わないなぁ〜 …

エンジニアの土屋と申します。

iOSアプリの開発で、サムネイルやアイコンの画像サイズがいまいち合わないなぁ〜
ってことありませんか?自分は最近そのような事に結構遭遇します。
コードでサイズ変更もできるのですが結果的に微妙な画質になってしまい、最初
からサイズがそれなりに合わせたいと思ったりします。そんな時に見つけた便利な
開発ツールを紹介したいと思います。

1.画像サイズ変更ツール Prepoとは
URL:https://itunes.apple.com/us/app/prepo/id476533227?mt=12
@1x,@2x,@3xの3つのサイズに応じた画像を簡単に作成してくれる開発補助アプリです。
無料で使用出来るのが良いですね。早速ダウンロードしてみましょう。

2.導入方法

スクリーンショット 2016-08-17 21.24.46
本ツールはアプリなので、先ほどのリンクからダウンロードしてください。特に設定もなく簡単に
導入完了します。

3.使い方
では早速使ってみましょう。
起動後のツールは以下となります。

スクリーンショット 2016-08-17 21.30.53

左メニューで、アイコンで使用(Icons)、通常のアプリ画像で使用(Artwork)と用途が分かれています。
加工したい画像を「Add Icon Artwork」にドラッグ&ドロップするだけでOKです。
早速以下の画像を使ってicon作ってみたいと思います。

スクリーンショット 2016-08-17 21.30.35

4.Icon作ってみた
こんな感じで作られました。

スクリーンショット 2016-08-17 22.27.58

色々なサイズのアイコンができてました!
上部にメニューがあるのですが、左から、対応OS、デバイス、サムネイルの光沢あり・なしを切り替えることができます。
試しに光沢をnoshingにしてみたら、懐かしいフラットではないアイコンになりました。
それでは、保存先を指定してあげてエクスポートしてみましょう。

スクリーンショット 2016-08-17 22.34.46

こんな感じで保存することができました。
それでは次に、アプリ内で使用する画像を作ってみましょう。

5.アプリ内画像を作ってみた
こんな感じで取り込みました。

スクリーンショット 2016-08-17 22.43.44
x3の画像ができてますね。どうやらエクスポートしないと他のサイズが作成されないようですので、
エクスポートしてみます。

スクリーンショット 2016-08-17 22.46.34

このような感じに、iOSの開発で必要なAssets.xcassetsで設定できる3サイズが作成されました!
ちなみにアプリ内画像を作る際は、大きめのサイズを指定してあげないと、最初からx2から作られてしまう
場合があるようなので、注意してください。

6.感想
それなりにちゃんとした画像が作成されるので、便利だと思います。画像のサイズに
お困りの方は、ぜひ試してみてはいかがでしょうか。