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.

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

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.

You should see something like this:

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.

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

The results should now look like this.

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.

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:

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.

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.

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>

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS