Sharker Khaleed Mahmud Silverlight Tips & Tricks

July 19, 2010

77. Apply Clipping on Photoshop Brush Effects in Silverlight

Filed under: Silverlight — Tags: , — Sharker Khaleed Mahmud | shamrat231 @ 9:25 AM

[tweetmeme source=”shamrat231” only_single=false]

In this entry, I tried to create a sparkling smiley. The beauty of this sample is that all you need to do is replace two images. All the hard work has been done in the sample source code and is to be explained below. Replace the two images on the project and you will have your own sets of broken effects applied on those images. If you have read my previous post you will see that I have ended up creating a broken mirror. One basic flaw with that mirror effect is that when a glass breaks, it usually does not show black edges on every crack effect. Now let’s start by changing that.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

To invert the photo negative of an image for expression media

1. Select an image file.

2. On the Window menu, click Image Editor.

3. Click the Invert Photo Negative filter.

4. In the Invert Photo Negative dialog box, click OK to invert the image.

or if you have Adobe Photoshop, just press CTRL+I. Enlarge the crack area. If your look at the mirror image, it has more height than width. So in this case, I will rotate it and clip the background floor.

If you want to change the mirror picture you can replace with different picture. So far, the total code generated is this

MainPage.xaml.cs

 <Grid x:Name=”LayoutRoot” Background=”Black”>
  <Image Source=”Mirror_by_audpod.jpg” Stretch=”Uniform” RenderTransformOrigin=”0.5,0.5″ Margin=”50″>
    <Image.RenderTransform>
     <CompositeTransform Rotation=”-90″/>
    </Image.RenderTransform>
   </Image>
   <Image x:Name=”unique_psds” Source=”Photoshop-Brushes-Broken-Glass-psd9371_Images/unique_psds.png” RenderTransformOrigin=”0.5,0.5″ UseLayoutRounding=”False” d:LayoutRounding=”Auto” Canvas.Left=”131″ Canvas.Top=”-250″ Margin=”33.89,186.357,46.006,188.643″ Height=”330″>
    <Image.RenderTransform>
     <CompositeTransform Rotation=”-29.704″/>
    </Image.RenderTransform>
    <Image.Projection>
     <PlaneProjection/>
    </Image.Projection>
   </Image>
  <HyperlinkButton Content=”Samples from http://silverlightips.net by Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” IsTabStop=”False” Foreground=”White” HorizontalAlignment=”Center” Height=”30″ VerticalAlignment=”Top”/>
 </Grid>

Now i will try to show Wonderland world inside the crack. The idea  of creating crack is explained at earlier post. I will try to show “Alice in Wonderland” scenary inside the crack. To do that, I will create a path around the area of the crack. This can be done by creating several lines and making them into a simple path or just draw a path with many connecting nodes.

  

Make sure that you have put your stroke color white when you draw the line on the crack region. So above you can see the output path generated. Now I will add a wonderland picture to the project and clip it using the path.

  

And you have the output like this. The final output of the code is

MainPage.xaml (modified)


 <Grid x:Name=”LayoutRoot” Background=”Black”>
  <Canvas Width=”960″ Height=”500″>
   <Image Source=”Mirror_by_audpod.jpg” Stretch=”Uniform” Canvas.Left=”199″ Canvas.Top=”-36″ />
   <Image Source=”alice-in-wonderland2-lst066214.jpg” Stretch=”Fill” Canvas.Top=”102″ Width=”649″ Canvas.Left=”27″ Height=”467″ Clip=”M366,171.5 L371,163.5 L375,167 L381.5,167 L388,161.5 L393.25,170 L404,171.5 L408,169.75 L410.75,165.25 L411,159 L412.5,147.25 L414,138 L416.75,143.25 L420.25,151.75 L422,158.75 L423.25,165.75 L425.75,170.5 L430.5,174 L432,178.5 L433,181.5 L436.75,186.25 L440.5,190 L447,193.75 L455.5,195 L467.25,196.25 L468.52155,196.28854 L475.5,196.5 L485.75,197.75 L497.25,199 L511,200 L522.75,201 L529.69897,200.40439 L539.42041,199.57111 L540.25,199.5 L558.75,200 L562,197.75 L563.25,196.25 L562.25,191.25 L566.75,191.75 L571,191.25 L574.5,186 L574,182.75 L569.25,176.75 L571.5,175.75 L573.25,174.5 L577,174 L581.5,176 L586.5,175 L591,176.75 L597,177 L603.5,174.75 L608.75,169.75 L612.75,166 L614.5,172.5 L616.25,177.75 L620,179.75 L625.5,178.5 L630.5,178 L633,177.25 L628.25,182.25 L621.25,191 L619.25,194 L616,196.5 L613,206.75 L615.5,215.25 L613,221 L608.5,226.25 L605.5,228.75 L598.75,217.75 L595.5,210.75 L589.75,209 L583.5,209.75 L579,208 L576.5,203.5 L572.5,203 L568.25,205.75 L565.25,207.25 L562.25,207.5 L559.5,205.75 L558,202.25 L466.25,199.75 L464.5,200.75 L461.25,204.75 L458.75,208 L458.5,209.75 L457,213.25 L458.75,218.75 L462.5,221.75 L466.5,225.5 L471.75,228 L474,230.5 L466.75,231.5 L454.75,232 L444.5,232.25 L439,229.25 L435,230 L429.25,232.75 L423.25,235.75 L418.25,238 L415.5,244 L413,248.75 L407.5,250.25 L400.75,251 L392,251.75 L386,251 L387.5,245 L389.75,238.5 L393.75,229.25 L396,222.75 L396.5,213.75 L392.25,210 L388.75,205.75 L384.75,205 L383.5,198.75 L386,191.5 L387.25,187.75 L379.25,183.75 L368.75,181 L357.25,179 L366,177.5 L368,175.5 z”/>
   <Image x:Name=”unique_psds” Source=”Photoshop-Brushes-Broken-Glass-psd9371_Images/unique_psds.png” RenderTransformOrigin=”0.5,0.5″ UseLayoutRounding=”False” d:LayoutRounding=”Auto” Canvas.Left=”237″ Canvas.Top=”145″ Width=”400″ Height=”300″>
    <Image.RenderTransform>
     <CompositeTransform Rotation=”-29.704″/>
    </Image.RenderTransform>
    <Image.Projection>
     <PlaneProjection/>
    </Image.Projection>
   </Image>
   <Image x:Name=”unique_psds_Copy” Source=”Photoshop-Brushes-Broken-Glass-psd9371_Images/unique_psds.png” RenderTransformOrigin=”0.5,0.5″ UseLayoutRounding=”False” d:LayoutRounding=”Auto” Width=”245.028″ HorizontalAlignment=”Right” Canvas.Left=”397″ Canvas.Top=”278″>
    <Image.RenderTransform>
     <CompositeTransform Rotation=”-79.637″/>
    </Image.RenderTransform>
    <Image.Projection>
     <PlaneProjection/>
    </Image.Projection>
   </Image>
  </Canvas>
  <HyperlinkButton Content=”Samples from http://silverlightips.net by Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” IsTabStop=”False” Foreground=”White” HorizontalAlignment=”Center” Height=”30″ VerticalAlignment=”Top”/>
 </Grid>

Now, add a suitable image behind your broken effect as shown in the top picture of this blog post. I took that picture from deviantart gallery for demonstration purpose. Then apply the output created so far. Next entry will deal more about creating seperate independent effects library.

As always, you can download the source code from here [download link

Sharker Khaleed Mahmud
Web Developer

Advertisements

1 Comment »

  1. […] Apply clipping on Photoshop Brush Effects in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Windows Client Developer Roundup 034 for 7/26/2010 - Pete Brown's 10rem.net — July 26, 2010 @ 5:21 AM


RSS feed for comments on this post. TrackBack URI

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

Create a free website or blog at WordPress.com.

%d bloggers like this: