The GUI thread!

[clua]

I thought it would be nice to have a thread like this, specific for interface.
As an "artist". when I make my VN the first thing I center all my might(speaking visually of course)
Are the sprites, then it comes the bgs, cg and veeeeeeeery lastly the GUI.

And most of us let it abbandoned when we are making games.

Why don't we post our concepts and screenshots here, for feedback and suggestion.
Let's make better looking GUIs!

There is no excuse for not making a pretty one btw haha since there are

Many
Awesome
Tutorials

And a supportive community.

EDIT:
Posting some sites which might be helpful when doing yours>
+CG Textures(Textures)
+Pattern 8(Patterns)
+Colour Lovers(Palletes)
+Font Squirrel(Free fonts)
+Da Font(There are also free fonts there)
+OELVN Wiki sfx Resources
+Blue Vertigo(Graphic resources in general, the sites above are listed here)

[jeje]

wow ...(speechless)
I'm a noob in programming, and somehow just learned about the basic of the basics of renpy... now I don't even...
But looking at this, I think I wanna try making this. A little learning would never be useless... (and I do adore pretty GUI)
thanks for the links!

[clua]

wow ...(speechless)
I'm a noob in programming, and somehow just learned about the basic of the basics of renpy... now I don't even...
But looking at this, I think I wanna try making this. A little learning would never be useless... (and I do adore pretty GUI)
thanks for the links!

XDD I know! Im also a newbie(even if I been using renpy like...a lot of years lol)
But I think It could work if you try new things little by little!
Try doing simple modifications first(like just working on your main menu image, leaving the default GUI of renpy and just customizing colors)
Also dont be discouraged if doesnt work at first, most of times you get an error,
and with those errors you learn a lot

[Camille]

Just a note that if you google GUI/interface elements, you can usually find a lot of nice stuff for free. I personally like going through Japanese games and seeing how they do their GUIs... I put a lot of screencaps in a big "VN GUI case studies" folder. For example, I'll often look at something like this and analyze it. What's good about this GUI? What makes it stand out? How accessible is it? Even if I'm not necessarily designing the GUI myself, it helps to have examples that I can maybe send to Lazcht for her to use as a reference.

I buy a lot of graphic resources from Graphic River because they tend to be higher quality since they're premium, but I dig around for free stuff, too. Just make sure you're careful about resources' terms of use. Premium Pixels has some nice icons and buttons, and textures from Elemis and Hybrid Genesis are very useful. I also quite like Designmoo.

/o/ I'll post up some actual WIP GUI stuff once I start working on The Elevator towards the end of this week, but maybe that helps someone a bit.

[DaFool]

Do you think it's worth it to pursue a really fancy GUI with the hopes it will help mask or divert attention away from deficiencies in the actual art? I mean I've encountered quite some kinetic novels which were just stock photos for the most part but the designer still has managed to make them memorable and atmospheric through good GUI design.

On the other hand, functionality is still my priority that's why I never really strayed too far from the default Ren'Py configuration. Add to that I'm working on console RPG type gameplay elements and simpler GUIs motifs are easier to implement across the board.

[AxemRed]

On the other hand, functionality is still my priority that's why I never really strayed too far from the default Ren'Py configuration.

The default has a bunch of usability problems though...

[Camille]

@DaFool: In my opinion, the GUI doesn't need to be super fancy, but it does need to fit with the overall theme of the game and go with the art direction. For example, the RisAmo GUI wouldn't fit in BCM and vice versa. A lot of Japanese VNs use a rather simple style for their GUIs that's very easy to replicate, it's just that the GUI fits the game well.

To me, when I see the default Ren'Py GUI in a game where the art and writing are more elaborate, I get the impression of carelessness on the part of the creator. It's really not that hard to at least change the colors a little bit or use a different font. Use the recent TKOT as an example:





The GUI in TKOT doesn't stray that far from the default. For those of us who have seen the default Ren'Py GUI over and over, it's easy to see that clua hasn't changed all that much. HOWEVER this style goes very well with her game! The colors match the theme and the GUI is both functional and customized enough that it looks rather stylish. It shows that clua put some thought and consideration into it; her GUI isn't jarring like it would have been if she'd simply used the default.

(sorry for using your GUI as an example, it just sprung to mind first! ;; )

[clua]

Just a note that if you google GUI/interface elements, you can usually find a lot of nice stuff for free. I personally like going through Japanese games and seeing how they do their GUIs... I put a lot of screencaps in a big "VN GUI case studies" folder. For example, I'll often look at something like this and analyze it. What's good about this GUI? What makes it stand out? How accessible is it? Even if I'm not necessarily designing the GUI myself, it helps to have examples that I can maybe send to Lazcht for her to use as a reference.

I buy a lot of graphic resources from Graphic River because they tend to be higher quality since they're premium, but I dig around for free stuff, too. Just make sure you're careful about resources' terms of use. Premium Pixels has some nice icons and buttons, and textures from Elemis and Hybrid Genesis are very useful. I also quite like Designmoo.

/o/ I'll post up some actual WIP GUI stuff once I start working on The Elevator towards the end of this week, but maybe that helps someone a bit.

Oh wow! Thank you so much for the links! I think I will separate a post for linking sites like such.
Its good to know that you actually research for what you would like(believe me, most of people who commish things dont do that haha)
I can see now why your GUI s are that nice, even if you dont directly design them.

@DaFool: In my opinion, the GUI doesn't need to be super fancy, but it does need to fit with the overall theme of the game and go with the art direction. For example, the RisAmo GUI wouldn't fit in BCM and vice versa. A lot of Japanese VNs use a rather simple style for their GUIs that's very easy to replicate, it's just that the GUI fits the game well.

To me, when I see the default Ren'Py GUI in a game where the art and writing are more elaborate, I get the impression of carelessness on the part of the creator. It's really not that hard to at least change the colors a little bit or use a different font. Use the recent TKOT as an example:





The GUI in TKOT doesn't stray that far from the default. For those of us who have seen the default Ren'Py GUI over and over, it's easy to see that clua hasn't changed all that much. HOWEVER this style goes very well with her game! The colors match the theme and the GUI is both functional and customized enough that it looks rather stylish. It shows that clua put some thought and consideration into it; her GUI isn't jarring like it would have been if she'd simply used the default.

(sorry for using your GUI as an example, it just sprung to mind first! ;; )

º////º lol I wish I could knew back then how that worked ahaha, that have the deffault colors of the Aleema tutorial orz

I agree, A good GUI doesnt have to be super fancy. But at least I would apreciate that the default ren py layout would be changed.

I find simplier minimalistic GUIs the hardest to pull, I think a lot of facts like composition and color theory goes much more then than in
a regular GUI.

Well I been working on this one:




(please dont laugh at the name of my game, it cost me a lot to think that orz)
Again Im no graphic designer, so its most likely this needs to have a revision(An auto critic would be that the menu choices are way big, I did them before the title, now I feel the compete-)
The settings and quit screens are not customized yet-(I posted them for the lulz)

I think that the GUI express all the style of your game, for example, the setting of my game would be in a sort of medieval world, I chose to add some celtic ish air on it
(Not so much, because its a world inspired on ours, but is not earth ahaha)
The story talks a lot about beauty(lol) so I added some kitsch stock images(vintage ones) to decorate it.

[clua]

RESOURCES

++How to code++
+Crash course in screen language/UI design(This tutorial also list another useful tutorials of how to customize the GUI)

++Fonts++
+Font Squirrel
+Da Font

++Textures++
+CG Textures
+Pattern 8
+Elemis
+Hybrid Genesis
+textures from DevART
+Mayang's Free Textures

++Icons++
+Premium Pixels

++Brushes++
+

++Color Palletes and such++
+Colour Lovers
+ Color Scheme designer

++SFX++
+OELVN Wiki sfx Resources

++Mixed++
+Designmoo(patters, icons, layouts etc)
+Blue Vertigo(Graphic resources in general, the sites above are listed here)

++Related Threads++
+GUI problem for beginner
+GUI checklist
+How to price GUI & CG



++Inspiration++
dribbble

Note the following:
+Be sure to read the policy on free resources, specially on fonts, some of them might say they are free, but
when you read the policy...


Thank you to the following people who helped on this list!:
Camille, 9:19, icecheetah

[9:19]

Thanks for sharing these awesome resources, guys! Slides own GUI under carpet in shame lol. I've no experience in this area, so I've not much material to contribute except for handy-dandy textures from DevART.

OAO You peeps inspire me to put more oomph into it. (clua, I can totally see the thought you put into the composition and so forth. The colours are vibrant and asdflkj.)

[GeneDNC]

I love customised GUI's. Making the GUI for Freezing was one of the things I enjoyed most and I actually worked on it before anything else after the basic script was done.

It's very disappointing to see a good looking game, then getting to the preferences screen or whatever and it's the Ren'Py default. It's like the developer didn't even care and it sort of deflates the game as a whole.

My problem is that I'm not an artist so I have to rely on other people's work and free resources. Which isn't all that bad, but sometimes it would be so much easier to just draw what's in my head instead of going hunting for something that will maybe work. I've actually been thinking of offering my help to projects to just help with GUI's but I don't know how much of a market there is for that, especially, like I said, I can't create original graphics.

[Omnificent]

Thank you for this. I have no idea how to GUI and chances are I'm going to be doing everything not-music in my game myself, so this is very useful.

[icecheetah]

I was wondering how to do that... now I know there are tutorials!
Welp. I'll keep an eye on this for when I get a bit closer to finishing something.
Edit: Another source for free textures: http://mayang.com/textures/
Though I don't know how many games would find them useful.

[Camille]

Since I said I would.... Some in-progress stuff from The Elevator, a VN I'm doing as a school project.

- Title screen (Auro did the logo)
- Preferences
- Save/load

I did these myself since I didn't want to bother Lazcht for such a small project, so. XD

[Hijiri]

Hmm, well while I may not exactly be the best at creating GUI, I do have some idea. However, I sometimes do question if what I'm doing is right. Like, right now. I was wondering what people think of this textbox.