How to make your own custom virtual controller skins for Dra

Post whatever!
User avatar
JeaneMaggie
Posts:126
Joined:Sun Dec 06, 2015 12:11 pm
How to make your own custom virtual controller skins for Dra

Post by JeaneMaggie » Fri Feb 12, 2016 3:54 pm

Introduction:
Sorry this took so long. I had to rewrite the tutorial since I kept on making it a jumbled up mess full of ranting. Now, on with the easy tutorial. Make sure you have at least an hour of free time before you start. I tried to make this short. This is going to take a while, to read anyway. Please excuse all typos and grammatical errors. :oops: I'm pretty sure I used "your" instead of "you're" at one point...

Step 1: Getting Programs
Before any project, one must gather supplies. There are many types of programs that may be used to edit your custom skin, but here's the ones I have used, and will be used throughout the tutorial. They are very user friendly, are compadible with any type of OS, and are free. It is best to download them all right now and have them ready for later. These tools install and don't have any mobile builds as far as I know. If you will be using separate computers, it looks like you'll have to install them over again.

1) GIMP (GNU Image Manipulation Program)
Download GIMP at:
https://www.gimp.org/downloads/
User manual at:
The same link as above. Just scroll down and pick the manual in the language your most comfortable with. There are also tutorials for GIMP here: https://www.gimp.org/tutorials/
This is our main tool, so download this first. It does take a while to boot the first time around. It's also available in many different languages.

2) Helios Paint
Download at:
http://www.heliospaint.com/download.html
User manual at:
http://www.heliospaint.com/userguide.html And there are tutorials here: http://fay.iniminimo.com/helios/helios_ ... arted.html
This may seems unnessary, but you may need it later on. It's great for clean up when it comes to erasing after you are finished with GIMP, or before hand. I guess you can use this instead of GIMP, but that's not recommended. You might also need it for a few other things I'll mention later.

3)Picture Resizer
Use at:
http://picresize.com/
Yes, I know this is an online tool, but this tool has amazing quality, and will do what it's supposed to at it's defaults. I'll explain more later. If you already have an image resizer, make sure you resize the images to 50% their size when the time comes. I'll also remind you about this later.

Step 2: Gathering Materials
Now it's time to get everything you want to use on your skin. Before that, I recommend that you make a folder and name it "Custom Skin Supplies," and possibly put it in an obselte corner of your desktop. Now go on and download and/or copy images, sprites, and other stuff you want to use on the skin and put it all in this folder. I suggest that you rename the images to things like "for dpad" or "l and r buttons."

Next, you'll want to upload or transfer your Simple.zip skin file or any skin to your computer. Or download any other skin on your computer. You can do move the skin by file transferring to your computer via mini USB from your phone, upload the files on some sort of cloud storage, then download it on your computer, and maybe even some other way. You can even email it to yourself. If you are not sure how to do this, go to the following links. To locate the skin, use a file manager, go to internal storage, and locate the folder named "DraStic," then the folder called "virtual_controller." That is where you will put the skin as soon as you're finished.

http://www.makeuseof.com/tag/transfer-files-android-pc/
http://www.androidauthority.com/android ... pc-600659/

If you really don't want to do the part above, there will be a Simple skin download below. Just keep in mind that you'll still have to transfer the zip file back to your phone in some way.

Simple skin download:
http://www.4shared.com/zip/qExjYxtIba/Simple.html
https://www.mediafire.com/?5s597f6jalr44bi

Or if you want something less filled in than the Simple skin, here is the Slim skin (that I did not make):
Slim skin download:
http://www.4shared.com/zip/0PrRg2Bhce/Slim.html
https://www.mediafire.com/?tdxyh1x4h8qhmdg

Now put that skin in your supplies folder. Both the zipped and unzipped version, just to be safe. The slim skin is best if you want to paste images on top of the skin, or fill it with patterns.

Step 3: The Editing Begins
With all the setup out of the way, now it's time to edit! Let's start with the easy part.
If your images do not have clear backgrounds, open them in Heilos Paint and use the eraser. I assume you already read the user manual and tutorial.

If you have not already unzipped the skin, do so now. I want you to ignore all of the pngs with the word low in their name. You will not need to edit these. You only need to resize the other pngs and rename them, but don't think about this now.
Start out by opening "padbuttons_0.png" and "padbuttons_1.png" separately in GIMP. Start out with padbuttons_0.png. I really hope you read the manual, becuase I'm gooing to be blunt now. Or already figured it out on your own. Add a new layer on top of the pad buttons and start editing. Go to open as layers and choose the images in your supplies folder if you have any. Drag them to the correct area. Once you are finished save it and keep it's name as padbuttons_0. After saving it, go to file>export as>choose the png image. Once you click save, options for nerds :geek: will pop up. If you are not a nerd :cry: , don't screw around with this and stick with the defaults. Now exit out and delete the xcf version of the image padbuttons_0, and keep the png. Now open this as a layer to the padbuttons_1 which you opened earlier, and delete the original layer. Now, you can just keep it like that, or you can add effects and move the images, sprites, etc if you want animations for button pressing. Then save, and export as png, keep the name.
Now edit the dpad in the same way, except that instead of opening the first edited image once on one new animation, you'll have to do it eight times. Once you finish, use the image resizer site I gave you, upload all of the edited images, and save them to the disk. Rename all of these resized images to "(INSERT THE ORIGINAL IMAGE NAME HERE)_low" and keep the png extention. Now select all of the images and zip them up. Rename the zip folder to whatever you please, and pop it back where it belongs by file transfering. Now test it by opening DraStic and choosing your skin by change options>virtual controller>skins>select the desired skin, then load up the game.

I would've done a step by step by step by step walk along tutorial, but that would take way too long. I've already spent an hour making this tutorial, and the option stated above would have taken much more time. Feel free to ask questions. I'll make an FAQ on this if there's enough questions. Just please, try to avoid quoting all of the steps. Thanks. Have a good day. And please tell me if I missed anything.
No. No no no no no no.

Post Reply