Lyone

Buttons

As I see this has been quite a problem in many cases, I thought I'd go ahead and give it my shot. As I don't think I've seen a tutorial to this extent, I will assume this is the only one.

First Things First

Make sure you have a graphics program of some sort. Any program with the selection tool is fine. Next, make a new image (File > New for most programs) with a transparent background. Make sure you have the size; for this tutorials sake, I will be doing 80 by 15. Then you're going to choose your colors; for this tutorial, I'm choosing greys. Finally, and this is optional, I've zoomed in most of the way, so I have a clearer image of what I'm doing; I'd recommend this, but it isn't necessary.

Base

Now were going to do the base. Pick a color for the “inner” border, as I like to call it, which will NOT be your border around the image. I chose white (#FFFFFF).

Border

Next is the border. We're now going to draw a 1px line around the image and fill it with color. (Light grey (#BEBEBE))

Background

Now you want the background, which will be the basis of your button. I'm going to choose an even lighter grey for my background (#D4D4D4). We're going to select the image 1px away from the border (leaving a 1px space between the border and the selection). Then we're going to fill it with our color of choice.

Second Border

The second border is completely optional, but is always there for affect. :P Take your button, and anywhere along the button, draw a 1px line through the background only. Use the color of your base (white for this tutorial) a fill it with that color.

Text

Once again, text is option. It's not strictly necesary, but as said, it's usually for affect or for the purpose of the button. Here I'm to put “Lyone Net” (for lyone.net) in the “boxes” with a dark grey (#5F5F5F) I also used the font 04b. This leaves me with the final result:

As a final note, I'd like to conclude that this'll work on any button/graphic of any size. :)