Some of you may have browsed the internet for resources of your favourite game only to find that the graphics provided were in animated .gif form. From your knowledge of image editing programs, you have absolutely no idea how to take these animations and transform them into RPGXP usable resources. So in desperation you flee to the Resource Request forum and post a massive rip conversion request in hopes that someone will hear your cry for help. All you can now do is wait.
The main purpose of this tutorial is to provide you, the user, an in depth breakdown of the conversion process so you can better help yourself. I'm a firm believer in the self-help method, so hopefully you can begin to do these types of things for yourself rather than depend on someone else to do them for you. So, shall we get dirty?
http://img201.imageshack.us/img201/3613 ... ionvx0.png[/IMG]
Before we begin our journey of enlightenment, we are going to need to use the proper tools. This tutorial is written for users of Adobe Photoshop CS2 and ImageReady. Please do not ask me to add different versions to this tutorial because I simply won't do it. I've been using Photoshop for a little over nine years now so I'm not accustomed to using/teaching in anything else.
The 30 day, unrestricted trial version of Adobe Photoshop CS2 can be downloaded by clicking on the CS2 link. If you are not already a member of Adobe, I would suggest that you register on their website (as the downloads section is restricted to members only). ImageReady comes bundled with the CS2 software so there is no need for a separate download.
For those of you who have different image editing programs (or cannot afford Photoshop), many of these softwares share the same functions with the high-end Adobe products. Results of this tutorial should be easily accomplished in your program by comparing functions of the images I have provided (I think).
http://img159.imageshack.us/img159/8611 ... er1zu2.png[/IMG]
Our first step in this process is to define what animation we want to convert. Fortunately for me I happen to have an oversized Magus sprite ripped from Chrono Trigger, so I will be using that as an example for this tutorial.
Now from what I can tell, the oversized appearance of Magus doesn't seem to look right. I mean seriously, can you image putting that thing in your game? So guess what we are going to do? Resize it...YES.
Before we can do so, we need to physically separate the individual frames that make up this animation and throw it into Photoshop (don't worry, this will be brief).
http://img201.imageshack.us/img201/6977 ... er2to1.png[/IMG]
That's a pretty clever title if I do say so myself. Anyway, we need to open this file in ImageReady (assuming you have already installed CS2 on your computer). A really simple way of doing this without going into your program files or double clicking an icon is to right click the file and select "Edit in ImageReady" from the list. Like so:
ImageReady should then load up the .gif file and display it on your canvas. Considering the actual time we are going to spend in ImageReady is far less than ten seconds, I don't feel the need to post more screenshots than is necessary. So do as I do in this next screenie.
http://img178.imageshack.us/img178/6106 ... er3kl3.png[/IMG]
Alright now, if you followed the directions accordingly you should be in the Photoshop CS2 screen with Magus on the canvas and every animation frame in the Layers Window. It should look something like this:
If you don't see the Layers (bottom right window on the screenshot) or the Tools window (left most window on the screenshot), go to the Menu > Tools > Click on Layers > Click on Tools.
Super! We are now almost ready to get down and dirty with this program, but first we need the proper RPGXP aligning template to go with our Magus sprite. If you remember what I said earlier about how ugly the oversize is, then we are going to need to grab another resource from the Gathering of Templates thread (which will be the standard RTP aligning template) and open it up in Photoshop (same process as ImageReady, except click "Edit in Photoshop).
When all of those steps have been completed, go ahead and minimize the Characterset Template and maximize and expand the Magus sprite window.
OK now we are going to get into the semi-confusing aspect of Photoshop. You cannot believe how many people do not understand the basic use of layers in the image editing program, so I'm going to try my best and explain it to you.
The Layers feature of Photoshop is a bit like an onion. Onions are made up of different layers to create a single, solid structure that goes good in just about anything. What controls the view perspective of the Layers window in Photoshop is this little eye ::: http://img206.imageshack.us/img206/6840/eyequ5.png[/IMG] :::
You will notice in our Magus sprite is that there are SIX layers making up the ripped walking animation that we converted, one in which is visible on the canvas because of the ::: http://img206.imageshack.us/img206/6840/eyequ5.png[/IMG] :::. If you click the ::: http://img206.imageshack.us/img206/6840/eyequ5.png[/IMG] ::: on the sixth layer, you will see that Magus magically disappears from the canvas window. This means that, that layer is no invisible until you click the blank square where the eye used to be. Understand? Good.
http://img407.imageshack.us/img407/2582 ... er4hg2.png[/IMG]
There are different ways you can do this but I'm going to show the method that I've been using for a while. It doesn't skew the pixels like the normal image resize does, but it keeps it at a safe level without having to alter the image anymore than it needs to.
Alright, you should notice that the background of every Magus's sprite is checkered. This means that the background is transparent. Sounds easy enough right? Well...we are going to fill each layer's background in with white, to make the resize easier on us. When filling the backgrounds on each frame with white, you are going to need to alternate through the six layers, filling one at a time. So to start off with we are going to do Layer 6 (make sure the eye is checked and no other layers are visible).
Uncheck Layer 6's eye and move down to Layer 5. Make that eye visible.
Repeat this process until the transparent backgrounds on all of the layers have been filled with white. Keep the first layer visible and the rest turned off.
Now that you have taken care of filling the backgrounds of six layers, it is time to resize the image. Go ahead a right click anywhere in the window, and select : Zoom Out (do this twice until you have this result):
There is no need to zoom out any of the layers after you have done this because once you zoom out one canvas, the rest of them will follow suit. Onto the next step batman!
http://img178.imageshack.us/img178/2436 ... er4qi9.png[/IMG]
I'm going to take this time to make sure you and I are on the same page here. If you happen to have missed something in this process, please go back up and re-read the portion that you did not understand. This process isn't very hard so it really should take no effort whatsoever.
Okies, now we have our white filled background, zoomed out Magus sprite...but unfortunately it isn't going to stay like this forever until we capture the moment in Photoshop. So...we are just about to make use of our handy dandy Print Screen feature.
The main reason why we want to zoom in all of the way is for those of you who are blind to pixels. We don't want to accidentally cut off a portion of Magus just because you weren't careful when using the selection tool. THE SELECTION TOOL! NEXT STEP!
After you have copied the selection to your clipboard, go ahead and minimize the window and reopen and expand your Characterset Template window. Ctrl + V to paste the selection onto the Characterset Template canvas and align Magus inside of the first box. Like so:
After you have aligned him inside of the first box (like the above screenshot), it is time to let him escape from his white background world of DOOM.
To make this process incredibly easy, Photoshop is equipped with the Magic Wand Selection Tool. This tool can be found in your Tools window and it looks something like this ::: http://img206.imageshack.us/img206/7695 ... andim3.png[/IMG] ::: Before selecting anything on Magus with the Magic Wand, you would want to make sure that the settings of the Wand itself are set like so:
http://img138.imageshack.us/img138/1053/screenshot5db5.png[/IMG]
After you have done this, go ahead and select all of the white around Magus and press DELETE!
Repeat this process for all of the other layers and align them up with the first frame and soon you will have your first resized and ripped row of Magus. That's all there is to it!
When you have become accustomed to this process, creating a ripped characterset like this should take you very little time. :happy01:
Thanks for reading! Ciao.
The main purpose of this tutorial is to provide you, the user, an in depth breakdown of the conversion process so you can better help yourself. I'm a firm believer in the self-help method, so hopefully you can begin to do these types of things for yourself rather than depend on someone else to do them for you. So, shall we get dirty?
http://img201.imageshack.us/img201/3613 ... ionvx0.png[/IMG]
Before we begin our journey of enlightenment, we are going to need to use the proper tools. This tutorial is written for users of Adobe Photoshop CS2 and ImageReady. Please do not ask me to add different versions to this tutorial because I simply won't do it. I've been using Photoshop for a little over nine years now so I'm not accustomed to using/teaching in anything else.
The 30 day, unrestricted trial version of Adobe Photoshop CS2 can be downloaded by clicking on the CS2 link. If you are not already a member of Adobe, I would suggest that you register on their website (as the downloads section is restricted to members only). ImageReady comes bundled with the CS2 software so there is no need for a separate download.
For those of you who have different image editing programs (or cannot afford Photoshop), many of these softwares share the same functions with the high-end Adobe products. Results of this tutorial should be easily accomplished in your program by comparing functions of the images I have provided (I think).
http://img159.imageshack.us/img159/8611 ... er1zu2.png[/IMG]
Our first step in this process is to define what animation we want to convert. Fortunately for me I happen to have an oversized Magus sprite ripped from Chrono Trigger, so I will be using that as an example for this tutorial.
http://img111.imageshack.us/img111/5880/maguswalkfrontzw0.gif[/IMG]
Before we can do so, we need to physically separate the individual frames that make up this animation and throw it into Photoshop (don't worry, this will be brief).
http://img201.imageshack.us/img201/6977 ... er2to1.png[/IMG]
That's a pretty clever title if I do say so myself. Anyway, we need to open this file in ImageReady (assuming you have already installed CS2 on your computer). A really simple way of doing this without going into your program files or double clicking an icon is to right click the file and select "Edit in ImageReady" from the list. Like so:
http://img159.imageshack.us/img159/6550/screenshot1wn4.png[/IMG]
http://img178.imageshack.us/img178/8838/screenshot2ss3.png[/IMG]
http://img178.imageshack.us/img178/6106 ... er3kl3.png[/IMG]
Alright now, if you followed the directions accordingly you should be in the Photoshop CS2 screen with Magus on the canvas and every animation frame in the Layers Window. It should look something like this:
http://img407.imageshack.us/img407/2532/screenshot3mn7.png[/IMG]
Super! We are now almost ready to get down and dirty with this program, but first we need the proper RPGXP aligning template to go with our Magus sprite. If you remember what I said earlier about how ugly the oversize is, then we are going to need to grab another resource from the Gathering of Templates thread (which will be the standard RTP aligning template) and open it up in Photoshop (same process as ImageReady, except click "Edit in Photoshop).
http://i9.photobucket.com/albums/a64/punkid89/tileset/charset-template.png[/IMG]
http://img206.imageshack.us/img206/1940/screenshot4tr7.png[/IMG]
OK now we are going to get into the semi-confusing aspect of Photoshop. You cannot believe how many people do not understand the basic use of layers in the image editing program, so I'm going to try my best and explain it to you.
The Layers feature of Photoshop is a bit like an onion. Onions are made up of different layers to create a single, solid structure that goes good in just about anything. What controls the view perspective of the Layers window in Photoshop is this little eye ::: http://img206.imageshack.us/img206/6840/eyequ5.png[/IMG] :::
You will notice in our Magus sprite is that there are SIX layers making up the ripped walking animation that we converted, one in which is visible on the canvas because of the ::: http://img206.imageshack.us/img206/6840/eyequ5.png[/IMG] :::. If you click the ::: http://img206.imageshack.us/img206/6840/eyequ5.png[/IMG] ::: on the sixth layer, you will see that Magus magically disappears from the canvas window. This means that, that layer is no invisible until you click the blank square where the eye used to be. Understand? Good.
http://img407.imageshack.us/img407/2582 ... er4hg2.png[/IMG]
There are different ways you can do this but I'm going to show the method that I've been using for a while. It doesn't skew the pixels like the normal image resize does, but it keeps it at a safe level without having to alter the image anymore than it needs to.
Alright, you should notice that the background of every Magus's sprite is checkered. This means that the background is transparent. Sounds easy enough right? Well...we are going to fill each layer's background in with white, to make the resize easier on us. When filling the backgrounds on each frame with white, you are going to need to alternate through the six layers, filling one at a time. So to start off with we are going to do Layer 6 (make sure the eye is checked and no other layers are visible).
http://img206.imageshack.us/img206/9715/screenshot5iv7.png[/IMG]
http://img178.imageshack.us/img178/7700/screenshot5ti2.png[/IMG]
http://img178.imageshack.us/img178/770/screenshot5tq7.png[/IMG]
http://img407.imageshack.us/img407/3159/screenshot5pc8.png[/IMG]
http://img178.imageshack.us/img178/2436 ... er4qi9.png[/IMG]
I'm going to take this time to make sure you and I are on the same page here. If you happen to have missed something in this process, please go back up and re-read the portion that you did not understand. This process isn't very hard so it really should take no effort whatsoever.
Okies, now we have our white filled background, zoomed out Magus sprite...but unfortunately it isn't going to stay like this forever until we capture the moment in Photoshop. So...we are just about to make use of our handy dandy Print Screen feature.
- Make sure that Layer 1 is still visible and press Alt + Print Screen on your keyboard.
- Go up the Menu > File > New > OK
- Press Ctrl + V to paste the screenshot on a new canvas.
- Zoom in until you cannot zoom in anymore.
http://img138.imageshack.us/img138/4254/screenshot5mf0.png[/IMG]
- In your Tools window you will see a broken dot rectangle marquee. This is your rectangle selection tool. If you click and hold the rectangle, you will see an assortment of differently shaped selection tools. However for this purpose we are just going to use the rectangle.
- Select everything inside of the black border around Magus. Do not select the black border itself.
- Press Ctrl + C (to copy everything inside of the selection).
http://img404.imageshack.us/img404/501/screenshot5gk5.png[/IMG]
http://img404.imageshack.us/img404/4891/screenshot5ga7.png[/IMG]
To make this process incredibly easy, Photoshop is equipped with the Magic Wand Selection Tool. This tool can be found in your Tools window and it looks something like this ::: http://img206.imageshack.us/img206/7695 ... andim3.png[/IMG] ::: Before selecting anything on Magus with the Magic Wand, you would want to make sure that the settings of the Wand itself are set like so:
After you have done this, go ahead and select all of the white around Magus and press DELETE!
http://img138.imageshack.us/img138/8818/screenshot5jx9.png[/IMG]
When you have become accustomed to this process, creating a ripped characterset like this should take you very little time. :happy01:
Thanks for reading! Ciao.
