Help me with my GUI layout? ;O;
-
- Veteran
- Posts: 322
- Joined: Sun Oct 03, 2010 11:49 pm
- Completed: Memoirs of an Angel (2010)
- Projects: Memoirs of an Angel (Remake); W.I.S.H
- Location: United States
- Contact:
Help me with my GUI layout? ;O;
Every time I delve into a project, I get hung up on the stupid details of the GUI. I get so focused on trying to make it look "professional" that I'm never happy with anything I come up with, so I end up redoing everything fifteen or twenty times...and still am not happy with it, which leads to depression, which leads to me giving up on the project altogether.
As determined as I was to not let it happen this time now that I've finally gotten back into working on a game again...I keep repeating the same cycle. -.-
This is kind of what I have so far, using placeholder images:
As you can see, I'm trying to go for something kind of similar to DA2's GUI: simple, sleek, semi-transparent black. No, it's not a pretty GUI style, but I figure it's something I can actually make with my limited skills and not butcher completely. Still... trying to adapt that kind of style to what I need is not as easy as I had hoped.
The sample above isn't BAD, but it's not good either. I don't like it. And the worst part is, I don't know WHY I don't like it.
Any suggestions would be greatly appreciated.
As determined as I was to not let it happen this time now that I've finally gotten back into working on a game again...I keep repeating the same cycle. -.-
This is kind of what I have so far, using placeholder images:
As you can see, I'm trying to go for something kind of similar to DA2's GUI: simple, sleek, semi-transparent black. No, it's not a pretty GUI style, but I figure it's something I can actually make with my limited skills and not butcher completely. Still... trying to adapt that kind of style to what I need is not as easy as I had hoped.
The sample above isn't BAD, but it's not good either. I don't like it. And the worst part is, I don't know WHY I don't like it.
Any suggestions would be greatly appreciated.
-
- Veteran
- Posts: 279
- Joined: Thu Jul 14, 2011 1:50 pm
- Organization: TwinTurtle Games
- Contact:
Re: Help me with my GUI layout? ;O;
I think that the Ren'Py Help section would be more suitable for this kind of thing.
Anyways, I don't think that the side image does much, so you should take that out. You can keep it for the MC, but other characters don't need it.
Anyways, I don't think that the side image does much, so you should take that out. You can keep it for the MC, but other characters don't need it.
I've swapped accounts to CheeryMoya, so this account is no longer in use. Refer to the new account if you want to contact me.
Twinturtle Games Website
Twinturtle Games Website
-
- Veteran
- Posts: 322
- Joined: Sun Oct 03, 2010 11:49 pm
- Completed: Memoirs of an Angel (2010)
- Projects: Memoirs of an Angel (Remake); W.I.S.H
- Location: United States
- Contact:
Re: Help me with my GUI layout? ;O;
I'm asking for layout advice, for the presentation of it. That's not "Ren'py Help" which is geared towards programming questions, it's more like I'm asking something like "does my background look okay?"
The MC has her own much larger side image. I just figure that it's hard to figure who's talking when there are multiple characters on the screen, so that's why I had the little head there. But I'll consider leaving it out.
Thanks for the quick response.
The MC has her own much larger side image. I just figure that it's hard to figure who's talking when there are multiple characters on the screen, so that's why I had the little head there. But I'll consider leaving it out.
Thanks for the quick response.
- Samu-kun
- King of Moé
- Posts: 2262
- Joined: Mon Sep 03, 2007 3:49 pm
- Organization: Love in Space Inc
- Location: United States
- Contact:
Re: Help me with my GUI layout? ;O;
Psst.... if a suspicious guy with a mustache comes around offering help... make sure you use this! (hands her pepper spray)
- Camille
- Eileen-Class Veteran
- Posts: 1227
- Joined: Sat Apr 23, 2011 2:43 pm
- Completed: Please see http://trash.moe
- Projects: the head well lost
- Organization: L3
- Tumblr: narihira
- Deviantart: crownwaltz
- itch: lore
- Contact:
Re: Help me with my GUI layout? ;O;
I think it's alright, personally! I do think that if you removed the double border around the text box, it'd look better, though I'm just biased against double borders, in general. XD
- Aleema
- Lemma-Class Veteran
- Posts: 2677
- Joined: Fri May 23, 2008 2:11 pm
- Organization: happyB
- Tumblr: happybackwards
- Contact:
Re: Help me with my GUI layout? ;O;
For the record, I hated DA2's GUI. Made a thread about it on their forum and everything. BUT I'S NOT GIVES YOU CRITIQUES. I gives you tips.
Consider unifying or bettering the color scheme. You've got black down pat, but the red, yellow, and murky yellowish tan color are more condiments than a good scheme. If I were you, I'd chose HP/MP colors that would compliment your game. I see several splashes of green in your art. For instance, in your avatar her eyes and jewel are green. Maybe that can be one of the highlight colors you use throughout the game. In my game, yellow is the color of life so that is what the color of my health bars (and several other things, it's a trending color).
Your text is very sharp, as in it doesn't look anti-aliased, but your graphics are soft, almost fuzzy. For that crisp text, I'd recommend thin and sharp lines rather than thick or soft ones. Also, if a drop_shadow at all looks good on your text, totally do it. And what are those numbers in the top-left? Maybe an icon like a coin or something would indicate what they are.
With the DA2 style, avoid flourish, such as the 2nd outline in the dialogue box.
Don't use MS Paint. I don't know if you still use it, but you had once said you did. You would you'd be surprised by how much more professional your work becomes if you just get over the learning curve of some more legit photo editors.
Be more creative. Emulating others alone will leave you with superfluous things. Instead, think about if you need things to begin with. Start with a blank canvas and ask yourself, what do I need to show? Do we need to see their side portraits because there will be tons of scenes with more than people you can see on screen? Will battles just spring up outta nowhere in cutscenes that we really need to see their HP/MP constantly? Do we need to know the chapter name at all times, too? Stuff like that. Keep in mind that DA2 was a game where you could freely walk around, and you needed a UI that was always on screen that could accommodate for battles and non-battles alike. Since your game is going to go to a new screen entirely for battle, it's not really necessary for you.
>_> Hope this post was more helpful than not.
Consider unifying or bettering the color scheme. You've got black down pat, but the red, yellow, and murky yellowish tan color are more condiments than a good scheme. If I were you, I'd chose HP/MP colors that would compliment your game. I see several splashes of green in your art. For instance, in your avatar her eyes and jewel are green. Maybe that can be one of the highlight colors you use throughout the game. In my game, yellow is the color of life so that is what the color of my health bars (and several other things, it's a trending color).
Your text is very sharp, as in it doesn't look anti-aliased, but your graphics are soft, almost fuzzy. For that crisp text, I'd recommend thin and sharp lines rather than thick or soft ones. Also, if a drop_shadow at all looks good on your text, totally do it. And what are those numbers in the top-left? Maybe an icon like a coin or something would indicate what they are.
With the DA2 style, avoid flourish, such as the 2nd outline in the dialogue box.
Don't use MS Paint. I don't know if you still use it, but you had once said you did. You would you'd be surprised by how much more professional your work becomes if you just get over the learning curve of some more legit photo editors.
Be more creative. Emulating others alone will leave you with superfluous things. Instead, think about if you need things to begin with. Start with a blank canvas and ask yourself, what do I need to show? Do we need to see their side portraits because there will be tons of scenes with more than people you can see on screen? Will battles just spring up outta nowhere in cutscenes that we really need to see their HP/MP constantly? Do we need to know the chapter name at all times, too? Stuff like that. Keep in mind that DA2 was a game where you could freely walk around, and you needed a UI that was always on screen that could accommodate for battles and non-battles alike. Since your game is going to go to a new screen entirely for battle, it's not really necessary for you.
>_> Hope this post was more helpful than not.
-
- Veteran
- Posts: 322
- Joined: Sun Oct 03, 2010 11:49 pm
- Completed: Memoirs of an Angel (2010)
- Projects: Memoirs of an Angel (Remake); W.I.S.H
- Location: United States
- Contact:
Re: Help me with my GUI layout? ;O;
It was helpful, Aleema. Thanks.
I know you hated DA2's GUI. xD And I know it's not a great example to try to work from, but as I said, I needed something that I could do.
For the record, I've gotten pretty proficient with GIMP now. So I can do a lot higher quality stuff than I could before, but I'm still no graphic artist. I have no eye for layouts at all. That's why I tried to find one that I could kind of copy from; I tried starting from scratch, but just couldn't come up with a good design. Or a more common problem would be that I came up with something amazing, but couldn't make it to save my life.
I know I don't need the little health bars on the screen; those were haphazardly added when I was fiddling around on MS Word, hence why the font is crisp versus the shady edges and whatnot, why the health bars aren't the right color, and why the numbers don't have coin icons. The sample is more like a "sketch" that I'll clean up eventually...or would, if I thought it were decent enough to bother.
The actual current layout looks like this.
As for the colors, my main accent color is red, because roses are a big theme. I'll try to bring that out more with less yellow.
For the layout in general...I'll keep working on it, I guess.
I know you hated DA2's GUI. xD And I know it's not a great example to try to work from, but as I said, I needed something that I could do.
For the record, I've gotten pretty proficient with GIMP now. So I can do a lot higher quality stuff than I could before, but I'm still no graphic artist. I have no eye for layouts at all. That's why I tried to find one that I could kind of copy from; I tried starting from scratch, but just couldn't come up with a good design. Or a more common problem would be that I came up with something amazing, but couldn't make it to save my life.
I know I don't need the little health bars on the screen; those were haphazardly added when I was fiddling around on MS Word, hence why the font is crisp versus the shady edges and whatnot, why the health bars aren't the right color, and why the numbers don't have coin icons. The sample is more like a "sketch" that I'll clean up eventually...or would, if I thought it were decent enough to bother.
The actual current layout looks like this.
As for the colors, my main accent color is red, because roses are a big theme. I'll try to bring that out more with less yellow.
For the layout in general...I'll keep working on it, I guess.
- Aleema
- Lemma-Class Veteran
- Posts: 2677
- Joined: Fri May 23, 2008 2:11 pm
- Organization: happyB
- Tumblr: happybackwards
- Contact:
Re: Help me with my GUI layout? ;O;
Hum, I think that looks a lot better already. It would look great if the dialogue box didn't have sharp jaged lines. It's a cool effect, but it's not consistent with anything else. Just round and straighten the edges, and that would be a very decent box. And I would recommend moving the currency down just a pixel or two (there's more margin on the bottom than the top). My last suggestion is to take bold off of the character name. Or get the actual bold font file for the font you're using (you'd still have to toggle the bold off, though).
I think the code is:
Because leaving a machine-rendered bold to design a very important part of the GUI is not too pleasing to see, especially on fancy fonts (you can't see the hole in the E for example).
And that's it. Keep on keepin' on.
edit: Also, DA2 was a large-budget commercial game that had a beautiful GUI in the first game. So I didn't like it for contextual reasons more than anything, so you or anyone else having a similar style is not really an issue to me.
I think the code is:
Code: Select all
style.say_label.bold = False
And that's it. Keep on keepin' on.
edit: Also, DA2 was a large-budget commercial game that had a beautiful GUI in the first game. So I didn't like it for contextual reasons more than anything, so you or anyone else having a similar style is not really an issue to me.
-
- Miko-Class Veteran
- Posts: 910
- Joined: Sun Jul 06, 2008 4:30 pm
- Projects: And plenty of them!
- Location: Creche Alpha, Treasure Island
- Contact:
Re: Help me with my GUI layout? ;O;
I would lose the font on the top, and use the one you have in the dialog boxes.
The icons on the right side are hard to read because the contrast between black and... grey is low. I have to squint to figure out what they are.
The icons on the right side are hard to read because the contrast between black and... grey is low. I have to squint to figure out what they are.
Just chiming in to say that this is very good advice. It made me think of the use of the colors orange and blue in Evangelion (orange for humans and blue for the Angels), which was a recurring motif.Aleema wrote:Consider unifying or bettering the color scheme. You've got black down pat, but the red, yellow, and murky yellowish tan color are more condiments than a good scheme. If I were you, I'd chose HP/MP colors that would compliment your game. I see several splashes of green in your art. For instance, in your avatar her eyes and jewel are green. Maybe that can be one of the highlight colors you use throughout the game. In my game, yellow is the color of life so that is what the color of my health bars (and several other things, it's a trending color).
She's sun and rain: She's fire and ice. A little crazy, but it's nice.
Bliss Stage: Love is your weapon! A sci-fi visual novel about child soldiers coming of age. Kickstarter prerelease here. WIP thread here. Original tabletop game by Ben Lehman here. Tumblr here.
Bliss Stage: Love is your weapon! A sci-fi visual novel about child soldiers coming of age. Kickstarter prerelease here. WIP thread here. Original tabletop game by Ben Lehman here. Tumblr here.
- mugenjohncel
- Hentai Poofter
- Posts: 2121
- Joined: Sat Feb 04, 2006 11:13 pm
- Organization: Studio Mugenjohncel
- Location: Philippines
- Contact:
Re: Help me with my GUI layout? ;O;
No don't take it! It is poison! Once you touch it you will become one of them... you don not want to be a part of the Moe-moe army now right?... You will be forever surrounded by rainbows and flowers and the color pink if you touch that!...Samu-kun wrote:Psst.... if a suspicious guy with a mustache comes around offering help... make sure you use this! (hands her pepper spray)
Now about your GUI... the problem I see with it is it's too cluttered and overwhelms the artwork which is the bread and butter of Visual Novels... I suggest you minimize the overlays or position them in a way that will maximize the area allocated to the actual art and remove unnecessary and redundant items... here is a suggestion based on your example...
"POOF" (Disappears)
-
- Veteran
- Posts: 322
- Joined: Sun Oct 03, 2010 11:49 pm
- Completed: Memoirs of an Angel (2010)
- Projects: Memoirs of an Angel (Remake); W.I.S.H
- Location: United States
- Contact:
Re: Help me with my GUI layout? ;O;
Aleema - Didn't know you could unbold that, but I've definitely been wanting to. Thanks!
Mugen - I actually really like that layout. C:
I'll consider rearranging the elements around like that and see how it looks.
Mugen - I actually really like that layout. C:
I'll consider rearranging the elements around like that and see how it looks.
Who is online
Users browsing this forum: No registered users