Game UI BG poll...

Community Forums/Showcase/Game UI BG poll...

Mustang(Posted 2004) [#1]
Allrighty... as I can't make up my mind, I'm asking you: which variation of the next 5 images is the best? Few reasons for your opinion would be also good to hear of course.
This will be the backgroud for my gamelet/demolet menu - it will have all the usual "new game" etc sections/texts too, but right now I'm stuck at fiddling the BG variations (PhotoShop layers/options/effects are cool!)... someday they all look crap, someday they all look OK... the usual "lone star" development uncertainty. :)

[images have been .jpg compressed quite much, so they are not 100% sharp etc]


1.

2.

3.

4.

5.



9572AD(Posted 2004) [#2]
2, 3, and 5 are too washed out. 1 is too stripey.

So, #4 gets my vote.


Warren(Posted 2004) [#3]
In terms of a UI, #2. It will allow the controls/text to be the most clearly seen against it.


Perturbatio(Posted 2004) [#4]
Yup #2 will allow the most legibility, #4 is the most visually interesting.


Ice9(Posted 2004) [#5]
4 with just a little less contrast and put some alpha on
the text layer so some of the grittiness shows up in the
hightlight side of the raised text


JoeGr(Posted 2004) [#6]
someday they all look crap, someday they all look OK... the usual "lone star" development uncertainty. :)

I have a big problem with that too. So I'm not going to look at them for too long. :)

For my money, you've found the best balance with number three. My second choice would be number five. Anyway, here are a few thoughts (picture by picture). Hope they don't sound too negative - I think its good work all in all.

1. The combination of yellowish background and red text may be too cheerful. The long vertical stains in the background texture are slightly over-prominent for my taste.

2. The background texture is a bit too subtle for the bold text.

3. Good balance.

4. I think the contrast and saturation of the background are too high in this one. The background is too 'distinct' if you like. Because of this, reading the text is kind of uncomfortable.

5. Distinctive. A good choice if a bleaker, grittier feel seems appropriate.

Sorry to cast doubt upon the one element you seem sure about, but I think there's a slight danger of the text looking more like comical jelly-writing than blood. Its easy to get carried away with those layer styles :) The font is spot on though.


Mustang(Posted 2004) [#7]
Hope they don't sound too negative - I think its good work all in all.


Constructive criticism is always appreciated! Getting "second opinions" won't make my work worse - it makes it better.

I think there's a slight danger of the text looking more like comical jelly-writing than blood. Its easy to get carried away with those layer styles :) The font is spot on though.


Yeah... that "thick blood" effect is not yet quite there I guess... have to tweak it a bit. I like the font too... it has to be "old", 40's kind of font (for game theme reasons) and bit weary looking.

Keep those opinions coming!


darklordz(Posted 2004) [#8]
im with 5


sswift(Posted 2004) [#9]
#4 is the best one as far as pattern and color goes, but it has too much contrast.

The barbed wire going across the wall doesn't look good because it appears cartoon-like over a clearly photorealistic backdrop. And it makes no sense that the wall would have an indentation running right behind it either.

The text is worst of all. It looks cheesy. It would look better without the highlight.

It has potential though. I think you're making a mistake with the barbed wire and the indentation. But the design of something angled going down the wall I think looks good. And the indentations look good, even though they make no sense.

Perhaps the answer is to get rid of the barbed wire, and the indentation, and instead have chipped concrete bulletholes going along that line, but at a bit steeper of an angle. Maybe then put more realistic barbed wirse going over that, at the current angle, and casting a slightly blurred shadow onto the wall below it, at a distance which makes it appear to be a few inches in front of the wall. I'd make that manually and change it's angle a bit after offseting it to make the wire appear to be closer to the wall on the left side than the right to add a bit more variation.

Lastly, I think I'd cut the width of the text by a third. And maybe make it black instead of red. And maybe try making it look like a decal on the wall.

I presume this is a menu screen of some kind. I'd put the menu in the lower right side of the screen.


Gabriel(Posted 2004) [#10]
#4 is the best looking.

#2 is the most practical and readable.


sswift(Posted 2004) [#11]
I threw this together quick to illustrate the layout I was talking about:



It looks kinda crappy in this example, but I'm pretty sure it would look good if you got some photos with real bullet pock marks in concrete and used those on the wall and worked on the layout of exactly how the bullet hits fall. Oh and I probably wouldn't make the text quite that narrow. And I angled the barbed wire too much, I was just going from memory. I like the angle yours is at better.


Mustang(Posted 2004) [#12]
The barbed wire going across the wall doesn't look good because it appears cartoon-like over a clearly photorealistic backdrop.


That's true - it doesnt have any "depth". It was a quick hack and I have to do it more "realistic" with metal specular etc so that it don't look so "flat" and cartoonish.

And it makes no sense that the wall would have an indentation running right behind it either.


IRL yes - but it has hidden meanings... :)

The text is worst of all. It looks cheesy. It would look better without the highlight. I think I'd cut the width of the text by a third. And maybe make it black instead of red. And maybe try making it look like a decal on the wall.


:) It has to be red, and look like blood. And I like big titles. :) I tried the decal option but it's not what I want... and the it can be bit cheesy too, because-- [can't say, it would reveal too much].

But the design of something angled going down the wall I think looks good. And the indentations look good, even though they make no sense.


Yup - divides the area nicely and makes the screen more "alive". I also loosely tried to follow the "The Golden Section" rules...

Perhaps the answer is to get rid of the barbed wire, and the indentation, and instead have chipped concrete bulletholes going along that line, but at a bit steeper of an angle.


Bulletholes are so cliche... thought that, and decided not to.

Maybe then put more realistic barbed wirse going over that, at the current angle, and casting a slightly blurred shadow onto the wall below it, at a distance which makes it appear to be a few inches in front of the wall. I'd make that manually and change it's angle a bit after offseting it to make the wire appear to be closer to the wall on the left side than the right to add a bit more variation.


That might work, have to try it.

I presume this is a menu screen of some kind. I'd put the menu in the lower right side of the screen.


Yes, and I said so in the first post :) Right side is quite logical place to put the stuff in, depending how much text there will be in the end.


Michael Reitzenstein(Posted 2004) [#13]
I thought you were making a futuristic game, Mustang? :)


Grisu(Posted 2004) [#14]
#5 for me.


jhocking(Posted 2004) [#15]
I think the indentation behind the wire works well. It looks like the barbed wire has been wrapped around the wall tightly for a long time, the tension having chipped into the wall surface.

I like 2 and 3 best. The color in 1 is a bit jaundiced (but who knows it that'll still be true with other UI elements on top of the image,) while 4 and 5 are too busy.


BlitzSupport(Posted 2004) [#16]
I like 'em all, but 2 or 3 would seem to be best if stuff has to be displayed over them...


Kuron(Posted 2004) [#17]
I vote #2 for the reasons EpicBoy gave.

I threw this together quick to illustrate the layout I was talking about: It looks kinda crappy in this example
That is as ugly as a bag full of squished puppies.


Mustang(Posted 2004) [#18]
I thought you were making a futuristic game, Mustang? :)


I am! But it's a HUGE project... I need something lighter and alternative to work on when I get swamped... I usually have several things going on, all steadily progressing, if I can. This "light" project will also serve as my nice & tidy testbed for all my engine features (current and coming). It will have most of the stuff my sci-fi FPS will have, but with less and simpler content and "plot". And TOTALLY different theme... sort of nice that I can do two so different "games" using the same framework.

I think the indentation behind the wire works well. It looks like the barbed wire has been wrapped around the wall tightly for a long time, the tension having chipped into the wall surface.


*Exactly* what I was trying to do, sort of. I'm glad that someone saw the idea behind it. :)


Agamer(Posted 2004) [#19]
#5 for me too


Rob(Posted 2004) [#20]
Number 3 but with some more tweaks. It doesn't dominate and has got some warmth. It's interesting and non-tiling in apperance.

Improve the bevel by isolating it on it's own layer for further tweakage. Perhaps horrific violent shadows can play against it. Just the shadows of violent acts like stabbing or thowing arms up in fear.