Simple Textで(テキストじゃない)アイコンを作ろう!

以前、Glaiconというアイコンを作ってGlaejaで天気予報の画像をテキストでアイコン表示してしまう、という例を紹介しました。
こういうアイコンをフォント化したものというのはけっこうたくさん出ています。ウェブデザインの世界でもそれを利用してアイコン画像をフォントで置き換えて表示するのが使われるようになってきました。

今回は、Androidのテキストアイコンを作成するアプリ『Simple Text』を使って、テキストではないアイコンを作成します。

130223-1
Simple Textを起動し、右上の「新規作成」から新しいスタイルを作成します。

130223-2
テキストの編集画面で、フォント変更をタップ

130223-3
ここでアイコンフォントを選択します。今回使ったものは「Web Icon Fonts」というものです。どの文字がどんなアイコン表示になるかは、サイトを見ながらやるといいでしょう。

フォントファイルはSDカードのsimpletextフォルダ内に「fonts」というフォルダを作成し、その中に入れます。

130223-4
テキストとしては「t」と入力していますが、画面上はtwitterのアイコンが表示されています。文字を変えれば、同様に他のアイコンを表示させることができます。

130223-5
あとは、そのアイコンの土台となる部分を「短形」や「円」のシェイプで作成すればOKです。いろんなアイコンができます。

130223-6
実際に表示するとこんな感じです。
画面上の12個のアイコンはすべてSimple Textで作成したものです。(ドックのアイコンは違います。)

 

さすがに画像は扱えないので表現にも限界はありますが、わりと簡単にアイコンを作成することができます。
Simple TextのスタイルはSDカードのsimpletextフォルダ内「styles」フォルダ内にxmlファイルで保存されています。今回作成したスタイルをダウンロード出来るようにしたので、これをダウンロード後、解凍して中身をstylesフォルダにコピーすれば同じスタイルが使えると思います。

styles.zip (39.7KB)

OREFOLDERの最新情報をお届けします
author icon
orefolder
OREFOLDER編集長。
1979年静岡県清水市生まれ、現静岡市清水区在住。

様々な巡り合わせから、このサイト1本で生活してる氷河期世代の一人。ガジェットに限らず広く浅く様々なものに興味があります。
⇨orefolderの記事一覧