Advertising (This ad goes away for registered users. You can Login or Register)

[Tutorial] Comprehensive tutorial on native Themes

Post here your guides, tips, how-to, etc...
Locked
CaSquall
Posts: 12
Joined: Tue Sep 06, 2016 7:57 am

[Tutorial] Comprehensive tutorial on native Themes

Post by CaSquall »

With what I feel a lack of a comprehensive updated tutorial on how to theme, I wanted to write up everything I know so far and how to do it.

Disclaimer:
This tutorial is only for Vita's running 3.60 with HENkaku, and people on Windows. (sorry >:)

For installing themes you will need:
  • - A theme of some description

    - PSVita DB theme installer 360 v2
    (Get it here)
For creating themes you will need:
  • - An image editor that can save to 8-bit color depth
    (In this tutorial I will be using photoshop, but will list methods for other common editors
    -edit- I cant seem to find any instructions on how to save 8-bit png's with other image editors, if anyone knows how please share it and I will update my guide.)

    - A base theme to work upon
    (This makes everything much easier, you can get my template theme here)

    - A XML editor
    (I recommend Notepad++, get it here)

    - at9tool
    (optional for background music, get it here)

    - Audacity
    (optional for background music, get it here)
Installing themes:

[spoiler]This is the easy part so we'll just get it out of the way.

First of all download a theme and extract the folder somewhere on your computer.

On your Vita, go into VitaShell and launch a FTP connection.

Open up PSVita DB Theme installer and type in the IP for the ftp connection, click connect.

Next click "Load a custom theme folder" and navigate to the theme you extracted earlier.

Once found and loaded you will see the Details for the theme appear in the program, this means it works.

You can notch the "Clean compact DB" but this is optional, hover over it to see it's function.

Lastly click "Install custom theme" and you should see it transferring everything to your vita, once finished reboot your vita and your brand spanking new theme should appear in your vita's theme settings.

Image[/spoiler]

Creating themes:

The following filenames are from my template theme, but different themes can use whatever filenames wanted, as long as the image paths in the Theme.xml are changed accordingly.
Apparently some icons are able to be saved as normal PNG's without 8-bit color depth, but for simplicity and the fact it doesn't really mess with the quality of the image, I'm gonna recommend saving all of them in 8-bit depth regardless.

Okay now on to the fun part

Theme files and function:

[spoiler]Image
- Icons (Music.png, settings.png, etc.)
Has to be a 128x128 png with 8-bit color depth.
Icons for PSN store and games/applications are not able to be skinned with themes.

ImageImage
- Page dots (basePage.png, curPage.png.)
Has to be a 22x22 png with 8-bit color depth.
Transparency can be used here.
One icon is for the page you're on (curPage) another is for the other pages (basePage)

ImageImage
- Notification bubble (notice.png, notices.png)
Has to be 120x110 png with 8-bit color depth.
Transparency can be used here.
Will not display anything outside of the circle, as there seems to be an image mask.
Will cut off a few pixels from the top and right side, as it seems to place the image a bit beyond the screens borders.
One icon is for when you have unread notifications (notice) and another is for when you don't (notices)
Even though both the states have the same image size, the image for having no notices shrinks down a bit on the homescreen.

ImageImage
- Wallpapers and previews (w0.png, w0t.png, w1.png, w1t.png)
Wallpapers have to be a 960x512 png with 8-bit color depth.
Wallpaper previews have to be a 360x192 png with 8-bit color depth (usually just a shrunk down version of the full wallpaper)
The previews are for when you are browsing wallpapers, you can browse wallpapers from installed themes without using that theme.

Image
- Lockscreen (lockpaper.png )
Has to be a 960x512 png with 8-bit color depth.
Will be displayed on the vita lockscreen.

ImageImage
- Previews (preview_lockscreen.png, preview_page.png)
Has to be a 320x181 png with 8-bit color depth.
Basically just screenshots of the lockscreen and homescreen that are used as previews when selecting the skin in theme settings.

Image
- Theme icon/thumbnail (preview_thumbnail.png)
Has to be a 226x128 png with 8-bit color depth.
Icon for the theme, viewable in theme settings.

- Background music (BGM.at9)
Has to be a .at9 file with certain settings, instructions later in the guide.
Music file played when browsing the homescreen.

- Theme settings (Theme.xml)
Here is where everything comes together, more on this later in the guide.[/spoiler]

Saving as/editing 8-bit png in Photoshop:

[spoiler]You might notice that when opening the images from the template, that you aren't really able to do much. Most options are greyed out, you can't make new layers, etc.
This is because the image is in indexed color mode (from being 8-bit), so in Photoshop go to Image>Mode and change it from "Indexed color" to "RGB color"

Image

Okay now with that changed you have full control again.

After you've made your themes icons/wallpapers, you want to save them back into that indexed format.
But instead of switching it back to indexed color mode, hold ctrl+alt+shift and press W (or you can go to File>Export>Export as)
An export prompt should appear, with a drop down menu in the top right that currently just says "PNG", change that to PNG-8 and hit export.

Image

There has been a couple of times where photoshop didn't actually save it in 8-bit (rare)
So to make sure your image is 8-bit, find the image in windows explorer
Right click it and select "properties" then go to the details tab
A few lines down you should see "Bit depth" with a number next to it, if it's 8 or below the image saved to 8-bit successfully and should be good to go.
(The reason it can be below 8 is if your image/icons have such few colors it doesn't even need 8-bit depth.)

Image

Now you can make all the images that goes into a theme.[/spoiler]

Making background music:

[spoiler]Make sure you have downloaded the libatrac9.zip and have extracted it somewhere, and that you have downloaded and installed audacity.

First things first, you will need an audio file, any type of file will do for now.

Open up audacity and open your audio file inside audacity.

Down in the bottom left you can see the "Project Rate (Hz)" this should be set to 44100, if it isn't by default.

Then you just need to click File>Export Audio and an export window should appear, make sure that under "save as type" you select "WAV (Microsoft) signed 16-bit PCM".

Image
Image

Then once your new WAV file is saved, move it to whatever folder you extracted libatrac9.zip into, making sure it's in the same folder as "at9tool.exe"

Next you want to open a command prompt in this folder, in windows 7 and later you can hold Shift and right click on the folder, and an option called "Open command window here" appears.

Image
Click this and a command prompt already navigated to said folder should open.

Inside the command prompt you want to write the following command

Code: Select all

at9tool -e -br 144 -wholeloop BGM.wav BGM.at9
Where BGM.wav is the file you exported with audacity and BGM.at9 is what you want the converted file to be called.
(Make sure that if you saved it as something else than BGM.wav, to change the name in this command.)

Hit enter and after a short process your converted audio file can now be found in the libatrac9 folder (BGM.at9 in this case)

Just copy and overwrite that in the template theme folder, and your new background music should be complete.[/spoiler]

Configuring theme settings (theme.xml):
Advertising
Last edited by CaSquall on Sat Sep 17, 2016 12:44 pm, edited 20 times in total.
Jazoolee ahamed
Posts: 131
Joined: Thu Jul 02, 2015 5:37 am

Re: [Tutorial] How to install and make native themes

Post by Jazoolee ahamed »

I dont think we need this right now because there are alreday lots of tutorials about this here in wololo
Also mac,linux&other users can do this too(u can use sqlite browser)that will give u a proper understanding of ur app.db
using the proper xml is needed because i noticed that some people comment out some code lines for debugging.(at the earlier time)
Anyways Good luck!
Advertising
PSN-Jazoolee ahamed
Rejuvenate
Henkaku,Adrenaline
Enso
PS Vita 3.60
CaSquall
Posts: 12
Joined: Tue Sep 06, 2016 7:57 am

Re: [Tutorial] How to install and make native themes

Post by CaSquall »

Jazoolee ahamed wrote:I dont think we need this right now because there are alreday lots of tutorials about this here in wololo
Also mac,linux&other users can do this too(u can use sqlite browser)that will give u a proper understanding of ur app.db
using the proper xml is needed because i noticed that some people comment out some code lines for debugging.(at the earlier time)
Anyways Good luck!
Thank you for your personal opinion, but I don't remember asking for it.
Kind of a negative post if you ask me.

For the rest, full tutorial will be written once I get home from work or tomorrow if I don't have the energy. Template theme is done and will be linked later today.
Jazoolee ahamed
Posts: 131
Joined: Thu Jul 02, 2015 5:37 am

Re: [Tutorial] How to install and make native themes

Post by Jazoolee ahamed »

CaSquall wrote:
Jazoolee ahamed wrote:I dont think we need this right now because there are alreday lots of tutorials about this here in wololo
Also mac,linux&other users can do this too(u can use sqlite browser)that will give u a proper understanding of ur app.db
using the proper xml is needed because i noticed that some people comment out some code lines for debugging.(at the earlier time)
Anyways Good luck!
Thank you for your personal opinion, but I don't remember asking for it.
Kind of a negative post if you ask me.

For the rest, full tutorial will be written once I get home from work or tomorrow if I don't have the energy. Template theme is done and will be linked later today.
Like you said im just giving my personal opinion this is a public forum so i dont think i cant comment somthing which is inside the forum rules.
i thought you are new to the forums and dont know that there r already lots of tutorials in this topic.
What im really saying is that if ur intention is to help people give them something new!
Anyways if you view my comment as a negative thought im sorry for that!i dont want to be someone who discourages people!
just saying that ur time is valuable
PSN-Jazoolee ahamed
Rejuvenate
Henkaku,Adrenaline
Enso
PS Vita 3.60
CaSquall
Posts: 12
Joined: Tue Sep 06, 2016 7:57 am

Re: [Tutorial] How to install and make native themes

Post by CaSquall »

Jazoolee ahamed wrote:
CaSquall wrote:
Jazoolee ahamed wrote:I dont think we need this right now because there are alreday lots of tutorials about this here in wololo
Also mac,linux&other users can do this too(u can use sqlite browser)that will give u a proper understanding of ur app.db
using the proper xml is needed because i noticed that some people comment out some code lines for debugging.(at the earlier time)
Anyways Good luck!
Thank you for your personal opinion, but I don't remember asking for it.
Kind of a negative post if you ask me.

For the rest, full tutorial will be written once I get home from work or tomorrow if I don't have the energy. Template theme is done and will be linked later today.
Like you said im just giving my personal opinion this is a public forum so i dont think i cant comment somthing which is inside the forum rules.
i thought you are new to the forums and dont know that there r already lots of tutorials in this topic.
What im really saying is that if ur intention is to help people give them something new!
Anyways if you view my comment as a negative thought im sorry for that!i dont want to be someone who discourages people!
just saying that ur time is valuable
Well thank you for the concern and it's true there is bits and bobs of information regarding the subject all over the Internet, most of it old. But as said it's spread everywhere and not all you can do is documented.

This is gonna be a complete guide with everything you could possibly do, with images and easy to understand instructions. This doesn't exist anywhere, I would know since I've been using all the scattered info learning this and figuring the rest out myself.

I have no idea what your intention with the previous comment was, but sounded like someone annoyed it wasnt interesting to them.
I'll be the judge with what I use my time on.

But regardless thanks for sharing your opinion.
dothackjhe
Posts: 11
Joined: Thu Feb 26, 2015 11:11 pm
Location: Philippines

Re: [Tutorial] Comprehensive tutorial on native Themes

Post by dothackjhe »

This may be a little bit off-topic, but how do you install a custom theme to VitaShell?

I think my main problem lies on how do I transfer the theme folder and its files to PS Vita.
lawthugg
Posts: 58
Joined: Mon Oct 08, 2012 7:46 am
Location: MASS / USA

Re: [Tutorial] Comprehensive tutorial on native Themes

Post by lawthugg »

dothackjhe wrote:This may be a little bit off-topic, but how do you install a custom theme to VitaShell?

I think my main problem lies on how do I transfer the theme folder and its files to PS Vita.
Just for an answer there is a theme folder in uX0:vitashell/ you have to edit the txt file with the name of the them after you drop in the folder

there is a section for this
Co-designer of PSP U.P.M.S.
It's been a while, i shouldn't have left you.
domis4
Posts: 12
Joined: Sun Jun 12, 2011 8:19 am

Re: [Tutorial] Comprehensive tutorial on native Themes

Post by domis4 »

while i have not tested it on the vita, in gimp it should be possible to change the image to 8bit indexed color as following:
image -> mode -> indexed
and there you can either use an own 256 colors (8 bit) or use the ideal one with 256 colors (8 bit)
Image
Image
screenshots unfortunatelly in german
Locked

Return to “Tutorials”