Creating shiny windows

Inkscape tutorial

This is a quick tutorial as a reply to a reader’s request. It’s a simple, shiny office window to be used as a game tile. Basically, all you do is play around with some rectangles, the clip tool and some gradient fills.
Let’s get to it…
2Dgameartguru inkscape toolbar
2Dgameartguru - shiny windows

Start with a rectangle…

..add a duplicate below for the window frame.

Use the gradient tool to create a linear fill. In this case, a blue gradient reflects the sky.

Add another rectangle with a gradient alpha fill form 50% to 0%.

Create a few more copies and adjust their width.

Select all the light effect rectangles and use the skew tool (double click on the objects).

2dgameartguru - shiny windows
2dgameartguru - shiny windows

Duplicate the window rectangle to create a clip object…

… select all the light effect rectangles, then the copy of the window rectangle and do a Objects /Clip / Set.

A rectangle changed to path with a modified bottom line and a gradient fill adds some shine.

Create minor variations of the light effects and the final shine object. As a result, the rows of windows look less repetitive.

2dgameartguru - shiny windows
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Variations

2Dgameartguru - spacer
2dgameartguru - shiny windows - variations

Finally, play around with colours and added decoration to create the look you are after…

2Dgameartguru - spacer
2dgameartguru - shiny windows - variations

… add grunge and a greenish glow [you can find the crack creation tutorial here] …

2Dgameartguru - spacer
2dgameartguru - shiny windows - variations

… or a sunset feel…

2Dgameartguru - spacer
2dgameartguru - shiny windows - variations

… or something more elaborate.

2Dgameartguru - spacer

I hope this explains it a little bit. Enjoy and keep the requests and feedbacks coming…


Get the source art (.svg file) of this tutorial for free!