Staredit Network

Staredit Network -> Art & Images -> Cripple's Photoshop/ImageReady Tutorial #1
Report, edit, etc...Posted by Cripple on 2004-09-28 at 02:13:21
*Please Don't Quote The WHOLE THING*
*Please Don't Make Comments Just PM Me This Post Is To Help Not To Spam but you can ask questions*
Ok Well I See Theres A Lot Of beginers In Photoshop Im Going To Help And Make Some Tutorials. (Hopefully Once A Week).

Since This Is My First One Im Going To Make One About Animation because a Beginer Can learn it and its great plus if you add it in your Pictures.

Ok First Things First.
1.What Do I Need?
  • Photoshop (Im Using 7.0)
  • ImageReady (Im Using 7.0 also)
2. Steps

Ok Lets Do Somthing Real Easy Like Make A Wheel Move

A. Open Photoshop

B. Goto File>New (or Ctrl+N)

C. Then Change The Name To Wheel And Height And Width To 200
Screen Shot #1
D. Then A Blank White Window Will Appear

E. Now Select The "Ellipse Tool" (Make Sure You Have Fill Pixels On)
Screen Shot #2 Screen Shot #3
F. Then Make A Circle In The Middle Of The Window But Not All The Way.(Hold Down Shift To Make It Squared.)
Screen Shot #4
G. Now Select The "Line Tool" Same Place Where You Found The "Ellipse Tool" (And Again, Make Sure You Have Fill Pixels On)
Screen Shot #5
H. Now Make Spokes In The Circle. You Can Use The Shift Key When You Drag To Make Straight Lines. Try To Make It As Perfect As You Can.(To Change The Width Of Line Change The Weight)
Screen Shot #6
I. Ok Now Select The "Magic Wand Tool" You Can Just Press "W" To Get It. And Then Click On The White Background. Then All The White In The Picture Will Be Selected.(What The Magic Wand Dose Is When You Select A Color On Your Canvas It Will Select In Comon Colors. Its One Of The Best Tools.)
Screen Shot #7
J. Now Right Click On The White Selected Area And It Will Bring Down A Drop Down Menu Then Select "Select Inverse" Now You See That The Previous Selection Is Inverted.
Screen Shot #8
K. Now Right Click Again And Another Drop Down Menu And Select "Layer via Cut"
Screen Shot #9
L. Ok Now Look To Your Bottem Right Of Photoshop There Should Be A Layers Window There Should Be Two Items In There One Called Backround And Another Called Layer 1. (This is Just Reference But Where Gona Use It In A Minute)
Screen Shot #10

Now That We Have The Wheel Done Now To The ANIMATION!

M. Ok Now We Need To Goto ImageReady! Click The Bottem Icon Of The Tool Bar To ImageReady.
Screen Shot #11
N. Ok Now We Have ImageReady Up Now Look To The Bottem Right Corner Again And Look For The Layers Window. Right Click On "Layer 1" And Click Duplicate Layer. Repeat This Untill You Get To "Layer 1 copy 3"
Screen Shot #12

Ok Pay Close Atention For These Last Few Steps.

O. Now Click On "Layer 1 copy" In The Layer Window And Then Right Click On Its Eyeball And Click "Show/Hide All Other Layers". Then Click On Edit>Transform>Rotate.
Screen Shot #13 Screen Shot #14
P. Nothing Looks Like It Changed But On The Tools Property Bar Has Changed. Now Click On The Box Next To The Angle And Type In 11.3° Then Press Enter/Return. You Can See The Wheel Rotated Very Slightly. Press The Check Mark On The Top Right.
Screen Shot #15
Q. Now We Need To Do The Same But More On The Other Copyied Layers. So Repeat The Two Previous Steps But On A Different Layer Other Than Ones You Did Already But For Copy 2 Do Step "P" Two Times and Copy 3 Do Step "P" Three Time and 4 Do Step "P" Four Times. But Wait Theres Two Ways Of Doing This Quick The Slowest Way Which Is Edit>Trasform>Again (Not Rotate) Or Pressing CTRL+SHIFT+T (Which is The Hot Key For Again).(Hope That Wasn't Too Confusing tongue.gif)

R. Now Turn On All The Eyeballs For Each Layer. Ok Now Since We Have Four Different Postions Of The Wheel We Need To Put Them Into A Animation Sequence. Ok There Should Be A Long Rectanglur Window On The Bottem With A Tab Called "Animation". Now Click On The Button Left Of The Trash Can Three Times And You End Up With 4 Frames.
Screen Shot #16
S. Ok Click Frame 1 And Click The Eyeballs To Hide All The Layers Except "Layer 1" And "Background". And Do This To Frame 2 But Hide Everything But "Layer 1 copy" And "Background" Also Do This To Frame 3 But Hide Everything But "Layer 1 copy 2" And "Background" And Finaly Do This To Frame 4 But Hide Everything But "Layer 1 copy 3" And "Background". Each Frame Should Look A Little Different Than Each Other.
Screen Shot #17
T. Now Step "T" For Test. (YAY IM ALMOST DONE MEAN YOUR ALMOST DONE!) Ok To Test The Wheel You Can Press The Play Button or Internet Explorer Type Button. It Should Show You Animation In Your Default Internet Browser. Then You Can Right Click On Picture And Save It.
Screen Shot #18
The Finished Gif
Finaly im done that took a long time like 2 hours that whats happends if you fall off a skatebord pinch.gif.(Heh The Only Line Without All Caped Letters In Beging tongue.gif)


Yoshi Can I Get 16 Min For This? Its Like 6298 Characters. smile.gif
Report, edit, etc...Posted by @:@ on 2004-09-28 at 07:49:06
Woah, I didnt know Image Ready did animations w00t.gif cool1.gif
Report, edit, etc...Posted by Mr.Camo on 2004-09-28 at 10:16:50
Yes, that's how you do them. U;less you have flash.
Report, edit, etc...Posted by @:@ on 2004-09-28 at 15:40:14
I have flash, but flash makes .swfs

animated .gifs are alot better xD
Report, edit, etc...Posted by Cripple on 2004-09-28 at 19:39:44
You Can Goto File>Export Then On The Drop Down Menu Of File Type Pick Gif (In Flash)
Report, edit, etc...Posted by Buletbutter on 2004-10-05 at 19:21:16
All the animated pictures I make always turn out to be over 5 megs....and a animated gif that big is hard to gete hosted, for free anyways. Got any tips on making the file size smaller?
Next Page (1)