【Lightning Launcher】オーバーレイやマスクでアイコンを自在にカスタマイズ

Androidアプリのアイコンは、正方形や円形、正方形の角が丸くなったものなどアプリによって様々で、ホーム画面の統一感を損ないがちだ。そこで、多くの多機能なホームアプリには、ショートカットのアイコンを変更できる機能が搭載されている。
だが、マイナーなアプリになると、丁度良いアイコンが見つからないこともある。元のアイコンを画像エディタで加工して自作してもいいが、数が多くなると面倒くさい。

カスタマイズ性の高さが特徴の「Lightning Launcher」では、ショートカットのアイコンを変更するだけでなく、アイコンの後ろや前に画像を表示する「背景」と「オーバーレイ」、アイコンの特定の範囲を切り抜いたりする「マスク」の3つの画像で、既存のアイコンのデザインを改造することもできるので、いちいち自作しなくても、手軽に統一感のあるデザインを実現できるぞ。

手軽にアイコンの統一感を高められるように、定番の円形や角丸の素材画像集「iconparts.zip」をあんスマが用意したので、ぜひダウンロードして活用して欲しい。

Lightning Launcher - Google Play の Android アプリ

Lightning Launcher - 日本語 - Google Play の Android アプリ




項目のアイコンを変更



001002003


ショートカットのロングタップメニューの「カスタマイズ」→「詳細」で詳細画面に進み、「アイコン」のタブでアイコンの細かなカスタマイズを行える。



004005006


アイコン自体を変更するには、「オリジナルアイコンを選択」を押して、アイコンの選択方法を選択しよう。「画像を選択」では内蔵の選択画面で、「画像を選択(外部ファイルマネージャ)」では画像ビューアやファイルマネージャのアプリを呼び出して選択を行える。内蔵の選択画面は、画像のプレビューがないので分かりにくいが、動作は高速だ。


022

ネット上にはアイコンを配布しているサイトが多数存在する。「Iconspedia」は、ZIPファイルにまとめられたアイコン集を手軽にダウンロードできて使いやすいぞ。ダウンロードしたZIPファイルをAndroid上で解凍したい場合は、「ZArchiver」などの圧縮解凍アプリを利用しよう。

Icons & Icon Packs - Download Free PNG Icons | IconsPedia

ZArchiver - Google Play の Android アプリ



背景とオーバーレイでアイコン画像を改造


007

アイコン設定の中盤の「レイヤー」節には「背景画像」「オーバーレイ」「マスク」の3つの設定項目がある。アイコンの背景に他の画像を表示させたい場合は、「背景画像」を選択しよう。


023

あんスマが用意した「iconparts.zip」には円形の背景画像を格納した「background_circle」、角丸正方形の「background_round」、正方形の「background_square」のフォルダが用意されている。それぞれ多数の色を用意したので、好みの色を選択しよう。


008

このように、元のアイコンの後ろに背景画像が表示される。


009

「オーバーレイ」では、「overlay_gloss_circle.png」「overlay_gloss_round.png」「overlay_gloss_square.png」として、光沢のような効果を加える画像を用意した。背景画像と同じ種類のものを選択して使おう。


010

元の画像が枠一杯の大きさだと、窮屈な感じになってしまう場合がある。「内側のサイズ」を減らせば、余白が出来て見栄えが良くなるぞ。



元々正方形のアイコンはマスクで切り抜き

アイコン設定の「マスク」というのが少々分かりづらいが、指定した画像のアルファチャンネル(不透明度)に基づいて画像の切り抜き(透明化)を行うものだ。
元々のアイコンが正方形の場合に、好みの形状に加工したい場合などに役立つ。
「マスク」で切り抜いた上で「オーバーレイ」で光沢や影などを加えることも可能だ。
あんスマで用意した素材集には、円形や角丸で切り抜くためのマスク画像やオーバーレイ画像を収録しているぞ。

自作するには、アルファチャンネルを扱える画像エディタで完全に透明な状態の正方形の画像を作成し、アイコンから切り取りたい部分を塗り潰してから保存しよう。


011

このように、元々正方形のアイコンを円形や角丸にしたい場合は、「マスク」でiconparts.zipの「mask_circle.png」や「mask_round.png」を選択しよう。


012

このように、マスクによって角の部分が透明になって、強制的に角丸化できた。


013

「overlay_glossandshadow_circle.png」「overlay_glossandshadow_round.png」は、マスクで切り抜いたアイコンに光沢と影の効果を追加するためのオーバーレイ画像だ。


014

このように、バラバラだったアイコンに統一感を持たせることが出来たぞ。


024

なお、マスク用画像としては他にも画像全体を半透明にする「mask_transparent_025.png」「mask_transparent_050.png」「mask_transparent_050.png」を用意した。「配置」でマイナスのマージンを指定してアイコンとテキストを重ねたい場合などに使おう。



Web版Google Playストアから高解像度のアプリアイコンを入手

アイコン設定で「スケール」を変更すれば、高解像度の画像を使用して巨大アイコンを設置することも可能だ。自由配置モードの拡大縮小機能では、一旦標準サイズの解像度にリサイズした画像を拡大しているため、高解像度の画像を指定してもぼやけた表示になってしまうが、アイコンの設定でスケールを大きくしておけば、劣化のない鮮明な表示になるぞ。
Google Playストアに登録されているAndroidアプリは、ブラウザでWeb版のPlayストアのアプリ個別ページにアクセスしてアイコンを保存すれば、高解像度のアイコン画像を入手できるので、お気に入りのアプリを巨大アイコンで表示させたい人は試してみよう。


015

このように、「グリッドから独立」した項目の拡大率を変更すると、ぼやけた表示になってしまう。


016

まず、高解像度のアイコンを入手しよう。ブラウザでGoogle Playストアにアクセスし、アプリのページを開いたら、左上のアイコンのロングタップメニューから「画像を表示」を実行。(Android標準ブラウザの場合)


017

表示された画像のURLの末尾に付いている「=w300-rw」のような部分を削除したURLに移動しよう。


018

縦横512ピクセルの高解像度アイコンが表示されるので、「画像を保存」などで保存しよう。


019

高解像度アイコンを設定したい項目の詳細カスタマイズ画面で「アイコン」の「スケール」を大きくしよう。


020

次に、「オリジナルアイコンを選択」で、ダウンロードしたアイコンを選択。なお、スケールを大きくする前にアイコンを選択してしまうと、その時点でアイコンの縮小が行われてしまうので、その後にスケールを大きくしてもぼやけた画像になってしまう。必ずスケールを先に大きくしておこう。


021

このようにくっきりした巨大アイコンを設置できたぞ。

関連記事

2014年01月28日00時14分 公開 | カテゴリー: カスタマイズ | キーワード: | Short URL
このエントリーをはてなブックマークに追加

最新記事