Episode 056

Episode 056 – Web Badges

by heathenx

In this screencast I will demonstrate how to make small web badges for your web page to promote of your favorite project. I’ll be using Inkscape v0.45


9 Responses to “Episode 056”

  1. screencasters.heathenx.org/blog » Blog Archive » Episode 056 - Web Badges Says:

    […] Episode 056 I demonstrate how to draw a web badge. I have a few of these things plastered on my personal […]

  2. orijimi Says:

    I was under the impression that you’ve been using Ubuntu this entire time, not Suse. Am I wrong?

  3. heathenx Says:

    I use Windows, Ubuntu and openSUSE on a regular basis but I rarely screencast on any of my Ubuntu machines. This particular screencast was recorded on my Windows machine at work. I sometimes screencast during my lunch break or after hours if I get the itch to do one.

    My preference is to use openSUSE but it doesn’t really matter what OS I use to screencast on because it isn’t about the OS anyway…it’s about Inkscape. If I had a Mac then I would screencast on that too. 🙂

    Confusing, huh?

  4. Niko Kuzel Says:

    These remind me of the userbars I use to make in the gimp. 🙂

  5. Charles Peng Says:

    why the picture so different?

  6. Patrick Says:


    Thanks to you and Richard I am finally quite comfortable with Inkscape and I am now using it to help with my little business, Thanks again!-Patrick

  7. Inkscaper Says:

    Thanks for the next great tutorial. If I could suggest the content of the next screencast – I would love to see some tips about brand new features of Inkscape 0.46. I mean especially filter effects and live paths – those seem to be very powerfull but I’ve found them hard to use and poorly documented.

  8. JLD Says:

    Thanks for the whole screencasters site and the tutorials. I’m just discovered them and have a lot of material to see and digest.

    I think there is a flaw in this particular tutorial. The font silkscreen is designed to be pixel-aligned when resized to a height of 5 pixels. However, you break this alignment when manually alter the kerning. Doing this way, each letter does not begin at pixel boundary, which causes aliasing (it can be observed when you zoom to 200% in the bitmap viewer). This is why the text is so difficult to read.

    If you do not insist in the text being inside the red boundary (why is this? We still have plenty of space in the light gray rectangle), you better do not alter the kerning, and simply shift 1px to the left the whole text, in order to have it right-aligned with the light gray rectangle. Doing so, no aliasing occurs in the font and the resulting bitmap has better legibility.

    Another tip: instead of using the alignment buttons, and pixel displacements in order to place the elements, I prefer to activate the grid snap, and set the grid spacing at 1pixel. This way I can move more freely the shapes, and still being pixel-aligned.

  9. heathenx Says:

    Excellent tips JLD. When making these buttons in the future I will keep those things in mind. 🙂