Design
Project: Color a Pony! Part B
A little less than a month after my original post, I have returned to fill in the blanks (or large gaping hole) on the Color a Pwny project. The site is complete, minus one bug which is a result of my hosting, rather than the configuration of the site itself. In this post I will cover that issue, as well as several techniques I used, and tips I believe may be useful for other designers. The Color a Pwny site, re-named “Pwny” rather than “Pony”, was finished with the design and development phase sometime around February 25th. The release of the public Beta site (lol at calling it a Beta to avoid issues with related bugs) was on the first of March. I will include direct links to the site in my Links widget on the right hand column.
To begin, I created all of the artwork within Expression Design. All of the shapes were very simple, and I used mainly flat color, and a great deal of white space. After brainstorming uses for the site, I figured people would want to be able to save their art. Since I have not included a save/download feature yet, the only other option is to take a screenshot. The user could take a screenshot, and paste into a paint type program, and then easily erase any unwanted objects at their discretion. The main file from Design was exported as an entire Silverlight Canvas, which I then brought into Blend 3 site. I didn’t however work directly from this page, I used the pieces from it, and then deleted it when I was through. If xaml canvases had feelings, that one would feel used!
Even once I had the basic design laid out, I still needed to prep the file for easier handling within Expression Blend. The largest example of this would be the Pony itself, I needed to create complete shapes, as well as a clean outline for the body piece. Since the drawing itself was not a closed path to begin with, I needed to find the best way to cut, and reform the piece as a whole. I did noticed as I went along I wouldn’t have needed to do it that way. Since I have not explained any methods as of yet, I will start with that.
Tip:If you used filler text in your control templates within Design, don’t include it in your exported file. I have found that most of the time the standard Content Presenter that gets put into buttons is easily modify-able without needing to layout the text format ahead of time. Just make sure to align the Content Presenter where it needs to be. Not to mention if you used a font not supported, which I can go over in another post. Click here for customizing button templates.
Creating the pony control.
The pony is a compilation of many shapes, which were each converted to buttons. The pony was brought into Blend through the original exported file; In Design I grouped it into layer called “Pony”. This puts each shape into a canvas which I then copy pasted into the mainpage. It again was on it’s own canvas, and I went though each shape and labeled them accordingly (ear, righthoof, lefthoof, etc.), and turned each one into a unique button control. I believe there were 18 total buttons for the pony alone.
Ahh, it’s getting late, but I want to post something! To be continued…
PS – I should probably conjure up some tutorials!
PSS – With pictures too… or maybe a video would be easier?