[FND] [REVIEW] Code+Icons for Image buttons

[Bertram]

Hi everyone,

In order to get rid of overlapping buttons for the next release. We're willing to replace certain button with image button, providing their meanings as a tooltip.

That's why I'm now requesting graphics for these buttons (or labels):

[General]
- Ok
- Cancel
- New
- Delete
- Register
- Choose
- Create
[Character and in-game maybe]
- Money
- Level
- Map
[main button bar]
- Smilies
- Status
- Equipment
- Inventory
- Skills
- Specials (manaserv)
- Social window
- Shortcut
- Setup

If you see other buttons or labels that could be replaced with graphics. Don't hesitate.

Thanks in advance and best regards.

[Jaxad0127]

Please make the icons fit in with the gray theme. These icons will be replaceable by other themes.

[Rotonen]

The theme with which CR1 will ship out is not yet discussed or decided upon, I'm migrating this thread over to eA GFX Development since the eA client ships with the gray theme per default.

[Jaxad0127]

The theme with which CR1 will ship out is not yet discussed or decided upon, I'm migrating this thread over to eA GFX Development since the eA client ships with the gray theme per default.

Mana ships with the gray theme as default. TMW can use whatever for whatever.

[enchilado]

Could that list be revised to show required sizes for each image?

[Bertram]

Hi,

Indeed, good catch!

To keep things simple, I guess the icons should have a size making them stay within this image and fit with it:
(at least for ManaSource, other icons could be added for the tmw wooden theme.)

button.png (374 Bytes) Viewed 4734 times

The icons must have a transparent background, and be anti-aliased.
It could be obvious, but the given format must also handle transparency, png and xcf files are preferred if possible.
And last but not least, the content licensing must be compatible with the GPL v2 license.

Is that better like this? does everyone agree with my little specs?

Best regards.

[enchilado]

That button looks nice to use as a base. I'm working on this. Seriously. For real. I'm actually working on it this time.

[Bertram]

Thanks in advance, ivy

[Kage]

In order to get rid of overlapping buttons for the next release. We're willing to replace certain button with image button, providing their meanings as a tooltip.

How do you mean overlapping?

That's why I'm now requesting graphics for these buttons (or labels):

[General]
- Ok
- Cancel
- New
- Delete
- Register
- Choose
- Create
[Character and in-game maybe]
- Money
- Level
- Map
[main button bar]
- Smilies
- Status
- Equipment
- Inventory
- Skills
- Specials (manaserv)
- Social window
- Shortcut
- Setup

If you see other buttons or labels that could be replaced with graphics. Don't hesitate.

While some of these could be replaced with images, I don't see things like "create", "register", "Choose", "new" being replaceable...

We need to avoid using text in the image, so the client stays translatable. And I don't see how a image can represent the word "choose" in a way to make distinguishable from from "create".

Though if someone can pull it off where there is NO confusion about the meaning of the image. I guess its fine.

If not, we need to keep it text.

[Jaxad0127]

In order to get rid of overlapping buttons for the next release. We're willing to replace certain button with image button, providing their meanings as a tooltip.

How do you mean overlapping?

That's why I'm now requesting graphics for these buttons (or labels):

[General]
- Ok
- Cancel
- New
- Delete
- Register
- Choose
- Create
[Character and in-game maybe]
- Money
- Level
- Map
[main button bar]
- Smilies
- Status
- Equipment
- Inventory
- Skills
- Specials (manaserv)
- Social window
- Shortcut
- Setup

If you see other buttons or labels that could be replaced with graphics. Don't hesitate.

While some of these could be replaced with images, I don't see things like "create", "register", "Choose", "new" being replaceable...

We need to avoid using text in the image, so the client stays translatable. And I don't see how a image can represent the word "choose" in a way to make distinguishable from from "create".

Though if someone can pull it off where there is NO confusion about the meaning of the image. I guess its fine.

If not, we need to keep it text.

http://bugs.manasource.org/view.php?id=95

[Kage]

I would much rather have the solution Bertram purposed.

"Everything seems statically sized for the default English translation,"
-> Isn't there a way to make button widget report their correct width after including the translated sentence??

[Crush]

In my personal opinion graphical icons instead of text are much nicer for the HUD during the game. But I think that text buttons are better during the login sequence because, as Kage pointed out, the meaning of most buttons is hard to describe using icons.

I think I remember reading a GUI guideline somewhere which said that buttons which are in permanent view of the user, like a toolbar, should be graphical while buttons which only appear on special occasions, like in popup windows, should be textual.

@poison_ivy: Please don't feel irritated by this discussion. Graphical icons for skills and main bar buttons don't seem to be disputed at all, so working on them is save.

Here are some non-binding suggestions how the general icons could be visualized:
Smilies: Obvious.
Status: A stickman with an aura
Equipment: A sword and a shield or a trouser, a shirt and a helm. Or all five when you can squeeze it all into one icon.
Inventory: A sack or bag
Skills: Open book (visualizes learning)
Specials (manaserv): A star, an explosion or something in between
Social window: Shaking hands
Setup: A wrench or cogwheel

A standard "tick" for "OK" and "cross" for "cancle/exit" will surely come in handy, too.

[enchilado]

I'm working on a good style to use for them at the moment. I made simple tick button last night, but the shades of grey I used are too dark, I think.

Now, I want to know if it's possible to have buttons change when you a) mouseover them and b) click on them. Could we have a greyed-out tick which turns green (or lights up) when we mouseover, and then looks depressed when we click on it?

button-okay.png (1.97 KiB) Viewed 4575 times

EDIT: Here's the image. Please tell me what you think's wrong with it.

[Bertram]

Hi Ivy,

As for now, widgets have (or at least should have, if not yet) five states:
*Normal
*Hi-light (mouse over)
*Active (The one pushed if the user pushes the enter key.)
*Pushed
*Disabled

I guess normal, pushed, active and hilight mode can have the same image sprite as the background button
would change its behaviour corresponding to the state.
A disabled one is indeed a plus (and could be simply a grayed version of the normal one.)

Then, I guess two images per item would be nice.
What do you think?

Best regards.

[enchilado]

If you want to be able to tell that a greyed-out icon is greyed-out, the normal one will need to be in colour...