Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Lunar GUIs: Game.gif Tutorial


Guest
 Share

Recommended Posts

This Game.gif Tutorial applies for both versions 4.5 and TE

The tutorial is used to impliment an Outline GUI to any and all backgrounds. Lunar backgrounds are suggested for beginners as they come already packaged in different sizes.

Anyway, lets begin.

STEP 1 - Choosing a picture

Like I said, I reccomend my packaged backgrounds for these particular types of GUI simply because you can skip like 4 steps. For purpose sake, I will use the red GUI picture to create it. Make sure you are at this point viewing the image in a documents folder.

STEP 2 - Altering your picture

When you have your picture right click it and press "OPEN WITH >>> PAINT". It will then open up in paint funnily enough. You need to make sure it is at least 852 x 599 pixels in size first of all. Click on, IMAGE >>> ATRIBUTES

![](http://img170.imageshack.us/img170/7416/scrn11fl.png)

Check the image size is at least 852 x 599 pixels in height and width.

![](http://img297.imageshack.us/img297/807/www7ep.png)

When you have done this, make sure everything you want from the picture is available for 852x599\. In other words, if the woman from the red picture does not fit in the picture when it is the newer size, move her there. When you have fitted everything snug then you can alter the attributes to 852x599 and see. Undo if you make a mistake (remember paint only allows 3 undo's)

IF THE PICTURE YOU WANT NEEDS TO BE MOVED, follow these instructions:
Click on, EDIT >>> SELECT ALL

![](http://img50.imageshack.us/img50/6425/scrn36aq.png)

Move your picture around to get the things you want into the space you want them (the woman into the frame of the picture) so instead of…

[this](http://www.abcdigitalart3.hpg.ig.com.br/animes/WhiteDaeya_DigitalSorceress_800.jpg)

You get this…

![](http://img361.imageshack.us/img361/6905/scrn41nw.png)

After all of this, dont forget that it is absolutely important that your file is 852x599 (or even 851x598 on some PCs, but ill discuss this later)

STEP 3 - Adding the Game.gif Outline

Firstly press EDIT >>> PASTE FROM,
Find the UNZIPPED file of Game.gif in your Outline GUI folder,
Right click the black colour and click the transparent button (image below).

![](http://img168.imageshack.us/img168/7379/scrn51jr.png)

Now (whatever picture you are using) you should have something that looks like this (depending on the outline you are using):

![](http://img188.imageshack.us/img188/7765/scrn64yy.gif)

STEP 4 - IMPROVING

Firstly, it already looks pretty descent as it is dont u agree? But it still needs some of those vital touches to set it off, for example making a filled box thats crimson red to make the buttons stand out (filled box is 3rd 1 down in same place as transparent option). You can even fill in the chatbox and inventory/spell boxes to make them stand out also (colors.txt will be changed in next tut)to get better results. Hopefully, if you understand paint you can do this with no worry at all. Here is what it could look like after the changes:

![](http://img279.imageshack.us/img279/6483/scrn72zw.gif)

One thing though, because of the exit game button and the writing in the game options being black, try not to make the boxes black otherwise you wont be able to see them (4.5 GUIs ignore this rule as the text is in the GUI not the program itself)

Now you say well where is the writing? Thats the fun bit :P you can make the writing style anything you want now (default is Tahoma size 7 or 8). You can make them have a picture instead of writing (MP/HP bars as in example)

![](http://img171.imageshack.us/img171/6194/scrn95gz.gif)

–-After all this...you may have the urge to add a few little bits and bobs here and there, like extra lines that connect pieces together ect...(use the first line size in paint is preferable)the example:

![](http://img281.imageshack.us/img281/6047/scrn100aa.gif)

and there you go :P your first GUI…as you create more and more GFX for your game you get more experience and a better quality of GUI

For those of you who are handy with image editing sowftware such as photoshop, this last step would have been pretty fun for you and you would ahve done it much easier.

Look into the Colors.txt tutorial to find out how you optimise and improve on how the GUI looks like in-game

Thanks for reading!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...