Text Effects – quick and easy

Inkscape tutorial

Just a quick tutorial on how to create an quick and easy text effect with outlines and highlights. I like to use this effect a lot for menu texts and mock-ups. It’s quick to create and I find it looks rather nice.
The key to this effect working/ looking good is the right font. Choose a bolder/ thicker font to allow the inset to work.
2Dgameartguru inkscape toolbar

Let’s get started on Text Effects

2dgameartguru - quick and easy text effect

Start with a simple text.

Choose a font with enough volume to (e.g. a bold or black). I used the Google font ‘Bangers’ for this example.

Select a fill and a stroke colour (Right click on a colour and it brings up the option ‘Set stroke’).

In the stroke menu increase the stroke size and select the round joint and round cap to avoid ‘spikes’ sticking out with some fonts.

Duplicate the text and set this version to have no stroke.

2dgameartguru - quick and easy text effect
2dgameartguru - quick and easy text effect

Create another duplicate and use ‘Path / Inset’ (CTRL+( ).

Duplicate this inner shape and move it down a little.

Cut the lower parts of the shape by using the ‘Path/ Difference’ tool and you get a highlight effect of sorts.

2dgameartguru - quick and easy text effect

Variations of the Effect

You can use the same workflow on any sort of object – not just fonts. Buttons, icons or bullet points look nice with the highlight and a little gradient fill added to them.

2dgameartguru - text effect quick and easy

Variations

You can use the same workflow on any sort of object – not just fonts. Buttons, icons or bullet points look nice with the highlight and a little gradient fill added to them.

Enjoy playing around with this one. I would suggest trying multiple stroke objects with decreasing stroke width to get double or triple outlines.

2dgameartguru - text effect quick and easy
2Dgameartguru inkscape toolbar

Creating the quick and easy Text Effect in Gimp

And for all those Gimp users, it’s not that hard to create this kind of effect either. It’s a different approach in gimp though. Here we are using selections. Growing and shrinking those achieves a very similar effect.
Tip:
There is a stroke effect in Gimp and it allows you to add a stroke to a path made either from an object or a text. It offers a lot more flexibility than the outline created by the growing selection (Edit/ Stroke Path).
2dgameartguru - quick and easy text effect

Start with a blank canvas [preferably twice the size of the ingame need] and create a text.

Choose a font with enough volume to (e.g. a bold or black). Afterwards, select the whole text.

Right click to bring up the ‘Path from Text’ option.

Create a new layer and make a selection ‘Select/ From Path’.

Using the ‘Select/ Grow’ you can increase the size of the selection.

Use the fill tool to colour the selection.

2dgameartguru - quick and easy text effect
2dgameartguru - quick and easy text effect

Repeat the steps 3, 4 and 5 to create another selection on a new layer.

This time use the ‘Select/ Shrink’ action to create a smaller selection.

Use the fill tool to colour the selection.

Use the move tool to move the highlight layer up a tad.

Press ‘Delete’ to cut the selected area from the highlight and move it back down.

2dgameartguru - quick and easy text effect

This wraps up the “quick and easy text effect” tutorial. As usual, I hope you enjoyed it! I had a good time writing it and I might just make a few more of these ‘simple yet effective’ effect tutorials in the future.

2Dgameartguru basics - circles
2Dgameartguru basics - squares
2Dgameartguru basics - shading
2Dgameartguru basics - align
2Dgameartguru basics - picking colours