Monday, June 10, 2013

how to create a beautiful home screen

All month, we've been celebrating the power of Android with a look at some of the hottest home screens around.
Now it's time to take things a step further and show you how the home screens were assembled. Some of them are trickier than others to pull off, but with these tips from the folks who made 'em, you should be well on your way to transforming your own device into a work of art.
Oh, and go ahead: Just try to pull any of this off on that other mobile platform.
How to make the Naturally Android home screen
Android Home Screen #1
With its subdued simplicity, Naturally Android won over plenty of fans -- and won its designer a nice new Nexus 7 tablet. So how's it made?
Creator Joe Rochinski said his main goal was to create something that was both simple and visually striking.
"I've never liked the look of home screens packed full of widgets and mismatched icons," Rochinski says. "There's an app drawer to house all your app shortcuts, so let's leave them in there!"
Rochinski found his background on DeviantArt.com. He then used an app called Wallpaper Wizardii to scale and position it just the way he wanted.
Nova Launcher Prime, a popular custom Android launcher, allowed Rochinski to eliminate extra home screen panels and also remove the separator line between the Favorites Tray and the rest of the screen. Nova also made it easy for him to swap out the icons to his own custom creations.
Speaking of those icons, Rochinski relied on an app called Simple Text to build them along with his custom app drawer button. He used Minimalistic Text, meanwhile, to make the clock and weather widgets.
"You don't need to be an expert programmer to get a similar look on your own phone," Rochinski says. "I hope this theme will inspire others to try their hand at their own home screen and make some more beautiful designs where less is more."
How to make The Explorer home screen
Android Home Screen #3
Greg Wright's Explorer home screen got lots of attention, and for good reason. Wright's creation is actually even cooler than you might realize, as many of the visual elements are interactive: Tapping the compass opens Google Now; tapping the caliper toggles the notification bar; tapping the lion at the bottom of the map opens a folder of frequent apps; and tapping the date at the top opens the system clock. The paper scroll at the bottom-left, meanwhile, shows a dynamic representation of the phone's current battery level.
Like the last setup, Wright's home screen uses Nova Launcher Prime to accomplish some of its magic. The wallpaper comes from Wallbase.cc; the widgets for the date, time, and battery level were all made using the Ultimate Custom Widget (UCCW) application along with a font called FoglihtenNo06 (Google it and you'll find several sites offering free downloads).
As for the interactive functions, Wright used Nova Launcher to create shortcuts on the spots he wanted and then set their icons to be blank images. That makes it seem like you're tapping the actual map instead of a regular app shortcut.
How to make the Organizus Optimus home screen
Android Home Screen #4
Android Home Screen #4 (II)
Like Amirul Farhan's eye-catching creation? You aren't alone.
Farhan built the setup using Apex Launcher, an alternative to Nova with many similar features (either app could really work for any of these configurations). Within the launcher's settings, he set the home screen grid to 9x5 and four panels.
He then created a custom set of wallpapers, one for each panel. He uses an app called MultiPicture Live Wallpaper in order to have each panel display a different background.
That's where things get a little more complicated. I'll let Farhan explain it:
Start on the first homescreen. Using Apex action, place an app drawer shortcut on the square icon (at picture's bottom right corner).
Next, using Apex action as well, place the shortcut to screen 2, screen 3, and screen 4 on the star icon, ribbon icon, and the conversation bubble icon, respectively. Repeat this step on screen 2, screen 3, and screen 4.
This is the tricky part: hiding the icon we placed earlier to make it blend with the wallpaper. You need a blank icon, easily downloadable from the Internet. Note that although you cannot see this icon in gallery, it's there. Long-press the shortcuts placed earlier, and replace the icons with the blank icon.
Got all that? Good. From there, Farhan used a series of widgets and icons to accomplish his effects. They include:
• Minimalistic Text Widget with a font called Billabong for the titles at the top of each panel.
• Eye in Sky Weather for the forecast on the "Weather and Status" screen andWidgetsoid for the power bar at the bottom of that panel.
• Icons from Minimal MIUI Go Apex Theme for the shortcuts to the apps on the "Leisure" screen and Minimal Reader for the headlines at the bottom of that panel.
• Brilliant Quotes for the rotating quotes at the bottom of the "Work and Productivity" panel.
• Android Pro Widgets for the social widgets on the "Social Circle" panel.
How to make the Ice Cream Dream home screen
Android Home Screen #6
Android Home Screen #6 (II)
Tony Zhang's Ice Cream Dream home screen takes its inspiration from the Android 4.x-level People app interface.
Zhang's made it easy to get the lowdown on his setup: Just check out the page he created at MyColorScreen.com for the full scoop.
How to make the Robot Control home screen
Android Home Screen #7
Tim Alvarez's Robot Control configuration was the most popular of all the designs featured in this month's challenge. To make it, Alvarez says he started with a background from DeviantArt.com, which he resized and cropped down in Photoshop to fit his device's screen. He also modified the image to add in some elements and erased parts of it to make room for active widgets.
The Calendar, Media, Apps, and Files icons are all built into the wallpaper; Alvarez used transparent icons to add invisible shortcuts on top of those areas.
He used Ultimate Custom Widget (UCCW) to create the clock/date widget, the battery percentage and ring widget, and the bottom widget with the weather, missed calls, missed texts, and current location.
For the music player, Alvarez used a version of Phantom Music Control with his own custom icon modifications. He also made his own custom icons for the dock at the bottom of the screen.
Oh yeah -- and there are some custom animations and sound effects involved, too. You can see 'em in action on Alvarez's YouTube channel.
Lucky for you, Mr. A is willing to share his efforts. You can download a zip file with all the aforementioned elements on Dropbox.
How to make The Heisenberg home screen
Android Home Screen #8
If you're a fan of Breaking Bad, there's a good chance you're a fan of Jeff K's Heisenberg home screen. Jeff put together a detailed how-to guide for the home screen with all the settings and info you need to recreate the look; you can find it on Dropbox.
How to make the Game Master home screen
Android Home Screen #10
Martin Sector put a lot of thought into his Game Master Android home screen -- and he's happy to share every bit of it with you. Check out Sector's detailed how-to guide on Google+ for every last detail (he's even generously offered to answer any questions that may come up along your journey; just ping him on G+ to get in touch).
How to make the City Slicker home screen
Android Home Screen #15
Check out Jonathan Moten's MyColorScreen.com page for all the info on this sweet-looking setup.
How to make the Minimalist Magic home screen
Android Home Screen #13
Michael Grimsley's minimalist setup uses a DeviantArt.com wallpaper along with Nova LauncherZooper Widget, and icons from Manup's Simple Word Icons "Clean 164" set. It also uses an icon from Devine Icons for the app drawer.
How to make the Currently Android home screen
Android Home Screen #14
Alex Miller's Currently Android home screen creation is a complex and well-thought-out effort, and you're in luck: Miller has put together a huge tutorial and even a video to help you set it up yourself.
How to make the Paper Screen home screen
Android Home Screen #17
To recreate Christopher Ryan's slick paper-centric setup, all you need is a custom launcher to replace icons (Nova, Apex, or most any other will do the trick; Ryan says he uses LauncherPro). The icons come from Blurry Pencil Pack; the clock is made with the Minimalistic Text widget along with a free font called Sketch_Block.
The background, meanwhile, is available here.
How to make the Android Me home screen
Android Home Screen #18
Android Home Screen #18 (II)
Like what you see in Jordan Hotmann's Android Me home screen? Head over to his blog for a detailed tutorial.
How to make the Serenity Now home screen
Android Home Screen #20
Ben LeFevre says his Serenity Now setup is "deceptively simple."
The clock uses the ever-popular Ultimate Custom Widget (UCCW) app along with a custom skin. The clock has some powerful hidden functionality, too. As LeFevre explains:
It consists of two widgets -- the center one and the left one. An invisible shortcut is placed over the arrows on each widget that swaps to the other home screen. Using Apex Launcher's Accordion transition effect and turning wallpaper scrolling off, this makes the drawer look like it's expanding/closing.
The Search and Play Store icons on the left UCCW widget are UCCW hotspots (shortcuts built into UCCW). The down arrow that brings up further apps is just an image, with a Circle Launcher widget over the top.
You can find the wallpaper here and the icons here and here.
All combined, that oughta be more than enough to keep you busy over the holiday weekend. Enjoy!

0 commentaires:

Post a Comment


Top