Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

2D All the way! / How to Make Glossy Buttons - Run through...

Author
Message
thinkdigital
21
Years of Service
User Offline
Joined: 18th Oct 2003
Location:
Posted: 2nd May 2005 03:50 Edited at: 2nd May 2005 03:56
Link
I was creating some shiney-style buttons for one of my projects the other day and noted that there doesn't seem to be too much information on creating these shiney buttons.

So I thought I'd post my method for making them. They tend to be a nice touch to a game, especially when used in HUDs.

Anyway, here's how to make a glossy button:

1.

First, open your image editor() and create a shape for your button. I pretty much use cirlces all the time. This puts us at:



2.

Next, fill your shape with a gradient (a texture made up when one color fades to another). Note that the lighter color should always be on the bottom. If it isn't, the gloss has the wrong effect. Also, the lighter color (on the bottom) should be a lighter version of the darker color (on the top), not a whole new color altogether.



3.

Now notice how bad the border looks in the last image. That can be fixed by first thickening the border:


and then coloring it a shade slightly darker than the darker gradient color (on the top):



4.

Time to add the gloss. Before we go and do this, you should create a gradient that fades from white to transparent, so that the upper-left corner is white, and fades till it is almost transparent in the bottom-left, bottom-right, and top-right corners.



5.

Alright, NOW it's time to add the gloss. Setting your gradient from the last step as your brush color, draw a curved line in the upper-left corner of the button:


Also, if your button is square, you should probably use an arrow like shape instead of the line:

(Forgive me for the bad button, I whipped it up quick to show what I meant)


6.

Alright, now blur the the 'gloss-line' that your just drew on your image to give it a more "glossy" look:



7.

Finally, select a color slightly lighter than the ligher gradient color (on the bottom), and setting it as your brush color, draw another curved line opposite the first one:


and blur it also:



And there you have it.


How does it look, and any ideas for making it look better?

[b]eGeneric Works : Dark Basic Developer Website
Back to top
Profile PM
D Ogre
21
Years of Service
User Offline
Joined: 19th Nov 2003
Location:
Posted: 3rd May 2005 08:49
Link
That is a very nice tutorial. Little informative details like that are good in the forums. It gives the beginners and approach on doing their own pixel art.
Back to top
Profile PM
thinkdigital
21
Years of Service
User Offline
Joined: 18th Oct 2003
Location:
Posted: 8th May 2005 04:00
Link
Thanks. Actually, I just figured out how to do that on my own by watching, because I couldn't find any tutorials on the subject.

[b]eGeneric Works : Dark Basic Developer Website
Back to top
Profile PM
soapyfish
21
Years of Service
User Offline
Joined: 24th Oct 2003
Location: Yorkshire, England
Posted: 8th May 2005 06:49
Link
Thanks, this is the sort of thing that most people don't need right away, but are glad it's here when they do. Thanks again.




Formely play2kill

thanks for taking the time to read this sig.
Back to top
Profile PM Email Website
thinkdigital
21
Years of Service
User Offline
Joined: 18th Oct 2003
Location:
Posted: 22nd May 2005 03:23
Link
Sure.

[b]eGeneric Works : Dark Basic Developer Website
Back to top
Profile PM
Sergey K
21
Years of Service
User Offline
Joined: 4th Jan 2004
Location:
Posted: 26th May 2005 09:19
Link
very nice.. but i have better buttons ..

this is the button:


and this is when the mouse and button hitting each other:



this is in my game buttons.. check it out: http://forum.thegamecreators.com/?m=forum_view&t=54457&b=8



By the time you finish reading this, you realize you have wasted 5sec. of your life!
click here to return your 5sec.
Back to top
Profile PM Website
zenassem
22
Years of Service
User Offline
Joined: 10th Mar 2003
Location: Long Island, NY
Posted: 26th May 2005 11:57
Link
Quote: " very nice.. but I have better buttons .."


Arggggghh! Why, bloody why, do you keep posting comments like these? It takes a special breed to annoy me, and you my friend are that breed.

How hard would it have been to say. "I like those buttons you made, and here are some text buttons I made that use a similar technique."


Back to top
Profile PM Email
Sergey K
21
Years of Service
User Offline
Joined: 4th Jan 2004
Location:
Posted: 26th May 2005 16:19
Link
lol..

well at last he can make a tutorials to make better buttons ^^
becouse the circle is not sp usage for the buttons.. so the tutorials is not helping..

anyway, who have photoshop he dont need to look at this.. he have already few custom style buttons ready..
and u also get "Button Maker" with all the nice buttons =]

By the time you finish reading this, you realize you have wasted 5sec. of your life!
click here to return your 5sec.
Back to top
Profile PM Website
Van B
Moderator
22
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 26th May 2005 20:45
Link
Looks neat - nice to see people using traditional pixel pushing more than those lame filters.

Personally I like a shinier looking button, but that's easily done with a slight change in style. Like if you put the dark part in the top left corner and faded it out, you would put a highlight on the bottom right corner, and a spot light on the top left corner, so the dark part has a sharp spot. You should try it out, see how shiny you can make it look.

TBH I don't really see Gogeta's point, or why he's comparing a round button tutorial to his own text buttons - kinda irrelevant when most people are expecting to come in here and find stuff about making those shiny style buttons.


Van-B

Back to top
Profile PM Email
Sergey K
21
Years of Service
User Offline
Joined: 4th Jan 2004
Location:
Posted: 26th May 2005 20:59
Link
@Van B: you tell me; what you can do with circle buttons?

i not hate that buttons that thinkdigital made, but the point is that its useless buttons.. noone using circle buttons.. its only text buttons or keyboard buttons =]

By the time you finish reading this, you realize you have wasted 5sec. of your life!
click here to return your 5sec.
Back to top
Profile PM Website
Van B
Moderator
22
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 26th May 2005 21:50
Link
There's millions of uses of glossy round buttons, practically every UI made since XP uses them - heck smilie faces are even getting on the bandwagon. I'm not saying that text buttons are useless - I'm saying their very different and have no real relevance with eachother, nobody is thinking 'that round button looks nice, but I think I'll go for text instead' - round buttons would be used along with a bitmap font usually, or their use would be obvious after adding an icon image.

Thing is, this sort of 2D tut is helpful right now for anyone making graphics for their puzzle compo entry, I mean how many puzzle games will we see using shiny ball sprites?.


Van-B

Back to top
Profile PM Email
Baggers
20
Years of Service
User Offline
Joined: 31st May 2004
Location: Yonder over dem dere hills
Posted: 27th May 2005 07:59
Link
GogetaX: Well i consider myself a rational human being, i dont jump straight to a conclusion without evidence and i do accept mistakes can be made...however in summary of all the evidence it turns out that you are a prat.
Seriously how many times must yoy do this to peoples threads, this is a great tutorial which gives a very neat effect, its far from useless i mean didnt the simple line
Quote: " pretty much use cirlces all the time"

Give any clue to you that some people use round buttons... plus its all theory that can be applied to other buttons, he himself shows how a similar method can be used for square or rectange buttons...personaly id chose his over the ones you posted any day, they are simplistic, neat and pleasing to the eye.

I sincerly suggest you learn fast how to not only be a decent forum-citisen but also a decent human being as you are really on the fast track to getting banned if you keep this kind of behaviour up.
And if your behaviour doesnt improve i'll be happy to back the idea of your removal, and ive never felt that about anyone on this board...not even Squid's revenge.

Im sorry 'thinkdigital' for this intrusion into this thread but this is happening at least once a day. sorry again.

Back to top
Profile PM Email
Back to top

Login to post a reply

Server time is: 2025-05-17 10:18:01
Your offset time is: 2025-05-17 10:18:01