Sign in to follow this  
intrest86

GUI Images? (Buttons, etc)

Recommended Posts

Hey, does anyone know a good resource for GUI images? I just finished the first stages of my GUI/input system, and I'd like to banish the programmer art to a far place before I put a screenshot up. I'm mainly looking for images of buttons, with both the standard and pressed images. I've got one nice looking one so far, but I've had difficulty finding any others.

Share this post


Link to post
Share on other sites
Quote:
Original post by iliak
Why not grabing Windows/Linux's ones with Paint/GIMP ? It's what I done.

Thats an option, but it seems like actually using Windows buttons would do a lot to hurt the "Look and Feel" of a game. You are playing a game, not filling in a spreadsheet.

Share this post


Link to post
Share on other sites
I'm a very bad artists, but I did figure out how I can make this work. I think this will be a first for whiteboard drawn and scanned interfaces o_O... and if anybody enters them for the contest they so copied me!

Anyway, I can't possibly create the amount of art resources I need to get this done. I'm not an artist, and just making the game is going to take a lot by itself. Luckily there are a lot of resources available see the Free Resource thread). I was just hoping there were already some nice GUI graphics too.

Share this post


Link to post
Share on other sites
Sure, use somebody else's textures or what not, but for the actual interface, create your own. If your paint program (Photoshop, PSP, GIMP, whatever) supports layers and vectors, the process of creating each button and what not becomes very streamlined. You just have to create an initial design, then add a layer for each caption/icon/whatever that goes on the base design.

For instance (I don't know if I explained this well, and forgive my lack of ASCII art skills)
Here is the base design for a button. It's on layer 1:

[][][][][][][][][]
[] []
[] []
[] []
[][][][][][][][][]

Then for the "NEW GAME" button, add a layer (Layer 2, or something) with this:

NEW GAME

The result is:

[][][][][][][][][]
[] []
[] NEW GAME []
[] []
[][][][][][][][][]

Then, for each new caption, make the previous text layer invisible, add the new caption, and save. Then repeat.

I find this really helpful to not only create the graphics fast, but also to give the game a consistent feel.

Share this post


Link to post
Share on other sites
Sure, I get that part. It is just making that initial base design, and also makigna nice matching set of "idle" and "pressed" bases so that it looks nice. The main interface throughout my game is going to be menu based, so I'm probably going to have to make a good number of buttons. Luckily, I made my control system so that it can compose the buttons (base+text/image) at run time, so I just have to get a few working bases.

Since my game is based in an office I decided that the menus would be whiteboards, where each button is actually a scribble on the whiteboard. That way I can just take an actual whiteboard and draw what I want, and it will look "good" (I hope). If it works out well, the only other button style I will probably need is just a circular one, and I can handle making those.

Share this post


Link to post
Share on other sites
Quote:
Original post by superpig
Be careful to make sure that the images you use are ones that you can use legally.

There wouldn't be any legal ramifications to actually scanning a whiteboard I own, would there? If there are,, I guess I'll just run to the hardware store and make my own, but it would seem kind of silly for it to be illegal to just scan the one I have.

Share this post


Link to post
Share on other sites
Quote:
Original post by intrest86
There wouldn't be any legal ramifications to actually scanning a whiteboard I own, would there? If there are,, I guess I'll just run to the hardware store and make my own, but it would seem kind of silly for it to be illegal to just scan the one I have.


Shouldn't be any problems at all there, although if there's happens to be a trademarked logo of the company that made it in one corner you may want to either not include or edit out that.

Share this post


Link to post
Share on other sites
Quote:
Original post by intrest86
Since my game is based in an office I decided that the menus would be whiteboards, where each button is actually a scribble on the whiteboard. That way I can just take an actual whiteboard and draw what I want, and it will look "good" (I hope). If it works out well, the only other button style I will probably need is just a circular one, and I can handle making those.

I like that.

[EDIT]
For the idle and down states, you could use alpha transparency, or scale the image down a bit to look like it's pressed.

[Edited by - ricekrispyw on July 10, 2005 3:33:05 PM]

Share this post


Link to post
Share on other sites
Remember how simple the windows '3D' button effect is. For unpressed, a lighter colour for the top & left of the button and a darker colour for bottom & left. For a pressed button, reverse that for the suncken effect.

To make it look less like windows just round the corners and make them translucent, or textures with a 'noise' texture. For the 4E4 contest you probably don't want to spend too long on attractive buttnos though - clear readable ones would do IMO.

Share this post


Link to post
Share on other sites
Quote:
Original post by intrest86
Quote:
Original post by superpig
Be careful to make sure that the images you use are ones that you can use legally.

There wouldn't be any legal ramifications to actually scanning a whiteboard I own, would there? If there are,, I guess I'll just run to the hardware store and make my own, but it would seem kind of silly for it to be illegal to just scan the one I have.


That's probably OK, provided you don't end up displaying any images that you don't have permission to use (like Kazgoroth said). I was more referring to the suggestions that people rip interface elements from existing software.

Share this post


Link to post
Share on other sites
Quote:
Original post by Promit
What the hell kind of whiteboard do you have that fits in a scanner?

Or maybe I should be asking what kind of scanner you have that fits a whiteboard...

Actully... Yeah, on first attepmt the whiteboard was much too big. The scanners in the comp lab here are itty-bitty little things, not like the gigantic "If its flan, I can scan" scanner I have at home. They just don't make them like they used too...

There is a chance that the Digital Media Center has a larger scanner that I can use. Takinga picture of the whiteboard resulted in something a little too noisy and mis-colored to look nice.

Share this post


Link to post
Share on other sites
Quote:
Original post by intrest86
...The scanners in the comp lab here are itty-bitty little things, not like the gigantic "If its flan, I can scan" scanner I have at home.
I just found that very funny thinking about scanning flan [smile]

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
go to www.allegro.cc and Libraries->GUI->MASKinG, then you can use the pictures in a skin

Share this post


Link to post
Share on other sites
Google after button tutorials? Might not be the best for whiteboard-like interfaces though. Photoshop tutorial about making "gel buttons" or this one about "aqua buttons".

My current game has a slight witeboard feel in the meny, and I accomplished this by simply only using black and white. All the buttons are black text(when hovering white). The background is a simple shade from black to white (with the blurred logo in the back). As a finish a got a black border around the meny,
Making it look something like this(.-space #-border <>-dynamic text ):

................................
.##############################.
.#.<meny path here>...........#.
.##############################.
.#.<meny option 1>............#.
.#.<meny option 2>............#.
.#.<meny option 3>............#.
.#.<meny option 4>............#.
.#............................#.
.#............................#.
.#............................#.
.##############################.
.< context sensitive help here>.
................................

hope that helps...

Share this post


Link to post
Share on other sites
Sign in to follow this