Theming Buttons

It would be great to have a theming engine that exposes basic drawing operations to theme authors. Instead of having a number of options per widget, you would deal with primitives like lines, rectangles and gradient fills.

Let me just say that I know of 2 developers who are on it🙂

Now if you want to draw a button that way, it appears to be simple enough. Just a usually rounded rectangle with one or several outlines (stroked rectangles), with gradient fills per outline and one for the body. If you assume light straight from top, vertical gradient fills with 4 stops for the outlines are sufficient for a somewhat realistic look.

Not so if you assume lighting from the top left. What I would like to have for such a case is one gradient per outline, with 8 stops placed exactly between the segments (= curves in the corners and straight lines on the sides). Extra points for the ability to add stops between the 8 fixed ones.

In Inkscape, you have to take the rectangles apart to get to that level of control, making it rather laborious and inflexible, as you can’t change the corner radius in a single step anymore, afterwards.

Example construction of a button:

  1. Outlines. It would be most comfortable to define the corner radius once, for the outermost rectangle. It should be possible to add up to at least 4 outlines, defaulting to 1 px strokes and inset.
  2. For each outline, there should be the option to have 8 gradient stops between the segments. The implementation could treat the segments separately, each with a simple linear gradient, just like I had to construct it in Inkscape here.
  3. Just a vertical linear gradient fill for the body.
  4. Plus a horizontal fill with 34 % opacity. It should be possible to layer linear and radial fills, with alpha per gradient stop.
  5. A shadow. This button doesn’t gain much from it, but it illustrates that drawing and layering rectangles with offsets would be useful.
  6. A plain black label.
  7. Gradient fill for the label. This can reduce legibility, but if handled with care, it makes button and label appear more like a whole.
  8. Luxury feature: sunken or raised (see 9.) look for the label. I used a crude approach with stroked and offset duplicates here, which works only on small scale. A clever implementation would take the angle of the character stroke and the lighting direction into account to render a smooth surrounding.

About thorwil
I'm a designer from Germany. My main interests are visual and interaction design, free/open-source software and (electronic) music.

3 Responses to Theming Buttons

  1. Luis says:

    The Qt toolkit allows you to customize your widgets’ look and feel using a CSS-like language. You can see this feature in action in my project ls16, you can even try your GUI tweaks in real time:

    http://ls16.sourceforge.net/

    Cheers,

    L

  2. TGM says:

    Your buttons kind of remind me of these: http://www.sasg.com/mwb/index.html
    I’d love a return to this style🙂

  3. Rob A says:

    “In Inkscape, you have to take the rectangles apart to get to that level of control, making it rather laborious and inflexible, as you can’t change the corner radius in a single step anymore, afterwards.”

    Have you tried using clones of a base rectangle with stroke and fill unset? Changing the one would change all the clones (size and curvature).

%d bloggers like this: