So, you are writing the newest and coolest Windows 8 or Windows Phone 8 app, but you aren’t a graphic designer. Your graphic design skillset isn’t good enough to do even the simplest icon style graphics let alone splash screens and awe inspiring backgrounds. Sure there are tons of freelance sites out there that can fill the bill. There are even a ton of asset sites that can get you some really great imagery for your top selling app.
Here are a list of some of my favorites:
However, even thought here is some free imagery on some sites, you don’t really get great quality and royalty free assets unless you pay for them. As a freelance/indie developer your budget is small at best and all you want is to get something fast and free.
Well, in this article, I am going to discuss how you can use an awesome, FREE tool called, Metro Studio, by Syncfusion. Metro Studio, will allow you to create some high quality icon/navigational assets for your new amazing application. Not only do they have a number of pre-defined icons (many that aren’t in the pre-packaged icon set built into the Microsoft tools), but they allow you to fully customize them with size, color, shape, etc. Even better yet, they give you an option for outputting the icons (assets) into a number of the popular formats, including XAML.
So, let’s get started by creating a new Windows Phone 8 application that has an icon for the application, a splash screen, application bar, a navigational button and a simple background.
NOTE: I am assuming that you already have the Windows Phone 8 SDK installed and that you have general knowledge of developing a Windows Phone 8 application and XAML.
First, open Visual Studio 2012, and select New Project.
Now select the Windows Phone App project template within the Installed – > Templates –> Visual C# –> Windows Phone hierarchy
Name your project and select Open.
Just quickly press F5, your Windows Phone Emulator will startup if you haven’t already started it up, and you should see the following:
What you might have noticed up to this point is that there is a default icon for the app, no splash screen, no application bar and no background. Sounds like we have a ton of hours fiddling around with some kind of paint program to create all these icons and imagery, right? Well, not anymore. There are a couple handy dandy tools that we can have in our back pocket to give even the most in-experienced graphic designer/artist (aka: developer) a quick turn-a-round time to create these assets.
NOTE: I want to preface everything I said above with this: this specific blog post is really only a means to point you in a direction that will save you time and money on getting a little more than basic icons into your application. It is not, however, a post on creating the most sophisticated iconology/imagery known to man kind. That being said…go ahead and stop your app from within Visual Studio.
Before we start working on the assets for our site, I would like to introduce one of my new “favorite” friends. Meet Metro Studio, by Syncfusion. This tool packs some great icon magic into a small, clean and easy to use tool. It currently has 2500 built in metro style icons that can be easily and quickly customized to your needs (it also gives you a way to request icons that aren’t in the collection. Talk about user feedback!) .
It has a simple icon editor focused on Modern icon design that allows you to change things like size, padding, rotation, background, icon color, etc. You can also take fonts and turn them into icons. Really handy when you want to convert a Wingding, or other character(s), to an icon. For example, here is a wingding, Spiderman style icon created in less than 30 seconds:
Not only can you export your files into the standard *.ico format, you can also output them into image formats like *.png, *.jpeg, *.tiff, *.gif, *.bmp and my favorite, *.xaml. As a C#, .NET, WPF, Silverlight, Windows Store or Windows Phone developer, you can see how that can become very useful.
You even have the ability to create a project of icons so that you can stay organized without having to maintain a bunch of individual files which makes it harder to associate with an application. Simply, drag and drop them into a project and keep them in one place. I will show you how to do this later.
Well, where is the best place to start? Hmm, how about we start where an application starts? The splash screen. As you may know, or not know, there are a couple of ways to add a splash screen to your application. At the time of the this blog post, Windows Phone supports, three resolutions: 480×800 (WVGA), 768×1280 (WXGA) and 720×1280 (720p). One is to add a single image into your project and the other is to add three versions of the image to support all resolutions. If you’re using a single image, you add an image file that is 768 × 1280 and named SplashScreenImage.jpg to your app project. The phone automatically scales the image to the correct size. Multiple resolution support is simply the different sized images named with the following convention: SplashScreenImage.screen-XXX.jpg, where XXX is WVGA, WXGA, 720p. Obviously, each represented by their corresponding resolution.
For this exercise, we will just use the single file approach. I will show you how easy it is to create a very modern looking splash screen using Metro Studio. First, let’s open up your favorite paint program (mine happens to be Paint.Net), create a new blank image that is 768×1280 and fill the image with the following color: #E3883D. No, this isn’t some magical color with special powers, it is just a color I chose (and one of my favorites). You can choose any color you would like. However, keep it around, because we are going to use it again. I have attached mine below if you would like to use it for your application.
Once you have the image created, go ahead and save it under the following name: SplashScreenImage.png. Keep it open in your image editor, we will be coming back to it. If you haven’t installed Metro Studio, now would be a good time. You can find it here. Once you have it installed, go ahead and open the application. The application will display a splash screen and open to the main screen, which should look something like the screenshot below:
You may have noticed the following sections on the main screen: a list of icon categories, results for the selected category, the main menu/search area on the top and finally the project management section on the bottom. To start things out, let’s try to find a unique icon from the gallery. Now remember, there are 2500 icons to start from, so we are bound to find something we like. Let’s do a quick search. Type in XYGF4 in the search box on the top right side of the screen. What do you see? Do you see the following?
If you select the pea-green arrow Icon, you will be taken to the their support site. I wanted to point this out to you in hopes that you would be encouraged to submit any icons that you feel should be in their already huge selection. They want you to recommend/suggest new ones. This is a great way for them to know what people are in need of for their applications. I wish the process was more integrated into the product where you could provide a description, a little sketch, or upload for your idea. Give it a try when you get a chance. For now, let’s just type in Ribbon in the search box and let’s see what they give us.
Not too bad. Now that we have results for our search, let’s pick one to edit. How about Certificate? If you hover over the Certificate icon, you will see the edit icon. Before we start to edit the icon. Let’s create a project file for all the assets we will be using for our application. Metro Studio makes it pretty easy. Simply drag and drop the Certificate icon onto the “Drop to create project” square in the bottom left hand corner of the window. A small slide-out will appear for you to enter the name of the project. Type “SplashScreen” and hit Enter. You will now see to the right, bottom of the screen a new project titled, “SplashScreen” with a 1, representing the number of assets that are in your Metro Studio project.
Okay, now, let’s get started, simply hover over the project, “SplashScreen” and click on the edit icon that appears. Since we only have one icon in our project you will be taken directly to the following icon editing screen:
One difference between Metro Studio and other editors is that you don’t have control over every pixel. You don’t get that kind of functionality in Metro Studio. You can’t just go draw whatever you want and call it an icon. Now, I have two thoughts on this: 1) I wish I could draw my own icons. 2) I am glad they chose not to allow the user to draw icons. You see, I am an developer/engineer that loves design, so, being able to tweak things here and there is nice for me. However, most developers/engineers should not be throwing bits around when it comes to design. You know the phrase, “give them a knife and they will cut themselves?” Well, they give you a rubber spatula. Even though that is the case, this tool has plenty of goodies to make even the developer/engineer look good.
You will notice you can adjust the following:
- Icon Size
- Rotation (Horizontal and Vertical Flip)
- Background Shapes (including transparent)
- Background Color
- Icon Color
Also, you can copy, save and Export to various formats (*.png, *.jpeg, *.tiff, *.gif, *.bmp and again, my favorite, *.xaml).
Remember, we are going to focus on creating a Splash Screen in this part of my series, so to see exactly what I am seeing, make sure your settings are the same as my settings below:
Quick thing to note, most icons are not 256 pixels in size, but remember, we are creating a splash screen, so, I have decided to just make the icon bigger for now. Once you have all the settings entered, open up your paint program with your original background image created when we started. Now, pop back to Metro Studio and select the Copy icon in the bottom left hand corner of the icon editor.
Go back to your paint program and paste the icon into your splash screen. Now, you can place it where ever you want, add any text you need, etc. I have chosen to keep it clean and just center the image on the screen. Below is what it looks like:
Okay, we are just about done. Save the file as SplashScreenImage.jpg to the root directory of you project. Make sure you include it in your project and set the properties on it to Build Action: Content, Copy to Output Directory: Copy if newer.
Now, all that is left is to run your application by pressing F5 and you should see your brand new splash screen. Pretty easy huh?
What is next? Well, in Part 2 of this series, we will focus on the application icons. I know, seems like that should have been the first place we started. You might be right, but I will blame it on my ADHD … wait, what were we talking about? Also, I want to introduce how you can “tag team” with both Metro Studio and another superstar utility to give you a complete solution for both your Windows 8 and Windows Phone 8 application “dynamic duo”. Come on back and see the two in action.