locked
Glass effect with Blend 4 - how? RRS feed

  • Question

  • Hello!

    I would like to create window like here:

    http://www.youtube.com/watch?v=-2x4wUHwork

    But I have problem with this "glass effect". I was trying with clipping path, but I think this is not good idea.

    Anyone who can help me - thanks :)

    Wednesday, March 14, 2012 4:43 PM

Answers

    1. Draw a shape on your design surface like for this example, a Rectangle and make it black.
    2. Make a copy of the shape and make its background Gradient
    3. In the color editor on your properties tab choose one point of the gradient and set its Alpha to 0% (The "A" underneath the R G B values)
    4. Choose the other gradient point and set it to the color White with an opacity of say %30
    5. Now Draw an Ellipse shape over both of them off-center so down and to the right to re-create that arch.
    6. Select your Ellipse, and the Rectangle shape you applied your gradients too both in your Objects & Timeline tab by holding Ctrl and choosing both.
    7. Go to your Objects menu at the very top and choose Shape -> Combine -> Subtract
    8. You should now have your new path that fits the shape of the arc'd gradient effect, just use your Gradient tool to adjust how you want your gradient to be displayed and voila! You're done... Good luck!

    End result would look something like this;       

    <Grid Height="241" Width="500">          

    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="241" Grid.Row="1" VerticalAlignment="Top" Fill="Black"/>                

    <Path Data="M5.5000024,0.5 L468.5,0.5 C471.26141,0.50000268 473.5,2.7385788 473.5,5.5000029

    L473.5,74.814735 L472.85678,74.462769 C431.202,52.276283 382.3031,39.500004 330,39.5

    C194.48744,39.500004 81.826477,125.26474 58.803009,238.25049 L58.377842,240.5 L5.5000024,240.5

    C2.7385762,240.5 0.5,238.26143 0.5,235.5 L0.5,5.5000029 C0.5,2.7385788 2.7385762,0.50000268 5.5000024,0.5 z"

    Height="241" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top">                    

    <Path.Fill>                        

    <LinearGradientBrush EndPoint="0.395,0.772" MappingMode="RelativeToBoundingBox" StartPoint="0.193,-0.218">                            

    <GradientStop Offset="0.384"/>                            

    <GradientStop Color="#4CFFFFFF" Offset="0.978"/>                        

    </LinearGradientBrush>                    

    </Path.Fill>                

    </Path>            

    </Grid>



    Please mark answers as helpful when used, and answered when completed.

    • Marked as answer by GoksaP Thursday, March 15, 2012 3:51 PM
    Wednesday, March 14, 2012 6:42 PM

All replies

  • Which part? The background looks like a radial gradient with an oval on top of it.

    Wednesday, March 14, 2012 6:37 PM
    Moderator
    1. Draw a shape on your design surface like for this example, a Rectangle and make it black.
    2. Make a copy of the shape and make its background Gradient
    3. In the color editor on your properties tab choose one point of the gradient and set its Alpha to 0% (The "A" underneath the R G B values)
    4. Choose the other gradient point and set it to the color White with an opacity of say %30
    5. Now Draw an Ellipse shape over both of them off-center so down and to the right to re-create that arch.
    6. Select your Ellipse, and the Rectangle shape you applied your gradients too both in your Objects & Timeline tab by holding Ctrl and choosing both.
    7. Go to your Objects menu at the very top and choose Shape -> Combine -> Subtract
    8. You should now have your new path that fits the shape of the arc'd gradient effect, just use your Gradient tool to adjust how you want your gradient to be displayed and voila! You're done... Good luck!

    End result would look something like this;       

    <Grid Height="241" Width="500">          

    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="241" Grid.Row="1" VerticalAlignment="Top" Fill="Black"/>                

    <Path Data="M5.5000024,0.5 L468.5,0.5 C471.26141,0.50000268 473.5,2.7385788 473.5,5.5000029

    L473.5,74.814735 L472.85678,74.462769 C431.202,52.276283 382.3031,39.500004 330,39.5

    C194.48744,39.500004 81.826477,125.26474 58.803009,238.25049 L58.377842,240.5 L5.5000024,240.5

    C2.7385762,240.5 0.5,238.26143 0.5,235.5 L0.5,5.5000029 C0.5,2.7385788 2.7385762,0.50000268 5.5000024,0.5 z"

    Height="241" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top">                    

    <Path.Fill>                        

    <LinearGradientBrush EndPoint="0.395,0.772" MappingMode="RelativeToBoundingBox" StartPoint="0.193,-0.218">                            

    <GradientStop Offset="0.384"/>                            

    <GradientStop Color="#4CFFFFFF" Offset="0.978"/>                        

    </LinearGradientBrush>                    

    </Path.Fill>                

    </Path>            

    </Grid>



    Please mark answers as helpful when used, and answered when completed.

    • Marked as answer by GoksaP Thursday, March 15, 2012 3:51 PM
    Wednesday, March 14, 2012 6:42 PM
  • @KS.BlendDesigner

    Thanks for help :)

    Thursday, March 15, 2012 3:52 PM
  • Any time. Cheers

    Please mark answers as helpful when used, and answered when completed.

    Thursday, March 15, 2012 4:15 PM