見出し画像

【Mac】超簡単にアプリ用画像やアイコンを作る方法

iPhoneアプリを作るとき、ボタンやアイコンなどの画像が必要になりますね。イラストレーターやフォトショップ、Gimpなどの画像制作アプリを使うのが王道ですが、慣れない人には少々オーバースペックで、扱いにくい面もあります。

そこで今Macに入っているシンプルな機能だけを使って、簡単にアイコン画像やボタン用画像を自作する方法をご紹介します。

MacのKeynoteを使う

Macに無料で入っているKeynoteは、少ない機能でも簡単に画像加工しやすいので初心者におすすめです。

画像1

Keynoteを開いて、スライドをクリックして右の「フォーマット→マスタースライドの編集」を選び、「書類→書類→スライドのサイズ」から、「カスタムのスライドサイズ」を選択します。

画像2

サイズ設定画面が出たら、幅1024×高さ1024にします。

画像3

これでマスタースライドの画面をアイコンの元画像の大きさに設定できました。ここに画像を作っていきます。

アイコンに入れる画像を準備する

アイコンに入れる画像は自分で描くこともできますが、web上には無料で配布されている素材がたくさんあります。今回はIcon-rainbow(どのアイコンも色指定が自由で、ダウンロードサイズも選択可能)のアイコンを使わせてもらいます。他にもたくさんのサイトがあるので、著作権に留意しつつ自分の使い道に合わせて選択しましょう。商用アプリに使用する場合は、特に注意が必要です。

背景色を指定して、画像データを挿入する

スライドの背景色を指定して、使用する画像データを貼り付けて中央に配置していきます。

背景色は、画面右上の「フォーマット」を選び、「背景」をクリックすると編集画面が出てきます。単色でもグラデーションでもOK。グラデーションは2色を指定して、方向も自由に設定できます。

画像4

画像データは上部の「メディア」をクリックして、「選択…」から本体に保存した画像ファイルを選択します。

画像5

イラストなどの大きさは、黄金比(おおよそ5:8)や白銀比(おおよそ3:4)を意識すると、バランスのいい見た目になります。下の図は背景のタテ幅1024に対して、画像のタテ幅を640にして画像:背景=5:8の黄金比にしています。配置は天地左右中央にしました(黄色い線はセンターを示すkeynoteのガイドラインです)。

画像6

こうした数値を意識すると絵心がなくてもスマートなアイコンを作れるので、知っておくと便利です。

画像データとして書き出す

アイコンの画像ができたら、画像データとして書き出します。左上の「ファイル→書き出す→イメージ」で保存します。保存する形式はJPEGでもpngでも結構です。

画像7

書き出した画像は、保存先に自動作成されたフォルダの中に入っています。開いてみると、keynoteで作った画面がそのまま画像データとして保存されています。これをアプリアイコンの原画として使用できます。

作った画像データをiPhoneアプリのアイコンに組み込む方法は、下記のリンク先を参考にしてください。

stepAppSchool「アプリ起動画面とアイコンを変更する

ボタンを作るその1

背景透過のボタン画像を作るのも簡単です。「START!」というアプリ用ボタンを作る場合、上部の「図形」からベースになる図形を選び、「テキスト」で好きな言葉を入力し、左の編集部分で「テキスト→フォント」で好みのフォントと大きさを指定します。ベースの図形も「フォーマット→スタイル」から編集して好きな色と形を設定します。

画像8

ボタン画像ができ上がったら「command + shift + 5」でボタン画像部分を下のようにスクリーンショットします。

画像9

次にスクリーンショットした画像をプレビュー画面で開き、下のように加工します。手順は次の通り。

(1)ペン先マークの「マークアップツールバー」をクリック
(2)光る棒マークの「インスタントアルファ」を選択
(3)透明化したい部分をドラッグして選択部分(ピンクになる)を調節
(4)「command + X」で選択部分が透明化

画像10

これで背景透過のボタン画像が簡単にできます。

画像11


ボタンを作るその2

その1のようにイメージ編集で簡単に背景を透明化できますが、Keynoteで最初から背景を透明に設定する方法もあります。

まず最初に書類のスライドサイズをボタンの大きさに設定しましょう。右上の「書類」を選んで「スライドのサイズ」の右端をクリックします。

スクリーンショット 2020-07-02 13.03.22

サイズは「カスタムのスライドサイズ」を選びます。

スクリーンショット 2020-07-02 13.03.40

ボタン画像のサイズを設定します。Retina対応にする場合は、タテ・ヨコをそれぞれ表示サイズの2倍にします。タテ100px・ヨコ50pxの大きさで表示するボタンを作る場合は、画像サイズをタテ200px・ヨコ100pxで作成するというわけです。

スクリーンショット 2020-07-02 13.35.59

スライドの大きさが決まったら、背景を透明にします。右上の「フォーマット」を選び、背景を選択する欄の右端をクリックしてください。

スクリーンショット 2020-07-02 13.06.15

一番下の「塗りつぶしなし」を選ぶとスライドの背景が透明になります。

スクリーンショット 2020-07-02 13.06.36

できた画像をアイコンと同様の方法でイメージ画像として書き出し保存すと、周囲が透明なボタン画像ができ上がります。

スクリーンショット 2020-07-02 13.09.22

アプリに使うボタンやアイコンの画像にあまり手間やお金をかけたくない人は試してみてください。




この記事が気に入ったらサポートをしてみませんか?