Sharing of thoughts and information is what blogging is all about. This way we can learn from each other. Post A Comment!These postings are provided "AS IS" with no warranties, and confers no rights. You assume all risk for your use.
Paul LabergeWeb Platform AdvisorMicrosoft Canada
One of the most common questions I get about Expression Design is how the tool would work with images. It’s true that Design focuses mainly on vector graphics creation, but there are neat bitmap manipulations and effects you can apply on your images as well. Check out the following two examples.
When I was visiting back home earlier this year, I found these cool looking chairs. In this tutorial, I’ll show you how to crop out an object from an image, covert it into its own image object, and then apply an effect onto it. We’ll work on the image below on the right. You can click on the image to download a larger version to work with.
Step 1: use the Pen tool in the tools palette to draw a path tracing the outline of the chair.
Step 2: select both the path from Step 1 and the background image, go to menu and select Object –> Clipping Path –> Make with Top Path. You should get the image below on the right. At this point, you just created a clipping path (like a window to the background image). If you move the clipping path around the image, you’ll see different parts of the image. Follow the next step to make this cropped chair a proper image object.
Step 3: select the clipping path you just made and go to menu and select Object –> Image –> Create Image Project. Drag the curser to draw out a rectangle to represent the area that you’d like to make into an image object. A dialog box will pop out asking you for the dpi for the rasterized area. Put 300 px/inch to create a high quality image object. At the end of this step, you should be able to select the chair object without seeing the path around the object.
Step 4: you can change the color of the chair by going to Effects panel and select “fx” –> Adjust Colors –> Tint. Choose the Tint color you want and adjust the levels to see the results.
Step 5: you can place back the element in the original photo. Look at how different color chairs would look in the image.
Here’s another example of using the same technique. If you are selling hats on your website, you may want to provide different colors to the same hat style. Can you tell which hat is the original and which ones are created using Expression Design?
You can see a full video tutorial on working with images using Expression Design by Arturo on the Silverlight blog. Start playing with images and have fun with Expression design!
Getting started with Expression Studio 3? Here are 4 great learning kits to help you get things started.
Introduction to Prototyping with Sketchflow in Expression Blend 3: Assets, Guide and Video Package
Discover Sketchflow, a new feature set in Expression Blend 3 that helps you define the concept for user experiences in early stages of the design process. From sketches to wireframes to protoypes of simple or high definition, Sketchflow provides you the right tools to communicate your ideas and gather feedback from others.
Venture into Gaming with Behaviors in Expression Blend 3: Assets, Guide and Video Package
Learn more about how to build a traditional "bricks" game using Expression Blend 3 Behaviors. Simply drag and drop Behaviors over objects in your artboard to easily add powerful and sophisticated functions like animation, physics, interactivity, data connection, effects and more. All without coding. The ever growing Behaviors Gallery at expression.microsoft.com is always avaialable for you to download new behaviors.
Discovering SuperPreview in Expression Web 3: Assets, Guide and Video Package
Learn more about SuperPreview, a new visual diagnostics tool in Expression Web 3. In this Starter Kit you will be provided with detailed guidance on how to leverage SuperPreview to diagnose issues across multiple browser, all with full rendering fidelity and detailed control.
Support for Silverlight in Expression Web 3: Assets, Guide, Video Package
Learn how to leverage the new and easy to use Silverlight support features in Expression Web 3. Then take your websites and publish them to an FTP location without having to leave Expression Web.
Don Norman’s book “Design of Everyday Things” taught me the importance of usability, and his book on “Emotional Design” taught me the critical role that aesthetics play in overall user experience. When I see designs that beautifully unite both usability and aesthetics, I smile and want to share with the world…
The Last Drop Bottle
It such a common and annoying problem when you try to squeeze out the last little bit of remaining Shampoo or body wash from the bottle. You don’t want to waste it but it takes such an effort to pump the remaining liquid out.
A new design for the bottom of the bottles is to help users get the last drop. (see the above image on the right) The bottom of the container is designed in a way that the finishing liquids are stored in a cone following by slopes both side where the dispenser can easily reach and let the user to have even the last drop of liquid. The container is beautifully designed to enhance the bathroom décor and lets the user to see how much more liquids are left inside.
Source: Last Drop : Pumping Up Till The Last Drop From The Bottom of A Bottle
Wall Art Chair
I’m a fan of multi-purpose objects such as Swiss army knife, combination highlighter/pens, smart phones, etc. Although multi-purposed objects are like jack of all trades, they are often being criticized as not good at any of the trades. For example, a smart phone usually has a camera attached to it, but it’s not a very good camera. The Wall Chair example below is inspiring to me because it let me think about art in a more practical way. We are not just design to decorate but design with usage in mind. The next step to this design would be making the folding chair more comfortable. :)
Living room space is limited and especially for those of us who are living in big cities and renting small apartments. We can’t afford to have extra chairs lying around but at the same time, we find ourselves having no chairs hosting our guests. Similar problem holds for public space as well. Traditional folding chairs are not attractive when folded and occupied space.
“The first foldable cantilever chair, goes from wall art to functional furniture with a flick of the wrist. With an inspiring take on the maximization of space and the transformation of an object from 2D to 3D, it epitomizes designer Dror Benshetrit’s vision: the emotion of art intertwined with simple poetics of form following function.”
Source: Wall Art Chair
Windows 7 Snap Feature
Going from physical design examples to software design examples, I have to say “Snap” is my favorite UI feature in Windows 7. It makes one of my most common activities on the computer easy and beautiful.
Window management is a common task, and often times you need to put two windows side-by-side. For example, copying and pasting text from a webpage to a document. Another example is dragging files from your computer and dropping them to your external hard drive. These are activities you do many times a day and you want to do them very fast. Before Windows 7, you need to manually scale the windows and put them side-by-side, which may take several seconds depending on how perfect you want the windows to line up.
“Snap” is a quick (and fun) way to resize open windows, simply by dragging them to the edges of your screen. This makes the side-by-side comparison of windows really easy. The visual design supports the “snapping” interaction by giving a preview of a transparent window to show how the window would snap.
Again, this is a great example of uniting aesthetics and usability.
There are many beautiful designs with usage in mind examples, which I hope to share with you in future posts. At the same time, there are a lot of designs only focusing on aesthetics (too pretty for the users to figure out how to use them) or usability (too boring that users feel like chores to use them). When you design or build your technology solutions, think about how you can create usable and beautiful design.
There are a lot of creative students in Canada who are doing innovative work to improve people's life through interactive, visual, informational, and other aspects of User Experience Design. I invited them to introduce who they are and share their work with you. To nominate a Design Student of the Month, email us. The Design Student of the Month for August 2009 is Winnie Ma Congratulations!! Let's hear from Winnie.
Winnie is a child at play when it comes to design. By keeping an open mind and endlessly experimenting, she explores methods that challenge the boundaries between art and design. She takes a hands-on approach to her work, and enjoys working with various mediums and different materials. While she completed the York/ Sheridan Bachelor of Design program in Toronto, she has used her summer breaks to travel extensively in Asia, and has worked at design firms in Beijing and Hong Kong. Winnie draws from her cultural experiences and the subtleties of everyday life, infusing humour and wit from her observations into her designs to enlighten someone’s day.
What cool stuff is Winnie doing?
I'm currently fascinated with storytelling through books.
The Circles of Round is a children’s storybook, which conveys the themes of advertising and propaganda through the use of three-dimensional geometric shapes. This playful story is told through photographing coloured construction paper pieces to represent the characters, actions, landscape and dialogue. The shapes are photographed with shadows to evoke the tone and mood of the characters. There are thirty spreads that unravel the conflict, resolution, and moral of the story.
In the book Have Nothing, I worked in the spirit of the Slow Food, Arts and Crafts and Slow movements, and applied the quotation “Have nothing in your house you do not know to be useful, or believe to be beautiful” from Hopes and Fears for Art written by William Morris onto used and discarded objects found in various locations. The quotation was first inked, then retraced, and broken down for further applications.
What are Winnie’s plans after graduation?
I hope to work in the publishing industry and be able take part in the ongoing translation of books from the printed medium into the digital realm.
Want to learn more about Winnie?
The TechDays09 sessions have been announced and it’s only a little over a month till the first city Vancouver. We see many folks are coming back to this year’s conference and bringing their friends and colleagues. To help you spread the word about TechDays and let people know which track you are attending, I have created a new set of Techdays e-badges for this year. Whether you are a TechDays attendee or speaker, now you can proud to show your excitement with some Bling-Bling.
First of all, here are the track colors we picked out. Last year, we used color ribbons as a social networking tool during the conference for people to recognize others who are in the same track. We are doing similar activities this year, but you can start networking with folks who have similar interests before the conference even starts. For example, use one of the track variation designs below in your email signatures or on blogs.
Developer Fundamentals and Best Practices
Below are three variations of the TechDays e-badge designs. For each design, the original design is on the left and enlarged. The track with speaker and attendee variations are on the right.
Design 1: Maple Leaf (You can download individual e-badge here)
Design 2: Hanging Badge (You can download individual e-badge here)
Design 3: TechDays Stick Man (You can download individual e-badge here)
What about cities?
TechDays will be in 7 cities this year. You may want to include a stamp to indicate which city you’ll be going to. No problem! Below are various of city stamps that you can add to the main TechDays e-badges. I designed it this way so that there’s more flexibility of how much information you want to show in your e-badge and we don’t end up with 70 variations for each design (i.e. 5 tracks x 7 cities x 2 speaker/attendee = 70).
City Stamp design variations (You can download all city stamps here):
How to use these TechDays e-badges?
1. If you just want to tell people about TechDays and don’t care about which track or which city, you can choose one of the original designs.
2. If you are a speaker or an attendee at TechDays, you can choose one of the track variations.
3. If you want to indicate the full details: TechDays, track, speaker/attendee, and city, you can mix-match a TechDays e-badge with a city stamp.
Regiser TechDays 2009 at www.techdays.ca before the early bird price runs out and show your excitement by downloading one of the e-badges above to include in your email signature, blog or website today!
Along with TechDays starting in September, the popular Ignite Your Career Webcast series also returns next month. As a professional working in IT, it’s so easy to get caught up in your day-to-day work that you find little time to grow your professional skills, learn about industry trends, and think about your next career challenge. We are trying to make this easier for you by hosting the Ignite Your Career webcast series.
What is Ignite Your Career (IYC)?
The goal of this webcast series is to support the career development for technical professionals by getting questions answered by a panel of experts in the Canadian ICT industry.
What are the topics for this IYC series?
Industry Insights and Trends (Time Option 1)
Thurs. Sept 10th
Industry Insights and Trends (Time Option 2)
Internal or External Training – Know Your Options
Thurs. Sept 17th
Selling Yourself - Are you using ALL your resources?
Thurs. Sept 24th
Developing your Leadership Qualities (Time Option 1)
Thurs. Oct 1st
Developing your Leadership Qualities (Time Option 2)
What’s new this year?
There are many new and exciting things we are implementing for the series this Fall. First, the webcasts will be co-hosted by Rick Claus and Shane Schick (Editor in chief, IT World Canada). Unlike traditional webcasts, the series will follow a “talk radio” style format of moderated questions from the audience to a panel of experts. Secondly, to accommodate for time differences, we are implementing selected webcasts in both 12pm EST and 3pm EST. Finally, as part of our post webcast efforts, we will be condensing the 1 hour recorded webcasts down to 20 minutes, summarizing the key messages for on-demand viewers.
Take more time for your career and register the webcast series at www.microsoft.ca/ignite.
As I’m preparing for my trip to China, I discovered some handy searches from Bing...
Currency Conversion. What’s today’s currency exchange rate for “1 Canadian dollars in Yuan?” I like how the conversation equation is in large and clear font.
Find statistical information. Several friends are coming to China with me in Oct. and it’s their first time visiting China. They’d like to know the “population in Shanghai.” It’s easy for me to find statistical information from Bing, but what I really like is the related searches panel on the left. Since we are going to Shanghai and Beijing, they are also interested in finding out the population in Beijing. It’s just a click away to get that answer from my last search.
Preview videos on search results. Suzhou is my hometown and I want to show my friends what it’s like. I did a video search on “Suzhou” and hover over some of the search results to pick out a good video that shows Suzhou’s ancient architecture and silk production. It’s very handy to have the preview option and saves me the time and effort of opening many web pages. Of course, I can further restrict my searches on video length, resolution, etc.
Check flight status. As I was writing the blog post yesterday, it was time to check my flight status to Vancouver. Simply enter my flight number and I got the information I need.
Real time traffic. When it was time to hand out to the airport, I checked out real time traffic on Bing Map. It even shows the construction sites that I should avoid. No need to turn on the radio and listen to traffic news. It’s traffic information at your finger tip. :)
Check out more Bing tips and tricks here. Don’t forget to share your handy searches from Bing!