So I've gotten some feedback from friends that they really dig my home screen and wanted a tutorial on how to do it. So for the sake of them I've typed it out, but figured someone here might enjoy it. So here it is.
This'll be a basic tutorial on creating simple icons for your home screen from images found on the web. That being said feel free to contribute tips/tutorials along with suggestions for Apps/Widgets, backgrounds, etc.
What you'll need:
1. Image search engine (google?)
2. Pixlr Editor Free, web based application (or Photoshop)
3. Zooper Widget Pro ($2.99) (Other apps may be viable, but this has other neat pre-made widgets)
For the record I did this all on an Chromebook using the web.
1. First up is finding an image on the web that you want to use for your icon.
In this example I'll use Sonic as an icon for MapMyRun. Good search terms to find what you are looking for are: retro, sprite, icon, bit. If you find a *.png image file with an already transparent background you've struck gold. You can skip the whole Pixlr portion. If you can't find one then go ahead and download any image with a solid background. Ultimately you want a transparent background so the icon doesn't show up as an ugly colored square with your image in it. So I'll show you how to use Pixlr to do that.
An image with a transparent background will look like this when you clock on it in Google Images:
That doesn't tickle my fancy so I want to go with one where Sonic is actually running but can't find one with a transparent background. I've decided on this:
2. Make your image background transparent:
-Use Google Pixlr Editor through your browser.
-Open the image from your computer that you've downloaded.
-Select the Wand Tool
This will select the background of your image. If there are gaps in your character it may select some of your character as well. If it does you can close the gap yourself with the pencil or find a new image. If the whole background doesn't select, like below, you can shift click another piece of the background.
-Now go to the menu bar, Edit -> Invert Selection:
This will now select your character. The reason for doing it this way is that it is likely your character has multiple colors and the wand tool will not select the character as a whole. Instead of selecting each individual portion of the character, you can just click the background, and then invert.
-With the character highlighted simply press Ctrl+C or Edit Copy.
-Go to File -> New Image, select Create Image from Clipboard and Transparent
Congrats, you now have your image created. Now just File -> Save with format PNG ( transparent, full quality)
Don't worry about size of the image, that can be tweaked using Zooper.
3. Email the image to your phone
Or download it, transfer it, whatever.
4. Create a new widget using Zooper
-Access widgets by holding and pressing on a blank space on your home screen. Then selecting widgets. Scroll down to Zooper widget and pick whatever size icon you want and drag and drop it to your home screen.
5. Edit the Zooper Widget
-Click on the widget that has been created on your home screen. (It takes a moment for Zooper to create a clickable widget).
-Choose empty.
-Click Widget Background option and slide the bar to full transparency. The code should be #00000000.
-Click Widget OnTap Action and select AppList
-Click the App you wish to have open on clicking your icon
-Click Layout
-Click Add Module (+ sign up top)
-Click BitMap
-Scroll down and click Bitmap again
-Select your image
-Now use the scale option to make the image fit your icon size
-You can then use X Offset and Y Offset to recenter the image however you'd like
There you have it, your Sonic icon will now open MapMyRun. I personally don't like Sonic, or how that icon in particular turned out (should have removed the additional white in his body), so here's my final screen with and without him.
To adjust your new icon you'll have to go into the Zooper app and the top option allows you to edit already made widgets.
I did:
Three Destiny Characters: Destiny App
Music Block: Play Music
Mage: Fantasy Sports
Pac-Man Ghosts: Contacts
Tecmo Bowl Player: ESPN Sports
SNES Controller: Play Store
Treasure Chest: Google Drive
Lakitu: Google Maps
Coin: Mint
Ocarina: Phone
This will work for anything that you want to remove the background from and want to make an icon out of. Not just gaming characters!
Enjoy! And post your home screens!
This'll be a basic tutorial on creating simple icons for your home screen from images found on the web. That being said feel free to contribute tips/tutorials along with suggestions for Apps/Widgets, backgrounds, etc.
What you'll need:
1. Image search engine (google?)
2. Pixlr Editor Free, web based application (or Photoshop)
3. Zooper Widget Pro ($2.99) (Other apps may be viable, but this has other neat pre-made widgets)
For the record I did this all on an Chromebook using the web.
1. First up is finding an image on the web that you want to use for your icon.
In this example I'll use Sonic as an icon for MapMyRun. Good search terms to find what you are looking for are: retro, sprite, icon, bit. If you find a *.png image file with an already transparent background you've struck gold. You can skip the whole Pixlr portion. If you can't find one then go ahead and download any image with a solid background. Ultimately you want a transparent background so the icon doesn't show up as an ugly colored square with your image in it. So I'll show you how to use Pixlr to do that.
An image with a transparent background will look like this when you clock on it in Google Images:
That doesn't tickle my fancy so I want to go with one where Sonic is actually running but can't find one with a transparent background. I've decided on this:
2. Make your image background transparent:
-Use Google Pixlr Editor through your browser.
-Open the image from your computer that you've downloaded.
-Select the Wand Tool
-Use the Wand Tool to select the background of the image.
This will select the background of your image. If there are gaps in your character it may select some of your character as well. If it does you can close the gap yourself with the pencil or find a new image. If the whole background doesn't select, like below, you can shift click another piece of the background.
-Now go to the menu bar, Edit -> Invert Selection:
This will now select your character. The reason for doing it this way is that it is likely your character has multiple colors and the wand tool will not select the character as a whole. Instead of selecting each individual portion of the character, you can just click the background, and then invert.
-With the character highlighted simply press Ctrl+C or Edit Copy.
-Go to File -> New Image, select Create Image from Clipboard and Transparent
Congrats, you now have your image created. Now just File -> Save with format PNG ( transparent, full quality)
Don't worry about size of the image, that can be tweaked using Zooper.
3. Email the image to your phone
Or download it, transfer it, whatever.
4. Create a new widget using Zooper
-Access widgets by holding and pressing on a blank space on your home screen. Then selecting widgets. Scroll down to Zooper widget and pick whatever size icon you want and drag and drop it to your home screen.
5. Edit the Zooper Widget
-Click on the widget that has been created on your home screen. (It takes a moment for Zooper to create a clickable widget).
-Choose empty.
-Click Widget Background option and slide the bar to full transparency. The code should be #00000000.
-Click Widget OnTap Action and select AppList
-Click the App you wish to have open on clicking your icon
-Click Layout
-Click Add Module (+ sign up top)
-Click BitMap
-Scroll down and click Bitmap again
-Select your image
-Now use the scale option to make the image fit your icon size
-You can then use X Offset and Y Offset to recenter the image however you'd like
There you have it, your Sonic icon will now open MapMyRun. I personally don't like Sonic, or how that icon in particular turned out (should have removed the additional white in his body), so here's my final screen with and without him.
To adjust your new icon you'll have to go into the Zooper app and the top option allows you to edit already made widgets.
I did:
Three Destiny Characters: Destiny App
Music Block: Play Music
Mage: Fantasy Sports
Pac-Man Ghosts: Contacts
Tecmo Bowl Player: ESPN Sports
SNES Controller: Play Store
Treasure Chest: Google Drive
Lakitu: Google Maps
Coin: Mint
Ocarina: Phone
This will work for anything that you want to remove the background from and want to make an icon out of. Not just gaming characters!
Enjoy! And post your home screens!