【Customization】超簡単GooglePlay風ホーム画面の作り方

December 13 [Fri], 2013, 22:35


またホーム画面を作りました。

上のカラフルなボタン4個並んだやつはZooperスキンです。XDAだったかどこかから拾ったものです。
そっちじゃなくて、その下のGooglePlay風アイコンの作り方。
使うアプリはssLauncher the Originalだけです。


@素材を手に入れる




GooglePlayをブラウザで開いてキャプチャしてからレタッチツールなどを使って切り抜きます。
WindowsならGIMPでできます。
評価★と値段(無料 or 金額 or インストール済みのチェックマーク)は残すつもりなので、★5のやつを選ぶとか複数枚作るとかしておくと良いです。


A素材を加工する




切り抜いた画像と同じサイズのレイヤーを新規作成から作ります。
その際、レイヤーの背景は透明にしておくと良いです。
で、切り抜いた画像を貼り付けたら評価★とチェックマーク以外の部分を選択、「編集」より「背景色で塗りつぶす」を選びます。
するとこのように画像がスッキリします。
あとはこの状態の画像をpngで保存して端末に移動します。


BssLauncherで設置

画面長押し→「新規ショートカット」を選んで「タイプ」と「ターゲット」を決めます。通常のアプリを開くショートカットにすると良いと思います。




「スタイル」よりアイコンの下にテキストが置けるタイプを選びます。




「背景」 → 「背景画」より先程作ったGooglePlay風画像を指定します。
アイコンは選んだアプリのものがくるので、アイコンパックは使わないほうがいいかも。デフォルトアイコンの画像を持ってるなら個別に指定すればokです。




プレビューを見ながらアイコンとラベルの位置を合わせます。
「サイズ」と「整列」で大まかな位置を決めたら、「増幅」を使って微調整を行います。


 

実物を確認しながら調整をかけると良いでしょう。
またラベル(タイトル)はデフォルトのままだとアプリ名しか入らないので、手動入力でデベロッパ名も入れるとそれっぽくなります。ssLauncherのラベル(タイトル)は改行可能です。
フォントも変えとくといいと思います。この画像だと標準フォントを使ってますが、ちょっと違和感がある気がする。
Sansフォントだといいかな?
また日本語名を使いたい場合は日本語に対応したフォントを入れてください。




ssLauncherのプレビュー画面(ホーム画面で「メニューキー」「バックキー」「ホームキー」どれかを押す)を開いて、下部の「テーマ」から「リソース管理」項目を探して「フォントファイル」から追加できます。




全部完了したらホーム画面に設置します。
※ssLauncherは作業1つするごとに一番下の「適用」ボタンを押さないと反映されません。バックしないように。

GooglePlay風の四角い画像は「背景」にしてあるので引き伸ばし自在です。ssLauncherのショートカットの「背景」は元画像の縦横比を無視します

ここまで出来ちゃえば後は簡単。


 

ssLauncherはショートカットスタイルの複製が可能です。
右から2番目の「コピー」 → 一番下の「貼り付け」を選びます。




この通りコピーできました。
あとはコピーしたほうの編集画面を開いて、ターゲットとタイトルを変更します。




作れたら並べていきます。
ssLauncherでアイテムを並べる時は、同じ位置に来るとこのようにグリッド線が表示されるようになります。
並べたいアイテムの中央に太めのグリッド線が表示されたら完璧に位置が合っています。細めのグリッド線が表示される場合は微妙にずれています。
また上下左右を合わせる場合は細めのグリッド線で表示されます。


 

休憩したくなったら、一番右の「保存」を押しておきましょう。
次回から「新規ショートカット」 → 「スタイル」と進んで「アディショナル」タブを開くとスタイルが保存されています。




最後に背景画像を設定します。
ssLauncherは「MultiPictureLiveWallpaper」を使わなくても、ページごと(更には縦画面と横画面ですら別々の)背景を指定できます。「壁紙」と違ってページごととなり、壁紙の上に重ねる感じになるので、このページでは壁紙を表示させてこのページでは背景画像を使う、ということもできます。

なおGooglePlayの背景は完全な白ではありません。




先ほどキャプチャした画像を使って、GooglePlayの背景色を抽出します(スポイトツールを使用)。
あとは画面サイズと同じ大きさでレイヤーを作り、抽出した色で塗ってpng形式に保存、端末に保存して背景画像として指定するだけです。
背景画像・アイコン画像も先ほどの「フォント」と同じやり方でリソースを追加できます。




せっかくなんで「もっと見る」ボタンも追加してみましたwタップでドロワーが開くように、「タイプ」を「ページ」、「ターゲット」を「Applications」にしています。
結構それっぽくなるかと思います。
またssLauncherはホーム画面の縦スクロールが可能なため、この下にもズラッとアイコンを追加しても面白いと思います。


冬コミこっちにすればよかったか……(´・ω・`;)

そんな感じ。

サンワダイレクト リングマウスプラス 指マウス 5ボタン ワイヤレスマウス フィンガーマウス 400-MA040

  • URL:http://yaplog.jp/tom-and-kery/archive/667
買ったものリスト





プロフィール
  • プロフィール画像
  • アイコン画像 ニックネーム:Tom&Kery
  • アイコン画像 性別:男性
  • アイコン画像 誕生日:1984年7月27日
  • アイコン画像 血液型:B型
  • アイコン画像 職業:その他
  • アイコン画像 趣味:
    ・映画-SF!SF!SF!
    ・音楽-とにかく四六時中。
    ・漫画-壁一面に積んでます。
読者になる
 ヘ○ヘ
   |∧ <にゃー!
  /    
2013年12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
サイト内検索



ページ別 週刊アクセスランキング

1位:
【Androidレポート】僕がタスクキラーを使わない理由

2位:
【Customization】電池、メモリ、CPUの効率的な使い方を追求してスマートフォンを快適に

3位:
【Xperiaレポート】Xperia A SO-04Eが発売。買ったらとりあえずこれだけはやっておこう