2013
8
02

Androidのホーム画面をカスタマイズした過程をまとめてみました

大学時代の後輩から、「Android使ってましたよね?仕事で調べてるんで、ホームカスタマイズしてどんなのが良かったか教えてくださいよー」って言われてたのでやってみました。


結果

130802-01

こんな感じになりました!

ブログに合わせたデザイン

130802-02

壁紙やフッターなど使える素材はそのまま流用ですw Dock(ドック)部分のアイコンをブログフッターのアイコンと同じデザインにして、通常エリアのアイコンは、タイトル画像と合わせてクラフト地にスタンプを押したように作ってみました。

時計は無料アプリのウィジェットなので、後ほど紹介しますね。

使用素材

このブログにも使っているクラフトやレースの素材はこの本から。いつもお世話になってます!

アイコンはこちらから。とっても使いやすくて大好きです!

どちらも個人使用という目的で使わせてもらっているので、作った素材ではなく作り方のほうをシェアさせて頂きたいと思います。

お手軽にやりたいなら

自作とかしなくても、可愛い素材で自由に着せ替えできちゃうアプリもあります。最初これを試してみたのですが、いろんな方の作品を眺めてたら、結局自分で作りたくなってしまいましたw

iphone用も。というか、こちらはiphone発の人気アプリみたいですね!

自作のための下準備

先に準備しておくと便利なものから。

オンラインストレージ(クラウド)

Google ドライブ Google ドライブ
Google Inc.
価格:無料

PCで作ったアイコンなどをスマホへ受け渡す際に。DropBoxとかでも良いと思いますが、お使いのGoogleアカウントそのまま使えるので楽かもです。USBで直接つなげるっていう手もありますね。

ファイル管理

ES ファイルエクスプローラー ES ファイルエクスプローラー
ES APP Group
価格:無料

スマホでDLしたらそのアプリのフォルダに入っちゃった!でもこっちのフォルダにまとめておきたいんだけど…!ってことがよくあるので重宝しています。複数選択して切り取りや貼付けも出来ます。

画像ビューアー

QuickPic QuickPic
alensw.com
価格:無料

アイコンなど、こまごました画像をあれこれしなきゃいけないので。Xperia Aに入ってたデフォルトのビューアーがあまり好みじゃなくて探してみたら、これが一番使い勝手が良かったです。プライベートなフォルダを(サブフォルダ含め)表示/非表示できたりする機能もあって良いですねー!

ホームアプリの選定

何を選ぶかで今後の方針が決まってくると思うのですが…!

ADW.Launcher ADW.Launcher
AnderWeb
価格:無料

私はコレにしました。

一番の理由はアイコン変更が簡単というところです。今まで試したホームアプリは、アイコン変更するためのアプリをインストールしなきゃいけなかったりして、全部をカスタマイズするのはちょっと大変かも…。と思ってしまって。ADW.Launcherはホーム上のアイコンをダブルタップするだけで編集ができちゃうのがすごく良いです!

壁紙作成

これはあんまり説明することもないのですが…私の使っているXperia Aは、ググってみたら壁紙のサイズが1440x1280pxとのことだったのでそれに合わせて手持ちの素材から画像を作って壁紙設定しただけです。

フッターのノートの切れ端部分がちょうど良い位置に来るまで、何回かリトライしました。

ガーリーな時計ウィジェット

かわいい時計ウィジェット かわいい時計ウィジェット
[+]HOME by Ateam
価格:無料

冒頭の、時計ウィジェットアプリはこちら。すっごく好み…!(*´∀`*) 他にもたくさんの種類があって、もうちょっと小さいサイズも設定できます。ガーリーなもの探してる方はチェックしてみてくださいー!

こちらのアプリ、第2段も出てます。こっちも可愛いデザインたくさんです!

アイコン作成

多様な解像度

Androidのホーム画面のアイコンの大きさは、「基本的には」48×48pxなんだそうです。ここへ、端末毎にHDとかフルHDとかそれは多様な画面比率が関わってきて実際に作る大きさが全然違って、それはそれは開発者泣かせなんだとか(´;ω;`)

それと、Android開発者向けのこちらを見てみて、

背景画像とメイン画像の比率が4:3なの、いいなぁと思いました。これを元に、こんなイメージにしたいなーっていうのと、各解像度別のpx数を書きだしてみたものがこちらです。

130802-03
4:3の比率は、Launcherアイコン(ホーム画面に表示されるアイコン)向けに書かれた情報ではありません。私個人が「いいなー」と思ってやってみただけで、こうしなきゃいけないよって話ではありませんのでご了承ください。

自分のスマホの解像度チェック

さて、実際に、私の持っているスマホはどれにあたるんでしょう?ldpiってことはないと思ったのでそれは外して、4つの大きさのものを実際に作って違いを見てみる事にしました。

130802-04

この4つのpngファイルをまとめてzipにしてみました。自分のスマホで確認してみたい方はご活用ください。

クラウドなどを使ってスマホへファイルを移したら、適当なアプリのアイコンをホームに4つ並べてみて、アイコンを変えてみましょう。

130802-05

ダブルタップして[Edit]を選択。

130802-06

アイコン画像をタップして選択します。ラベルも変えられます。

130802-07

スマホで4つ並べてみたスクリーンキャプチャがこちら。96pxが一番綺麗に見えますね。ということは、私のスマホ(Xperia A)はxhdpiということですねー。ちなみにフルHD端末はxxhdpiらしいです。

130802-08

拡大してみても、くっきり。

不特定多数の方に配布するものではなく、あくまで「自分のスマホで一番綺麗に見える」というものを目指して、96pxをベースに作っていきます!

加工のテンプレートを決める

130802-09

ホーム上のアイコンは、クラフト素材を角丸にして内側シャドウを白、ドロップシャドウを黒30%にすることでちょっと浮き出る感じにしています。逆にドック上のアイコンは、内側シャドウを黒30%、ドロップシャドウを白にして凹み感にしています。また、ドック上アイコンはちょっと小さめにしたかったので、画像の大きさ自体は96pxですが、イラストは48px四方に収めています。

ホーム上アイコンの茶色のざらっとした加工は、同じ作業を繰り返すためにPhotoshopのアクションを作成しましたので、こちらをシェアして説明してみます。同じようなアイコン作ってみたい方は使ってみてください。

アクションをDL→読込

まずはこちらをダウンロード。

130802-10

右上のボタンを押して、[アクションを読み込み]からDLして解凍したstamp.atnを読み込んでください。

130802-11

追加されました。左の三角を押すと、

130802-12

ふたつ出てきます。

スタンプ加工

130802-13

画像を用意します。これは96×96px(中身は72×72pxに収まるようにしたもの)、解像度は72pixel/inchで作った画像です。くっきりした白黒画像で、線太めなのがおすすめ。レイヤーは統合しちゃっておいてください。

ここで、背景色は白・描画色は黒にしておきます。(雲模様1というフィルタを白黒で利用したいので。)

130802-14

[stamp]というアクションを選択して、再生ボタンを押してください。

130802-15

ざらっとしました。スタンプみたいに…見えるか見えないかは貴方次第…ッ!

線画抽出

今度は描画色を好きな色に変更してください。この色で黒い部分を抽出します。

前に書いたこの方法をアクション化しただけです。
130802-16

[outline]というアクションを選択して、再生ボタンを押してください。

130802-17

指定した色で抽出したレイヤーができました。

ホントはここまでをひとつのアクションにしたかったんですけど、色を途中で変える方法がわからず…。誰かご存知でしたらおしえてください…!

追記:すいませんなんか、カンバスの大きさが違うと、最後の塗りつぶしがうまくいかないかも…!もし駄目だったらヒストリーで塗りつぶしの前まで戻って、手動で塗りつぶしてみてくださいすみません。・゚・(ノД`)・゚・。

テンプレートにのせる

130802-18

今作ったレイヤーを背景用の画像にのせて、両方選択しておきます。

130802-19

[移動ツール]を選択したときに出てくる[中央揃え]のアイコンを、垂直水平共に押してやると簡単に真ん中に合わせられます。

130802-20

真ん中に来ました!ボタンかぶった…ッ!((└(:3」┌)┘))

あとは、こまごまと設定

いっぱいアイコン作って、一個一個変えていくのが一番大変でしたw あとは、ラベルテキストの色を変えたり、テキストシャドウを不透明の白にしてみたり。

130802-21

あ、それと、デフォルトのドックのシャドウが気になってたんですが、[ADWSetting]→[Themes]→[Customize]→[Main dock]→[None]にして、右上の[Apply]を押したら消えました。

130802-22

こんな感じに。

いかがでしたでしょうか…。だいぶ長くなってしまいましたが、Androidのカスタマイズやってみたいー!という方のご参考になれば幸いです。(あと後輩の仕事の参考になるのか心配です。)

追記:フォトショとか使わず、ブラウザ上のツールだけでAndroidアイコンを作ってみようっていう記事も書きましたのでよろしければ。
  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2013/08/02
更新日:2015/02/25


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top