Photoshop Tutorials

M’kay, i started a avatar like a while back and i wanted to add a special art from 3’s on this:

http://img236.imageshack.us/img236/4172/avatarxz4.png

http://img236.imageshack.us/img236/4813/30277fm3.png

just animating the glow ingame animation when a superart is being done. i think it’s from the file as 30265 - 30296 somethin’ like that. i just dont know how to incorperate those files into the already made BG and have them animate over Sean in IR.

do you mean something like this:

Quiche: I’ll help out if u need any tidbits with your tutorial

Edit: Anyone noticed they reduced the premium size to 48k now?

^^^ yes…

and that Jam av is insane…

Thanks
Btw do you want me to give you quickie instructions on how to add that animation or do you want quiche to add that to his tutorial?

Also, Quiche should make a sticky Animation Q & A thread…yeah theres already a Image Q & A but this one could have the 1st page updated with user created tutorials, as well as the given “animation only” type questions.

NP.

if you have the time then please do, also could you sneak in how to include text like put “shatterstar” in the lower left hand corner.

i concur. i’m tryin to be the best “Black” av maker on SRK…:wonder:

LOL
I made the Tutorial and put it in the Q & A thread as it was more of a big answer to one of your questions.

http://www.shoryuken.com/forums/showpost.php?p=3424478&postcount=1015

Its pretty long for a small process but I wanted to make sure you would understand some of the things being done rather than just following along blindly

i wuv u.

oh shit u actually used it…it was just an example. How bout I spice it up a little for you?

it’s like whatevah’s, yo.

If you still end up doing this, I’ll volunteer to wear it.

It’d be great to learn about animation, it’s something I haven’t been able to get a solid grasp on as of yet.

Thanks to DarkDragon for the tutorial, it was informative.

Tutorials are fantastic. Any links to any other decent tutorials? Im trying to get this shit down and most of the links in the Q&A thread are dead.

its gone

http://forums.shoryuken.com/showpost.php?p=3424478&postcount=1015

You just need to cut “forums” and paste it over “www” to get the new URLs.

Quick noob question. Where can I get an X-Brush like those in the tuts on the first page. I can’t seem to find any on google.

Sorry in advance.

Edit: Thanks KidZero

Hey Shatter, it might not be much but I’m going to be making another animated avatar/siggy set similiar these that I made:

http://imgserv1.imagehigh.com/imgss/3888860_Moments-120%-Av.gif
http://www.putfile.com/pic.php?img=2759680
http://www.putfile.com/pic.php?img=2600284

I can try show you how I rip the images from the DVD if you want me too. I’m not good with explaining things but I’ll try to if you want… dood![/COLOR]

[LIST]
[]Create a new document (transparent) 50x50 px
[
]Type an “X” with any font you’d like
[*]Edit>Define Brush>click OK
[/LIST]

You’ll find it in your brushes.

it’s time to read, kids!

Welcome to How to Make a Animated .Gif: The Shatterstar Way.

First, I would like to point out that this is My method of making gifs and this is not exactly the most effective method, but it gets the job done. Also, other people will be using different
programs like, VirtualDub or Ulead, but this TUT will be using these 2 programs:

[list][]Windows Movie Maker (WMM)
[
]Adobe Image Ready CS2 (IR)
[*]Adobe Photoshop CS2 (PS) * [/list]

  • I only suggest using PS when using filters, text, or anything other than actually animating your work, but that?s just me.*

Anyway, open up WMM . I already have a movie clip already imported so lets just pretend that you are using the same exact file that I?m using. To get your movie clip, you first gotta remember that you can?t just open the file. You have to use the ?Import into Collections? option, so, go to File < Import into Collections. Find whatever file you want and open it.

http://img462.imageshack.us/img462/7153/tutlp6.th.jpg

Now, this is the reason why I like to use WMM. WMM will make automatic clips of the movie that your importing instead of having to crop down a clip that?s probably ten minutes long. Instead, it crops clips at random and the clips are usually no longer than 60 seconds. Remember, your clip really shouldn?t be any longer than 5-7 seconds. The longer the clip, the harder, and more work you gotta do. So, with that being said, I?m gonna be hardheaded and make the clip 9 seconds long. It?ll make since later. Also, to make your job even more easier, go to Tools > Options.

http://img462.imageshack.us/img462/7825/tut1sg4.th.jpg

It should be displaying your Advanced options, but if it isn?t, click the tab. All of your settings should look like mine. By doing this, it makes the clip use fewer frames and when we finally open the clip in IR the frames will move almost as if your actually watching it as a movie clip, and not have it moving at grandma speed.

http://img243.imageshack.us/img243/3323/tut2ud5.th.jpg

To preview what you want to use, click the clip in the selection screen and press play on the little screen on your right. If that?s exactlly what you want, then right-click the clip again in the table but now click-n-drag the clip to the timeline. If the clip is longer than 9 seconds, then go to the very end of the clip then click-n-drag the end of the clip all of the way to 9 seconds.

Now, it?s time save the clip. Go to File > Save Movie File. It?ll ask you where you want to save this on. It should already be on My Computer so just press Ok. Choose what folder you want it saved. Press ok. Now, here?s the tricky part. IR cant read WMV or MPG4 so you have to save this file as a AVI. To do that, click other settings and highlight the option ?DV-AVI (NTCS)?.

http://img49.imageshack.us/img49/9733/tut3tl5.th.jpg

Now press next, and press finish once is done formatting your clip.

Open IR. To get the clip, open wherever the fuck you saved it at. You should get this screen:

http://img462.imageshack.us/img462/5079/tut4pp8.th.jpg

Important This also determines how many frames will be made into layers. Make sure your options look like mine. Press ok. You?ve probably noticed that the image is large if you haven?t then kill yourself. Sometimes the clip has letter box or borders surrounding the clip. Easiest way to get rid of that is to use the marquee option and surround the parts you want to keep. Now go to image > crop.

http://img462.imageshack.us/img462/4849/tut5px2.th.jpg

Next step, more resizing. Go to image > image size. Normally the size of the image is at width 720 but this one is at 602. I suggest resizing your imaging 3 times. Yes, ** 3 times **. While doing that, always select bicubic sharper. Also, each time you resize you images width, go in this order: 720 - 520, 520 - 320, 320 - 220. In this case it?s, 602 - 402, 402 - 302, 302 - 220.

http://img243.imageshack.us/img243/3828/tut6ms2.th.jpg

Now it?s time to see how big your .gif is . Click the tab in the window that says, ?optimized?. My .gif size is 2.293M. We want to always keep our .gifs below or at 1.5M. Why? A .gif above 1.5M can lag your computer when your trying to view it on the net. Smaller the size, shorter your loading time so don?t be a douche and make a .gif above 1.5M. Anyway, to help lower your size, you can play around with options on the optimize table on your right.

http://img243.imageshack.us/img243/6853/tut7ur3.th.jpg

You might have noticed that most of the options can make your .gif look fugly…THIS IS WHY YOU SHOULD KEEP YOUR .GIF AT A SMALL SIZE!!!1 There are situations where you just gotta have the file preety fuckin? big so here?s the Delete-Every-Other-Frame technique or DEOF. By doing this, you?ll sometimes make your size drop dramaticly, but it?ll make your .gif move even faster so just use good judgement when using DEOF. There?s two ways of doing this:

[list][] delete 1st frame, skip one frame, repeat. red
[
] skip 1st frame, delete 2nd frame, repeat. yellow[/list]

http://img49.imageshack.us/img49/5450/tut8zt0.th.jpg

do this from beginning to end of all the frames in the animation table which should be in the lower left corner. In my situation, the file is still a lil? too big. So, now, go back to the optimize table and put your options that best lower the size but doesn?t make your gif look like crap. Once you?ve accomplished to lower the size, go to file > save optimized as. Change your file name and make sure your saving your work as a gif.

you?ve just made your first .gif!!!

http://img266.imageshack.us/img266/4394/osolveddieqc1.gif

Welcome to How to Animate Multiple Sprites in a Avatar: The Shatterstar Way.

First, I would like to point out that this is My method and this is not exactly the most effective method, but it gets the job done. This TUT will be using these 2 programs:

[list][]Adobe Photoshop CS2 (PS) *
[
]Adobe Image Ready CS2 (IR)
[/list]

  • Youll probably notice that Im actually making the avatar in Photoshop CS3, but the only difference is that Ill have to save my project and then open it in IR so dont freak out. This TUT will be still described for CS2 users.*

OKAY! Ill be showing you the Semi - HORD way of animating more than one sprite, and that is by animating individual sprites from scratch. This means, youll be getting sprites from a sprite pack. Mad props to Zweifuss, Xenozip, and all other Mugen people all over the world for taking the effort to rip sprites for us to use. Without yawll this shyt wouldnt even be possible. Thankx, a lot!

http://img462.imageshack.us/img462/4316/tutyz0.th.jpg

Anyway, find whatever you want to animate. Im gonna choose Bison from Alpha. Also, Im gonna be a lil lazy and pick something that uses very few sprites to animate. I picked Bison floating backwards since Ill be using only 3 frames/ sprites. Also, since I have Nero 7, I can use its snap viewer to view my files and scroll down with my mouse and I can see the sprites as if its being animated. If your not like me, then use the windows filmstrip option to view your files. Now, right click and pick open with and choose PS or just open PS and then open it from there.

http://img49.imageshack.us/img49/9134/tut1ai7.th.jpg

Make sure you have all the frames that you want to use opened in PS and get ready to start working. First, select the magic wand on the left side of your screen and also keep refering to my thumbnails because I have highlighted everything that you need to know and use so make sure that everything is exactly like I have it set up. Select the background delete it. Do the same process with all other sprites.

http://img462.imageshack.us/img462/4692/tut2zg9.th.jpg

Now we need a avatar so lets get one set up. Click file > new and use the non premium setup which is 160 x 64.

http://img462.imageshack.us/img462/6412/tut3po0.th.jpg

Next, use the move tool then select the very first sprite you opened up. Drag the selection in the avatar canvas and place it wherever you want it at. Repeat this process, but make sure you are matching your sprites together so when you finally animate it its not hopping out of place. The best way to know youre putting it in correctly is by zooming in on a certain part of the characters body. Usually its there feet or head, but in this case its Bisons right hand.

http://img243.imageshack.us/img243/2446/tut4nr5.th.jpg

Find whatever other character sprite you want to use and just do the same exact thing. I used Megaman, for some reason.You should notice that the layers are displayed on your right and it has now 7 layers. If you have more, then you fucked up, lol. Always use the same amount of animation in your second sprite as your first, so in this case, Bison has three frames then Megaman should have 3 aswell. The very 1st layer should have nothing in it since this will be your background.

http://img49.imageshack.us/img49/630/tut5ck9.th.jpg

To lower the confusion of all the multiple layers, merge Bisons and Megas animations together. Do this by using the eyes on the layer display in the lower right corner. The eyes just mean what layer is visible. Clear all eyes by clicking them then merge your layers in this order:

[list]
[] layer2 visible, layer5 visible, merge into layer2 make sure that the layer that youre merging into is highlited. Very important.
[
] layer3 v., layer6 v., merge into layer3
[*] layer4 v., layer7 v, merge into layer4[/list]

http://img49.imageshack.us/img49/8255/tut6lf6.th.jpg

You should only have 4 layers now. If not, you fucked up! Ok, go to layer1 and pick some colors for your BG. I picked red and blue. Theres two ways of making a BG but Im only going to show you one and thats the gradient tool. Click and drag a line, no matter how long or in what direction. Instant BG. Finally, you need to make multiple copies of the BG so multiply the layer two times. Place your BG in this order: BG, sprites, repeat. Merge your BG in the way you did the spites earlier. Almost done!

http://img49.imageshack.us/img49/5403/tut7mq8.th.jpg

Click the button at the bottom of the tools on your left side. It should say once highlighted edit in ImageReady.

Time get this shyt over with. Go to the bottom of the screen and you should have the Animation Reel thingy so go to its upper right hand corner and look for the arrow. Click it. Choose the option, make frame from layers. Your three layers automaticly set up for you.

http://img243.imageshack.us/img243/6735/tut8xv8.th.jpg

You can press play, if you want, but believe me that shyt is movin way too fast. Wanna slow it down? Easy. Look at those numbers at the bottom of each frame. This determines how fast each individual frame will be made visible before going into the next frame. Right click the lil black arrow at the bottom. Your animation is defaulted at no delay or 0" so lets change it to .1 seconds. Edit all of the rest of the frames to .1 sec. Then press play. If thats still too fast then just play with the times till your comfortable with what speed you want. I picked .2 sec.

http://img243.imageshack.us/img243/1319/tut9ev9.th.jpg

In this situation, file size is not an issue, and it shouldnt be. Your optimized file size at the best quality possible shouldnt be any higher than 12.0K. If its anywhere beyond that, all I can say is, you are the worst avatar maker ever! My work came out at a lil over 8K. Now, click file > save optimized as and make sure your saving this as a gif.

finished!!!1

BONUS

adding text. Same as making a BG. Just put your work back in PS and add text with the text tool, pick your color, multiply the layer, then merge them. Go back to IR, and use what you did the first time but use the delete option then make frames from layers, now its animated with text.

http://img260.imageshack.us/img260/3285/tutbonusak7.th.jpg

http://img49.imageshack.us/img49/2253/tutbonus1tj6.th.jpg

:rofl: Whoa, talk about coincidence. Well ugh, here’s Yeah Dood’s lazy way of making GIFs from DVDs:

Things you’ll need[list][]Virtual DubMob
:r: link[
]Abobe Photoshop CS2 and Image Ready CS2[*]Ayumi Hamasaki SECRET CD/DVD album (:wonder: Free Advertisement)[/list]

http://img62.imageshack.us/img62/9718/yd120gifmakingguidemj5.th.png
:u: That’s a weird thumbnail. Anyways, here’s the avatar I ended up making:

:sweat: Yeah, I know, I stink at teaching… dood!

many people ask me how i make my art in photoshop; in this lengthy tutorial i shall demonstrate how i handle my business

Step One
open photoshop. i use cs2 but i honestly prefer 7 over this one. but no worries! they both share the tools we will need.

Step Two
after photoshop opens, locate the brush tool.
can you see it?

Step Three
now locate the eraser tool.
can you see it?

good! you are ready to make artwork just like how woof does it!
have fun, and i hope you enjoyed reading!