'Boring' Buttons - they look ok?

[Sophistique]

Hey guys,

Haven't been on the forums for a little bit, busy working on the game with my SO - at the moment I'm working on 'simple' buttons for the Pause Menu, and I say 'simple' because they have been anything but. I've gone through a few variations, and this is the one I like the most so far:









This the button raised up, and I'm working on a "pressed down" version (trying to go for a rounded type button look) - have I hit it? Or far from the mark?

Also, any suggestions on how I'd go about getting the pushed down/indented look? Having some serious issues getting something that even looks remotely crap, let alone anything that looks decent enough to show.

The type face will certainly change to my own font for the game - suggestions there most welcome as well.

I think I've got a case of the jaggies too, trying to smooth them out as I speak.

[Decroded]

You do have some jaggies there.
A touch of anti-aliasing wouldn't go astray if this is running on larger displays.
Mixed resolutions? I'm not a fan but whatever cranks your cheese wheel.

Here's a shitty/lazy pressed in button:

It would also generally look better if the text was "inside" the button by sitting underneath the reflection effects, rather than merely appearing as something sitting on top and made of a different material.
I haven't bother to do this here.


Just another idea is to make it glow when pressed instead:

I cheated here using Photoshop just to give you the idea.

You can certainly do this in pixel art but for buttons this size I would be inclined to Photoshop, setup layers for background, text, and top with various effects etc.
That way you can even make Smart Objects to pump out large volumes of buttons with editable text that automatically rasterizes the fonts with some effects performed.
All this can be googled/youtubed once you know what your looking for.
Bit off-topic for this forum but there you have it.

[Seiseki]

Those buttons are HUGE..
It looks a bit cheap when you have different resolutions on the font and the button graphic.

I'd like to see what kind of context they're supposed to appear in.

[Decroded]

Context: http://mailyandparcel.com/blog/wp-content/uploads/2013/08/Screenshot-2.png
http://mailyandparcel.com/blog/

It looks a bit cheap when you have different resolutions on the font and the button graphic.

Agreed. It sickens me what passes for "retro" these days. But each to their own I suppose.

[Seiseki]

Ah, this might be a bit too much then..

[RiseAgainst378]

Hi all!

Decroded & Seiseki,

Agreed on the AA (or lack thereof). Could you clarify on what you mean by the "resolution" of the text vs. the button? Do you just mean that the text isn't integrated with the button very well and appears to be slapped on top; that it's clashing too hard with the reference; or is there something else that we're missing? Sophistique is quite new to pixel art, so we are both learning as we go.

Thanks,
Brian

[Decroded]

By that we mean "mixed resolutions", or the impression of.
So the button itself is 1:1 scale pixels while the text is more like a fake version of large pixels with a border around it.
That's fine if you're into that and you like the font but I'm not really into that kind of art.

I think you're whole game could benefit from just running at 2:1 pixel scale instead of your current 1:1.

No more time gotta go!

[RiseAgainst378]

By that we mean "mixed resolutions", or the impression of.
So the button itself is 1:1 scale pixels while the text is more like a fake version of large pixels with a border around it.
That's fine if you're into that and you like the font but I'm not really into that kind of art.

I think you're whole game could benefit from just running at 2:1 pixel scale instead of your current 1:1.

No more time gotta go!

Thanks for that. That makes a lot more sense now and we'll try to figure out how we can design the buttons to accommodate the style of the game. (Seiseki, your edit was great to showcase how much buttons can vary!). Much of the art in the game is still "practice" or even "placeholder" art (like our lovely solid-pink-box-with-a-happy-face-for-a-character) -- but we're slowly figuring things out.

We were a bit confused initially since we are, in fact, targeting multiple (actually, a lot of) screen resolutions for the game -- we were thinking "well what's wrong with that"?  But now it makes a lot more sense.

The reason (some of) the buttons are currently massive is because one of our targets is Mobile; so this is currently the biggest a button will ever be. There's a good chance they might shrink horizontally and grow a little vertically, or change size completely for certain devices (iPhone 4 comes to mind).

Thanks again for all the feedback; if you'd like we can post a revised button once we're come up with a more interesting design (or improve the current one).

[Sophistique]

So I think I've made some really good improvements on the button - changed up the color on this one as well, as we believed "Resume" should have a nicer, 'go' feel to it, rather than a sad blue or a 'stop' feeling red - still working on the 'pressed down' darker part of the button, and I also think I need to brighten up the words as well as they seem a little too lackluster on the button. I know I also need to get rid of the "checkerboard-ness" of the shading on the wording too - it's still very much a WIP!

But please feel free to C&C again.



I certainly wasn't going 'retro' with the button before, apologies if anyone thought I was & I offended them unintentionally

[Decroded]

Overall it looks nice.
The font is pretty good.

I don't like the dithering I think you should just add a few extra colours instead.
This much regular dithering creates a kind of unwanted texture instead of a nice smooth and plasticy button.
Needs more contrast overall.
If you can manage adding a subtle secondary light source on say the bottom right, it would help you define the rounded shape.

Maybe use a different colour like the same white as the text for the outside border rather than the same green on the button itself.

Plain grey is boring.
Where you use light grey in the text for example, try adding a touch of saturation to blue for example.