Staying in shape

Inkscape Clipping Tool Tutorial

In line with the water theme, let’s go ashore and look at a sunset on the beach to introduce some more helpful tools and techniques. This time we will learn to keep elements inside a shape, create a palm tree and interpolate between objects. The only thing missing is the cocktail and the sound of the beach.

Let’s get started

Varying the fronds, adding to the interpolation and checking some reference images can improve the look of the palms even further.

Recycling objects

If you have similar screens to design for your game it makes sense to spend some time on the initial elements and then ‘recycle’ objects. This way you save time and create a more consistent look and feel.

2Dgameartguru inkscape toolbar
2Dgameartguru sunset scene

Start with a rectangle.

Use the gradient tool to create a linear fill. We want to create a sunset with the light low on the horizon.

Add a duplicate below and edit the gradient fill from orange to dark blue.

A darker rectangle with modified nodes will be our beach in the foreground.

Another rectangle with a light yellow fill with 25% alpha will make rays of light.

Narrow the base, move the pivot point to the lower centre and duplicate.

2Dgameartguru sunset scene
2dgameartguru - clip tool

To keep the rays ‘inside’ background we use the clip command. Start by creating a duplicate of the sky…

… select the rectangle and then the rays and use the Object/ Clip/ Set command.

This new ‘ray object’ can be duplicated and even assigned its own alpha setting.

2Dgameartguru sunset scene
2Dgameartguru - spacer
This is our basic ‘pop style’ sunset with some modified circles and gradient alpha fills added to represent some rocks in the water.

Adding detail

It’s time to add the tropical feel with some palm trees.
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2Dgameartguru sunset scene

Let’s add a distant island with some palm trees.
Starting with a squashed circle.

After converting it to a path, mark all the nodes and click on the insert new nodes button.

Clicking twice will give us enough nodes to deform the circle into a nice rounded island silhouette. Duplicate the shape and move some of the nodes down- and inwards.

Our distant palms start with a simple star…

… converted to a path and modified to form the fronds.

By clicking on the lines between the nodes and dragging them you manipu­late the curves.

2dgameartguru - clip tool
2Dgameartguru sunset scene

Add a square for the trunk.

Convert to a path, mode the nodes and smooth the curves.

Add variations to make your scenes look a lot more interesting.

2Dgameartguru sunset scene
2Dgameartguru - spacer

Scalability

One of the ‘wonderful’ things about working with vectors is scalability. Objects can be scaled up and down without a loss in quality. This allows for easy editing and adjusting of the illustration.
In this case, the scale of the palm trees will define the viewer’s perception of distance. Smaller palm trees will put the island further into the distance while large trees will ‘bring’ it up close.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2Dgameartguru sunset scene

Small palm trees scattered on the island make it appear larger and more distant…

2Dgameartguru - spacer
2Dgameartguru sunset scene

… while larger trees make it a smaller island that appears to be closer to the shore.

2Dgameartguru - spacer
2Dgameartguru sunset scene

So far we just used two simple palm shapes for our scene but already looks like a tropical island beach.

By using the same palm trees in the foreground we set a more ‘simplistic’ and very graphical tone to the scene.

Let’s try and add a little more detail to our simple ‘star shape palms.’

2Dgameartguru - spacer

Reusing Objects

Btw. the clouds are the same shape as the island just squashed and coloured to match the sky gradient. Try reusing shapes even just slightly modified, recoloured, squashed, rotated or flipped to speed things up, add variation and make your scene more interesting.

Note:
A lot of the objects I am covering in my tutorials (like the palm trees above) working from predefined shapes (circle, square, star, etc.) is only one option. The freehand or straight line tool will create identical shapes but require a little more artistic skill. 

For our detailed palm, we need two ‘more advanced’ features of Inkscape: Interpolation and Path Effects.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2Dgameartguru sunset scene

For our foreground palm, we start with a squashed circle and convert it to a path…

… and modify the nodes to create a pointy end.
Note:
This is a good shape for grass or hair as well.

Create a smaller duplicate of the shape.

Select both objects and interpolate them (Extensions/Generate from Path/ Interpolate).

Flip a duplicate vertically and place it below.

Add another circle to fill the centre of the frond and add the stem.

2dgameartguru - clip tool
2Dgameartguru sunset scene

Add a square for the trunk.

Convert to a path, mode the nodes and smooth the curves.

Add variations to make your scenes look a lot more interesting.

2Dgameartguru sunset scene
2Dgameartguru - spacer

Conclusion

There are endless options for a beach scene. You can take it to different times of the day, focus more on the sky or the water, add marine life or people on the beach. A really cool illustration would be a split scene: one half below and the other half above the water. I will show you a quick variation with a daylight scene based on the elements we just created.

2Dgameartguru inkscape toolbar
2Dgameartguru sunset scene

The great advantage of using vectors graphics lies in the ease to manipulate and modify the objects.
By taking the elements from the sunset theme and colouring them differently it’s a breeze to create a daytime beach scene.
A darker to lighter green gradient for the palm fronds and a blueish green for the island and the the sky transforms the whole scene.

2Dgameartguru - spacer
2Dgameartguru sunset scene

Depending on the art style you want to achieve vector illustrations might just look too clean or too bright or simply pop too much visually.
I suggest combining them with some effects available in gimp.

By combining the tools of vector illustration programs with the abilities of bitmap and photo manipulation the results change dramatically and offer endless possibilities.

2Dgameartguru - spacer

Finally, I hope even these slightly more advanced features don’t pose too much of a problem. As always, enjoy, create and stay tuned for more!


Get the source art (svg file) of this tutorial for free!
2Dgameartguru - spacer