Expression 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?
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.
-aimee
Microsoft Expression Design: A quick review by me.
I am a huge fan of vector illustration; this made it easy for me to transition from Adobe Illustrator right into Expression Design. Design is a vector based illustration program which generates XAML code for the images a designer creates, while working directly with Expression Blend to develop Rich Internet Applications in Silverlight and WPF. Creating clean, stylistic layouts for web application and sites is made easy with Design, with the intentions of bridging the gap between designer and developer.
Microsoft did a pretty good job of mimicking Illustrators user interface. Most of the tools in Design are easily recognizable and designer friendly. With Design, a more simplistic layout is revealed, and admittedly there are not as many options or tools when compared to Illustrator. I so rarely use those extra features that I never find myself looking for them. I noticed only minor differences in functionality in the interfaces, for example selecting stroke and fill colors, and in my opinion Design does that better.
I have read neutral or negative reviews about Design that bring up points such as “Why are there hidden tools in the toolbox side bar? It is odd that you would need to Right-Click to activate them.” My response to most of these observations is that anyone who is familiar with Adobe products will not be lost. Most designers aren’t venturing into these Expression products with zero experience with the Adobe Suites. I have also heard superficial complaints about Designs “Dark” GUI, but there is an included feature to switch it from Dark to Light in color.
For a designer or developer that doesn’t like Illustrator, or possibly hasn’t used it before, Design might be a challenge to learn. The idea of the pen tool, creating arcs and plotting points can be difficult for someone who hasn’t practiced at all. Still, I believe that Design and Illustrator make it fairly easy to practice these skills without being overwhelmed. The differences between Illustrator and Design are minimal usability-wise; for the purpose of learning how to use the different tools, I would not suggest one product over the other. For the sake of industry standards, I would lean towards Illustrator. However, if working with Silverlight or WPF applications is a goal, Design would be the way to go.
What I love about Design is how it actually interacts with its counterpart product, Expression Blend. Expression Design actually creates XAML code for you, and it allows you to copy the actual objects right out of the design-creation software (Design), directly into the web design software (Blend). That means – Directly into Your Website, and that is a big deal. You can also export individual items, or entire layouts to a XAML document, which you can then import directly into your Expression Site. It’s pretty cool, and it literally cuts out hours of time in website design.
- Tip: When copy/pasting directly from Design into Blend, make sure your image in Design is ungrouped. Once you have copied your image into Blend, “group it” into a grid, and then set the margin points to 0. This will keep most of the styling and positioning from design.
Some cons about Design start to come into play when you want to work on projects from a printing aspect. Expression Design does not allow you to work in CMYK, and there are only a handful of export formats. If you have a copy of Photoshop, you can usually work around most of these details. If you don’t want to spend the money on that, you could always get GIMP, and get the add-on that adds the color mode CMYK. The need for a work around is always annoying, I must admit.
All in all, I personally find the dislikes of the Expression products are from those who are fairly set in their ways, who have already found their niche, so they are not interested in working with different software. There isn’t a problem with that; though I would not shy away from Expression solely based off of the negative feedback from several of the comments I have seen. Blend and Design offer a smooth transition between the design phase, implementation and development of complex applications and RIAs. I find this a huge bonus as a designer, and I look forward to see more improvements to the Expression family further down the road.
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.