Thursday, 10 March 2011

Windows Phone Theme Friendly Title in Blend

Today i'm going to show you how to make a windows phone theme friendly title within blend.

First step load up blend and add a text block. Make sure that the brush used for the text block is the PhoneForegroundColor. This is what's going to switch from black to white depending on the theme selected.

To add the reflect and fade text, copy and paste your existing text block. Drag it down a little bit so you can tell the two apart. In the brushes panel selected a gradient brush.

For the gradient, you want to go from a themed colour to a 0 alpha. Make sure the right slider is still set to PhoneForegroundColor and for the left slider click on it then in the editor set the Alpha (text box with an A on it) to 0. Play around with the left slider to get how much fade you like.

The next component is flipping and skewing the text block. For this we need transforms, scroll down in the edit panel till you get to the transform panel. The last tab on the right will enable us to flip the text block.

The final step is to skew the text block. It's still in the transforms panel, fourth tab along. For this I skewed the x axis by 44, but play around with this to see what works best for you.

Now you have a title that can be easily readable in light or dark themes.

If you want to see it in action. Here's the link for my free application.

Metro Match

No comments:

Post a Comment