Sprite/Animation/Image Editing Tutorial

[Quickman]

There's gonna be a whole lotta double-posting, but I can't fit all my tutorials into one post. And for easy reference, I'm copy/pasting my tutorials here. Anywho...

Here's Gauntlet's Sprite-Making Tutorial. I'm only covering animation.

This topic's gonna be pretty huge, so I'm gonna post each program tutorial as a seperate post. I'm starting with Animation Shop for this one:

Originally Posted by Quickman's Quick Animation Shop Tutorial

Alrighty, so you wanna make a sprite animation. First, you'll need an animation program. I recommend Animation Shop 3. You can download a free trial version from Jasc's website.

For this tutorial, I'm using the Quickman Wily Wars sheet as my example. I'm gonna be making the Intro Pose:


Section One: Getting Your Frames Ready.

Open Animation Shop, and Open the sheet.
Select the set of frames you wanna use with the Crop tool.
Example

Once you've selected them, click the Crop button. Save that file As a seperate file. Trust me, you'll prolly need it later on if you hafta do this from scratch again, kinda like this tutorial.

Step 2:

Now comes the tedious and frustrating part. Again, using the Crop tool, seperate your frames, one by one.

To keep the animation from jumping around, make sure your frames are of equal size.

Save each frame As a seperate file. Then, Edit-Undo your way back to your frameset.

Repeat those steps for each frame.

Section Two: Organizing your Animation

Open all your frames and set 'em up in some order you can use:
Example

I've circled the First Frame, 'cause that's the frame you'll be putting your other frames into.

Step 2:

A: Select your Second Frame and Edit-Copy.
B: Select your first frame.


Do NOT Paste! Doing so will just paste your copied frame into a new window. Instead, do the following:

Edit:
Paste... After Current Frame
or
Shift+Ctrl+L

Select your third frame, and Edit-Copy (or Ctrl+C).
Select the Frame One window again and Paste After Current Frame.

Repeat for the remaining frames.

NOTE: To lessen the confusion, I close the Copied Frame after I paste it, that way I can keep track of my frames better.

Once you're done with the tedious Pasting, Frame One should look sorta like this:
Example

Section Three: Fine-Tuning Your Animation

View your Animation:



You'll notice that it moves super-fast. That can be fixed by editing the Frame Properties.

Go to "Animation" in the toolbar.
Select "Frame Properties"


A dialogue box will pop up.



Edit the Display Time to your liking, and view your Animation. This may take a few tries 'fore your animation plays at the speed you want.

Step 2:

Once you got your frame duration figured out, go to Animation Properties (under Frame Properties.), and the following will display:



Click the "Looping" tab as indicated. The following will display:



If it's not already selected (which it usually is), select the "Play animation indefinetly."

Now, save your Animation.


Your finished animation should look something like my example:


NOTE: I know my example has a chunk missing from his hand. I don't really care, it's just an example. ^^;

[Quickman]

Now for a tutorial with a program I've never used before... GIF Construction Set Professional! After fiddling with it for a few minutes, I managed to figure it out enough to make a tutorial. And afterwards, I realized that my screen captures turned out like crap...

Anywho...

Originally Posted by Quickman's Quick GIF Construction Tutorial

Bear with me here, I just used this program for the first time.

Anywho, GIF Construction Set Professional is a strange program, considering that I'm not used to working with it. It lacks alotta the features that Animation Shop has, so all of your frames hafta be made outside of this program.

The cool thing about this program, though, is it's not quite as tedious as Animation Shop. Pretty much, this program does all the compiling work for you. I wish I knew that ahead of time 'cause I ended up taking the weird round-about way.

Anywho, for this tutorial, I'm using the Rush 16-bit sprites. I wanna make Rush run, so I cropped out my sequence of frames:


In another program, I cropped each frame I wanted to use and saved 'em seperately. I opened 'em up in GIF Construction to show you all the frames:
Example

Once I figured out how the program works (It's VERY different than what I'm used to using...), I found the Animation Wizard option:
Example

Activating the Wizard, I followed it's instructions by hunting down my frames and "Adding" 'em to the Wizard. The screen I took turned out like crap, so I'll explain what I did, using my crappy screen as a guide:
Wizard Screen

Don't worry, your screen will have the option tabs; it's just my screen capture didn't capture correctly... ^^;

Anywho, once I hunted down my frames in the middle window, I clicked on one of 'em. Hitting the "ADD" tab (The highlighted blank space in my screen shot. Sorry 'bout it.), the Wizard added the frame. I repeated the process which each frame.

Once all my frames are in the right (third) window, I cliked the "BUILD" button (It'd be the very last button in the Wizard if it showed up in my screen capture.). The Wizard closed and my animation was displayed:
Example

Then, I Viewed the Animation by clicking the View option:
Example.
View Animation screen.

Since the Wizard displayed the animation at a speed I was happy with, I saved the animation.


This program's pretty self-explanatory. It took me less time to make a gif with GIF Construction than it did with Animation Shop. I prefer Animation Shop, though, 'cause I can fine-tune my gifs alot more than with this program. This program's alright for beginners who're just starting in animation, though. It's also pretty darn cheap.

[Quickman]

UnFreez tutorial:

Originally Posted by Quickman's Quick UnFreez Tutorial

Unfreez is a simple-to-use teeny lil gif animation program that Wiryami told me about just now. It's also a free program, you can download it at the publisher's site. It's pretty darn easy to use.

For this really quick tutorial, I grabbed Wily's Rantin'-and-ravin' sheet to make a really, really quick-and-cheap example. Due to the way Wily's sprites were laid out, and due to the fact that right now, the only image-editing program I have at my disposal is "Microsoft Office Picture Manager," I didn't really give a darn about his jumpy frames. I think he jumps like that in the game anyway.

Anywho, I opened up UnFreez to see what I was working with:


Following what it said, I opened up my folder of frames and Dragged and Dropped each one into UnFreez:
Example

Then, I clicked the "Make Animated Gif" button:


I saved it and viola! Wily!


That was one quick gif program...

Animagic tutorial:

Originally Posted by Quickman's Quick Animagic Tutorial

Ah, Animagic... Suggested to me by Gauntlet. It's friggin' frustrating 'cause this program's so touchy about the pallete. I really, really would NOT suggest animating sprites with less than three colours. I wanted to strangle Bass a moment ago, him and his 3-colour Neo-Geo pallete.

Anywho... for this frustrating demonstration, I decided to use Shadowman's SAR sheet. I figured eh, why not have him throw that Shadow Blade? So, I cropped out the sequence I was gonna use:


Making seperate frames in another program, I opened up Animagic to see what I was working with. Instead of "File... Open," I took this approach so I could get all my frames out there quicker:
File:
Insert Frames...

I selected all my frames at once by holding down the Ctrl key and clicking on the frames I wanted. Once they were opened, I previewed my animation:
Example

My frames weren't centered hardly at all, so I hadta mess around with the Frame Shift option:
Frame Shift screen.
You may wanna fiddle around with this til you get your frames the way you want 'em. I can't really tell you how, that's something you're gonna hafta find out.

Once my frames were centered, I played my animation again, deciding if it moved fast enough or not. Since the frames moved too slow and made the animation appear choppy, I opened up the Frame Rate option, which is the button with all the lil frames in it. (I forgot to highlight it.)
Frame Rate screen.

I hadta adjust and play, adjust and play my animation a few times 'fore I was happy with the frame rate.

NOTE: Any rate lower than 100 makes the frames move super-fast. And I mean super-fast. Unless you want a big blur, then don't drop your frame rate lower than 100.

Finally, after all that and about 4 previous tries just to figure out the pallete's touchy, I saved my animation:


Outta all the programs so far, this one's the one I hate. It's pallete's touchy, it's controls are really weird and don't allow for alotta customizing, and overall... I just don't like it. The other three I've demonstrated are much better.

[Quickman]

Photoshop Elements tutorial:

Originally Posted by Quickman's Quick Photoshop Elements Tutorial

This one was suggested to me by Forte Wily, so I figured I'd try it out.

Anywho, this one's Adobe Photoshop Elements. It's a friggin' expensive program, but Adobe has a Try-Out version on their site. It's your basic photo-edit program, like the kind that come with most digital cameras and scanners. There's nothing really all that special about it, but you can make .GIFs with it.

Actually, all the Adobe art programs have a GIF animator in 'em. You just gotta know where to look (usually in the "Save for the Web" option in the File menu.).

Alrighty, for this tutorial, I decided to use your favourite Eskimo and most certainly mine... Iceman! I figured I'd just have him speak, since his Battle & Chase intro mugsheet is pretty small. Yeah, I'm lazy.


I opened up Photoshop Elements and got to work cutting and pasting his frames into seperate windows:
Example

Then, I selected each frame one by one and copy-pasted 'em into the first frame so that they're seperate layers:
Select and Copy
All layers in first frame.

After that, and remembering to keep the frist frame window active, I went to the File menu and selected the "Save for the Web..." option. The following was displayed:
Save For Web screen.
Since I wanted it to be an animated GIF, I selected "Animated" as highlighted.

It took several previewing tries 'fore I knew that my frames were centred. After I made sure that they were centred (after a series of "Cancel" Save for Web... Adjust frame... "Open" Save for Web... preview... etc.) I tweaked the Frame Rate to my liking:
Frame Rate screen.

Then, I saved my GIF.
Example

And viola! Iceman speaks!


This program was relatively simple to use, and I could crop my frames within the program, eliminating the extra work as with previous programs. This one works similar to Animation Shop, but it takes kinda the round-about way.

The GIMP tutorial:

Originally Posted by Quickman's Quick The GIMP tutorial

Today, I'm using The GIMP, suggested to me by Ringo. He says that it's an Animation Shop clone, which I agree with him to a certain extent. The GIMP works pretty much the same as Animation Shop, it just looks different. Though, the rules are pretty much the same, 'cept each frame is a Layer.

For this example, I hadta work backwards 'cause my example is already animated. Anywho, I'm using my avie as my example, and I compiled a sequence sheet of it.

Do NOT use this sheet in ANY game! ASK ME FOR PERMISSION, FIRST!

Sorry 'bout the crazy warning, but I worked hard on these sprites and they're for another project I'm working on. Anywho...


As usual, with other programs... crop your sheet into seperate frames. By now, this should be pretty routine. You can prolly crop 'em in GIMP, as it works pretty much the same as Animation Shop.

Open up The GIMP and open your file:
GIMP screen layout.
Open your File.

Your file will open in a new window, and its layers (if it has any) will be displayed in the Layer Pallete Window. Since mine was already compiled and animated, each frame was shown as a Visible Layer:
Example

For each frame, Copy it and Paste it Into the first frame as a new Layer. This is a tedious process and I won't go into detail about it since it was already explained in the Animation Shop tutorial. The GIMP is an AS clone, so it works very much in the same way.

Once you're done, all your frames will prolly be visible in your First farme (where you pasted everything.). You can toggle the layers and make specific ones visible. This is helpful in centering your frames, as you can see the next frame underneath it.
Example

Like Animation Shop and other such programs, you can customize each frame to display for a certain length of time. These properties would be under Animation, or even in the Layer Pallete window, as the frame durations are listed beside each Layer. I didn't really go into detail about this, as I already did in the Animation Shop tutorial.

Whenever you wanna save your animation... go save it as an Animation, as prompted by the program:
Save prompt.

If you're not happy with the animation, you can always reopen it in The GIMP and fiddle around with it some more. That's the great thing about this program and Animation Shop; it's more than just a GIF maker. You can do alot more with those two programs than with the other ones.

Anywho, that's pretty much all I can say about this program. I already covered almost all of its basics in the Animation Shop tutorial. This program works pretty much in the same way. Like I said, it's an Animation Shop clone.

And it's a free, legal program.

[Quickman]

Wanna make backgrounds transparent? Here's how!

Originally Posted by Quickman's Quick Transperency Tutorial

Using PaintShop Pro as my example, I'm gonna show you how to make a background transparent. Most programs have a GIF Optimizer or a Save For Web option, and the process of making transparency is pretty much the same for 'em all.

For this example, I'm using Official Art of Treble.


I opened up Treble in PaintShop Pro and selected the Magic Wand tool.
PaintShop Pro 9 screen.


Clicking on the background, I selected the area I want to be made transparent.
Example

Since the selection also nabbed the blended pixels around Treble, I messed with the Tolerance some.
Example

NOTE: You'll hafta mess around with this til you get the selection the way you want it.

Since Treble has multiple areas that need to be selected at one time, hold down "Shift" to select each area you want transparent.
Example

Now, once the background's selected, go to File--> Export--> GIF Optimizer.
Example

Select the option you want, and click "Okay."
Example

The "Save File" dialogue box will pop up, prompting you to save the pic. The GIF format will already be selected.
Example

Save the pic, and you're done!

NOTE: If you're saving JPEGs as GIFs, the colour pallete will be reduced to the standard 256. However, the pallete won't be reduced if you save as a transparent PNG.

Keep in mind, however, that some versions of certain browsers (Internet Explorer) do not support transparent PNGs. I'd make a tutorial, but my browser doesn't support transparent PNGs, so that'd be kinda pointless.

Annnd... here's how to make a sprite comic:

Originally Posted by Quickman's How to Put Sprites in a Comic Panel

Someone asked for some members to compile a sprite comic for them as they "have no spriting expirience." Welp, here's my example and I'm gonna show you how I did it:



For this panel, I opened all the pics I'm gonna need and cropped as necesary. Example One, Example Two.

I selected Heatman and copy/pasted him as a Transparent Layer into my background. Example

Since I want Heatman to be sitting in a chair, I copy/pasted as a Transparent Layer (this is important, folks) the chair that I had cut out before. Example. Since the chair back was blurry, I Sharpened it a bit. Example I move the chair back to where it was and now Heatman's sitting in the chair. Example.

I select Wily and Invert the selection as I did with Heatman. Example. I then paste him into the panel. Example. Now, Wily's a bit too huge, he's facing the wrong way and he's overlapping the desk that I want in front of him. So, I get Wily outta there and cut out the desk. Example. Then, I Mirror and Resize Wily and paste him into the panel. Example Then, I paste the desk I had previously cut out back into the picture. Example

Now, to add text. Using the Elipse tool, I select a preset shape. Example. Then, I add my text. Example. I merge all layers and save it as a .gif.

That's pretty much it. If you're not using backgrounds like this one where you gotta put characters behind stuff, then it shouldn't take as long. Basically, the process is the same.

And for the hell of it... An analglyphic 3D image tutorial:

Originally Posted by Quickman's Quick 3D Image Tutorial

Like I already said, alotta credit goes to Ringo for this. If it wasn't for him, these 3D pics I've shown you and the following tutorial wouldn't be up here. Thanks again, Ringo! You're an inspiration to us all.

For this tutorial, I'm using PaintShop Pro 9 and Official artwork of Axl. This Axl image was perfect as there was alotta perspective in the pic. Since his gun and his foot stuck out pretty far, I figured that he'd be a perfect canidate for 3D.

I opened Axl up in PaintShop Pro (Screen.) and set to work. Using the Freehand Selection tool (the lasso) I cut out Axl so that he was seperate from his hair and those wingie-thingies. Example. I also moved him slightly down and to the right.

I want Axl's foot to stick out a bit, so I cut out and moved his leg slightly down and to the right. I then cut his leg from the knee down and moved it slightly down and to the right. I did the same with his foot. Example. Since I want the 3D effect to be rounded and not as flat, I cut his foot into sections and moved each section down and to the right. Example.

I moved on to Axl's head, chest, and arms. Again, I cut out each section and move it slightly down and to the right. Example. This is really tedious work. To keep the effect gradual I work my way down his arms, cutting out each section and moving 'em. After I'm done, Axl looks like this.

Now comes another tedious part; redrawing the linework and filling in those gaps. It's gonna take a steady hand and majour use of the eye-dropper tool, but it'll clean the pic up considerabbly. Example.

Once I'm all done with that, I save Axl as a SEPERATE FILE and open up the origonal. I line 'em up side by side and cross my eyes til the pics overlap. This way I can check to see if the 3D effect works the way I want it. Example.

Since the barrel of Axl's gun distorts too much I go over it again then repeat the same stereoscopic method until it looks the way i want it.

Now to make it analglyphic. I make sure the origonal picture is active and go to Image--> Split Channels--> RBG Channel. Example. 3 new images will pop up; Red, Green, and Blue. I close the Red pic and keep the Green and Blue pics open.

I activate the altered Axl pic and go to Image--> Split Channels--> RBG Channel. Again, 3 images pop up. I close ONLY the new Blue and Green images, leaving the Red. Example.

Now, I go to Image--> Combine Channels--> RBG Channel. Example. I select the channels I want combined (Red for the Red Channel, Green for the Green Channel and Blue for the Blue Channel.) and click Okay. Example.

A new image, the analglyphic 3D image, will pop up and I save it. And viola! Axl is now in red-blue analglyphic 3D!

Making a stereoscopic version is easy: Take the origonal pic and go to Image--> Canvas Resize. Resize the canvas pixels so it's double the origonal size. Then copy/paste the altered pic into the resized pic and line 'em up. It's that easy!

QuickEdit: Since I had origonally made that without 3D glasses, whenever I got my 3D glasses, the pics were inverted. So, I fixed 'em and fixed the tutorial. Remember to have your 3D glasses handy whenever making analglyphic 3D pics. It'll save you alotta trouble if you hafta go back and remake 'em again like I did.

[Dead Panda]

Wow....

Edit: woops sorry for only saying one word.

[NetSaver.exe]

I finally understand how to animate. At first I was stuck. Now I know. Thanks Quickman.

[Hey! stop that python]

For the GIMP tutorial, I can't figure out how to paste the frames as a new layer! Help!

[Quickman]

...Dontcha Right-click--> Paste as New Layer? Or go to Edit--> Paste--> As New Layer? Heck, try Ctrl-L. Those're what PaintShop Pro and Photoshop use.

I haven't used the GIMP in a long time.

[Don Kalypso]

Tuna: Create a new layer, use rectangle select to grab the sprite for the frame you want, right click, then hit copy, go to the animation with the layer selected, and hit paste, finally move it where you want and create a new layer to repeat the process until finished.

[Hey! stop that python]

I figured it out. Thanks anyways!

[Red1263]

Hey the link to download the free trial version doesn't work for me, can you offer another?

[sovietcommando]

I tried looking for a link with an Animation Shop 3 trial version, but all results turn up as "buying the full version".

You could try this one though, it's Paintshop Pro with Animation Shop 7.04.

[dannyphantom60]

does anyone know how to post animated sprites in your avatar?

[Windclaw_Z]

Originally Posted by dannyphantom60

does anyone know how to post animated sprites in your avatar?

Turn the images into an animated GIF and then set it as your avatar. Easy. Furthermore, the same works for your signature.

[Ryo Hazaki]

Well, I was toying around over the last few weeks with GIMP, and discovered a rather simple way to create transparencies using the program.

This tutorial will cover creating transparent sprite backgrounds. For transparent Art backgrounds, there might be a little more work involved due to the blended pixels between the edge of the artwork and the background.

I'll be using my CG Raye Avi as an example throughout this tutorial.


First, after opening the GIMP program and the file, Click the 'Select by color' option. This button looks like a hand pointing at a series of colors stacked on top of each other. Then click on the background. It should look like this (Also, the 'Select by color' option has been selected o show you where it is.):

 click to show

Now then, go into the 'Layer' tab, go into 'Transparency' and select the 'Add Alpha Channel' Option as shown below:

 click to show

Why select this option? This option will allow you to add transparency information for the next step.

Now then, go back into 'Layer' then 'Transparency' and click the 'Threshold Alpha' Option as shown below.

 click to show

You should get a screen like this:



Once in that screen, you can alter the transparency of the selected color. For full transparency, you need to make sure the number reads 255. Once that's done, you can save the file in a format other than .jpg, since that format doesn't support transparency information.

Finally, enjoy your transparent sprite background, animation, etc.

I hope that this tutorial has been helpful. Any questions about this tutorial, you just let me know.