Blend Candy: How to create a Gold and Sparkly effect


Sub Heading 5

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.

image

STEP 1 : GOLD SHINNY TITLE

Using a simple TextBlock spell out the title of your application.

image

image

Next give the TextBlock a “Foreground-Linear” gradient brush. And setup several gradient stops with the following values:

image

image

This is the magic that will give the text that GOLD look.

image

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.

image

image

image

image

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..

image

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.

image

Note that the canvas “canGlassEffects” has an opacity of 18% which gives the “B” and all the other single letters the transparent appearance.

image

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)

image

image

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….

image

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.

image

image

image

image

 Now combining all the layers again we get the following…

image

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.

image

image

image

image

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.

image

The above picture shows only 1 fake light. For the sample I created 4 , here’s what they look like … 

image

When you combine all the layers now you get the following:

Before fake lighting:

image

After fake lighting:

image

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:

image image image

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

image 

image

image

image

image

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.

image

Duplicate this path 2 more times making sure that each has a different rotation to give the following effect

image

image

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.

image

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.

image

image

image 

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!

image

image

image

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!

31 responses to “Blend Candy: How to create a Gold and Sparkly effect

  1. that is cool and detailed, how much time it took you to do it from start to finish?

  2. It took 2 hours to create the actual sample, the blog post took about an hour.

    It get’s easier with every new project you do because theres so much reuse between projects…

    ps. AvatarX I always appreciate your comments :)

  3. ohh wow, what a great effect. I would never have been able to do something like that without you showing me. You make things that seem difficult, simple!

  4. Pingback: Silverlight Cream for January 26, 2008 -- #182

  5. Jose, you recall in the last blog that you app was not running in FF and you found it was due to some JS code. I think this app has the same problem. But it runs in IE.

    Jose, can you send me an email, I want to discuss something in private?

    Thanks!
    ..Ben

  6. Thanks Ben, it’s now fixed in FireFox. I had a style that was misspelt (Positiong:absolute). IE ignored the error but FireFox coplied to CSS rules and caused the browser to fail to load the application.

    .. thanks again for catching this one…

  7. Pingback: Synergist : Creating Cool Effects with Expression Blend and Silverlight

  8. Man, this is beautiful. I love those star effects…

  9. glad you, i am very glad to make them too.

    and i repeated the process as a way to check how things work, well minus the sparkles, but it was truly educative. right now i am following the silverlight for newbies guide recently posted at silverlight blogs feed.

    P.S: i still don`t have managed to find you on facebook.

  10. Pingback: Creating a Gold effect with Silverlight and Expression Web | DavideZordan.net

  11. Hello,

    Can you help me to do a silverlight website ?
    I ve a static ip adress, domain name and a windows server 2008 (with ii7).

    I could’ put your name on the site of course !
    Thank’s to ans me.

  12. i actually like this submit. thank you quite substantially for sharing. i really value it

  13. Hi there, You’ve done an incredible job. I will definitely digg it and personally suggest to my friends. I am confident they will be benefited from this site.

  14. Excellent read, I recently passed this onto a colleague who was doing some research on that. And he just bought me lunch as I found it for him smile So let me rephrase that will: Thank you for lunch!

  15. Not to hijack this thread, but, I’m looking for an investment advisor that was my parents’ retirement manager. I’m totally stuck here because I trust my parents judgement, and want to use the same advisors I am having trouble locating them in any of the local directories online. Carlton Financial Group – 106 Mission Ct #701 Franklin, TN 37067 phone (615) 794-2536 Can someone recommend an industry association or directory that is free to search for them?

  16. This is a great site. Good polished interface and very informative articles. I will be coming back soon, thanks for the great blog.

  17. This may not be the best place to ask this, but, I’d like to tell you about an accounting firm that has treated me with respect and kindness. They specialize in Tax Services and other related services. Fairfield Accounting Services Inc 504 North 4th Street Fairfield, IA 52556 phone (641) 472-6655

    Is there a small business consultant that can help me? Any reference is appreciated.

  18. Helpful info. Lucky me I found your web site unintentionally,
    and I’m stunned why this accident did not happened in advance! I bookmarked it.

  19. Though using medicines given by physicians is not really a bad thing its just that it can get expensive and sometimes fails.

  20. I like this a lot. I might even bookmark this site for later.

    Thank you.

  21. I am unable to install Photo shop in my PC :(

  22. Oh my goodness! Impressive article dude! Thanks, However
    I am experiencing difficulties with your RSS. I don’t understand why I can’t subscribe to it.
    Is there anyone else having the same RSS issues? Anyone that knows the solution will you kindly respond?
    Thanks!!

  23. There have been some pretty colorful talents shown in the
    past, to say the least. Email will one day override handwritten communication and perhaps
    games will take over traditional education. I have found Pro
    Flight Simulator to be the best experience I have ever had in the
    Flight Simulator universe.

  24. Pretty! This was a really wonderful article. Thank you for
    providing this information.

  25. I’m very pleased to find this website. I want to to thank you
    for your time for this fantastic read!! I definitely savored every little bit of it
    and i also have you saved as a favorite to see new stuff on your web site.

  26. Hi there, just wanted to say, I enjoyed this post. It was
    inspiring. Keep on posting!

  27. Hi, always i used to check blog posts here early
    in the morning, since i like to learn more and more.

  28. Hidup itu seperti drama dan kamu bisa memilih untuk menjadi penontonnya atau pemainnya.

  29. A young person who will be successful is never give up before get the success on his hand

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s