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)

この記事が気に入ったら
いいね!しよう
 シェアする  ツイートする
PREVIOUS POST
NEXT POST
ANDROID
GIVES YOU
MORE
pocket line hatebu image gallery audio video category tag chat quote googleplus facebook instagram twitter rss search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status