Tips
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?
Welcome to Aimee-Design, my NoteBook
I am writing this blog as a reference for myself, and hopefully a resource for other designers who would like to use the Microsoft Expression Products, but haven’t learned how to read or write XAML code. Of course, just like any XML language, if you already have some knowledge, it should be fairly easy to read or amend, but how the heck do you write it! On top of that, Blend has a fairly detailed design view, so we should be able to use it to accomplish our design goals. This is all true, and I hope to help other designers with some tips to customizing their designs as much as possible, without using code. I will be included solutions for problems I have encountered, as well as my take on different methods of use within Expression Blend.