Skin Studio stores the skin data as a file (document) just like other programs like Word. The document contains the whole structure of the skin, including pages, elements and skin properties. The only things not included in the document are the pictures, which the document itself point to. This is like linking (not embedding) an image into a Word document: the image file remains outside the document, although displayed in it. So be careful when linking images to a skin: be sure that the location will always be accessible from Skin Studio or the skin will fail to load.

Entering skin data

To create a new skin from scratch, start Skin Studio and select File->New Skin from the Menu Bar (or press CTRL+N on the keyboard or click on the button on the Main Toolbar). The program will present you the Skin Properties dialog box, as shown below:

Here you can enter the skin Title (16 characters max.), your name as the Author (16 chrs. max.) and an arbitrary comment (50 chrs. max): these information will be displayed in the "About current skin" dialog box inside Tracker.

•  Please be careful when choosing a Name because only one skin with a given name can exist in Tracker at the same time.

• The "Custom UI Colors" section is optional and, if activated via its checkbox, allow you to redefine the color schema for menus and dialog boxes in Tracker in order to match the look and feel of your skin graphics. To choose a color, click on the corresponding palette icon.

This dialog box is accessible after the creation of the skin by choosing File->Skin Properties from the Menu Bar.

Once you have entered all information, you can press the OK button to confirm and proceed with the skin creation.

Creating the default Page

Skins in Tracker are made of Pages. A Page is the container for all other elements such Labels, Buttons and Pictures. A Page have a Background Picture that must cover its whole surface. Moreover, a Page can cover only the application area of the P800 display (No Fullscreen) or cover also the upper shortcut area (Partial Fullscreen) or even cover the entire screen (Total Fullscreen). Although more scenographic, this last option must be considered with caution, as a total-fullscreen Page hides the lower P800 status bar, thus hiding the battery indicator, the radio signal strength gauge and the icons notifying the presence of new SMS, email, etc. Tracker itself does not support the replication of such indicators, so these information will be invisible to the user of a total-fullscreen skin until Tracker is minimized or closed at all.

 When creating a new skin, Skin Studio will prompt you to create the first, default Page as a skin cannot exist without almost a Page defined in it. The figure below shows the Page Properties dialog box:

The Name field will contain the descriptive name of the Page, as it will appear in the Tracker menu. The Name must be unique within the skin.

Since we're creating a partial-fullscreen skin in this tutorial, we can choose "Partial" in the corresponding combo-box.

Finally, we have to choose the Background image for the Page. The dimensions (expressed in pixels) of this image depends on the Fullscreen setting, according to the following table:

The P800 display can represent 4096 colors, so you should create bitmaps with a correct palette in order to avoid visual artifacts. Also 256 color palettes look fine and are more easy to use, so this can be your choice.

• The images used in this tutorial can be founded in the sample\images folder under the path containing the documentation itself.

So click the find icon marked as "3" in the picture above and navigate to pick the background.bmp file contained in the sample\images folder. Now, you can press OK to confirm data and Skin studio prompts you to save the skin.

As a general rule, avoid to save your skin document in the same folder containing other files, especially if the destination folder contains directly (or in some sub-folders) the images used to design the skin: this can led later to potential conflicts when you will compile (build) the skin. So, choose an empty newly created directory to store the skin data. The skin document is a file with a .SSF extension; the name of the file will default to the skin Title, but you can choose another name.

Once saved the skin, the program will show the Page background empty, ready to contain elements.

Please note near the bottom of the window the tab containing the first Page name (Desktop). Also, note that many buttons (and menu items) are now enabled. Finally, note that the upper P800 interface toolbar is now covered by our skin, according to the Fullscreen setting we made.

Our skin will be made of two pages, so add now a second Page by choosing Page->Add from the Menu Bar. Name it "Today", choose "Partial" as Fullscreen mode and associate to it the same Background image. Then, confirm with the OK button and the main window will look like this:

Note that a second tab appeared below the Workspace area. Clicking on a tab will make visible the corresponding Page.

Creating Buttons

At this point we're ready to add some elements to our skin. First of all, click on the "Desktop" tab to bring up the first Page; then choose Page->Add Element->Button from the Menu Bar (or click on the button on the Editing Toolbar or press CTRL+F2 on the keyboard). Skin Studio will bring up the Button Properties dialog box, shown below:

• Buttons are elements that can be clicked by the Tracker user to perform actions. Actions can be related to predefined operations that Tracker will carry out by itself or can execute applications (both internal and thirdy-party) or can jump to another page in the skin.

The first Button we're going to create will close Tracker, so choose the proper action (Command) from the frist combo-box. The Command Arg. field is grayed out because the "Close Tracker" command does not accept arguments, but other commands will. A button is displayed on the skin according to up to four image files, as described in the following table.

To fill out our first Button, choose the files close_tracker.bmp as "File" and close_tracker_pressed.bmp as "File Pressed". This button will not require transparency, so leave blank "Mask File" and "Pressed Mask File".

The Position box allow you to put the newly created button at a specified place on the Page; however, leave these fields unchanged as we're going to manually (and visually) reposition the Button after its creation.

Confirm the dialog box with the OK button, and the main window will look like this:

The Close Tracker Button is now created and visible on the Workspace.

Elements in Skin Studio can be moved by dragging them over the Workspace using the left mouse button or by selecting them and then using the arrow keys on the keyboard. To select an element, simply click on it with the left mouse button. Clicking on an empty area in the Workspace will deselect anything was selected. A selected element will have a red thin square around it.

• To move elements across the Workspace more quickly using the arrow keys, press and keep pressed the SHIFT key while moving.

Please note that it's impossible to move an element out of the Workspace.

Now, reposition the Close Tracker Button moving it to the upper-right corner of the Page. Exact coordinates will be X:187, Y:6. To achieve this, you can check the Status Bar while moving: it will report the current coordinates of the element. As an alternative, if you know the exact target coordinates, you can bring up the Properties dialog box for the Button and enter manually the correct values into the Position box, as seen before.

• To bring up the Properties dialog box for an element, select it and choose Edit->Properties from the Menu bar (or double-click the element or select it and press Enter on the keyboard or select it and press CTRL+P).
• Due to a limitation in the Skin Studio's graphical engine, dragging an element for a few pixels only is not supported, as well as dropping it near its original (current) position. To avoid this, use the arrow keys to fine-tune an element's position and the drag'n'drop system for coarse moves only.

Once you've finished the move operations the skin will look like this:

Now, create another Button that will carry out the action "Minimize Tracker". Simply repeat the previous steps choosing the files minimize_tracker.bmp and minimize_tracker_pressed.bmp as "File" and "Pressed File" and Minimize Tracker  as "Command". Then, move the Button to (170,6).

It's now time to save our work: choose File->Save from the Menu Bar (or click the button on the Main Toolbar or press CTRL+S on your keyboard). The Status Bar will show "Skin saved".

At this point the skin will look like this:

Now, it's time to create the Show Menu Button. This button will bring up the popup Tracker menu on the P800.

• It's very important to add a Show Menu Button to each and every Page in a skin: otherwise the user will be unable to change Page or even do anything with Tracker.

To create the Show Menu Button, repeat again the previous steps choosing show_menu.bmp and show_menu_pressed.bmp as image files and Show Menu as "Command". Then, move it to (6,6) to make the skin look like this:

Fine, we've just created the first three elements of our skin that must appear in each Page. So have we to recreate them in the "Today" Page? No. We will just copy and paste them.

• To copy/cut/paste an element, select it and choose Edit->Cut (or Copy or Paste) from the Menu Bar (or press CTRL-X for Cut, CTRL-C for Copy and CTRL-V for Paste on your keyboard; also, you can use the , and buttons on the Main Toolbar).

You can cut/copy/paste more elements at the same time by selecting them all.

• To select more than an element, begin selecting the first one and, pressing and keeping pressed the CTRL key, select the others.
• Tip: you can move more than an element at a time by selecting them and using the move methods shown before.
• Tip: you can easily align selected elements choosing one of the commands under Page->Align Elements in the Menu bar: these commands take the first selected elements as a reference for aligning the others.

So, select all the three buttons we've created and copy them choosing Edit->Copy from the Menu Bar. Now, click on the "Today" tab below the Workspace to switch to that Page and choose Edit->Paste from the Menu Bar: a copy of the three buttons is created here, mantaining the original position.

Now, we must create two more buttons that act just like the tabs in Skin Studio, but operate on the P800: the page-switching buttons. Page-switch is another pre-defined Command in Tracker, so choose the corresponding Command in the Button Properties dialog box and the job is done. For the image files to use, please refer to the following table:

Since these buttons require an Argument (the skin Page to jump to), once selected the Select Tracker Page from the Command combo-box in the Button Properties dialog box, you'll have to click the button next to the combo-box in order to specity the Command Argument; in this case, it will be the target Page number (you'll see the Page names).

 Finally, position the buttons to make the skin look like this:

Now, it's time to create some elements in the lighter area of the skin. We'll begin with two more buttons that will launch the two bonus applets shipped with Tracker 3: TaskMan and FileMan. To do that, we'll deal with UIDs. Under Symbian OS, each application has an unique identifier that is assigned by an Authority; this identifier (the UID) is a 8-digit hexadecimal number and can be discovered using the TaskMan applet shipped with Tracker 3 by selecting the application row and choosing Actions->Advanced->Application Info from the TaskMan menu bar.

Skin Studio helps providing you with a number of UIDs for a few popular programs (including all P800 internal apps), such Opera, OGG Player, Sman and many other. These UIDs are accessible in the Button Properties dialog box after selecting "Start Application" as Command and pressing the button next the Command Argument field. Skin Studio shows the following dialog box:

The list on the left shows the stored application names; pressing OK, the Command Argument in the Button Properties dialog box will be filled with the corresponding UID. You can easily add and/or modify your list of applications using the three buttons to the right of the listbox. Pressing "+" you can add a new application (and its UID); pressing "..." you can edit an existing application; finally, pressing "-" you can remove an application from the list. The list itself is stored in the Windows registry.

So, come on: go create the two buttons for FileMan and TaskMan on the Desktop Page, using the following table as a reference:

Once you've done, our skin will look like this:

Creating Pictures

Now, let's add some more features to our skin: the Free Memory and Free Disk Space indicators. These things are made of two elements each: a Picture and a Label. We'll begin with the Picture.

A Picture, in Tracker, is an inert object that displays an image, optionally with transparency information. To create a Picture, choose Page->Add Element->Picture from the Menu Bar (or click the button on the Editing Toolbar or press CTRL+F1 on your keyboard): Skin Studio will bring up the Picture Properties dialog box, as shown below:

The File field contains the bitmap file name that is displayed by the Pictures; the Mask File is used to implement transparency and is optional. A mask is a black&white picture in which Tracker interprets the white pixels as "transparent" and the black ones as "opaque". An example will help understanding this concept:

As you can see, where pixels are white in the mask, the original picture is transparent and shows the underlying background image.

• To build up easily a mask for a given picture file, use the dedicated tool in Skin Studio: choose Tools->Create Mask Picture from the Menu Bar.

Since the background of our skin is made of plain colors, there's no need for us to implement transparency in this case. However, transparency is a very cool feature when making fine-looking skins and should be used wherever is possible.

Now, create three pictures according to the following table:

The skin will look like this:

Creating Labels

One more important element in Tracker skins is the Label: it can display many different information like current time, date, free hardware resources as well as user defined text. The Label can have different colors, fonts, sizes and text alignments.

To create a Label, choose Page->Add Element->Label from the Menu Bar (or click the button on the Editing Toolbar or press CTRL+F5 on your keyboard); Skin Studio will show you the Label Properties dialog box:

Like the Button, the Label has a Type and an optional Argument (depending on the Type). Where applicable, the button next to the Label Argument field will help you defining the behavior of the Label itself; actually, only the Label Type "Custom Date" requires a separate dialog-box to define it.

Create four Labels according to the following table:

Next, create a last Button at (143,279) using close_all.bmp as File (and Pressed File) and "Close all Apps" as Command. The skin will look like this:

Our Desktop Page is done!

Creating the Today Panel

Now it's turn of another element you'll find in Skin Studio: the Today Panel. This is a complex element that will show calendar entries, tasks and messages in a complete, outlined view. This element is always large the same as the P800 screen, so 208 pixels; you can configure only its "Y" coordinate and its height.

To create a Today Panel, choose Page->Add Element->Today Panel (or click the button on the Editing Toolbar or press CTRL+F6 on your keyboard). Skin Studio will bring up the Today Panel Properties dialog box:

As you can see, the "X" and "W" fields are grayed out. The three color controls define how the Panel will appear.

First of all, click on the "Today" tab under the Workspace to switch to that Page; next, create the panel at Y=26 and make it 228 pixel tall, in order to make the Today Page look like this:

 Creating Lock & Trash Icons

Whew... we're almost at the end of our job. Only two little (but useful) elements remain to add to our skin: the Lock Icon and the Trash Icon. The Lock Icon will appear only when Tracker is in the "locked" state, while the Trash Icon will appear as soon as the user will begin to drag an icon across the Tracker desktop, allowing him or her to delete the icon itself.

The properties for these elements are identical to those exposed by the Picture element, masks included. So create a Lock Icon at (153,6) using lock.bmp as "File". lock_mask.bmp as "Mask FIle" and a Trash Icon at (170,218) using trash.bmp as "File", trash_mask.bmp as "Mask File". Here masks are required by Tracker since for Trash Icons and Lock Icons this property is mandatory. Once you've done your work, the skin will look like this:

Finishing the Skin

Only a few steps are required in order to terminate our work on the skin.

First of all, we must create three more Labels that will show the current date/time and the Tracker's Status Line. Follow the table below to create these labels:

After that, since some of the last elements we created must appear in the Today Page too, select them all and copy/paste on that page. The elements to be copied are: Current Date, Current Time, Lock Icon and Status Line.

Builing the Skin

Congratulations! You've created your first skin! Now it's time to build it into the binary file that Tracker will understand. To do that, save your skin and choose File->Build Skin from the Menu Bar (or click the button on the Main Toolbar or press CTRL+B on your keyboard).

The very first time you try to build a skin, Skin Studio will prompt you for the location of SkinMaker, the compiler from SymbianWare that is shipped with Skin Studio; in the Options dialog box you can specify the Skin Studio installation path as the path to SkinMaker. Press OK and try to build again the skin.

If nothing gone wrong you'll see the following output from SkinMaker:

That's all!

If you get some errors, double-check the path where you have the pictures you used in your skin: as told before, Skin Studio refers to these files that must be in-place for all the time in order to make the skin building process work.