Pages

Quick and dirty - a simple effect for menu texts

Just a quick tutorial on how to create an outline/ highlight effect. I like to use this effect a lot for menu texts/ mock-ups as it's quick to create and 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. 

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. 


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 but by using selections and growing and shrinking those you can achieve 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).




Enjoy!

Chris Hildenbrand

2D game artist, pixelpusher, vector bender, face turner for over thirty years. I worked on more games than I can remember... The most recent release is "Super Crossbar Challenge" for iOS (Android coming soon) with Shattered Box, Fredbear Games and PlayPlayFun.

24 comments:

  1. Hi!

    Very nice to see new tutorials!

    Thank you very much!

    ReplyDelete
  2. Thank for tutorial.

    ReplyDelete
  3. I hate you for making everything look so simple! :)

    Thanks a lot for these. It really makes a world of difference to use this technique over simple text!

    ReplyDelete
  4. Nice tutorial, as always!
    One little nit though, gimp does have a stroke operation - and you can apply the stroke to a selection or a path. Plus, the stroke can use any of the drawing tools: pen, brush, eraser, smudge tool, you name it.
    Cheers,
    Chris

    ReplyDelete
    Replies
    1. Thanks for the info, Chris... I will fix it in the tutorial... I wasn't aware of the stroke function - and it works nice when used on a path.

      Delete
  5. Hello Sir,
    Thank you for your tutorials on game art for programmers.
    I really appreciate for your kind work.

    ReplyDelete
  6. thank you very much for your nice tut.

    ReplyDelete
  7. Just thought I would mention "Linked Offset" in the Path menu. Try typing some text, and with the text selected, go to Path -> Linked Offset. Once that is created, drag the single node that it has outward. It has a similar effect to the stroke that you've been applying with the added bonus of being completely dynamic. Select the text again and type some more/make some changes. The linked offset matches it.

    ReplyDelete
  8. I am not sure why but the first tutorial is not possible on my version of Inkscape (0.48) because trying to generate an inset can't be accomplished without an available path... which I can get if I were to convert the 'object to path' then select each individual character then create an inset. Took me a lot of tinkering to get the desired effect beyond what is given in this tutorial.

    ReplyDelete
    Replies
    1. Hi Nicholas, I tried it and it's working fine without having to convert to a path in inkscape 0.48 on pc. I just make a duplicate of the text and do the inset on the whole text. What OS are you working on?

      Delete
    2. This is also not working for me. When I try to inset the text inkscape is telling me "No paths to inset / outset in the selection. I'm using inkscape 0.48 on Windows 8.1

      Delete
    3. Very strange... I will look into it again... I am a little puzzled on why it's not working for some.

      Delete
  9. please upgrade the tutorial inkscape-wise.
    The 7th step does not work.

    ReplyDelete
    Replies
    1. I am using Inkscape 0.48 on PC and it works just fine for me. Which version of inkscape are you running on what OS?

      Delete
  10. What font is used for the text "gameart"?

    ReplyDelete
    Replies
    1. The font is called BorisBlackBloxx (medium).

      Delete
  11. Can't inset :( No paths I am on windows 7 and on the most recent update

    ReplyDelete
    Replies
    1. Odd... I am running windows 7 and Inkscape 0.48 and it works like fine. Could it be that your object is too small/ thin for the inset to work. Can you try scaling it up and try with a bigger/ bolder font/ object.

      Delete
    2. Solution: Click the text tool Don't drag it. If you drag you use flowed text but insert only works on regular text.

      Link: http://www.reddit.com/r/Inkscape/comments/29ymev/path_insert_issues_2d_game_art_for_programmers/cips2sy

      Delete
  12. Thank for your sharing! I'm trying to generate fonts in word 2000, and my work will be showed to my students. I found your tutorial is much helpful to my work. That makes me can choose various of nice fonts.

    ReplyDelete