[align=center][img]http://h1.ripway.com/chyeahboii/tutpng/new-top.gif[/img] Hello there Ini at yer service ^_^. [/align] [b]Note:[/b] Some of these tutorials are pretty basic but making this took freaking forever, so unless people find it useful nuff, she wont be making more. These are my very first tutorials so feel free to critize if u wish. lol. No I'm serious. Hehe olrite, I hope this helps. [b]Thank you for using my tut. +1 repu will be very much appreciated from the bottom of my heart lol. PM me if you're having trouble on any of these. I'll be glad to help.[/b] [align=center][b]LETS GET STARTED![/b][/align] [b]General Requirements:[/b] [spoiler] You need [b]ADOBE PHOTOSHOP[/b]! If its CS3 trial and you need full version, PM me i can help you You need [b]ADOBE IMAGEREADY[/b] in order to make animations. [i](except Adobe Photoshop CS3)[/i] Basic knowledge about Photoshop. [align=center][b]Credits to: Friendstertalk Deviantart Tinypic Ripway and to my [i]"di uling na PC"[/i][/b][/align][/spoiler] I'm using PS CS3 extended just incase you're wondering why our screenshot is different. [color=#FF0000][b]NEW![/color]HeartBeat Pulse Tutorial[/b] [spoiler][align=center][b]Yehey! This effect!![/b] [img]http://h1.ripway.com/chyeahboii/tutpng/billfinal.gif[/img][/align] 1. Open up The pic you want to use. I'll be using this stock photo of the vain [b]Bill Kaulitz.(Tokio hotel). I think everybody knows. lol[/b] [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/Billkaulits.png[/img][/align] 2. Duplicate the layer[b]Ctrl+J[/b] and add a radial blur. [b]Filter > Blur > Radial Blur.[/b] Then Use the following settings. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/bkur.png[/img] [img]http://h1.ripway.com/chyeahboii/tutpng/beat_.png[/img][/align] 3. You should have something like this. [align=center][img][/img][/align] 4. Open your animation box [b]Window > animation[/b] or [b]Edit in imageready.[/b]>>> [img]http://h1.ripway.com/chyeahboii/tutpng/imagready.png[/img]. This icon on the bottom of your Toolbar. 5. Hide the blurred layer by clicking the eye button on the left of it in your layers palette [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/eyekkill.png[/img] [/align] 6. Go to your animation frame palette and duplicate the frame. Its this icon [img]http://h1.ripway.com/chyeahboii/tutpng/duplicate.png[/img] [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/dup.png[/img][/align] 7. Then unhide the blurred layer by clicking on the eye again.Frame 1 should now be your original image and frame 2 should be the blurred layer. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/FRAME1.png[/img][/align] 8. Now for my favorite lol. click the [img]tween[/img] Tween button in your animation palette. Use the following settings. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/tween.png[/img] [img]http://h1.ripway.com/chyeahboii/tutpng/settings.png[/img][/align] 9. Check. You should now have 5 frames in your animation palette. [b]Select All[/b] Frames or (hold CTRL & click each frame). Then change delay from [b]0 sec. to 0.1 sec.[/b] [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/nodel.png[/img][/align] 10. Tada! Play it and you're done. =] Easy huh? Hehe dont forget. [b]File>Save for web> .gif OR for imageready File > Save optimized as > .GIF[/b] [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/billfinal.gif[/img][/align] [align=center][b]With SPECIAL CREDIT TO: Gigi of DeviantArt.[/b][/align][/spoiler] [color=#FF0000][b]NEW![/color]Text Animation Tutorial: Flow Request Granted[/b] [spoiler]This time I'm goint to teach you these effects [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/gif-ex.gif[/img] [img]http://h1.ripway.com/chyeahboii/tutpng/letm-e.gif[/img][/align] Shall we...? [b]1.[/b] Open the background you're gonna use. If you don't have one, Create a new file [b]Ctrl+N.[/b] For some reason, I chose Bleach, with 380 width and 135 height [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/bleach.png[/img][/align] [b]2.[/b] Grab the [b]Text tool[/b]. Enter your text. DONT worry about the font color. Put the text anywhere u want & whatever font u want to use. BUT I suggest using a Fat or Bold font so that u'll be able to see ur image later. [b]3.[/b] Finish it. Then Open the image you want to put [b]ON[/b] the text. Try to choose an image that is a contrast to ur Background image to make the text visible. I chose the firefox image. Why? because it matches Ichigo's hair. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/The_Firefox_sig_by_syndrome090.jpg[/img][/align] [b]4.[/b] Now, Go to [b]Edit > Definte Pattern.[b] Hit Ok. Dont bother naming it, just hit [b]OK[/b]. Then u may close that image. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/defptr.png[/img][/align] [b]5.[/b] Go back to your original file. Find your Text layer and then [b]Right click > Blending options[/b] [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/blendingoptions.png[/img][/align] [b]6.[/b] Layer Style box should appear. [b]CLICK[/b] the word [b]Pattern overlay[/b]. The settings should appear.Then click the Pattern drop down list. Find and select the image that u defined earlier. Then [b]OK[/b] [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/pattern.png[/img][/align] This is what i got. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/backresult.png[/img][/align] [b]7.[/b] We're almost done. You may stop at step 7 if you dont want animation. Otherwise, let's continue^^. Go to your animation box. [b]Window > animation[/b] or [b]Edit in Imageready[/b] [img]http://h1.ripway.com/chyeahboii/tutpng/imagready.png[/img]. [b]8.[/b] Click [img]http://h1.ripway.com/chyeahboii/tutpng/duplicate.png[/img] once to Duplicate Frame 1. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/animation.png[/img][/align] [b]9.[/b] go to your Layers. find the word [b]Pattern Overlay[/b] under the [b]Text fx[/b] and double click it. A dialogue box will appear but dont touch it! Simply drag the text image waaaaaaaaay across. When ur satisfied Click [b]OK.[/b] I dragged mine to the very end so that the animation will be noticable later. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/drag.png[/img][/align] [b]10.[/b] Finally My favorite Part. Tweening Lol it gives the animation a Smooth effect. Ready? Ok. Select Frame 2 & Tween it. Use the following settings: [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/tweeningguide.png[/img] [img]http://h1.ripway.com/chyeahboii/tutpng/tweentoprev.png[/img][/align] Tada! Play it and satisfy yourself =] [b]Save as > .gif[/b] If its too fast/slow for you scratch what i said & the change the 20 on [b]"Frames to [/b]to ur own. The higher the no. the slower, the smaller no. the faster. My results: [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/gif-ex.gif[/img] [img]http://h1.ripway.com/chyeahboii/tutpng/letm-e.gif[/img][/align][/spoiler] [b]FOR CS3 USERS ONLY: How to OPEN/EDIT GIF with multiple layers [/b] [spoiler]If you're trying to [b]OPEN[/b] a GIF file and this is what you keep getting; [b][i]"This is an animated GIF.You can only view one frame. Saving so on..."[/i], [/b] that's because PS CS3 does not support GIF imports. That means you CANNOT open a Multiframe / layered GIF. [b]Fortunately,[/b] it does Import Quicktime files. Please do the following: [b]1. [/b]Check if you have [b]Quicktime 7.1/+[/b] If not [url=http://www.download.com/QuickTime/3000-2139_4-10002208.html?tag=lst-1&cdlPid=10807923]download here[/url] and follow the installation directions. Restart Photoshop once the installation finished. [b]2. [/b]Then, Go to [b]Files > Import > Video Frames to Layers...[/b] [img]http://h1.ripway.com/chyeahboii/tutpng/import_videolayer.png[/img] [b]3. [/b]The Load box will come up. Right where it says [b]File name:[/b] put [b]*.*[/b] show all formats. [b]NO SPACES[/b]. Then click [b]Load[/b] [img]http://h1.ripway.com/chyeahboii/tutpng/loader.png[/img] [b]4.[/b] It should show all your files.Now, go ahead and select the [b]animated GIF[/b] you want to open. then click [b]Load[/b] [b]5. [/b]A dialogue box should appear then use this settings: [img]http://h1.ripway.com/chyeahboii/tutpng/layering.png[/img] [b]6. [/b]Your GIF layers should appear on ur Layer pallete. Then, If you dont have ur animation pallete open. Open it 0.o [b]Window > Animation[/b] [b]Have fun editing. Don't forget to save it as .gif. Gud luck ^-^ [/b] [b] My simple result.[/b] [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/example.gif[/img] [/align] [b]P.S. This should not be use to rip other people's gfx.[/b][/spoiler] [b]FADING TEXT TUTORIAL. Request Tut.[/b] [spoiler][align=center]This is very simple . You will get this effect at the end of this tutorial [img]http://h1.ripway.com/chyeahboii/tutpng/example2.gif[/img][/align] [b]1. [/b]If you have a background ready to use proceed to [b]step 2[/b]. If not, create a new file. ( [b]Ctrl+N[/b] ) Size is up to u ^-^ [b]2.[/b] Grab the [b]Text tool[/b]. Enter your Text. [b]3. [/b]Go to [b]Animations / Imageready [/b] and open ur animation palette. Then click [img]http://h1.ripway.com/chyeahboii/tutpng/duplicate.png[/img] once to duplicate. [b] My animations palette:[/b] [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/animation.jpg[/img][/align] [b]4[/b].Click the [b]2nd FRAME [/b]and set the [b]TEXT layer[/b] to invisible by clicking the eye next to it. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/eye.png[/img][/align] [b]5. [/b]Now click [b]Tween[/b]. and used these settings: [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/tween.png[/img] [img]http://h1.ripway.com/chyeahboii/tutpng/tweeenstengs.png[/img][/align] "Tween" is actually short for "in-between", and refers to the creation of successive frames of animation between key frames. hehe hit the play button to preview animation. If its too fast, scratch what i said and change the number of [b]"Frames to Add"[/b] to a larger number like 30 or etc. Finally, [b]Save as > .gif > save.[/b] I definitely prefer keeping it at 0 sec. "no delay" to achieve maximum GIF quality and avoid lagging. [b]My result: consists 25 frames[/b] [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/example2.gif[/img][/align][/spoiler] [b]Changing Pictures Animation Tutorial[/b] [spoiler][align=center][img]http://h1.ripway.com/chyeahboii/tutpng/ez.gif[/img][/align] [b]1. [/b]Open all the images you're gonna use. [b]2. [/b]Create a New file. Make sure the background is set to Transparent. I used a 250 width and a 400 height (its up to you really) [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/change1.png[/img] [/align] [b]3. [/b]Drag One pic to the blank file. To do that, grab the [b]Move tool[/b] [img]http://h1.ripway.com/chyeahboii/tutpng/movetools.png[/img] and simply click the picture u want, then [b]Drag[/b] it to the blank file. [b]4. [/b]If its to small/big resize it using the [img]http://h1.ripway.com/chyeahboii/tutpng/movetools.png[/img] and checking the "show transform controls" option [align=center] [img]http://h1.ripway.com/chyeahboii/tutpng/showtransform.png[/img][/align] [b]5. Repeat[/b] the same steps to all your pictures. [b]6.[/b] Now u should have layers of pictures. I only used four so that I won't confuse you. [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/layerstack.png[/img][/align] [b]7.[/b] Open your [b]Animation box[/b] (for cs3) or edit in [b]Imageready[/b] [img]imgrdy[/img] (for others). Then duplicate [img]dupplic[/img] frame 1 depending on how many layers you have. I have 4 layers so I only have 4 frames. [align=center] [img]http://h1.ripway.com/chyeahboii/tutpng/frames.png[/img] [/align] [b]8.[/b] Follow me on this: Click Frame 1 & hide layers 2,3,4 by clicking the [img]eye[/img]. Click Frame 2 & unhide layer 2. Then frame 3 & unhide layer 3. Frame 4 & unhide layer 4 Like this: [align=center] [url=http://h1.ripway.com/chyeahboii/tutpng/framing.png][img]http://i168.photobucket.com/albums/u166/un_known_ymous/framing-2.png[/img][/img][/url][/align] [b]9[/b]. The Tweening part. Click your [b]Last frame[/b] (ex. Frame 4) and tween it [img]tween[/img]. Use these settings [align=center] [img]http://h1.ripway.com/chyeahboii/tutpng/tweenss.png[/img][/align] [b]10.[/b] Repeat step 9 to Frame 3 & 2 [b]ONLY[/b]. NOT frame 1 [b]11.[/b] After tweening 2 & 3 go back to the [b]LAST frame[/b] and tween it again but this time use these settings [align=center] [img]http://h1.ripway.com/chyeahboii/tutpng/last.png[/img][/align] [b]12.[/b] Finally, Play it. [b]Save as > .GIF[/b] My result: [align=center][img]http://h1.ripway.com/chyeahboii/tutpng/ez.gif[/img][/align][/spoiler] [align=center]I am currently making more Tuts.[/align]

Last edited by forsakendoll (2010-02-24 10:19:32)