I’m going through chapter 11 of Victor Gaudioso’s book on Expression Blend 2, and he is stepping his readers through the creation of a glassy button.
I’ll summarize what we’ve done so far.
First, we created a rectangle with beveled edges. He directs his readers to use the visual controls to create the curve. I prefer to have a bit more control over it, and so I enter into the properties pane in the RadiusX and RadiusY. Either way works.
He then instructs the readers to duplication this – or in Blend 2 terminology, its a simple copy-paste (Photoshop! Get out of my brain!), shrink the size of the rectangle, set both gradient stops to white (#FFFFFFFF) then turn the right-most gradient stop’s Alpha channel to 0%.
I’ve seen people do this in 3 ways. Either by clicking and moving the mouse up/down or left/right (its somewhat like a dial – click and drag will increase or decrease the percentage), type directly in the 100% field to the prefered modifier, or by programming it directly in the color code.
A bit on that last option, you may notice that the color code has 2 more characters than usual. I promise, that is not a typo. The addition of the 2 are specifically related to the Alpha chanel, and those are placed as the first 2. Most colors will remain solid. So if you’re modifying color hex by hand, just pay attention to the last 6 and ignore the first 2. If you’re wanting to adjust the alpha and change it to 0%, just replace the first to FFs with zeroes. The result will be this: #00FFFFFF
This will often help when you’re neck-deep in XAML and don’t want to switch to design view.
The last thing I wanted to mention was the use of the white gradient – to – 0% alpha. This is a commonly used thing for designers who work in photoshop or illustrator with one exception – the “layers” are exactly the opposite. Instead of the top item being “on top” its more like painting – you start with the backing and for each additional color, you add to the existing one. I had to “reprogram” the way I thought about these orders and because I move between photoshop and blend, it continues to throw me off.
In blend, the bottom-most object is the one in the forefront.
So the shiny button, I’ve described the first 2 layers – the base gradient, and the shine which has been shrunk and has had half of the gradient modified to being transparent. The 3rd step is to take the resized 2nd layer, duplicate it (copy-paste) and then flip it.
Victor (the author) has you go into the properties pane to the bottom and transform it by rotating by 360º. I prefer using the last tab which will exactly flip it either vertical or horizontal. This being so similar to a tool that I use QUITE frequently in photoshop – this is much more comfortable for me to use than a full 360º rotation. From there, you just need to hit the down arrow a few times to make this 3rd rectangle closer to the bottom.
The result is something like this:
Not too bad – working with Blend is really not all that different than working with Illustrator or Photoshop, but the differences can be tough to overcome at first. Blend is a whole lot more like Illustrator than photoshop in the matter that you’re dealing with vector based images and can modify things like the bevel radius on the fly – after its been put onto the canvas. In photoshop, its not really much trouble, but you do often end up having to just delete a layer or an object and add it back on if the radius on a vector(path) based image isn’t quite right.
