Creating a Vista Aero Glass effect with SVG

Share your Inkscape tricks and tutorials here.
User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Creating a Vista Aero Glass effect with SVG

Postby microUgly » Mon Mar 03, 2008 10:59 am

A new article has been posted on Dev.Opera which describes how to create a Vista Aero Glass effect using SVG filters.

The article doesn't involve using Inkscape at all, but some people might enjoy learning some of the basics of SVG coding.

How to do photoshop-like effects in SVG

User avatar
capnhud
Posts: 435
Joined: Mon Jun 04, 2007 8:30 pm
Location: U.S.A

Re: Creating a Vista Aero Glass effect with SVG

Postby capnhud » Tue Mar 04, 2008 2:43 am

I was just looking for something exactly like this. Thanks for the heads up micro.

nightingale2k1
Posts: 15
Joined: Fri Jun 22, 2007 11:59 am

Re: Creating a Vista Aero Glass effect with SVG

Postby nightingale2k1 » Thu Mar 06, 2008 5:34 pm

Thanks for this ...

i also looking for creating glassy effect like in the vista aero window. I found this http://psdtuts.com/text-effects-tutoria ... photoshop/ , but i dont know how to do blending stuff in inkscape ( i use 0.45, not using 0.46 yet because it is not stable)

thank you!

User avatar
capnhud
Posts: 435
Joined: Mon Jun 04, 2007 8:30 pm
Location: U.S.A

Re: Creating a Vista Aero Glass effect with SVG

Postby capnhud » Tue Mar 25, 2008 4:23 am

@nightingale2k1
i also looking for creating glassy effect like in the vista aero window. I found this http://psdtuts.com/text-effects-tutoria ... photoshop/ , but i dont know how to do blending stuff in inkscape ( i use 0.45, not using 0.46 yet because it is not stable)



You could do that effect with the stable inkscape,
1. Follow all the steps in terms of the colors 1-3,
2. But when you get to step 3 you duplicate text and use this fill #062827 in order to emulate the layer style blending then apply a blur (about .3 or so)
3. Duplicate again and apply a transparent white gradient from the top down.
4. Duplicate again and apply a transparent white gradient from the bottom up.
5. Add glosss and shiny stars and you have tranparent glass lettering.


Return to “Tricks & Tutorials”