AuthorTopic: Kitchen GUI (previously known at the Table Cloth Thread)  (Read 8460 times)

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile
Hello guys!

I need help depicting cloth on the side of a table. Also a glass dining bell-thing.



I can't manage it the moment, it looks bad. I've tried references but it doesn't help!

Teach me please, O Wise Sensei!

Updated:

For more info, see last post!
« Last Edit: January 11, 2016, 05:45:44 pm by Zizka »

Offline Roach

  • 0010
  • *
  • Posts: 144
  • Karma: +0/-0
    • View Profile

Re: Table cloth help

Reply #1 on: January 07, 2016, 01:20:30 am
It doesn't look bad to me. I would just simply change ur darkest shadow. As for the glass it looks fine to me as well, but if you want to emphasize it, add some transparency to it. Draw some food on a platter with some highlight and keep your shadows in it.

Quick edit: With a salad : )

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Table cloth help

Reply #2 on: January 07, 2016, 02:19:51 am
While the edit does look better, I don't think it's quite good enough yet or maybe I'm being too much of a perfectionist.  :D

Thanks for the edit though, will make the dark shadow not as dark.

Offline Friend

  • 0010
  • *
  • Posts: 288
  • Karma: +1/-0
    • View Profile

Re: Table cloth help

Reply #3 on: January 07, 2016, 03:24:25 am
i think cloth is crazy hard but the more you try to make it look real, the worse it looks.  as for siple pixel art, i think less is more with cloth often.

i just copied a reference

(not finished)

not sure if that helps.  id recommend making the folds less repetitive

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Table cloth help

Reply #4 on: January 07, 2016, 02:21:05 pm
I think it looks more realistic but I think it might clash with the more "cartoonish" style I'm going for. I know, I'm picky! I do appreciate the edit though, thank you, thank you!

The plates need to be bigger, it's part of the gameplay.

Offline Friend

  • 0010
  • *
  • Posts: 288
  • Karma: +1/-0
    • View Profile

Re: Table cloth help

Reply #5 on: January 07, 2016, 05:04:04 pm
I think it looks more realistic but I think it might clash with the more "cartoonish" style I'm going for. I know, I'm picky! I do appreciate the edit though, thank you, thank you!

The plates need to be bigger, it's part of the gameplay.

i meant to add i know it wasnt the style you were going for xD sorry.  i was just trying to show maybe the folds were overdone.  and i still would suggest to make the folds less repetitive, but honestly your table already looks good.  maybe more color variety would help the plates stick out

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Table cloth help

Reply #6 on: January 07, 2016, 07:14:53 pm
Yeah, how dare you try to help me!  ;D

I went ahead and checked how Mother did it. Friend was right, less is more so to speak.


They go for a minimal approach I find. So I tried to tweak things a bit. I was a bit lazy on the color selection perhaps.

Here's the new version of the table:



Whadda think?


Offline Friend

  • 0010
  • *
  • Posts: 288
  • Karma: +1/-0
    • View Profile

Re: Table cloth help

Reply #7 on: January 07, 2016, 08:42:19 pm
that improvement though!! it looks good and i think is fine.  i went and tried an edit anyway.  i think it could be simpler.

i also changed plate colors if they are a game element they should stand out.  played around with colors 4 fun

« Last Edit: January 07, 2016, 09:17:31 pm by Friend »

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Table cloth help

Reply #8 on: January 07, 2016, 08:58:39 pm
It's weird, in your edit, on my screen, the table has a 2 pixel wide edge whereas in mine it only has one.  ???

I just wanted to explain the gameplay element at work here:



Basically, you get to mix two ingredients picked up to create a dish. The dish can then be consumed for a permanent stat boost. It's sort of a crafting system where you discover new recipes through experimentation.

I think your table looks better but I do feel like an edge line is missing. Maybe not as bright as mine however!

I find the color in the plate clashes with the new bronze color you've selected?

I actually want to depict typical white plates which is why I was sticking to a whiter color intead of other colors.


Again, thank for the edit, time to simplify those folds further!

Offline Friend

  • 0010
  • *
  • Posts: 288
  • Karma: +1/-0
    • View Profile

Re: Table cloth help

Reply #9 on: January 07, 2016, 09:30:32 pm
im not sure what you mean by the edges :p and yes i agree the bronze colors clash.  added another color just cuz.


your game sounds fun  ;D

Offline Night

  • 0010
  • *
  • Posts: 173
  • Karma: +2/-0
    • exidelo
    • http://pixeljoint.com/p/26118.htm
    • Exidelo
    • View Profile

Re: Table cloth help

Reply #10 on: January 07, 2016, 09:36:58 pm
Cloth is usually quite dull (depends on the material), and as such will have a very soft palette - tone it (the contrast) down a notch.
Additionally, currently it looks like it has been ripped apart on its edge, rather than being folds. Folds are created by tension, on a table you can usually see this at its angles, where the cloth on it is being "pushed" from both sides adjacent to it.
Here's an edit to illustrate this:
There is light at the end of the tunnel.

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Table cloth help

Reply #11 on: January 08, 2016, 02:29:37 pm
Thanks Night!

I softened the folds, reduced the contrast, added and chairs and tweaked a few other things, like make the menu larger. I also added the corner folds as suggested in Night's edit.

As for the chairs, are they ok? The side view seems fine to me but I'm not convinced by the front view.



Thank ye, share ye knowledge!

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Table cloth help

Reply #12 on: January 08, 2016, 10:14:06 pm
Why are the legs offset? I guess you wanted to add perspective, but nothing else has such perspective  ???
That simply doesn't work.

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Table cloth help

Reply #13 on: January 11, 2016, 05:43:25 pm
Yup, you're right. I've fixed it.

Ok, now it's not so much about the table cloth anymore but about the GUI I'm looking for. I've never designed anything like that so any input about the any aspects at all would be appreciated (color, arrangement to make it more effective, etc...).

I know it's harder to get comment on "general" things like this but I'm thinking experienced designers could help me tons.



So basically, as I said, you pick one food and put it one plate. You then pick a second food and put it on the second plate. The food is then created under the thing on the right (bell?). The food created influences your stats in the menu on the right (the reason why it's called Windoughs is because it's a game about a piece of bread in a toaster).

Any kind of input, comment about things I could improve would be loads useful.

Offline BatElite

  • 0010
  • *
  • Posts: 117
  • Karma: +1/-0
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #14 on: January 11, 2016, 07:16:31 pm
The d in Windoughs reads like an o.
Quote from: Cure
Well you tried your best.

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #15 on: January 11, 2016, 08:10:44 pm
True! Thanks! I've fixed this. I've also changed the shape of the dining bell thing.

Offline Friend

  • 0010
  • *
  • Posts: 288
  • Karma: +1/-0
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #16 on: January 11, 2016, 08:28:55 pm
i'd make the d uppercase to improve reading instantaneousness.


the tablecloth aint looking too good with the other elements :/  with your style id go for similar to night's edit

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #17 on: January 11, 2016, 08:43:04 pm
Well, the D is already uppercase isn't ? ''D'' vs ''d'' ? I'll redo the table cloth. Thanks!

Offline Friend

  • 0010
  • *
  • Posts: 288
  • Karma: +1/-0
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #18 on: January 11, 2016, 08:56:18 pm
oops, lowecase

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #19 on: January 12, 2016, 03:19:16 pm
So I did a pretty big overhaul.

What I'd like feedback about:

1. Which text reads the best out of the four? (three and four are the same)

2. Which stat meter looks the best? 1, 2, 3 or 4?

Thanks in advance! You will have my undying gratitude!


Offline Glak

  • 0010
  • *
  • Posts: 114
  • Karma: +0/-0
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #20 on: January 12, 2016, 03:35:46 pm
Text 3/4 is best because there is some space between the letters.  Meter 1 is best because it is easiest to count how many points you have.  Readability is really important.

Offline Ambivorous

  • 0010
  • *
  • Posts: 365
  • Karma: +2/-0
  • If you can't do; inspire.
    • ambivorous
    • ambivorous
    • http://pixeljoint.com/p/47949.htm
    • ambivorous
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #21 on: January 12, 2016, 07:57:11 pm
I agree with using 3 or 4 for the text and meter 1 for the bars for the same reasons as Glak.

I also think you might want to revisit your icons or remove them entirely since you have the words written next to them.



Made the icons more iconic. :crazy:
The idea was simpler and more readable. These are some of the ideas I came up with. Hopefully this helps you out.
* may contain misinformation

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #22 on: January 12, 2016, 08:34:59 pm
Nice edit Ambivorous  :y:

I don't see anything wrong with having an icon and a word to explain what it stands for however. I mean, plenty of games have both. I'm just concerned that just having the icons won't be enough to convey the meaning I'm going for. I think the best approach is to only use icons but have a window somewhere which explains what the icons stand for just like in Dark Souls:



Still, by the time I read your message, I was coming to give more varieties of the font as this was criticized at other forums for not being readable enough. I still want to display numbers for the stats so this will need to be addressed eventually anyway. You'll notice I have tried many varieties.

I've tried to write the numbers in three different ways. I think the best looking numbers are the ones for whip and armour.

I've tried the text in four different ways. I think the most readable text is for ''armor'' but feel that ''speed'' looks better.

So basically, number-wise, unless you guys have some criticism about them, I'm pretty much set. Text-wise, even if I might not end up using text, for my own progress, I'd like to read which one is the best and why.

Finally, I've tried using the same meter for all stats. I find that if I use the one used in Ambivorous edit, it makes it difficult to know what your score is unless you write the number. If you write the number, it sort of makes the seperations kind of pointless as they're by increments of 1 (as opposed to say, 5 or 10).

Regarding the new icons, I think Ambivorous icons look better than mine except for the my winged boot which conveys speed better than just a normal boot in my opinion.

I also more or less removed all folds from the tablecloth. I think it looks a bit boring now though, I don't know. Worth a try though.

Anyways, here's the picture:

Offline Friend

  • 0010
  • *
  • Posts: 288
  • Karma: +1/-0
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #23 on: January 12, 2016, 11:28:51 pm
i find the winged boot very hard to read.  took me like 20 seconds to get it, and you want it to be instant.

how about a lightning bolt for speed, a star for special, a plus sign for armor, and egg beater for whip?

or better have them all align with your theme- egg beater for whip, pot for defense, chef hat for special, and mini cookinng timer for speed

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #24 on: February 03, 2016, 07:44:51 pm


Decided to go:

Chef hat for armor.

Keep the lightbulb for special.

Keep whip for whip (it's the weapon of the main character, can't change it)

Egg timer for the speed.

I'm not satisfied with the new icons just yet.

What's missing to make this look like a functional GUI in a video game?

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #25 on: February 15, 2016, 05:26:15 pm
*Bump*

Offline BatElite

  • 0010
  • *
  • Posts: 117
  • Karma: +1/-0
    • View Profile

Re: Kitchen GUI (previously known at the Table Cloth Thread)

Reply #26 on: February 20, 2016, 08:40:55 pm


I've made various alterations to most of your most recent set of icons:

The health icon looks out of place, as if it belong in a set that uses (out)lines on a dark bg rather than what you have now. The cross looks rather thin on its own though, so I widened it as well.

I have no idea what the new armour icon is meant to be. I've made the previous chef hat a bit wider, so it'd read better.

For both special and speed I mostly removed what I felt excess AA. You forgot to AA the border of the special icon.
Quote from: Cure
Well you tried your best.