Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

My First GUI Ever


beckymegan
 Share

Recommended Posts

Hey everyone!
So I just finished my first ever, custom GUI. I'm working on the "main' in game part right now but here are some pictures of the menu/splash screen. Any comments welcome and all taken into consideration :)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/Register.png)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/NewCharacter.png)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/MainMenu.png)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/Login.png)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/Credits.png)
Link to comment
Share on other sites

At least give him some C&C.

1\. Too much green and white, I'd add in some more contrast
2\. Way too light. I'd darken it a bit.
3\. The Background looks awkward against the actual GUI.
4\. Buttons look good, but Font's a bit uneven.
5\. The black on top of the transparent box dosen't look that good.
6\. The transparent part is fancy, but dosen't match the style. It messes it up a bit style wise.
Link to comment
Share on other sites

yeah, scratch this.  For buttons at your level I suggest you take a look here: http://developersunite.byethost13.com/showthread.php?tid=153
Don't make anything transparent unless the transparency serves a stylistic or mechanical purpose.  Making a transparent white box just looks ugly.  Instead make it opaque.  For borders I'd say make them mostly 1-3 pixels, of different innerborder/outerborder colors.  Your background image is pretty bad quality, I suggest you get a higher resolution/crisper one.
Link to comment
Share on other sites

Lol its looks cute hehe try adding some detail to the borders like some smooth edges and try changing the background image with something with a good rez Try adding an anime style leafs it might look better and dont forget to add some detail. :)
Link to comment
Share on other sites

@shadowdeath:

> At least give him some C&C.

I did. This doesn't look like a GUI. Why should I have to explain to someone what a GUI is?

As I said, go look at some real GUIs and emulate them. Start again. This doesn't look like a GUI, it looks like something made in Photoshop.
Link to comment
Share on other sites

Ok, I redid the entire thing from scratch and I much prefer this one to the first. This is still certainly a WIP though. All suggestions are appreciated. I'm probably going to get rid of the text in the bottom corner though…

>! ![](http://i825.photobucket.com/albums/zz180/Beckymegan/1.png)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/2.png)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/3.png)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/4.png)
Link to comment
Share on other sites

Switch out the images. You don't want that shit. Use textures and effects. A running theme in the GUIs Rory and I develop is wood and parchment. Find something like that to work with.

Also make sure the background is actually a background. You don't want it drawing attention away from the interface itself.

Make it all lined up and properly gridded. Take a look at my various screenshots if you need ideas. Just try not to steal everything I do. ;]
Link to comment
Share on other sites

Huge improvement, but sadly it's still no that great.  As others have said, don't use a girl as the background picture.  Then change the font or fix it up.  Refer to this tutorial for inspiration: http://img233.imageshack.us/img233/6246/fontse.png

Make a theme.  As robin said, you could do a wood and parchment theme, or a stone and steel theme, or something along those lines depending on what your game is like.  If you're going to use a picture, make sure it's _drawn_ and not a photo.  Also make sure it's pretty soft, and it's not you can use some filter effects to make it look a bit nicer.  Look at how this GUI succesfully uses a background: http://i54.tinypic.com/2zq6iib.png

Best of luck!

3 new replies….

You can use blue or green if it matches your style, but it'll take a bit more skill to pull it off.
Link to comment
Share on other sites

@beckymegan:

> Would a color work? Like maybe a pale blue/green?

As long as you choose the colours properly.

Here's a selection of GUIs from my projects over the years. Keep in mind it's oldest to newest. Some of these date back 4 or 5 years, so you'll see an obvious progression in quality.

>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/sfasfas.jpg)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/ga.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/dragontalemockup.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/Game-1.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/grammar.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/test-1.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/ess5.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/ess1.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/In-gameGUIWood.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/mainmenu-2.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/gui-1.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/mith.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/fsafas.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/6-3.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/login-1.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/guitest1.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/silverdale.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/cs.png)
>! ![](http://i38.photobucket.com/albums/e112/Kite_Minase/cs2.png)
Link to comment
Share on other sites

Thanks for the pictures Robin :) Ok, I didn't go through making the credits and login page and all that because I wanted to make sure my "base" was good. Thanks so much for all your suggestions, I believe I might (slowly) be improving.
EDIT: Uploaded the wrong picture :\ Fixed now.

![](http://i825.photobucket.com/albums/zz180/Beckymegan/bg-1.png)
Link to comment
Share on other sites

Nooo. Look at all that empty space! You need a solid layout which looks good. That's all over the place. The texturing is way off as well. You can't just use a flat texture, you need to give it some proper edges and depth.

Remove the game name. No point having that there till you have a real logo. Centralise the blank box and put the buttons evenly underneath it.

The colours are also _really_ bad. The pinky brown on the right clashes horribly with the rest of it.

Go look up a colour wheel on the internet and use complimentary colours.
Link to comment
Share on other sites

Ok, working on a logo right now but here are 3 different "versions" of my latest. I think this is a good improvement and (hopefully) you guys will like it ;)
I prefer the first one btw ;)

>! ![](http://i825.photobucket.com/albums/zz180/Beckymegan/basf.png)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/fads.jpg)
![](http://i825.photobucket.com/albums/zz180/Beckymegan/asf.png)
Link to comment
Share on other sites

Way too big. Clamp it down.

Keep you fonts down to ~14px. Especially when working with buttons. Look at normal programs and what size they keep their fonts. Hell, look at the buttons I made for this forum.

Also give them some sort of effect and make the colours match those found on the button. In this case ditch the texture you've got on there completely and give them some sort of depth. A gradient or something will do the trick.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...