|
by
kirupa | 26 September 2010
Have questions? Discuss this
Windows Phone tutorial
with others on the forums.
One of the more prominent pieces of UI that makes up your
Application Bar is the series of buttons and their icons
housed under what is affectionately dubbed the
ApplicationBarIconButton:
[ there one,
two, three, four...ApplicaionBarIconButtons ]
Since most of us do not have icons that look similar to
this handy, to help you out, the Windows Phone Developer
Tools install a handful of icons that you can just use. You
can find them here: {Program
Files}\Microsoft SDKs\Windows Phone\v7.0\Icons
To go even further in making life easy for you, if
you use Expression Blend to customize your Application Bar,
you will see these icons readily available for you to use in
your project without having to do anything at all:
[ the sample
icons are displayed already for you to use ]
While you may find the default icons to be great for what
you are doing, you will undoubtedly find yourself wanting an
icon that isn't automatically provided for you. In these
cases, you have to find an icon from a 3rd party or create
your own icon.
In this tutorial, I will help with the latter and show
how you can use Adobe Fireworks to easily create your own
ApplicationBarIconButton (called Application Bar
Button from here on out) icon!
Make sure
you have
everything needed to get up and running with building
Windows Phone applications. Once you have that setup, make
sure you have
Adobe Fireworks installed as well since you will need it
to actually create your icon.
Before we get into actually creating
the icon, let's talk about some guidelines that you need to
keep in mind when creating the icon:
- The icon's width and height must be 48 x 48 pixels
with a DPI of 72.
- Your icon must have a transparent background.
- Your icon must be colored in white - no other colors
are allowed.
- Do not add the circular border around your icon.
That border is added for you by the OS itself.
For the above guidelines, some of them are enforced
technically via the OS, and some are explicitly called out
in the
Windows Phone Design guidelines.
Now
that you have everything you need to create your icon and an
idea of the constraints you will have to work with, it's
time to start creating the icon.
Go ahead and launch Fireworks, and create a new document.
In the New Document dialog, enter a width and height of 48,
a DPI of 72, and a background color that is set to Black:
[ create a
new document in Fireworks ]
Once you specified these values, go ahead and Click OK to
create your document. Your canvas will look as follows where
a 48x48 black area is available for you to create your icon
in:
[ your
masterpiece is almost done...! ]
In this area, you can use all of the tools available in
Fireworks to create your icon. Whatever you design, try to
make sure it it is simple enough to be cleanly represented
in a single color:
[ I am going
simple with just a letter of text ]
One thing you may have noticed is that you are designing
against a black background. The guidelines state that your
final icon must be a flat/white color on a
transparent background. Your background right now
is clearly (ha!) not transparent.
The reason for this is that designing white on a
transparent background is next to impossible:
[ white on
transparent doesn't work well ]
Therefore, while you are designing,
it makes sense to do so under a black background. This will
allow your flatly white colored design to actually be
visible.
After you have finished designing your icon, revert the
background back to transparent before exporting. You can do
that setting the canvas color to Transparent:
[ before you
are done, set your canvas/background color to transparent ]
Once you have finished, export via File | Export your white, 48x48,
transparent image to a PNG file that you can use in your
project:
Note
Be sure to Export your PNG file using
File | Export as opposed
to doing a File | Save. Saving the file means a massive
Fireworks-specific PNG file will be created that contains
far more data than you will actually need for simply
displaying your image.
If you have image previews turned on for the shell in
Windows or OS X, you will only be able to see the icon if
you select it because it is largely invisible. That's
actually expected when viewing a white image on a
transparent background, so don't be alarmed if nothing is
what you see.
With your icon complete, all that is really left is to use
it. In your Application Bar, go ahead and select an
ApplicationBar Button. If you do not know how to do that,
please read over the
Creating an Application Bar tutorial first. It covers
the ins and outs of creating the Application Bar and its
MenuItems and Buttons.
With an ApplicationBar Button selected, look in your
Properties Inspector at the IconUri
property. Instead of clicking on the drop-down to select a
known icon, click on the ... button instead to pick your
custom icon:
[ the ...
icon allows you to browse for a icon ]
The Open dialog will appear. From this dialog, go ahead
and select the icon you have created. Once you have done
this, you will see that your custom icon is now displayed as
the contents of your ApplicationBar button:
[ the custom
icon lives! ]
Because your icon was created with a white on transparent
color, switching to the Light theme results in the icon's
colors being tinted to the correct dark values
automatically:
[ the icon
looks good even in the Light theme ]
As Borat would say, "Great success!"
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
