Designing Your App Icon
Get an Idea
Alright so you've got your app idea and maybe a basic wireframe layout. You sit there thinking "What is the perfect icon to represent my 'Goat in heat detector app'"? Well let's start by thinking about what is the simplest image that gives some sort of representation of what you're all about. It could be a mascot, a letter, a prop or anything that sounds good to you. For this, we will want a goat engulfed in flames as a play on "Goat in heat". It's clever and tasteful.
Design Guidelines
Once you have an idea, you'll be eager to whip something up in AI. But wait just one second, space cop. There are tools to help you design your icon within Google's material design standards. It's very simple and it will help you make a great looking app icon.
Start by downloading the "Product icons" sticker sheet from here.
Download Icon Sticker Sheet
This will provide you with an outline to design in. Check out this brilliant and quick guide on how to use the icon sticker sheet.
Product Icons
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
This is a great resource and will only take you a moment before you're ready to create a great looking app icon. Check out these examples of icons created using the sticker sheet.
The way that Google lays out their guide is in such a way that you do not have to be very good at graphic design to obtain great results. It's a very simple and fun process.
Inspiration
Ok so you've done all of your reading and know how to make an icon. Now it's time to get inspired! Take some time to look at icons that have been created by others. My favorite place to go is the freebies sections on the MaterialUp website.
MaterialUp Icons
Browse through here and download some of the free icons that are available. You'll find something that will spark your creativity in here for sure.
Now you should have everything you need to create the perfect icon for your Android app. Have fun and post if you have any other tips or resources that you'd like to share!
Related
I'm no longer allowed to post paid themes, so am removing all of my artwork from XDA Forums.
Request?
I would love to see that Graydience Dock with "Dialer" "GMail" "App Drawer" "Messaging" "Web".
jnp1974 said:
I would love to see that Graydience Dock with "Dialer" "GMail" "App Drawer" "Messaging" "Web".
Click to expand...
Click to collapse
I can do that
Which dock? the right-facing or the centered one?
Here's a right-facing one with your requested icons.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Great Dock!!!
PERFECT!!! Thanks!!! I forgot to mention which orientation, but wanted it just as you made it, hehe.
Had a thought
Can you do "half-height" icons above the ones already there, in place of the colored rectangles, that would correspond to that apps swipe gesture action.
Maybe do one centered with the longer top section like the right facing, android in the middle, and
"Contacts", "Camera", (Android centered on top bar like centered dock), "Root Explorer", "Maps"
This are awesome work how do i apply this
Great docks man. As soon as i saw this i had a vision for a theme lol. thanks again!
hey ardchoille I saw someone mention that you cooked up a bunch of Philadelphia Flyers docks. Still have those around by chance?
nice
Ok not a big artist but I like the way my phone looks
I'm liking the graydience one can you make one with phone-text-drawer-market-web thanks in advance
Can we get Graydience in green and blue too?
PS You rock my friend!
Any chance of getting the psd file for that embeded dock?
torremitsu said:
Any chance of getting the psd file for that embeded dock?
Click to expand...
Click to collapse
No, sorry, I'm accepting donations for customizing the embedded graydience dock background so I'm not able to share the template.
Anyone desiring custom artwork should read this thread.
Hey everyone, kinda new here (although not so much to the world of smartphones and computers and all that jazz) and I'm looking for an app to provide a certain function.
I'll explain in words real quick what I'm looking for, and I posted some pics to make it easier.
I'd like an app that adds a softkey to the status bar, much like the home/back/menu buttons that I have in CM7 in the status bar (see img 1, and how it changes in img 2). I'd like to be able to click that soft button, and have a popup of some user-defined apps. I know that I can put icons on the home screen and just push the home button, but I really think this would be a cool app and would appreciate it if anyone could point me in the direction of an app like it or could make one (I do some minor java programming on BlackBerry, but nothing this complex and with my baby and internship I don't have time to figure out how to make this).
I'd definitely be willing to pay for this, so if any devs read this I'm not just looking for a freebee. Althoug, of course, free is always nice
Either way, loving the XDA forums, and need to get my post count up there so I can post in the technical threads lol.
Images:
Stock status bar
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
What I imagine the softkey might look like once it's added:
One way the app popup might look:
I don;t care about the look that I made in those images as I do about the general idea.
Thanks in advance
Shane
i dont think thats probable from what i know about the android os.
Smart bar allows you to set 'favorite apps'. Good luck!
PS On appbrain it says that the latest version does not work well on froyo; I don't know about gingerbread (I have not used smart bar for a long time).
Thanks case-sensitive!
That's not exactly what I was looking for, but its good enough and will certainly do the trick
Sent from my NookColor using XDA Premium App
I was hoping someone could please PhotoShop or similar some icons for me/ the community...
144x144 RGB .png
96x96 RGB .png
48x48 RGB .png
72x72 RGB .png
I was hoping that these would look similar to this icon but without the gold.
I made a play store 4.1.6 chelpus proper with the old black gold icon.
https://mega.co.nz/#!9NglnC5S!EEm3iiNlLezO2rzazljYcStMC3gtSDD9qAJ-bqzXMQI
same, drag and drop into your system/app
I like this.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Was thinking something similar for the current icon.
if anyone needs the icons .... attached.
I only know of 4 icons in the apk. There might be more? I do not know the structure 100%.
But I would appreciate it if anyone with good shop skills could make the shopping cart black or grey and have it still look good. I tried and the WHOLE bag came out black with no depth to the icon. I just used the quick selection tool
help is appreciated.
I used the muCommander to edit the apk by renaming it to .zip
To install the one I posted it needs to be draged and dropped into /system/app/
I just read the description for this section.. MODS please fix/ move
Anyone?
Please help with some photoshop skills.
Something like this ?
NeBouse said:
Something like this ?
Click to expand...
Click to collapse
Actually, yeah, I like that. Pretty much what I was looking for. Much appreciated. Now to rebuild Google Play again.
I know I'm pushing it with this handout. BUUTTTT. any chance of a slight gradient on the front of the bag similar to the "Attached Thumbnail" version? I'm just going to use the ones you posted for now but interested to see how the gradient version would look.
Also, hate to be picky. But the Transparent background needed for the icons. Its white.
There is a gradient on them, just watch close (or maybe move your screen and you'll see it).
And i've uploaded 4 PNGs with no background, don't know why the forum has added one to the 144x144.png...
Btw, get this pack from here, they'll have no background :
https://dl.dropboxusercontent.com/u/23889066/Play-icons.zip
Guess Them All!
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Category: Game
Base price: Free
Hypercube released its new game “Guess Them All“ for Android, iOS and WP8.
The idea behind the game is simple – you have a bunch of images on one part of the screen and their silhouettes on the other and your job is to guess which silhouette belongs to which image. Add a bunch of achievements to the mix and many different collections of images to unlock and choose from and you get “Guess Them All“, a game suitable for everyone and anyone.
Channel your inner hawk, keep your eyes wide open and start guessing! Simple doesn’t mean easy. Win trophies to unlock more shapes and increase your score multiplier. Choose between Classic, Survival, Nightmare, Dizzy and Frenzy mode and find the one that suits your style. Tired of guessing alone? Hit a friend up and try the multiplayer mode.
Can you really guess them all?
Features:
Addictive, yet simple gameplay
5 playable mods with more to come
A single device multiplayer mode
Beautiful graphics and matching sound quality
Over 100 achievements and 16 collections of shapes to choose from
Download links:
iOS - https://itunes.apple.com/us/app/guess-them-all/id918937344?ls=1&mt=8
Android - https://play.google.com/store/apps/details?id=hc.android.guessthemall
Windows Phone - http://www.windowsphone.com/en-us/store/app/guess-them-all/1d593631-58a7-465d-93d1-7e7ff00ac3df
In Hypercube we put our time, knowledge and effort to the test. Our dream is to find ideas, develop and deliver multi platform mobile apps that stand out in quality and uniqueness of design. If you have any suggestions, complains or if you just feel like sharing your thoughts and ideas in the area of design and software development, please contact us.
"I can't buy this app"- message.
Please share here the depp-link of windows store as QR-Code. Otherwise it is hard to get correct language pack in installed. I would love to install it. It looks nice. What platform have you developed in?
Regards
Google Design Resources
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Howdy, chumps. Before you get going on designing an Android app, it's important to know what kind of resources are available. Many people head straight to AI and just start designing from the ground up without knowing about all the amazing recourses available from Google. These recourses are going to focus only on the Graphical UI aspect of the app. So if you came here looking for technical stuff, I'm calling the cops.
While these are supposed to help you get started on your app design, they're also just a great source of free graphics, fonts and templates that can be used for anything.
I'm not saying you'll be a millionaire overnight but it can happen a lot sooner than you think.
-Tai Lopez
Click to expand...
Click to collapse
Material Design Guidelines
So if you're wanting to embrace the material design standard to make your app look beautiful, this is where you start. The guideline will reference everything that you need to know to make your app look just as good as one from Google.
Icon Library
The icons library contains every icon that you would find within the stock Android system UI. They're great looking icons that you can use for anything. Download the .zip file that contains all of the icons because that's going to come in very handy as you begin to design your app.
Device Metrics
If you ever need to reference the exact size and resolution of a specific android device, this is where you will go. This section is always be updated with the newest devices and their deimensions.
Roboto & Noto fonts
Roboto is the default font for material design. If you want everything to look great without taking time to search through thousands of fonts, just use Roboto as your default. It will also tell you when to use white or black colored fonts.
Sticker sheets & icons
Here you'll find "stickers" which are basically premade graphical interfaces pieces. Everything from volume sliders to shadow effects can be downloed for free. This will help you put together a mockup of what you want your app to look like. Everything will be compatible with Adobe Illustrator which is most likely what you'll be working with most of the time.
Color Palette
Bookmar this page because you'll be coming back here a lot. This is the material design color palette. Pretty much any assortment of colors from this page will look good together.
There is so much more in Google's design resource site that it's basically a wonderland full of goodies. But if you're just starting out, use these sections to get going. You can also check out all the other great stuff that have at design.google.com/resources