Welcome, visitor! Please login or signup for a free account to get your full experience of your visit at PS3-Themes.com

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

Avatar

Please consider registering
guest

sp_LogInOut Log In sp_Registration Register

Register | Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed Topic RSS sp_TopicIcon
How to create Animated themes **TUTORIAL**
December 11, 2011
11:50 pm
Avatar
GlowBall

Forum Contributor
Members
Forum Posts: 184
Member Since:
April 13, 2011
sp_UserOfflineSmall Offline

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 Smile

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/nvidia-texture-tools-adobe-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 Cool

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 Laugh

 

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.

December 12, 2011
12:30 am
Avatar
toxic
London, UK
Member
Members
Forum Posts: 89
Member Since:
August 8, 2010
sp_UserOfflineSmall Offline

That is excellent mate!

Almost the same as the Bianca theme I just did with 12 images lol now, I can use her video 😉 😉

Thank again mate.

Much appreciated.

December 12, 2011
1:08 am
Avatar
Faxtron

Forum Contributor
Members
Forum Posts: 160
Member Since:
August 10, 2011
sp_UserOfflineSmall Offline

Thanks Glowball 🙂

December 12, 2011
1:13 am
Avatar
toxic
London, UK
Member
Members
Forum Posts: 89
Member Since:
August 8, 2010
sp_UserOfflineSmall Offline

I've read through a couple of times mate and may I ask a silly question please 😛

Once you have the 87 dds files, will they automaticaly be placed in the right position?

(withing the red border area of border.dds)

Reason I ask is… after doing a few of these, I might like to change position of the window, will you need to update anything for that?

December 12, 2011
1:52 am
Avatar
GlowBall

Forum Contributor
Members
Forum Posts: 184
Member Since:
April 13, 2011
sp_UserOfflineSmall Offline

@ toxic

 

Yeah the window is in the position of the black alpha square. Yes you will have to request for me to re-position or you can do it yourself by adding the position in the script (not recommended though).

Dynamic themes are built in 3D space so they are like movies they have actors, props, effects and scenes in them. bg.dae is the background(scene) for the theme and the border plays the role of a prop in that scene. If you added a model which moved in the scene of course this is an actor. Finaly the script works exactly the same as a script in a film. Scripts can tell the actors what to do, change the scene, add effects and even change the timing to everything going on. So they are very complex but they do contain some limitations. I hope this gives you a clearer idea of how dynamic themes work now.    

December 12, 2011
3:37 am
Avatar
Faxtron

Forum Contributor
Members
Forum Posts: 160
Member Since:
August 10, 2011
sp_UserOfflineSmall Offline

Hey Glowball I have a question : How I can put the animated window in the center of the screen ? Or if you can give me the script with that window position ?

December 12, 2011
11:05 am
Avatar
SPLITTA
Member
Members
Forum Posts: 15
Member Since:
December 10, 2010
sp_UserOfflineSmall Offline

@Glowball

 

Great Tutorial

December 12, 2011
3:41 pm
Avatar
Commandz
US
Member
Members
Forum Posts: 7
Member Since:
November 14, 2011
sp_UserOfflineSmall Offline

@ Glowball 

 

Amazing Tutorial, maybe you should go work for a big gaming company and specialize in dynamic themes and other things, since you do some amazing work 😀 

December 12, 2011
7:23 pm
Avatar
RADZ
England

Forum Contributor
Members
Forum Posts: 140
Member Since:
March 25, 2011
sp_UserOfflineSmall Offline

Thanks m8 you said you would do this and you did A TRUE MAN OF HIS WORD 10/10.

December 13, 2011
9:41 am
Avatar
radz1973
Guest
Guests

M8 is this the right image for this section cos its about saving to desktop but you have this image http://s6.postimage.org/mje9wh…..mlhelp.jpg

December 13, 2011
12:02 pm
Avatar
radz1973
Guest
Guests

GlowBall said:

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 Smile

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 (no download link but you will need these for this tutorial)

 

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/mje9wh…..mlhelp.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/i6fqe2…..ttings.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 Cool

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 Laugh

Ok i have made my dds files and in the xml and js files i just deleted the number of frames from 87 to 80 which is how many my clip has is this correct. Also when i drag the xml file onto raf compiler i dont get a .raf file just a temp folder with loads of GTF files what am i doing wrong. Thanx

December 13, 2011
2:03 pm
Avatar
dez8509
Member
Members
Forum Posts: 11
Member Since:
December 12, 2011
sp_UserOfflineSmall Offline

erm im stuck on the coding part is there a vid to explane this more as i dont under stand what to do 

December 13, 2011
2:11 pm
Avatar
RADZ
England

Forum Contributor
Members
Forum Posts: 140
Member Since:
March 25, 2011
sp_UserOfflineSmall Offline

dez8509 said:

erm im stuck on the coding part is there a vid to explane this more as i dont under stand what to do 

You mean the js and xml part well you just remove or add the layers or frames as he says in the tutorial. So if you have 76 frames then i think in the ones in his folders there is 87 frames so just remove the ones after 76 in both files.

December 13, 2011
2:14 pm
Avatar
RADZ
England

Forum Contributor
Members
Forum Posts: 140
Member Since:
March 25, 2011
sp_UserOfflineSmall Offline

For some reason i just cant get a .raf file once i put my xml on the compiler i just get a temp folder with no .raf in it any one know why. And does it matter what resolotion the clip is maybe this is my problem.

December 13, 2011
4:10 pm
Avatar
RADZ
England

Forum Contributor
Members
Forum Posts: 140
Member Since:
March 25, 2011
sp_UserOfflineSmall Offline

Ok i think your images are messed up cos where you say Save layer 1 to your Desktop as a dds with these settings. It shows settings for removing/adding frames so im sure this is why i am not getting the raf file cos my nvidia DDS settings are wrong when i save layer 1 to desktop.

December 13, 2011
4:46 pm
Avatar
Faxtron

Forum Contributor
Members
Forum Posts: 160
Member Since:
August 10, 2011
sp_UserOfflineSmall Offline

RADZ said:

For some reason i just cant get a .raf file once i put my xml on the compiler i just get a temp folder with no .raf in it any one know why. And does it matter what resolotion the clip is maybe this is my problem.

You must verify that the DDS are renowned exactly as the js and xml files. If you use the method of  automate on Photoshop to create the DDS files Photoshop automatically make the DDS and renowned all the DDS and put numbers on it like this : (01,02,03….). But the JS and XML files are renowned without 0 on the first 1 to 9. So you have to verify that and if this is the case remove that 0 that appear on 1 to 9. Example :

From this 01,02,03,…09 to 1,2,3,…9 and then try to compile the RAF again.

 

About resolution :

Full animated themes : In 87 frames 640×480, 34 frames 1280×720 and 15 frames 1920×1080

Animated Window theme : 640×360

 

Good Luck 🙂

December 13, 2011
6:15 pm
Avatar
RADZ
England

Forum Contributor
Members
Forum Posts: 140
Member Since:
March 25, 2011
sp_UserOfflineSmall Offline

Faxtron said:

RADZ said:

For some reason i just cant get a .raf file once i put my xml on the compiler i just get a temp folder with no .raf in it any one know why. And does it matter what resolotion the clip is maybe this is my problem.

You must verify that the DDS are renowned exactly as the js and xml files. If you use the method of  automate on Photoshop to create the DDS files Photoshop automatically make the DDS and renowned all the DDS and put numbers on it like this : (01,02,03….). But the JS and XML files are renowned without 0 on the first 1 to 9. So you have to verify that and if this is the case remove that 0 that appear on 1 to 9. Example :

From this 01,02,03,…09 to 1,2,3,…9 and then try to compile the RAF again.

 

About resolution :

Full animated themes : In 87 frames 640×480, 34 frames 1280×720 and 15 frames 1920×1080

Animated Window theme : 640×360

 

Good Luck 🙂

Tried that but still no raf file i can get a raf on the slidshow tutorial but not this one. It must be a setting im doing wrong im sure its the one to save the jpeg into dds theres no settings image for this in the tutorial.17

December 13, 2011
7:02 pm
Avatar
Faxtron

Forum Contributor
Members
Forum Posts: 160
Member Since:
August 10, 2011
sp_UserOfflineSmall Offline

@glowball
Well my friend I'm trying this tutorial for creating a theme animated on window and work fine for me but the only problem I have is that in the window the animation appear enlarged don't fit the window. But I can create the raf and create the theme normally.

How I can put the video inside the window and make the video fit the border ?

December 13, 2011
7:12 pm
Avatar
Faxtron

Forum Contributor
Members
Forum Posts: 160
Member Since:
August 10, 2011
sp_UserOfflineSmall Offline

@Radz
I create the DDS for the raf with one of this two settings :
 
1. http://postimage.org/image/203ab00hw/
 

So you can use one of those to create the .raf without problems.

December 13, 2011
7:25 pm
Avatar
RADZ
England

Forum Contributor
Members
Forum Posts: 140
Member Since:
March 25, 2011
sp_UserOfflineSmall Offline

Faxtron said:

@Radz
I create the DDS for the raf with one of this two settings :
 
1. http://postimage.org/image/203ab00hw/
 

So you can use one of those to create the .raf without problems.

Thanx m8 im glad your always here to help :). Gonna try those settings now and i can see straight away i had mine on generate maps so that hopefuly was my problem. Oh btw can we only have 1 5 second clip or can we have like 2 or 3 5 second clips like a slideshow only with video not image. Again thanx for the reply and help much appreciatedWink

Forum Timezone: Europe/Stockholm

Most Users Ever Online: 117

Currently Online:
14 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

uLtRaMa6nEt1c: 545

OPTIMUS: 300

GlowBall: 184

Faxtron: 160

Hamilton: 152

The Cult Of Personality: 142

Member Stats:

Guest Posters: 302

Members: 312937

Moderators: 0

Admins: 1

Forum Stats:

Groups: 1

Forums: 3

Topics: 1184

Posts: 4542

Newest Members:

Rigidgxs, Zaharraing, Egortriam, zhorasurkin, krommanov, ninanv1

Administrators: PS3 Themes: 130

Comments are closed.

Go to Top