Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

DarkBASIC Professional Discussion / GUI /Graphics Design?

Author
Message
Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 21st Oct 2010 02:34 Edited at: 21st Oct 2010 02:38
To be more specific, I'm not really talking about the framework of a GUI (object placement, etc) but the actual graphics themselves.

Historically, I am a total failure at graphics of any kind.. I can do the odd cut & paste mix n match job and manipulate graphics, but when it comes to the nuts and bolts..

Making original shapes, knowing how to make a shape I want with the necessary effects, making textures that actually look like something, etc.. I am just a miserable wretch.

I can't even do basic pixel art for sprites or anything.

Is there any hope? I'd like to take a stab at doing a graphical GUI for my Text RPG, but I wouldn't even know where to find the proper tutorials (good tutorials) that could teach me this kind of stuff from scratch..

Making good looking buttons, or designing a window gadget, that actually looks like a window, etc.. The best I can do with any kind of graphics, is basic web related stuff ( i.e my Magazine site http://www.oldskoolgames.com/ )

If anyone knows any real bang up links that can teach the sort of fundamentals I need to learn, and doesn't do it in a boring technical fasion, I'd greatly appreciate it.

Hiring an artist is not something I prefer to do, and is not really a financial option for me, in this or any other future endeavor. So I'd at least like to try and learn to see if I can accomplish anything before I beg someone to do something for free or for pocket change.

gbark
18
Years of Service
User Offline
Joined: 14th Oct 2005
Location: US - Virginia
Posted: 21st Oct 2010 03:55
One important aspect for any sort of user interface (be it an in-game GUI or website design) is some color theory. You don't have to go too advanced, but just enough to get a general idea of what colors "go together", how to create good contrast, etc. A quick Google search will find some nice articles on this.

As for specifics on the art (how to make basic shapes, texturing, and other things you mentioned) that will depend on what art package you use.

Two good free packages I would recommend to start off with would be Gimp and Paint.net. Personally I use both, as they each have slightly different features, so it's nice to have a choice depending on what project I'm working on.

After that, really just play around with the software and learn what all the tools do! You should be able to find your way around and start creating basic shapes and playing with the effects pretty quickly.

For really improving though, there are tons of tutorials on the web. Again these are really popular pieces of software, so a lot of people use them.

Some specific things you want to eventually get down, and so you should look for in your tutorial hunts:
* Learn about creating and working with Layers
* Learn about your various selection tools
* Learn about using different brushes as you paint, and how to change attributes such as opacity or hardness

I know it sounds long, but once you get these down, then creating things like good looking buttons with fancy gloss effects and soft rounded edges will come naturally to you.
sneaky smith12
17
Years of Service
User Offline
Joined: 30th Apr 2006
Location: Like id tell you, oh wait i just did
Posted: 21st Oct 2010 04:15
Quote: "If anyone knows any real bang up links that can teach the sort of fundamentals I need to learn, and doesn't do it in a boring technical fasion, I'd greatly appreciate it."


What I've found helpful in the past is to look up webdesign tutorials. Things such as rollover buttons are pretty easy to implement, and look nice too. In order to make those you do need some sort of graphics editor like gbark mentioned.

If you're looking for something like menus and windows error messaging there some dlls floating about the forums (BBB Gui is the one that comes off the top of my head).

And lastly I remember something of a drag and drop HUD designer on the forums, but not sure what it was called (and I think it cost money).

If at first you dont succeed, LOWER YOUR STANDARDS.
Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 21st Oct 2010 04:16
Well I kind of understand most of that stuff already..

Most of my experience is with Fireworks, but I also have Photoshop, and I'm just not too fond of GIMP or generic paint programs.. Graphics Gale is interesting though.

I think what I'm looking for is being pointed in the right direction as far as tutorials that explain common effects and how they are used, but with a GUI-centric teaching theme (i.e not teaching how to generically use them but for the purpose of building an example GUI as you read and learn about what things do).

Does that make sense?

sneaky smith12
17
Years of Service
User Offline
Joined: 30th Apr 2006
Location: Like id tell you, oh wait i just did
Posted: 21st Oct 2010 04:19
Quote: "I think what I'm looking for is being pointed in the right direction as far as tutorials that explain common effects and how they are used, but with a GUI-centric teaching theme (i.e not teaching how to generically use them but for the purpose of building an example GUI as you read and learn about what things do)."


Something like this?

hope that helps

If at first you dont succeed, LOWER YOUR STANDARDS.
Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 21st Oct 2010 04:27 Edited at: 21st Oct 2010 04:30
edit: replies got ahead of me

Sneaky, good point in looking up web design tutorials.. I used to read those a lot.

As for using something like BBB/BLueGUI/etc that would just feel out of place unless I was building an application around them from the ground up.. Which I'm not doing at this point.. I've never really seen a DBPro GUI set that I was really happy/impressed with I guess.

But more to the point, I'm going for that old school look and feel, like a lot of the games from the 90's would have with their nice graphical user interfaces, a general scrolling text box "window" like you'd see in an RPG and such. I got the scrolling part down, just need to make some graphics to go with it.... lol

Here is a screen shot of The Wizard Front End, a very old (Windows 3.1 era) MUD client for Simutronics' GemStone III game

http://upload.wikimedia.org/wikipedia/en/thumb/1/11/GemstoneIV_Wizard_Screenshot.jpg/754px-GemstoneIV_Wizard_Screenshot.jpg

The background texture for instance (I would like to be able to make a texture from scratch. be it wood grain, or a rope, or whatever), or the little graphical windows that do various things (showing whats in your hands), the stance indicator (shield on the left hand side) in terms of pure Artwork, that's kind of what I'm trying to learn to do.

It's more of an Artwork issue and how to "get started" learning to make those from the ground up.

But yeah, I guess web design tutorials probably would be a great place to start...

sneaky smith12
17
Years of Service
User Offline
Joined: 30th Apr 2006
Location: Like id tell you, oh wait i just did
Posted: 21st Oct 2010 04:41 Edited at: 21st Oct 2010 04:45
Quote: "The background texture for instance (I would like to be able to make a texture from scratch. be it wood grain, or a rope, or whatever)"


That's a different question completely, and something I can help with too.

Textures are something that photoshop (which you say you have) can do very efficiently. There are several types of brushes you can download, and a lot of times they're free. I'd recommend just trying a search for, "photoshop brush wood".

As for making brushes from scratch... this tutorial might help. What I've done in the past is just grab my camera and take a picture to make it.

Quote: ", or the little graphical windows that do various things (showing whats in your hands), the stance indicator (shield on the left hand side) in terms of pure Artwork, that's kind of what I'm trying to learn to do."


Sorry, not to sure about that myself. I would assume they just use transparent images transposed over the background, and switch them around. If using bitmaps magenta so RGB(255,0,255) is transparent.

That way you should only have to make a sword, person, shield, and whatever items you use.

If at first you dont succeed, LOWER YOUR STANDARDS.
David Gervais
Retired Moderator
18
Years of Service
User Offline
Joined: 28th Sep 2005
Location: Montreal, Canada
Posted: 21st Oct 2010 13:54 Edited at: 21st Oct 2010 13:56
Want a little bit of advice form someone who has a wee bit of experience..

Take it step by step..



1 block in the basic shape of the GUI element. (in this case the top bar of a window.)

2 Define the areas within this for the buttons/main bar

3 add some simple highlight and shadows to give the different areas more definition.

4 this is where you can experiment with gradients, highlights and shadows. keep it simple at first and build up from there. (in my sample I kind of threw allot of layers of work to give you an idea of how the final product can look)

5 now you need to create a lower frame area, you simple extend the lower part of the top bar and then tweak it to fit the style, making sure that it all fits.

changing things like the width of the outer frame, what direction the light is coming from making things glow (which is just increasing the brightness and saturation of the item you want to look glowing.) Basically play with different things, you'll soon hit on a style and color scheme you like. then with this basic element done it's a simple matter of extrapolating other GUI elements.

I hope this helps a bit. Just remember, in the beginning.. "Keep it simple!"

Cheers!

The Slayer
Forum Vice President
14
Years of Service
User Offline
Joined: 9th Nov 2009
Playing: (Hide and) Seek and Destroy on my guitar!
Posted: 21st Oct 2010 14:11 Edited at: 21st Oct 2010 14:14
The first thing I would do, is first imagine in my head how I want it to look. And, if you have an example (like the one in Gemstone IV), then it's even easier. Once you have an idea on how it needs to look, start of with a square image, power of 2 (for the background in your Gemstone example) fill it with the color black, and start of painting with a brush ( grey color, and set to 50 or 75 % transparent) to draw the marble kinda lines. Don't worry if you don't get them perfect immidiatly. There's an undo function in every paint program that I know of.
Use a variety of brush sizes or shapes until you get what you like. The more detailed parts, draw them using a fine brush set to 100 % opaque.
Once you're satisfied, you can add effects to it, and experiment with it just untill you get what you want. And, while experimenting, you'll create all kinds of textures that you can use, so save them. They'll come in handy some day.
Once you've got what you need, make that texture seemless.
And, if you still didn't get the required result, there are lots of free programs that can render wood, metal, stone, etc...
As for drawing for example the shield, try to visualize how you would build that shape with the brushes at hand in your paint program.

I would do it like this:

1) Start of with a big black cirkel brush:


2) With the eraser (or gum) tool/brush (also a circle but smaller), carve out a piece of the big black circle:


3) Again with the eraser tool/brush (but this time set the shape to a square!), carve out another piece, so that you get the shape of a half shield:


4) Now, with the wandtool (or the magic wand), select the inner color (here it is black) so that you select the whole shape. Once selected, align the shape with the help of the raster. Then, with the shape still selected, copy/paste it, and mirror the newly paste copie:


5) Then, align the other shape too, to make the final shape of the shield, then deselect all, and once more with the wand tool, select the color black in order to select the final shield.

6) Once that is done, fill the complete shield shape with red (or any other color that you like), and apply an inner bevel on it (if your paint program has that feature). If not, experiment with all the filters/effects that your paint program has, untill you're satisfied with the result.
You can apply as many effects as you like, just untill you get the required result.


and here's the final result:


Hope you like this little tutorial, and I hope it helps you making other great images.
And, I hope that my explanation is clearly?

Cheers

Slayer rules!!! Yeaaah, man!
Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 21st Oct 2010 20:18 Edited at: 21st Oct 2010 20:36
Thanks guys. Those short tutorials were VERY helpful and is the kind of stuff I'm looking for

Davids example especially, is on the right track. I'm gonna be searching for step-by-step tutorials that go into more detail, that explain what is done in each step, which tool is used, and why/what it does, and that kind of stuff.

So if anyone does know any good links like that, those are the ones I'm looking for... Off to google in the meantime

late edit:

Looking for one more piece of advice..

When it comes to the finished GUI product as a whole (what the entire screen will look like).. Is it best to keep it as a single pasted image, or break it into parts?

And in that line of thought.. Although I am designing in 1024x600 (Netbook resolution) I was thinking of adding a couple of resolution options the user could pick (a couple higher, and maybe a lower one like 800x600) so in relation in how best to store/load it.. separate pieces assembled on the screen? Or one giant image?

Should I make the final GUI image(s) in a much larger resolution, and then resize them down to the display resolution? (I would assume as long as I keep the aspect ratio the same, the proportions would be fine on resize). I'm not so sure about having individual layout files for each resolution - that might seem a bit "clunky"?

In general the only real area that would be changing in width would be my text display area. Although depending on what I end up with I may want to have moveable/dockable windows.. This is all in the very early stages..

another late edit:

Just to expand on the resolution question.. I was curious about possibly making a GUI based on vector graphics.. I never got to try this with a web site (don't rightly know how) but the big buzz about vectors was how they were mathematically based and you could resize them over and over with no quality loss etc.. But I've never really looked into it beyond that. I know there are some vector shapes in editing programs but they seem pretty basic, and it "just playing around" I always ran into problems like "image must be rasterized to apply this effect" etc..

Any worth in exploring this avenue?

The Slayer
Forum Vice President
14
Years of Service
User Offline
Joined: 9th Nov 2009
Playing: (Hide and) Seek and Destroy on my guitar!
Posted: 21st Oct 2010 20:24
Quote: "Davids example especially, is on the right track."

Oops, and mine was not?
Yah, I know, mine wasn't about designing graphics for the GUI, but it should give you an idea on how to make the other kind of graphics that are needed to spice up your GUI, and for games in general.

Cheers

Slayer rules!!! Yeaaah, man!
Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 21st Oct 2010 20:27 Edited at: 21st Oct 2010 20:44
No your example was good too For exactly the reason you said.

One thing that pisses me off about Photoshop is I started a blank 32bit color image and couldn't even use the painbucket to apply a background color! (what?)

I don't know much about 32bit image editing though, so I'm sure there is a reason..

edit:

I found one right up my ally... it's for an "iPhone game" but hopefully it will help :p
http://psd.tutsplus.com/tutorials/interface-tutorials/how-to-make-a-menu-interface-for-a-fantasy-themed-iphone-game/

Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 25th Oct 2010 00:06
Got the drafting ideas on paper thing working pretty well for myself.

But the whole Photoshop thing isn't working out, lol....It's like every time I try to learn C++ (failsauce) Maybe I should just stick to a really crappy text only UI with some basic shape elements like lines and boxes.

Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 25th Oct 2010 00:56
If you can do a simple mockup on paper, scan it in then trace it with Photoshop's pen tool (or in fireworks if thats what you prefer).


"Any sufficiently advanced technology is indistinguishable from magic" ~ Arthur C. Clarke
Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 25th Oct 2010 03:06 Edited at: 25th Oct 2010 03:10
It's not so much that.. It's getting the right effect put onto it.

Like to make a text entry box for example.. To me having a flat image with a border just doesn't look right.. I like it to have some depth to it. Kind of like an "inset" knockout of sorts (like the Dragon Game GUI I linked to) but I can never get the effect to look just right.

And having that flush with say, the borders of a text window, never looks right either.. I'm gonna play with it some more tomorrow though and see if I can't figure something out.

I have more experience working with Fireworks also, so maybe try something with that.. Although its shapes and graphics over product a more "bulky" / thick look more suited to web design I think. I suppose an alternative could be to just have the command line sit in the bottom of the scrolling text window's frame..

Hopefully I'll come up with something though.. I need to hunt down some free texture/pattern web sites too, that have rather unique looking stuff.

Frank C
13
Years of Service
User Offline
Joined: 3rd Jul 2010
Location: Houston TX
Posted: 25th Oct 2010 15:19
If you have access to MS Expression Blend you can make a GUI similar to the Gemstone GUI you showed earlier, then you can take a screenshot and modify it in Photoshop or some other editing software. With Blend you can put in any 3D effects you want.
The Slayer
Forum Vice President
14
Years of Service
User Offline
Joined: 9th Nov 2009
Playing: (Hide and) Seek and Destroy on my guitar!
Posted: 25th Oct 2010 15:54
Quote: "(like the Dragon Game GUI I linked to)"

Do you mean something like this:...?





They are not exactly like the one from the Dragon Game, but inspired by. I made the complete menu with a 3D program, and then added the indented menu buttons in a paint program, and added some finishing thouch with some effects.

Cheers

Slayer rules!!! Yeaaah, man!
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 25th Oct 2010 16:12
No! - sorry, but you fell into the trap, the evil filter trap!.

Try and keep your GUI organic, don't use embossing filters because they just look cheap. If you use the basic shape then shade it manually it will look much better - same goes for things like drop shadows. I would lay out the basic colours and shapes on a single layer, then add a lighten and darken layer, then draw these all manually - adding in scratches and dents (it's easy with a darken and a lighten layer). Select solid blocks of colour on the base layer, then shade it on the darken layer, then add some highlight on the lighten layer - then reduce the transparency, and it will look damn cool I promise. Work in low opacity settings, take your time, build up the shading then only highlight the bits that need it.

Health, Ammo, and bacon and eggs!
The Slayer
Forum Vice President
14
Years of Service
User Offline
Joined: 9th Nov 2009
Playing: (Hide and) Seek and Destroy on my guitar!
Posted: 25th Oct 2010 16:51
Quote: "No! - sorry, but you fell into the trap, the evil filter trap!."

Hum, I thought the result was pretty good, though?
I only used two filters per image. One inner bevel for the indented buttons, and an image effect to give another feeling to each image. Like the first effect is a radiance effect, which I haven't succeeded in doing with layers yet.
The shadows were rendered directly in the 3D program.
But, yeah, you have a point regarding the use of layers for creating indented or raised buttons.
These images where done rather quickly. Roughly 40 minutes for the whole thing (making the 3D models, position them, texture them, adjust the lighting, render the image, adding the buttons and applying the filter)

Cheers

Slayer rules!!! Yeaaah, man!
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 25th Oct 2010 17:06
No offense meant of course - I'm just as culpable when it comes to that inner bevel.

One thing I do sometimes, I duplicate then layer, then do an inner bevel, then do an inner bevel on the other layer, but with a different light source (color, angle etc) - then fade the topmost layer down a bit to mix them up. That gives a neat little 2D lighting effect - but then I would always suggest messing things up a little before filtering - add some random noise - or better yet, add a detail layer of just dirt, some low opacity organic texture to help break up the lines. It is possible to make inner bevels subtle, just do a few variations and mix between them until your happy.

Health, Ammo, and bacon and eggs!
David Gervais
Retired Moderator
18
Years of Service
User Offline
Joined: 28th Sep 2005
Location: Montreal, Canada
Posted: 25th Oct 2010 19:00
another sample just playing with gradients...



nothing fancy, but it doesn't look half bad

Cheers!

Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 25th Oct 2010 20:30 Edited at: 25th Oct 2010 20:33
The inner bevel is definitely my biggest problem. I just don't know how to utilize it properly.. I'm not really sure how one goes about "manual" shading and such.. unless you mean pixel by pixel - I can't even use a filter right so I'm not sure how well that would work out for me either.

I'm off to play with right now. Hopefully I will be able to post something that looks like....something a 3 year old could at least make.

To actually summarise what I'd like to do most... not necessarily independent windows or anything.

But let's say a giant texture rectangle the size of the screen, and then using inset type areas to give it a window-like appearance with some depth that separates the elements from the main shape.

Grog Grueslayer
Valued Member
18
Years of Service
User Offline
Joined: 30th May 2005
Playing: Green Hell
Posted: 25th Oct 2010 21:25
Quote: "nothing fancy, but it doesn't look half bad"


Wow! Those windows look cool.

Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 25th Oct 2010 22:46
Well, I've made a tiny bit of progress.. I managed to make a main text display window, and text entry box, that I am at least able to live with.

I think I may try later on to create some kind of edge graphics or something that I can encase the text entry box in, so its easier to mount it flush with the bottom of the Text Display window. (kind of like the GemStone screenshot's text entry box). I haven't decided if I want to experiment with making my own very thin outer frames, I can place around the windows.

I think my next task is to try and attempt some real graphics creating, and make some buttons/icons and whatnot for stuff like the players Health monitor, and round time and stuff like that, as well as see what kind of windows I can come up with for the right side of the screen. At the least I'll need to try and make a compass of sorts, and also a quest tracker type window, and a widget to display the Party members' health and status as well.

Attachments

Login to view attachments
The Slayer
Forum Vice President
14
Years of Service
User Offline
Joined: 9th Nov 2009
Playing: (Hide and) Seek and Destroy on my guitar!
Posted: 25th Oct 2010 23:19
Quote: "No offense meant of course - I'm just as culpable when it comes to that inner bevel."

No worries. I think we're all a bit lazy sometimes, right?
When it comes to add that touch of perfection, I usually work with layers too. Filters have their limitations, so to compensate for that, layers are more flexible.

@ Neco
I just made another little example, more like the GemStone GUI. I guess this is more like what you're looking for, right?



Cheers

Slayer rules!!! Yeaaah, man!
Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 26th Oct 2010 00:59
Yeah, I like the way those edges are defined and it looks set in.

Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 26th Oct 2010 08:09
You can check out an interface I did for someone awhile back:
http://forum.thegamecreators.com/?m=forum_view&t=171602&b=4


Google for photoshop tutorials, learn about creating different effects even if the example in the tutorial isn't related to your design. You'll be surprised with how many ideas come to you while you're making other things.


"Any sufficiently advanced technology is indistinguishable from magic" ~ Arthur C. Clarke
Neco
15
Years of Service
User Offline
Joined: 13th Jul 2008
Location: Waterloo, Wisconsin USA
Posted: 28th Nov 2010 02:20 Edited at: 28th Nov 2010 02:21
Well, it's very basic and I'm not done with the final GUI design but I have made some small bits of progress.

I've primarily been working on a rewrite of what I had so far, focusing on some internal changes like code organization and the like, as well as implementing my new GUI design with the current scrollbox and non-blocking input code I had.

It's looking good so far, the blank buttons are just placeholders for the time being, as I will have to find the time to decide what buttons I want to provide access to what features, but I have my text entry box, as well as my main display window. Both work but are very basic so far. My cursor sprite works as designed and looks and acts like a real cursor

I found I had to rewrite some things to prevent redundancy within the main loop, as well as clean up my source file messes from all the test code I was doing, and then ran into a snafu where I found out I needed an initialization function for my GUI elements, as well as the drawing function to update the screen.. But that was a very easy fix and I made it work with my first off the cuff solution.

I'm slowly learning new things, and work is not as fast as I'd hoped due to real life issues always getting in the way. But I'm still having fun at least.

Screenshot attached.. hopefully a demo is not far off, but would probably just be some basic input echoing to the display(s)

Attachments

Login to view attachments

Login to post a reply

Server time is: 2024-04-20 07:56:42
Your offset time is: 2024-04-20 07:56:42