How to: Make Innerglows with Expression Blend.


I’m knee deep in a WPF project i’m writing for my team. I had the need today to have an innerglow, and noticed that we seem to have forgotten this little BitmapEffect of goodness (which I’ll be promptly hassling Jon tomorrow for in the next revision).

That being said, as stubborn as I am I decided to try my hand at producing my own InnerGlow effect. It was actually very simple procedure to replicate inside Expression Blend.

Step 1.

image Define your shape. In this case I went with a rounded Rectangle, but you can use any shape you see fit and firstly you need to figure out your base shape.

Note:
Now it’s important here to note, that you need to think of this as being "Pancakes" in terms of the design composition.

Don’t worry to much about pixel perfect precision inside Vector either.  A illustrator friend of mine once gave me a basic rule to live with when it comes to Vector art:

You can hide a lot of imperfections, as given you can zoom endlessly you get to the point were the naked eye can’t see it and move on..

Couldn’t agree more.

Step 2.

Simply copy the shape (CTRL+C) and hit Paste keys (CTRL+V). It should paste exactly on top of the previous shape and retain the exact x/y co-ordinates.

Rename your layer to something suites you, I myself called it IcnInnerGlow

image

 

Step 3.

Selecting the layer you just copied, you now want to add a BitmapEffect called "Outerglow". This can be found via your Properties area, under the group called Appearance. You will need to click on the expander for this group in order to see the below.

image

image

You should see something like this:

 image

Not really inspiring is it?

Step 4.

You now need to knockout the Fill and bump up the Border. So in this case, go to your Fill and click on the No Brush Tab.

image

You will also need to ensure the Border’s Brush is set to a color or setting that you feel comfortable with. In this case, I chose a solid color and ensured the Opacity was 53%.

image

The results should now look like this.

image

Step 5

Now comes the real magic. You select your layer, and again hit CTRL+C and CTRL+V (duplicating your layer basically).

With this new layer (it should increase the glow effect, make a note of that!) you now want to make this a clipping path. In that everything inside this shape is what you only want to make visible. The rest is something we want to discard.

To do this, right-click on the newly duplicated layer, Choose Path, then Make Clipping Path.

image

A new Modal window will now appear, asking which path you want to attach this clipping path to (think masking in Flash). Choose your "InnerGlow" shape, and you should now have the following result:

image

Notice no bleeding beyond the shape’s actual borders? Now you have a uniform InnerGlow that matches your shape. It’s now up to you what you want to do from here on out, but overall this is a quick and fairly friction free way of achieving an InnerGlow using the basic BitmapEffects in place.

I personally, adjusted the color to white, added another BitmapEffect (Blur) and tweaked the settings in a way that I ended up with the following visual effect.

image

Doesn’t look like much does it? well keep in mind I’m Zoomed In here, when I zoom back out to 100%, this is the visual look I pulled off.

image

Now to add some Gloss to the buttons..as we all know, there isn’t enough "Gloss" online today 🙂

Summary.

Expression Blend isn’t meant to be a Adobe Photoshop replacement, it’s meant to essentially act as a bridge between the Designer Tools and Developer Tools. That being said, it has a fair amount of hidden power under the hood (when dealing with WPF). I’ve found that I can achieve a lot of the visual effects I’ve commonly used in Photoshop via Expression Blend (yes its weird I know). It requires more hand-crafting but overall visually once I’ve put it into place, I can re-use across a lot of controls throughout my WPF application.

I think at times the Vector UI’s look absolutely crap and its dying of gradient brush overkill, so I’m hoping to show folks a few tricks here and there to produce visually appealing art.

Here’s the best part of all. If you like the above, then cut and paste this XAML code into your application, and you’re off to the races.

Yet another upside to using XAML, sharing art is as easy as pasting XML.

 

                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Grid.Column="0" Grid.ColumnSpan="1">
                        		<Rectangle.BitmapEffect>
                        			<DropShadowBitmapEffect Opacity="0.835" ShadowDepth="1" Softness="0.305"/>
                        		</Rectangle.BitmapEffect>
                        		<Rectangle.Fill>
                        			<LinearGradientBrush StartPoint="0.538462,0.98077" EndPoint="0.538462,-0.576924">
                        				<GradientStop Color="#FF232323" Offset="0"/>
                        				<GradientStop Color="#FF5D5B5B" Offset="1"/>
                        			</LinearGradientBrush>
                        		</Rectangle.Fill>
                        	</Rectangle>
                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase_Copy" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Fill="{x:Null}" Clip="M0.25,3.25 C0.25,1.5931458 1.5931458,0.25 3.25,0.25 L28.75,0.25 C30.406854,0.25 31.75,1.5931458 31.75,3.25 L31.75,28.75 C31.75,30.406854 30.406854,31.75 28.75,31.75 L3.25,31.75 C1.5931458,31.75 0.25,30.406854 0.25,28.75 z" d:IsHidden="True">
                        		<Rectangle.BitmapEffect>
                        			<OuterGlowBitmapEffect GlowSize="2" GlowColor="#FFF9F9F9" Opacity="0.415"/>
                        		</Rectangle.BitmapEffect>
                        	</Rectangle>
                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase_Copy1" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Fill="{x:Null}" Clip="M0.25,3.25 C0.25,1.5931458 1.5931458,0.25 3.25,0.25 L28.75,0.25 C30.406854,0.25 31.75,1.5931458 31.75,3.25 L31.75,28.75 C31.75,30.406854 30.406854,31.75 28.75,31.75 L3.25,31.75 C1.5931458,31.75 0.25,30.406854 0.25,28.75 z">
                        		<Rectangle.BitmapEffect>
                        			<BitmapEffectGroup>
                        				
										<OuterGlowBitmapEffect GlowSize="2" GlowColor="#FFF9F9F9" Opacity="0.5"/>
                        				
                        			</BitmapEffectGroup>
                        		</Rectangle.BitmapEffect>
                        	</Rectangle>
Comments (8)

  1. Scott – thank you very much for that.

    i wanted to implement (nearly the same) that glow effect on a dark drop down button of mine in a personal project i’m working on and couldn’t get it to work.

    Now, as easy as ctrl+c | ctrl+v and i have the solution i need. Dang, if XAML isn’t just a beautiful invention.

    think you just saved me an ulcer buddy..thanks heaps for that!

  2. Glenn says:

    Dang! I can keep using photoshop! Great! Cos I just spend 3 hours trying to use EB as photoshop – which is isnt! Thanks for pointing that out. You just saved me an ulcer too.

    So now allI gotta do is work out how to give depth to a 3d object

  3. Drew Noakes says:

    Thanks for this.  I tried pasting this XAML into Kaxaml, but it complains that the namespace ‘d’ isn’t known.

    It’s used thus: d:IsHidden="True"

    Removing that attribute, I don’t see the result you’re showing in your screenshots.

    Is this a Expression-Blend-only features?  What about us Visual Studio users?

    Thanks for the post.

  4. Jay Waltmunson says:

    I had the same problem with the d:IsHidden="True" and found that replacing it with Visibility="Hidden" seemed to do the trick and it built just fine. (Looks great! Thanks for the tip.)

  5. johannes says:

    thanks a lot. this is really smart..

    is there a solution to make this effect resizable?

    – johannes.

  6. steroids says:

    Thanks for sharing your tips, its tips like these that actually do make a difference to the individual readers of this blog. Thank you and well done.

  7. Can'tRead says:

    Why the HELL does this post redirect me to riagenic.com after 15 seconds?

    Nobody who does that kind of garbage has business being paid to make Internet content.

  8. Rogier says:

    Which version of blend is this? Because v4 does not have this option (anymore?).

    bitmapeffect are deprecated!

Skip to main content