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:

button8

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:

controls_button0

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

controls_button1

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

button2

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

button3

Perhaps a little different tint, more goldish:

button4

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

button5

Lets make it a bit more pointy at the nose:

button6

Tail should be a bit darker:

button7

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

button8

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.