How to create Animated themes **TUTORIAL**|PS3 Themes|Forum|PS3 Themes

This is a tutorial on how to create a PS3 animated theme like my Call Of Duty: MW3 Animated, Twisted Metal Animated and Assassin's Creed: Revalations Animated themes. If you have followed my slideshow theme tutorial you will find this easy

Click the links to see the help photo 

Things you will need:

1. My AnimatedTools folder – http://www.mediafire.com/?9ohz.....7zsc8d10nl

2. Notepad++ – http://notepad-plus-plus.org/d.....5.9.3.html

3. Photoshop with the nvidia DDS plugin https://developer.nvidia.com/n.....-photoshop

To start get a 5 second clip of your choice then open up Photoshop. Click file and then import video frames to layers.

http://s6.postimage.org/ie3dak.....cx/v2l.jpg

Check the box for skip 2 frames per layer and import. Use these settings

http://s6.postimage.org/5nz4xh.....etting.jpg

Click show all layers (eye icon showing for each layer) then select/highlight all layers (click layer 1 then hold shift and click the last layer). Now go to the layer tab then arrange and click reverse so layer 1 is on top of the layers.

http://s6.postimage.org/och6kt.....everse.jpg

Now we need to resize the layers so go to the image tab then click image size and use these settings (make sure all layers are highlighted)

http://s6.postimage.org/7yx71n.....resize.jpg

Next go to the file tab then scripts and click export layers to files.

http://s6.postimage.org/6ay1n0.....cripts.jpg

Then export to C:Users….AnimatedWindow using these settings (remember that you cant have spaces in the directory).

http://s6.postimage.org/arqelo.....ttings.jpg

You should now have all your layers as .jpg files in the desination folder.

We need to convert the .jpg files into .dds (DXT1 no alpha). I use automate for this.

Go to the window tab then click actions. Create a new action set and call it "DDS save" then create an action called apply (you will now be recording every step you make).

Save layer 1 to your Desktop as a dds with these settings.

http://s6.postimage.org/ntgopa.....ttings.jpg

Click stop to stop the record then delete the layer 1 from your Desktop (You won't have to do this everytime you just choose it when doing the next step).

Now we want to use the automate we have just created for this we have created so go to the file tab then automate and click batch…

http://s6.postimage.org/k8g7sb.....tomate.jpg

Choose the folder with your layers in (C:Users…AnimatedWindow) for both "source" and "destination". Also use these settings (remember that you cant have spaces in the directory)

http://s6.postimage.org/ctqvzx.....ttings.jpg

You should then get your layers in .dds format and in numerical order (with CS5 extended Photoshop will convert .dae to .dds also).

Now you have your clip you need to create your picture and border. Open up border.dds in photoshop (This will guide you to where the clip will be shown ). border.dds has an alpha channel and the black rectangle will make a hole/window for the video clip to show through (you can edit the shape of this if you like).

When finished save as dds to these settings

http://s6.postimage.org/i6fqe2.....ings.jpg 

Edit AnimatedWindow.xml and AnimatedWindow.js with notepad++. Add/remove lines/sections according to how many layers/frames you have (similar way as slideshow tutorial).

http://s6.postimage.org/mje9wh.....mlhelp.jpg

Save and drag AnimatedWindow.xml onto the raf_compiler.exe in my "EXE" folder, you should then get AnimatedWindow.raf in the same folder as AnimatedWindow.xml. Copy Animated.raf to my "Theme" folder then drag AnimatedWindowTheme.xml onto the p3t_compiler.exe. Finally you should get AnimatedWindowTheme.p3t in the same folder. Install to your PS3 and see how it looks.

I have also included 2 other styles for the animation clip. You can use these with this tutorial but the .js and .xml names are different. Also the .dae files are different too.

Here is a quick description for all 3 styles:

AnimatedBorder

Almost full screen in size with a border set around the edge. Use this if your full size is not very good quality as the plane is slightly smaller.

AnimatedWindow

The main focus of this tutorial and my favorite. video clip is alot smaller so quality is very good. The reason I made this style is for gaming/movie themes (acts as a preview for the game/movie). Try out different borders even put a HDTV as a border 🙂

AnimatedFull

Full screen (no border) so skip the border editing part of the tutorial. Quality is low so You may have to turn the brightness down for this style. I recommend animation loops or gifs for this style.

Firmware Limitations.

Maximum Number of frames = 87 (4.0) 112 (3.40 – 3.73)

Let me know here if you need help or you wish to move the window to a different position.

Enjoy

REMEBER NO SPACES IN ANY DIRECTORY YOU USE FOR THIS TUTORIAL!!!!!!

IF YOU GET A tmp FOLDER WITH JUST bg.dae THEN YOU HAVE SPACES IN THE DIRECTORY YOU USING!!!!

**EXTRA**

Colour Control

Within the .js you can control the colour/brightness of the animated background by editing lines 5 & 6 in notepad++. Checkout this help pic

http://s6.postimage.org/54mvod.....ontrol.png

As you can see the colours are in the standard format of Red Green Blue Alpha. You can increase/decrease the values for each to add some depth to you animation without having to start the process over again. Alpha is not used in animated themes but I wanted to show this anyhow.

Okay you may want to adjust the brightness to make the background slightly darker for better effect so would adjust the values like this

var base_color = 0.8, 0.8, 0.8, 1.0;
var hide_color = base_color * 0.8, 0.8, 0.8, 1.0;

Fairly simple 🙂

You could have blood or fire in your background so you may want to highlight that more, so try

var base_color = 1.1, 0.9, 0.9, 1.0;
var hide_color = base_color * 1.1, 0.9, 0.9, 1.0;

You background may be a little dark and blurry so I usally highlight the blue more than the other colours like this

var base_color = 1.2, 1.1, 1.3, 1.0;
var hide_color = base_color * 1.2, 1.1, 1.3, 1.0;

I would say this is rather easy to do but you may ask why we edit both lines 5 & 6. The answer is because when the animation loops over the standard colour (hide_color) needs to be set otherwise the default would be black.