Drawing a button

Here’s an excerpt from last 1,5 hours that I’ve spent designing a button for NG. This button to be exact:


I wanted to step off classic boring buttons and make something more colorful and modern, yet suitable for a medieval RTS. Something to help fill menus with beating life. Blood red and flag shape – what can be better? xD

Designed in vector, to allow to tweak all the little pieces without loss of quality.

First comes the outline and fill:


Pretty dull, heh? Okay, now we need some beveled edges:


Still boring. Next half an our is spent placing gradients on the edges and designing the highlight, and placing template text along the way:


Button needs an outline to stand out in menus and to allow nicer “push” animation:


Perhaps a little different tint, more goldish:


A bit darker tail and a little shadow between the button and the outline, it should not steal buttons thunder:


Lets make it a bit more pointy at the nose:


Tail should be a bit darker:


And that is semi-final result at which I have stopped as seen in the articles header:


Thanks for watching!

This entry was posted in Artwork. Bookmark the permalink.

2 Responses to Drawing a button

  1. Ben says:

    I remember making buttons for my introductory web development class, so this is actually something I can click with you on 😀

    Nice button!

    • Krom says:

      Thanks for reply Ben!

      I don’t have much experience with buttons, so hopefully it will improve in the future )

Leave a Reply

Your email address will not be published. Required fields are marked *