First impressions matter, and your logo creates a first impression both on the Start screen and when someone sees your app in the store.
This blog is part of a series, if you missed a post you can find it here.
When someone searches for an app in the store, they see your app name, rating, price and logo. Based on that they may decide which app to choose from the store. We already talked about picking a good app name, now it’s time to consider your logo. If you are going to invest the time to build a great app, let’s make sure it has the best possible chance of being downloaded by users by creating a good first impression.
Take a quick glance at some of the search results I got back for games, the quality of the graphics varies widely. Would this influence your choice? When you see a logo that looks incomplete or unpolished it may make you wonder about the quality of the app that goes with it.
So exactly what size image files do you need for your Windows 8 app? If you create a new Windows 8 app, you will see a number of files in the Solution Explorer under the images folder. You should replace each of these files with a file containing the appropriate size of your logo. The name of the file indicates the appropriate pixel size for the image. For example 30x30.png should contain an image that is 30 pixels X 30 pixels.
Jeremy Foster has a list of references for stock photos, clip arts, audio, music and video. Not all the resources are free but many of them are.
Tip: If you are creating bitmap graphics, consider creating .PNG files since they can have transparent areas.
Tip: Consider taking the time to learn how to use Scalable Vector Graphics (SVG) instead of bitmap graphics such as .PNG files. With all the different screen sizes supported by Windows 8. Creating SVG graphics is done differently and will take you a bit of time to learn. But for a beautiful graphics experience on different screen sizes it is an investment that can pay off. (comparison SVG vs bitmap)
Tip: If you have an image with transparent areas, be careful what tool you use to resize the image. Many online resizing tools, or tools like MSPaint will remove the transparency when they resize the image. Thanks to Raju on Technically Personal whose post suggested good resizing tools that maintain transparency.
Great suggestion for using SVG type of images since they can retain key image characteristics as it's resized. One tool I LOVE for helping me witn resizing is Expression Blend. The key to that tool is the Export feature which with one magic keystroke, you can create several different sizes in one shot! Quite amazing actually. The only negative aspect is it's designer focused, therefore no command line and therefore no ability to regenerate graphics on release builds.
Here's a Tool I developed for Windows 8 and Windows Phone Apps that might help :)