Illustratorでアプリ用の画像を書き出しする

Androidアプリ用の画像を書き出してみます。

iosも同じように書き出せるのですが今回はAndoridだけ試してみました。

スマホアプリの場合、機種のサイズや解像度によって画像の表示が変わってきます。

同じ画像を使用して表示される大きさが変わってしまったりします。

方法としては、大きめの画像を縮小して機種ごとに縮小するようにする方法もあるのですが無駄に重たくなる場合もあるので、ざっくり機種別の画像を複数作成して振り分けることで多くの機種で同じように表示できるようする方法が用意されています。

書き出したいファイルを開いて上部メニュー「ファイル」→「書き出し」→「スクリーン用に書き出し」を選びます。

各アートボードが表示されます。

すべてのアートボードの左下にチェックマークがついているので書き出したくないものはチェックを外します。

また、右上に「選択」という項目がるのでここで書き出す範囲を指定することも可能です。

さらにその下の項目に書き出し先があるので書き出すフォルダを変更したい場合指定することが出来ます。

「書き出し後に場所を開く」にチェックを入れると書き出しが終わったら保存したフォルダが開きます。

では「フォーマット」を設定しましょう。

今回はAndroid用なので右上のタブで「Android」を選択します。※iosの場合はiosを選びます。

すると複数の書き出し用設定が出てきます。

全部書き出せばOKなのですが場合によってはそこまで細かく振り分けなくてもいいという人もいるかと思います。

その場合は右端に✕マークがあるのでクリックして除外します。

表示内容は左端が通常画像の倍率となります。

PNG形式でそれぞれhdpi、mdpi、hdpiなどなどを書き出します。

アートボードを書き出しをクリック。

 

これでそれぞれの画像の書き出しが出来ました。

AndroidStudioで画像を設定すると機種ごとに画像を振り分けてくれるので便利です。

広告