Today, I want to introduce a handy tip for creating buttons.
One thing that is very important when creating buttons to be used in many different situations is to make sure that [the border of the button does not blur in different colour backgrounds].
When you create a pale-coloured button, you probably also use a pale-colour for the border.
If you place a button with a pale-coloured border in a light background it will be displayed nicely, but in a dark background or a colour close to the colour of the border…
Can you see how the edges have become blurred?
When the border between the background and button becomes blurry, the button loses a 3D-like(the feeling that it can be clicked) sense.
Even though the width of the border may be a mere 1px, it plays a vital function in how we perceive the button it surrounds to function.
How to make [a border that does not blur when used in different coloured backgrounds]
In order to prevent blurring of borders, draw a border using a dark colour, and adjust the transparency to appear beautifully in pale backgrounds.
This will provide a crisp border that works well with the background colour.
It maybe just a small tip, but creating a habit of doing this helps prevent having to change the border to suit different background colours after you have finished making a button.
In addition to using this tip for creating buttons, you can also use it on icons and various other parts of design so please feel free to give it a go!
Please join us on Facebook for Sleipnir for Windows!
Please follow us on Twitter!