[04-05-2009][TF3D][WIP][Tutorial] Skinning Manila - The compendium

[Angelusz]

--- Introduction ---

Work in progress!!

Since the first day Manila was released people got interesting in making it their own. From there a lot has changed and the way it can be edited has revolutionized.
Many X1 users installed either a ROM with TF3D(/TF3D2) or the separate CAB installation, editing it is very useful to us too.
Now, I'm trying to share "the power" to modify it and make it your own, to then share it with everyone else!
This guide will teach you the basics to make it happen. Basic computer skills are definitely required, some image editing skills make it much easier as well. Good luck!

--- Tools ---

There are several tools you can use for the different steps in the process. I will try to list at least two options for each step. What I use myself is listed green.

First thing you need is an editor that can open and modify the manila skin files;
CFC GUI - Thread - Direct download.
Manila Editor - Thread - Direct download

Then there's actually editing the images;
Adobe Photoshop - Website * Costs 700$ *
GIMP - Website - Direct download

And a proper file explorer;
Total Explorer - Website - Direct Download
Resco File Explorer - Website * Costs 30$ *

--- Files ---

Naturally, you need to find the files to work with. You can do this with CFC GUI (version 0.50 and higher),with a file explorer on your phone or with a PPC controller.
To be able to see the Hidden and System files, you need a proper file explorer (The built-in explorer does not suffice).
With Total Commander, you can move all the manila files to a folder on your storage card. When you've done so, you'll be able to find them when you connect your phone to your PC.
Personally, I use SOTI Pocket Controller - Website. This application costs 36$. Here you can use the application's file explorer, which allows you to see all files on your device.
The files you need are QTC, Mode9 and LUA files. HTC gave every file a coded filename. You're looking for all the files ranging between 00157c97_manila and 7ff2cb82_manila. You only need the files that end with "_manila".
CFC GUI can parse which files are the QTC (image) files you need.

--- Glossary ---
PPC: Pocket Personal Computer
QTC: The file format HTC uses for their images
CFC: Chainfire's Compression (See his thread for more info)
PNG: Portable Network Graphics

--- Acknowledgements ---
Chainfire - CFC GUI and all his great work on Manila.
Sushilange & D-MAN666 - Manila Editor and other manila apps.

 

[Angelusz]

--- Guide ---

Step 1 - Opening up your editor.
Start CFC GUI and go to file - Select folder (F3). Navigate towards the folder that contains the files you extracted earlier. CFC GUI will start parsing all the files and when it's done show a list of all the QTC files in that folder. Here comes the tricky part. You need to find the file(s) that you wish to edit! Luckily, Chainfire has categorized most of the files for you already.

Step 2 - Extracting the PNG.
When you've found the file you need, select it in the list on the left. Now, to edit it, you'll need to extract it to a PNG file, so you've got a sort of template. On the bottom right of the CFC GUI screen, you'll see several buttons. Click "Save as". A dialog will appear, asking where you wish to save the file. Save the file somewhere convenient, as in the next step, you'll have to navigate towards it.

Step 3 - Opening up the image editor.
In this guide, we'll be using GIMP to edit the PNG files. Fire up the application (first time it'll load a bit longer, searching for files). If you're not used to working with image editing tools, it might seem a bit daunting at first, as there's so many options on the screen. Fear not, you'll get used to most (if not all) of them just by tinkering around with them.

In the top left, click "File" and then "Open". A dialog will appear, which asks you what to open. Navigate towards to folder where you previously extracted the PNG file to. Open it up and let it load. Tada! You have the converted QTC manila file right there, all yours to edit!

Step 4 - Editing the file.
This part is where it gets as complicated as you like it to be. If you wish to make something from scratch, I recommend using GIMP's tutorials to familiarize yourself with the tool. You can find the tutorials here.

Now, assuming you've already created a nice image you wish to use in your skin, first you'll have to open that up. GIMP will open a new window for each file you open, so try and keep track of what goes where! If you want to copy (parts) of your existing image over to the skin file, you can use the "select" tools to select the part you need (yeah, really..). Holding down the "shift" key while selecting lets you select multiple parts (it keeps the current selection whilst adding the thing you select next). Having done that, you can "copy" your selection using either the tab "Edit" and then "Copy", or just "CTRL+C". Now select the skin file's window and use "Edit" and then "Paste", or "CTRL+V". Voila, there it is, on top of the previous skin file.

This is because GIMP (as well as photoshop) uses Layers. This basically means that a single picture can consist of several pictures (layers) on top of eachother. This is convenient, as you'll be able to combine many elements into a single picture, and choose what's on top. You can find the Layers in one of the frames that popped up when you started GIMP (probably on the right of the screen). If you wish to not use one of the layers in the image (for instance the original one), click on the eye icon which you will find before the layer (look for the preview images). Now, you'll only see the image you pasted on top of the original. Use the original image to properly align your new image (especially useful for for instance icons).

Step 5 - Finishing up the PNG.
Now you have edited the file(s) to your needs, it's time to get them back into your manila to see what they look like on your phone! To do this, first you have to save the new image you created properly. Click "File" and then "Save as". A dialog pops up (if it pops up being really small, just drag the corner to see all of it's contents), which asks you where and how to save the file. Normally, GIMP will automatically save the file the way it was when you opened it (when extracted like described above, it'll be fine). If, however, for some reason you made a new file, make sure you press the + icon before "Select File Type", and select "PNG File". When saving, a dialog might pop up, that the PNG plugin can't handle layers. This is logical, as the image file will have to be converted back to a single image. To do this, select "Merge Visible Layers". (photoshop does this automagically). Next, you click "Export" or "Save" to continue. Then, another dialog pops up, asking for some options. Here, you don't want to modify any of the options, just press "save" and it should be fine.

Step 6 - Importing the file back into the QTC
You´re almost done, it´s time to prepare your QTC file for usage. Switch back to CFC GUI and as described above, navigate towards the folder where your QTC files are located. In the list, select the file you modified so you can preview it. On the bottom right of the CFC GUI window, now you´re looking for the "Replace with" button. When you press it, a dialog pops up, asking for a PNG file. At this point, you'll probably have guessed it - navigate to your modified PNG file, select it and click "Open". The QTC file is now modified!

Step 7 - Finishing up
After all your hard work, you'll probably agree it's time to put it into action. You've modified a QTC file, but it's still hiding amongst it's friends, in the folder you left it after copying it from your phone. It won't be hard to find, as you extracted a PNG from the QTC file earlier. This PNG will will have the exact same filename as the modified QTC file, except for the extension (duh..). So, look for that filename in the folder and place it in a seperate folder, again, easy for you to find. From there, copy it to your storage card and finally, from your phone, copy it from your storage card to your windows folder. If it asks if you wish to overwrite, tap "yes". Most changes won't be visible right away. The easiest way is to reset your phone, by holding down the power button, turning it off and then turning it back on. When it powers up and you see your TF3D interface, you'll be overjoyed to see your very own edited image right there!

 

[Angelusz]

--- Tips & Tricks ---

- CFC GUI can take care of many of the functions manually described above, for instance extracting the files from your device, and copying the modified files back. This function however, is currently still being tested.
- Warning: Works only if TF3D is in the ROM you installed! If you made a change, but would like the original image back, just delete the file from your windows folder and it'll revert to the original ROM file.

 

[Angelusz]

Reserved

I will be reserving this post for future use.
For now, I'd like to see comments, additions and much, much more!

 

[knaplullig]

so far so good
nothing to edit yet!
geep it up brow..

maybe let people know that if you want to colour exsisting manila files (as the highlights) it's best to use a gradiant (in photoshop: image- adjustments- gradiant map)

good luck with the rest of it

 

[Angelusz]

Thanks, though it doesn't look like many people are interested (anymore?).

 

[rotastrain]

Thanks, though it doesn't look like many people are interested (anymore?).

hey angelusz of corse evryones interested.
i have to just suggest two things
if ur wondering y no one is repllying or saying anything bout this onederful tutorial it is because ur tutorial lacks pictures.
people like to see descriptive images.just do that and evryone will love it
better post a video
second
ur doina great job and plz dnt leave this incomplete or loose interest in it.when u finish we will get it made sticky.it will help anser a lot of questions for new users who need the help of senior members.personally i would like to add to tutorial later when u come to more advanced stuff like modenine editing with lua and script.
carry on the great work
cheers
rotastrain

 

[himuraken]

Thanks, though it doesn't look like many people are interested (anymore?).

for my part i already got the basic idea of what i should do. i know it's gonna sound crazy but i'v never photo edit anything before lol. im totally lost in all this lol.so because of that it's held me back from customizing. however i have ask a friend to help but he's just busy and i hate to ask him to take time for these little projects of mine. just to give you an idea of what i did already.

*cfc gui
*manila editor
*m9 editor
*the gimp software-tried to tinkle with it a bit but FAILED. have not read simple tutorial section yet. should get to it sometimes
*extracted the manila files and converted it to .png file

a tutorial picture using gimp (since it's the only photo editing software i've ever mess with) would be great too. it's not the easiest to just make time and do all this, but if anyone can i'd appreciate it. thanks guys

 

[Angelusz]

Alrighty then. I'll be adding some pictures soon. Rotas, feel free to write a part on editing mode9 files. I can cover the basics, but have too little knowledge to really go into it yet.

 

[nickwar]

Thanks

Angelusz,

Don't loose heart I'm so grateful for coming across this tutorial, as I've yet to find a theme that suites what I want. Much appreciated.

 

[Angelusz]

You're welcome. Good to see that someone uses this. Though, I won't be pumping in more time until more people request it. It's a waste to do a lot of effort for only a few people.

 

[madindehead]

Thanks for this little guide Angelusz. Just out of interest, is it possible to also change the colour of the dialler using this method?

Going to give this a shot today, and see what I can come up with ^^

 

[Angelusz]

No, the dialer's buttons are embedded in a DLL file. If this sparks enough interest, I could create a guide how to edit DLL's as well (for usage in task bars as well).

Though, not many people have shown their appreciation for this guide either, so it's unlikely.

 

[madindehead]

No, the dialer's buttons are embedded in a DLL file. If this sparks enough interest, I could create a guide how to edit DLL's as well (for usage in task bars as well).

Though, not many people have shown their appreciation for this guide either, so it's unlikely.

Well, I would certainly be interested at least, for a guide on how to edit the DLL's and extract the PNGs from them etc. If at least for personal use. After that, I might *might* have the time and patience to do something for the xda community ^^

It would be nice, if we could have skinned diallers to make the highlights that knaplullig has done

Hope you can find the time so make a quick guide on editing DLLs.

 

[fadimck]

very interesting

 

[nickwar]

Dialer Skinning

I'd appreciate a dialer skinning tut as I have yet to come across a noob friendly guide. This is the best guide I've found for manilla skinning. Thanks, I hope their is more interest to get some more info. Will just have to hope...

 

[Fikachu]

your tut is much appreciated. would love it having kind of a sticky thread with thousands of different skins like in diamond forum. i will try something by chance and share it with u

 

[nickwar]

Well, I would certainly be interested at least, for a guide on how to edit the DLL's and extract the PNGs from them etc. If at least for personal use. After that, I might *might* have the time and patience to do something for the xda community ^^

It would be nice, if we could have skinned diallers to make the highlights that knaplullig has done

Hope you can find the time so make a quick guide on editing DLLs.

http://forum.xda-developers.com/showthread.php?t=520831

Help me customize my Dialer

 

[donbonone]

okay im willing to work on some TF3D THEMES but how can i pack them into a cab for the users here ?

i mean,

i make all edited manila files in one cab, so they only need to install it..

how does this work ?

 

[rotastrain]

No, the dialer's buttons are embedded in a DLL file. If this sparks enough interest, I could create a guide how to edit DLL's as well (for usage in task bars as well).

Though, not many people have shown their appreciation for this guide either, so it's unlikely.

hey angelusz,
seing the morose n cold response to this wonderfull tutorial i really dont see any point in posting any tutes in advanced manila editing