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?

Tags: , , , , , ,

Saturday, March 13th, 2010 Expression, MyProjects, WebDev Comments Off

Project: Color a Pony! Part A

My online portfolio at this point includes a several less than grande websites. My goal is to replace them with new content, but since my current job has only had me work on interface design, I don’t have much to include in the portfolio O_O. I can’t leave my portfolio dull and outdated, so the only other option is create content to include. Although creating several sites from scratch is a bit time consuming, it is necessary, so that is what spurred this new set of projects. The focus of this post is a piece I am creating to include in my personal work.

Now that I have the motivation, I knew I wanted the site to be different, technically challenging (for myself), and fun. I have selected ifoayasha.com, my former online portfolio, for this project. Of course selecting the site to hold the content is easy, but what content do I include? I had no idea, and apparently I am terrible at giving myself direction.

Since the site is really just for fun and the only person with a say in the layout or design is myself, I figured anything goes. I recieved a Tokidoki Purse as a gift this year for the holidays. The purse is bright & colorful, covered in cartoon ponies, clouds and rainbows, and I absolutly love it. This gift really is the inspiration for the design of the site. I couldn’t think of anything more fitting than a site so full of cute it inspired a reflex in some people that is actually less than complementary. This will be a website that only 8 year old girls and candy ravers could love, but it will be so great! I can’t wait.

Now for the technical part of the post.

I have designed the layout of the landing page in Expression Design. The site will not have a navigation bar at the top, it will have floating links (probably clouds similar to the mock-up design I have included in the site). I may also give the nav. links a repeating animation, so they may slowly float around in the top section of the header. The main content of the site, the pony, is also complete. I will be creating objects inside of blend from the pony object, and each item will be selectable through the UI by the user. I believe I will be doing this by placing each object into a grid, and then grouped into a border (with no border). We’ll see though, I am not sure at this point.

Below the header, “Color a Pwny”, there are 3 buttons which will activate the tool bars for each type of painter. These include a color changer, a decal selector and a selection of different accessories that can be added. Most of these items have already been created, and have containers. So all that is left to do is figure out how to configure the site to let a user “customize” their own pony. The most difficult part is going to be setting up a way for users to save an image of their pony, and also a way to log the details of their customization to create a database of user-created ponies for display on the site.

Of course there will be navigation to other pages within the site, such as the about page, and probably a “ponies created” page, contact and a link to my gaming blog. These things are far from difficult, so they are more an after thought at this point. I will be focusing on these extra pages last, the most important page will obviously be the database display page of all the ponies created. On that page I would like to be able to display user info, such as “Red Pony, created by Aimee Whatever, on Feb 16, 2101?.

I am going to document my trials on this project, and I will hopefully learn a bunch of new things inside of blend. I expect this to not only be fun, but extremely educational. I am really looking forward to it. In the next week or so I expect to be wrapping this up, so hopefully I will have a lot of details to post on the production of this site.


Tags: , , , , ,

Tuesday, February 16th, 2010 Expression, MyProjects, WebDev Comments Off