Building a great app Step 7: Creating your logo
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 what do you need to consider when adding a logo to your app?
- What size logos do you need?
- Where can you find free logos?
- What tools can you use to create logos?
- What tools can you use to resize logos?
What size logos do you need?
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.
- 150x150 – logo used on the Start Screen.
- 120x120 – logo used in launch screen of the app.
- 50x50 – logo used when app is listed in Windows App Store.
- 30x30 – small logo used in all Program list in Start Screen, or when you do a Semantic Zoom out on the Start Screen.
- 24x24 – logo used for app badge, for example in the notification when a message is displayed to signal that the app is installed.
- 620x300 – logo used in splash screen when the app is launched.
Where can you find free logos?
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.
What tools can you use to create logos?
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)
What can I get for free?
- Inkscape – inkscape is an open source vector graphics editor with capabilities similar to illustrator, CorelDraw, or Xara X. It uses the Scalable Vector graphics file format.
- Paint.Net - Paint.NET is free image and photo editing software it has grown into a powerful yet simple image and photo editor tool.
- gimp – the GNU Image Manipulation Program. A freely distributed piece of software for photo retouching, image composition and image authoring
- pixlr – An online image editing tool which lets you create, edit, and resize images online.
What can I get if I have a few $ to spend
- CorelDraw ($499) – professional graphic design software for bitmap or vector graphics (AI, PSD, PDF, JPG, PNG, EPS, TIFF)
- Xara X ($89 - $299) - all in one graphics package for drawings or photo work, print or web graphics
- Adobe Illustrator ($49.99/month as a cloud membership) - professional graphic design software
- Logo Design Studio ($29.99) - Logo Design Studio gives you over 1500 pre-designed templates and over 5000 logo objects to make designing a logo a snap. From one logo you can create unlimited new looks simply by adjusting the colors, fonts, shapes and effects. Import your own graphics or pictures to further personalize your look
- LogoYes.com : A web-based solution that offers over 20,000 symbols to choose from. LogoYes.com allows you to create your logo before you commit to purchasing it.
- The Logo Creator ($37) - With more than 300 logo elements and 50 built-in fonts, you can create logos in just a few steps. The Logo Creator software also includes 75 logo templates and can import your personal fonts and images. You also can create additional graphics such as web banners or images to use on blog posts.
- Pay someone else to do it for you – Hey let’s face it, some of us simply have no talent for making things look good, so sometimes the best thing to do is to pay a graphic designer to design something for you!
- logotournament.com to have designers compete and give you suggestions for your logo
What tools can you use to resize logos?
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.
- Pixlr – it’s an image editing tool, but it will also let your resize images and will keep transparency on .PNG files intact.
- FotoFlexr – simple and free online image editor which allows editing transparent PNG files. Upload the image, click on resize type in your dimensions and select ‘Apply’
- Images.My-addr – this is a free png resizing tool
- Microsoft Office Picture manager – I didn’t even know about this tool and it turns out I had it installed on my PC! This tool allows you to edit pictures, so you can use it to resize images.
- gimp – the GNU Image Manipulation Program. A freely distributed piece of software for photo retouching, image composition and image authoring
- Adobe Fireworks ($49.99/month as a cloud membership) - professional graphic design software