This post is a complement to Create shadow effect in Blend, where I am going to explain how to achieve a better, smoother looking shadow by modifying the gradients of the Fills and the OpacityMasks.

Starting from where we left the last project:

. In the main menu choose: Tools/Options/Artboard and check the option: Show snap grid if it's not already.

. Select the Object (white rectangle) and set its Horizontal and VerticalAlignments to: Stretch.

. Create 4 ColumnDefinition guides as follows:
 at 10px from the Right side
 at 10px from the Bottom
 at 30px from the Left side
 at 30px from the Top

I have chosen 10 and 30px because my Grid line spacing is set to 10px but if yours is set at 8px you can use 8 and 24px as I want the ColumnDefinition guides to snap to the snap grid. (See image 1)

Image 1:  

 

. Select ShadowBottomRight and then select the Brush Transform Tool. You should see the vertical arrow from the Fill gradient. If not select the Fill gradient Brush.

. Click on the tip of the arrow and while pressing the Shift key down drag it up until the back of the tip is aligned with our bottom ColumnDefinition guide. You may want to zoom a lot on the area to be more precise. I zoomed to 3200% and up. It would be classic if the ends of the gradient arrow snapped to the guides. I didn't manage to find a way to do that so if someone knows something please enlighten me. (See image 2)

Image 2:  

 

. Now drag the back end of the arrow down towards the bottom edge of the Object. (See image 3)

Image 3:  

 

. Select ShadowBottomLeft and repeat the exact steps as for ShadowBottomRight. (See image 4)

Image 4:

 

. Select ShadowTopRight and modify the Fill gradient Brush as follows:
     drag the tip of the arrow (for the rest of this tutorial you should always do this with the Shift key down) and align it with the top guide.
     drag the back end of the arrow until the middle (marked by a tiny circle) reaches the top edge of the Object. (See image 5)

Image 5: 

 

. Repeat the exact same steps with ShadowTopLeft. (See image 6)

Image 6: 

 

Note: for this precise project the center of the Fill gradient is at this point aligned with the top edge of the Object, therefore we could very well drag the tip of the arrow while pressing the shift and the Alt keys down. This way the gradient size is modified in relation to its central axis.

We finished modifying the Fill gradients for the four parts of the shadow. Now let's modify their OpacityMasks.

. Select ShadowBottomRight and in the Brushes panel click on the OpacityMask brush. Drag the ends of the gradient brush (the arrow) to align the tip to the right guide and the back end to the right edge of the Object. Always zoom a lot when doing this to be more precise. (See image 7)

Image 7: 

 

. Repeat the same steps with ShadowTopRight. (See image 8)

Image 8: 

 

. Select ShadowBottomLeft and modify the ends of the gradient to align the transparent end (the tip) with the Left guide. Now by dragging the opaque end (back end of the arrow) as to coincide the middle of the gradient with the Left edge of the Object. (See image 9)

Image 9: 

 

. Select ShadowTopRight and repeat the same steps. (See image 10)

Image 10: 

 

Now the shadow effect looks more like the one obtained from a focused source of light. In this case the source is located somewhere NW.

Let's make the effect look even nicer:

. Select ShadowBottomRight then its Fill brush in the Brushes panel. Select the dark end of the gradient and on the color Editor choose a shade of gray  that is somewhere in the middle from white to black. (See image 11)

Image 11:
 

 

. Perform the same color change to the remaining 3 parts of the shadow. (See image 12)

Image 12: 

 

This type of shadow effect simulation suits only rectangular and square shapes, and with rounded corners only to a certain extent. To prove this select the Object then the Rectangle Tool and round the corners a little bit moving the Upper Left Handle. (See image 13)

Image 13: 

 

If the corners are too round the shadow won't fit the shape of the Object anymore (See image 14) but you can play with the Opacitymasks to make the shadow look rounder (See image 14a)

Image 14: 
Image 14a:

 

Now you can play around modifying gradients and colors to suit your design. One more thing, lighter shades suit shadows best to achieve a smoother look and this shadow can turn into a glow effect by altering the opaque color. Here is the final product after touch ups:

 

 

 

In a future post I will explain how to link this to a template and perform data bindings in a Silverlight control to achieve something like the main menu on Mashooo.com's new interface.

Currently rated 5.0 by 3 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Comments

geekswithblogs.net

Thursday, December 25, 2008 9:15 AM

Pingback from geekswithblogs.net

Silverlight Cream for December 24, 2008 -- #466

John Stockton us

Saturday, January 03, 2009 3:47 AM

Nice post. That shadow looks a lot easier than the stacked borders that I've been using. I wonder if by moving to a 9 panel grid instead of a 4 panel grid you could make it scale with the contents even? Hmmm, this has me thinking now. Maybe I'll write a post extending this into a custom control with dependency properties for the dark color and the like. The one thing that I think is currently easier with the border technique is adjusting the corner radius of the shadow.

Well this certainly got me thinking, great post!

The Loud Ninja us

Wednesday, February 04, 2009 7:26 AM

Awesome. Talk about thinking outside the box (no pun intended). And it beats the method I've been using i.e. cloning the shape, nudging it slightly offset from the original shape, and setting the opacity to a low number.

Silverlight Girl

Wednesday, February 04, 2009 8:11 AM

Hi Johnny (Stockton),
Thank you for the compliments, and sorry for reacting so late to your comment. For some reason I didn't get an email notice so I only read it today.
You assume right when you suggest to use a 9 panel grid, if you require both horizontal and vertical scaling. I used a 6 panel grid to make the template for the main menu tabs on Mashooo.com, so they would expand (only) horizontally to adjust to the content.
I promised to write a tutorial that involves this technique and data binding but I'm realizing now that I had totally forgotten about it! Bad Silverlight Girl.
I will see into "adjusting the corner radius of the shadow". Muy interesting...

Alex au

Monday, March 02, 2009 11:01 PM

Great post! Those shadows look awesome!

Jerry gb

Thursday, March 05, 2009 1:49 AM

Thabnks. It was really helpful.

DJanjicek nl

Thursday, April 23, 2009 5:42 AM

Great work! Could you share the xaml for the last two images? I'm not that familiar with Blend to do it by myself. I tried, but design stuff is not that much of my strongest parts.

Thanks in advance...

Silverlight Girl

Thursday, April 23, 2009 11:58 PM

Hi DJanjicek,

Thank you for the compliment and for the good request. Here is the code for the very last image which is only a variation I made out of the one right before it (which explains why I don't have the code for that one, sorry). Unfortunately, if you want to modify this design it would be better done in Blend rather than in code, (which is not impossible). I suggest you try with Blend, I promise it'll be fun.

There are 5 Rectangles. The first four form the shadow and the fifth is the white oval like shape. I hope this helps you, otherwise i'm here.

<Canvas>
<Rectangle x:Name="ShadowBottomLeft" Stroke="{x:Null}" RenderTransformOrigin="0.5,0.5" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="150">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.807,0.5" StartPoint="0.266,0.5">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0.5">
<GradientStop Color="#FF99EEDD"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="ShadowTopLeft" Stroke="{x:Null}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top" Height="100" HorizontalAlignment="Left" Width="150">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0.701" StartPoint="0.5,0.299">
<GradientStop Color="#FF99EEDD"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.807,0.5" StartPoint="0.265,0.5">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1" ScaleY="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="ShadowBottomRight" Stroke="{x:Null}" Margin="150,0,0,0" VerticalAlignment="Bottom" Height="100">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.927,0.5" StartPoint="0.266,0.5">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0.5">
<GradientStop Color="#FF99EEDD"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="ShadowTopRight" Stroke="{x:Null}" RenderTransformOrigin="0.5,0.5" Margin="150,0,0,0" Height="100" VerticalAlignment="Top">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.927,0.5" StartPoint="0.267,0.5">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0.701" StartPoint="0.5,0.299">
<GradientStop Color="#FF99EEDD"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Object" Height="100" Margin="50,50,50,50" Width="200" RadiusX="60" RadiusY="60" Fill="#FFFFFFFF" Stroke="{x:Null}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Canvas>

silverlightweb.com.cn

Saturday, October 31, 2009 2:34 AM

Pingback from silverlightweb.com.cn

Create shadow effect in Expression Blend - Part 2 Silverlight Web

canonprinterdriver.interactiveinfonet.info

Saturday, August 14, 2010 3:21 AM

Pingback from canonprinterdriver.interactiveinfonet.info

Canon printer driver - Canon bjc - Canon bjc 3000 printer driver

blackstyle.interactiveinfonet.info

Monday, September 06, 2010 10:55 PM

Pingback from blackstyle.interactiveinfonet.info

Black braid man style - Black braid - Black style

silverlightnews.com

Monday, December 12, 2011 8:14 AM

Pingback from silverlightnews.com

Create shadow effect in Expression Blend « Silverlight News

Comments are closed