Graal Forums - Custom GUI Image Tutorial

Graal Forums (https://forums.graalonline.com/forums/index.php)

- Graphic Design (https://forums.graalonline.com/forums/forumdisplay.php?f=9)

- - Custom GUI Image Tutorial (https://forums.graalonline.com/forums/showthread.php?t=81591)

Custom GUI Image Tutorial

I figured this fell more into Graphics rather than scripting, so I placed it here. This is a small tutorial to teach you how to create a Graal GUI skin from scratch. Criticisms/Comments welcome. Rep if you like it/found it helpful.

http://www.sympgraal.com/Ian/guitutorial.png

Very nice :)
Now more pixelers will know how to make guis :p
++rep

lol Nice one.

You already taught me this ;)

Do these support alphatransparencies?

Quote:

Originally Posted by Demisis_P2P (Post 1419498)

Do these support alphatransparencies?

They have full support for alpha transparencies.

Here is my take on a loosely vista-themed one.

It made it with Era's gui template so it's much smaller than yours.

It looks pretty good in game, but I can't change text colors, etc. so it doesn't fit perfectly.

Quote:

Originally Posted by Demisis_P2P (Post 1419517)

profile.fontcolor ?

Quote:

Originally Posted by cbk1994 (Post 1419519)

profile.fontcolor ?

I'm not staff.
I'm just overwriting graphics locally to test them in game.

I'd love to see a classic one :O! (Default Q Menu like this!)

+rep :)

i did a classic one on old vs, remember??

rep++ [you don't need the profile= part, btw]

I edited the tabs and the scrollbar images a bit too, so this is what the News gui looks like for me now on Era.

I see that you have a single pixel on the bottom left that represents the background. What you're doing is just making Graal's job more difficult because it has to tile a single pixel rather than a larger set, which takes more CPU time.

If you want a solid colored background simply remove the background pixel from the image and set opaque to true in the Window's profile then change fillcolor accordingly.

Attached is the image I'm using for the simple gray window theme based on VGUI in the Source Engine. The image has 80 percent opacity.

And combined with this profile, it makes the window background to what I want it to be without having to put it in the image file.

PHP Code:


		
			
  new GuiBlueWindowProfile("GuiGrayWindowProfile") {

    this.bitmap = "guigray80_window.png";

    this.fonttype = "Verdana";

    this.fontsize = 14;

    this.fontstyle = "b";

    this.fontcolor = {255, 255, 255};

    this.fontcolorna = {176, 176, 176};

    this.fontcolorhl = {0, 0, 0};

    this.opaque = true;

    this.fillcolor = {88, 88, 88, 255 * 0.80};

    this.fillcolorhl = {255, 164, 0};

  }

The result is also attached.

I don't think Graal is tiling the single pixel. Theres a "tile" variable, I'm pretty sure it's being stretched when this is set to false.