In this post I’m going to get creative, I’m going to create something shinny and sparkly.
Recently I saw a great adobe Photoshop tutorial showing how to achieve a “gold effect“.
I wanted to try to re-create that same gold effect using Blend. I also wanted to go one step further and show off the power of SilverLight in that I wanted to animate the graphic, taking it from a static image and transforming it into an amazing user experience. (could you imagine if adobe Photoshop assets could be animated using it’s raw elements, imagine being able to change the lighting effects or the intensity of the gold etc.). SilverLight and Blend allows us Microsoft developers to do just that 
Bare with me as I try to explain what I’m going to create ….
I’m thinking of creating a top banner/header for a RIA or web site. I’m thinking it’s going to consist of a logo/title on the far left and a rotating marquee of messages on the right…
This post will only cover the title/logo part, the Rotating Marquee can be seen in the sample code but I will not cover it here.
STEP 1 : GOLD SHINNY TITLE
Using a simple TextBlock spell out the title of your application.
Next give the TextBlock a “Foreground-Linear” gradient brush. And setup several gradient stops with the following values:
This is the magic that will give the text that GOLD look.
Note: Playing with the gradient stop values you can achieve an amazing assortment of effects from silver to metallic copper to neon pink etc. Over time I plan on building up a library of gradient stop values for specific effects. This gold one is the first of them
Next let’s duplicate this TextBlock and make it the shadow of the text. Make sure it sits above the previous layer (that we just finished) so that it appear’s behind it as a true shadow does. And give this a simple linear gradient that will make it look like a shadow (play with the colors to make this happen). I’ve included my settings but really you should play with the colors and create it yourself just to get experience.
If you combine both the title layer and the shadow layer you get the following result. It’s nowhere near finished but it’s starting to take shape..
Next let’s add some glass effect. To do this we are going to create several new TextBlock’s , one for each letter in the title. The reason we need to do this is because we want to align each glass effect letter to the title layer. Confused? Just check out the picture, for demonstration purposes I’ve only shown the “B” however all the other letters can be seen in the included source code.
Note that the canvas “canGlassEffects” has an opacity of 18% which gives the “B” and all the other single letters the transparent appearance.
The “B” is just a copy of the Text layer but only with the text “B”. It also has the two gradient markers calibrated differently so that the dark center line coincides with the top text layer’s dark middle line. (see following pictures)
When you combine all the layers now you get the following. Again it’s getting closer to the effect I want but still a bit to go….
Next I’m going to give the title a nice dark background “Rectangle” with a linear gradient brush. It’s just a simple backdrop that will showoff the gold title. Note the gradient stops of the background that give the line down the middle effect, this line needs to coincide with the line through the gold title above.
Now combining all the layers again we get the following…
That’s definitely the gold finish I was after.
STEP 2: FAKE LIGHTING
Let’s add some fake lighting to this title. To do this I’m going to use ellipses with circular-gradients scattered around the title.
Notice from the pictures above that it has 2 gradient stops (each with custom alpha’s) and the overall opacity is set to 17% so that it sit’s transparent over the gold title text.
The above picture shows only 1 fake light. For the sample I created 4 , here’s what they look like …
When you combine all the layers now you get the following:
Before fake lighting:
After fake lighting:
Remember that the opacity on the rectangles as well as the custom alphas on the gradient stops gives it that transparent look. The power of SilverLight allows me to programmatically change these alpha’s and opacities, the result can be seen in the animated sample at the end. SilverLight is truly an amazing development and design environment to work in!!!!
The fake lighting using different settings for the alpha’s and opacity:
STEP 3: TWINKLE’S
Gold sparkles! So how can I create the effect of a sparkle? Simple …
Create a star shape using the Pen tool
Note that it has a radial gradient and that the alpha’s (offsets) are set to give it a transparent effect when overlayed over the gold text.
Duplicate this path 2 more times making sure that each has a different rotation to give the following effect
Now make this into a usercontrol, I’ve called mine ucTwinkle. The reason I want do this is because I’m going to add an animation to this control that will make it “twinkle” and then I’ll dynamically scatter them over the gold text.
I won’t show the actual code for the Storyboard however it does the following
a) It changes from invisible to visible using the opacity setting
b) scales from a very small size to a large size using a scale transform
Below is a sample of the animation in pictures. To see the actual glitter effect go to the sample animation at the end of this post.
I’ve captured some snapshot’s of the animation when various twinkles are appearing. You’ll need to look very closely to see the twinkle!
The actual logic to dynamically show the twinkles can be seen in code, it would be faster for you to checkout the code logic than for me to explain it. Maybe I’ll do it in some future posting, what I will say is that it use’s the concept of a game loop to trigger the twinkle’s and what determines if a twinkle runs is a random number.
Conclusion:
The sample SilverLight application can be seen by clicking the big blue button below. The above steps are just simple techniques that if mastered can be customized resulting in an endless number of visual effects. Instead of Gold you can make it silver, make the glow more neon and futuristic. Your imagination is all that limits you. SilverLight in it’s current version in my opinion is feature rich, it’s really up to you the designer/developer to work out how to do something with the tools available to you!
When I see a visual effect that I like I don’t care if it was created with adobe Photoshop. I immediately start envisioning how to go about creating it in Blend and SilverLight…. If you really like an effect then you’ll work out how to achieve it!
As always the code can be downloaded from my skydrive account:
BeautifulMarquee.zip
You can run the sample from here:
As always please keep sharing what you can, we’re all still learning how to use these wonderful toys!
