rob0tmassacre (rob0tmassacre) wrote in icon_tutorial,

photoshop / imgready tut ~ greys anatomy animation

Learn how to make

from and
Sorry about the crappiness of the tut, I've havent made animation tuts in ages

*NOTE: Greys anatomy bases are by secret0window
+ I already prepared them in the tutorial
+ PSD available upon request

1. prepping your image
to start off, i downloaded a psd of a tv here. I resized it to icon size, and put a grunge background under it - i used one of those old peoplemachine textures, but your background can be anything, ALTHOUGH its best not to have too many colours in the background, since it makes the file size too large, and that could slow down the whole animation.
if you downloaded a tv psd with the screen, use the pen tool to cut it out.

This is how my animation is looking. It only has two layers.

2. i measured the approximate area of the tv screen; for me it was 60*44px. Make sure the measurement is bigger than the screen, not smaller

I cropped my two images to that size. If you're going to have text on the images, make sure its something people can see, even if its small. I used arial, and used -10px spacing.
Also, make sure that you've flattened the image if you edited the two images.

3. Paste the first image onto the animation document. Make sure the layer with the TV is above this image, and the background is below it.
Position the image so that it can be seen under the tv screen

4. Next, make a layer UNDER THE TV and fill it with any shade of grey.
Go up to filter » noise » add noise. Where it says amount, change it to anything between 300 & 400%. Lower numbers seem to have more black "speckles" than white speckles, which i dont like (because im picky!)
Don't mind "distribution"; Uniform and Gaussian give practically the same result.
Make sure monochromatic is checked off.

5. repeat the whole process of number four, but with a different "amount" percentage. MAKE SURE THE TWO "NOISE" IMAGES LOOK DIFFERENT.
The two layers of noise should be overlapping the tv, but you can easily get rid of those parts by deleting them with the rectangular marquee tool

6. paste the second image onto the animation. make sure its cropped the same size as the first image. Position this image so it's also aligned with the tv screen. This layer should go right below the tv screen

7. If you need to make any more changes, make them now. I added a curves layer, since i thought the two images with people on them were too red.

8. You're finally ready to open up the animation palette! Go up to window » animation. I find it easiet to start the animation off by making frames from layers. to do that, click on the small triangle near the topright corner, and click "Make frames from layers"

theres alot to prepare here :
a: delete any frames that dont have anything on them AT ALL (the ones that are all transparent)
b. make sure the grunge background is in all the frames
to do this, select each animation frame (click frame 1, keep "shift" down, press the last frame)
then toggle the visibility on the background, and turn the visibility back on.
the background should be in every frame now =)

c. Repeat step a, but this time make the tv layer show in all frames.

d. Repeat step a once more, but with the curves layer this time

e. delete any frames that dont have anything inside the tv screen (no noise, or no people)

10. You should have 4 frames now
Duplicate frames 2 and 3. The duplicate button is that page-turning icon thing at the bottom of the animations palette.
Drag your 2 duplicated layers, 4 and 5, to the end of the animation

11. If you try playing your animatuon right now, it'd be really fast.
We'll want to change the frames with the people on them - the noise frames should be just right.
To change the speed of the frames, click on "0 sec." at the bottom of frame one.
2 seconds should be good.
If you want something longer, click "Other"
Make sure you also change the frame with "umwtfno" to 2 seconds.
Also, change the noise frames all to 0.1 seconds




if you're in photoshop :
go to file » save for web & devices
Make sure your settings are similar to mine, AND THAT IT IS LESS THAN 40k - that's the lj limit.
Oh, and it'd help if the image was a .gif :P
If your image has too large a file save, try decreasing the colours.

if you're using imageready :
go to file » save optimized
Make sure you save the image as a .gif !

If you're going to use this tutorial, I'd love a link back to your work, or at least a comment ^_~
comments/mems @ my journal appreciated
Tags: animation: animated gifs, animation: screen capture, program: imageready, program: photoshop, tutorial: animation

  • Trouble with KM Player

    I had to use a new version of KM Player and now I have trouble making screencaps. I use the same settings as I always do, but now the screencap size…

  • Cropping in KMplayer

    I use KM player to cap. It works great but is it possible for me not to cap the black bars when capping dvds? I just made this gif: I don't…

  • Capping DVDs using KMplayer

    I've been using KMplayer to cap video files and that has been working just fine. It won't let me cap DVDs though. When I go to do it, I get…

  • Post a new comment


    Comments allowed for members only

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 1 comment