From TDN

This page is a Work In Progress.

Contents 1 Introduction 2 Requirements 3 Your GUI 4 Tips and Tricks 5 GUI Profiles 6 Sound Setup

Introduction

I have developed a technique to create fast GUIs in a short amount of time. Provided with this lesson is a zip pack which contains a PhotoShop 9/CS2 compatible file which is a complete window of your GUI, with slices all setup and named to create your new views. The process is simple; create your window in the, save the slices, merge it and replace the old GUIs.

Torque GUI Pack
MyGui Photoshop Files - The Zip pack contains the following:
- MyGui.psd: This is the photoshop file for your new GUI.
- tmp_demoCheck.psd: Torque's Demo GUI with a red layer for limitations of the images used.
- tmp_demoRadio.psd: Torque's Demo GUI with a red layer for limitations of the images used.
- tmp_demoScroll.psd: Torque's Demo GUI with a red layer for limitations of the images used.
- tmp_demoWindow.psd: Torque's Demo GUI with a red layer for limitations of the images used.

Requirements

You will need Photoshop 7 or above (I believe).

Your GUI

The file you will need to open is the 'Template_MyGui' photoshop file which will open up what you see on the right. This is the normal Torque GUI with the slices that seperate all areas of the window (press: control-H to disable/enable slices/guides). The layer folders contain all the individual images for the various states of use (normal, active, inactive/NULL). The layer folders with the suffix 'merged' on it means that the layers have been merged so that you can easily change the color or hue of a single area such as the scroll bar, export it and have a different hue of GUI. There is no background in the image as this is governed by the GUI Profiles, which will be discussed later.

The basic principle in editing the GUI here is to creat something that fits within the boundaries of the slices. Thus you can star t off with a box, and then add more and more boxes, or simply make a new layer and start painting your work into the layer, the slices will cut it up and give you all the images to make up your GUI.

Tips and Tricks

If you are using the rounded shape tool, don't go above 5px in feather as this won't work well with the setup of the slices.

Saving
In Photoshop, follow these steps to properly save your files:
1. File Menu -> Save For Web

2. Select PNG-24 (Typically this will be in one of the optmised windows already), make sure you have transparent tick on (it's on by default) and save.

3. Make a new folder called MyGui in your ~/client/ui/ folder, where you will save your slices. Select All User Slices from the Slices dropdown menu. Save the files.

4. Go to your directory and check that you have all the files you need.

5. Go back to your PhotoShop GUI and turn all the layers that are visible invisible and activate the 'active' or 'Deselect' layers, follow the steps again and save, then you will have your active images, do the same steps for inactive.

Merging
Open the PhotoShop GUI Template files provided in the pack above and then open all the slices files you have. Simply drag and drop the files to their corresponding areas and check the transparency. You should then merge the slices layer -- NOT the red layer. Turn the Red layer invisible and then save as .png in your GUI folder.

For rapid testing you can save these files under the same name as the TorqueGUI files, but make sure you back these up before you do so.

The main development of your GUI should be done. You can check everything joins up properly, if it doesn't or you need an image, you can follow the steps above, but on step 2. you select the slice you want, and 3. you make sure you select only selected slice to be replaced. You will then get a new slice image that can be merged into your current GUI.

GUI Profiles

A large part of your GUI will be controled by the profiles that are found within the defaultProfiles.cs and the customProfiles.cs. You will be spending most of your time in the customProfiles.cs located in ~/client/ui/.

I have commented the customProfiles.cs script to provide you with an understanding of how to set it up. If you need to control or edit any features, copy over the definition from the defaultProfiles.cs into the customProfiles.cs and edit them to your liking.

//-----------------------------------------------------------------------------
// MyGUi
// By: <NAME>
// Version: 0.1
//-----------------------------------------------------------------------------

// The Fonts folder
$Gui::fontCacheDirectory = expandFilename("./fonts");  // You don't need this, but I wanted to redefine my fonts to be in the ~/client/ui/fonts/ folder.

// Cursor
new GuiCursor(DefaultCursor)
{
   hotSpot = "1 1";
   renderOffset = "0 0";
   bitmapName = "~/data/gui/CUR_MyCursor";  // Cursor Location
};

// All Defautl Settings
new GuiControlProfile (GuiDefaultProfile)
{
   tab = false;
   canKeyFocus = false;
   hasBitmapArray = false;
   mouseOverSelected = false;

   // fill color
   opaque = false;
   fillColor = "201 182 153";  
   fillColorHL = "221 202 173";
   fillColorNA = "221 202 173";

   // border color
   border = false;
   borderColor   = "0 0 0"; 
   borderColorHL = "179 134 94";
   borderColorNA = "126 79 37";
   
   // bevel color
   bevelColorHL = "255 255 255";
   bevelColorLL = "0 0 0";

   // font
   fontType = "Arial";
   fontSize = 14;
   fontCharset = CHINESEBIG5;

   fontColor = "0 0 0";
   fontColorHL = "32 100 100";
   fontColorNA = "0 0 0";
   fontColorSEL= "200 200 200";

   // bitmap information
   bitmap = "./demoWindow"; // This is where you locate the image.
   bitmapBase = "";
   textOffset = "0 0";

   // used by guiTextControl
   modal = true;
   justify = "left";
   autoSizeWidth = false;
   autoSizeHeight = false;
   returnTab = false;
   numbersOnly = false;
   cursorColor = "0 0 0 255";

   // sounds
   soundButtonDown = "";
   soundButtonOver = "";
};


// Windows
new GuiControlProfile (GuiWindowProfile)
{
   opaque = true;
   border = 2;
   fillColor = "201 182 153";   // Background Color, used to define the typical window's background.
   fillColorHL = "221 202 173";
   fillColorNA = "221 202 173";
   fontColor = "255 255 255";
   fontColorHL = "255 255 255";
   text = "GuiWindowCtrl test";
   bitmap = "./demoWindow"; // This is where you locate the image.
   textOffset = "6 6";
   hasBitmapArray = true;
   justify = "center";
};

//Scoll
new GuiControlProfile (GuiScrollProfile)
{
   opaque = true;
   fillColor = "255 255 255";
   border = 3;
   borderThickness = 2;
   borderColor = "0 0 0";
   bitmap = "./demoScroll";  // This is where you locate the image.
   hasBitmapArray = true;
};

//Check Box
new GuiControlProfile (GuiCheckBoxProfile)
{
   opaque = false;
   fillColor = "232 232 232";
   border = false;
   borderColor = "0 0 0";
   fontSize = 14;
   fontColor = "0 0 0";
   fontColorHL = "32 100 100";
   fixedExtent = true;
   justify = "left";
   bitmap = "./demoCheck";  // This is where you locate the image.
   hasBitmapArray = true;
};

//Radio
new GuiControlProfile (GuiRadioProfile)
{
   fontSize = 14;
   fillColor = "232 232 232";
   fontColorHL = "32 100 100";
   fixedExtent = true;
   bitmap = "./demoRadio"; // This is where you locate the image.
   hasBitmapArray = true;
};

Sound Setup