[Tutorial] Making a userbar using a .gif file

[Guest]

[Blayde]

Firstly, get your image, i am using this globe



Open Image Ready: 



Open the file in Imageready, by either dragging and dropping it into the app, or by opening it. The file should open with multiple animation frames and layers(this doesn't happen in PS, it just opens the first frame).



Next, select all the frames using shift + clicking the last frame while the first one is currently selected.



After that, go file>export>animation frames as files.

Export them to a set folder, then open all of them into Photoshop.

Now, using the filename, in order, copy paste each one into the userbar psd, don't touch them till you have copied them all, in this case 18 images. so you should have 18, perfectly aligned layers.

next, select all the Earth layers (group them if you want for ease) and free transform the layers. What you can do is select all the layers, but keep only one visible, all will transform, but you will have a clear view of just one so you can transform easily



Next, make your userbar how you like it. What i did was add some stars in the bg, using the noise filter trick. And then i added the moon and sun and a nebula in the background. (Obviously it's no to scale, the sun is much bigger, but it's a userbar, work around it)

now all that's left is taking it over to Imageready, and using the same or a different timing that was used in the original gif. And that's it. I used a different timing since it was too saft, i slowed it down by .02 of a second to make it a bit mroe realistic.



Remember, the size of a ub, depends on not only the number of frames, but what's being animated. If you have a large picture, say the whole bg moving, it's a huge pic. If you have a small picture moving with a constant bg, it will be saved with a lower size since less colors are needed to be remembered.

Also, remember not to use a lot of transitional images, like gradient that take too long to change, that spoils the look since the gif can only remember 256 pics and it's hard with so many shades

[Codename]

Before we begin, get your image. I am using this one:



1. Open Photoshop and make a new userbar (or open a template if you have one) and add scanlines, border and whatever you want to add in it, except the gif file (animated image that you want to add in the UB).

2. Afterwards, click on Edit in ImageReady image

3. Now you're in ImageReady. Open animation file and you should see this image

4. You see that the animation consists of 50 layers and 50 frames. Select all 50 layers using SHIFT + clicking the last frame while the first one is currently selected image

5. Now drag all layers to the userbar opened template image

6. You can resize your animation (if needed), but it is important that all 50 layers are selected image

7. Go to Window > Animation to bring up the animation window and click on the small icon with black arrow in the right upper corner and select Make Frames From Layers image

8. Unfortunately, it creates frames to all existing layers, so remove the redundant frames image

9. Now you have all frames in the correct order (set the frame time delay like the one that was used in the original gif) and press play to see the animation image

10. If you want to modify it after creating animation frames (add scanlines, border etc.), you should select both all layers and all frames image

Here's the result:



Enjoy!

[YET]

@Codename  weres the finishd userbar   

[hungherk]

Cool tuts, guys.  Gonna have to test out myself.

[Blayde]

YET, it's there,i can see it.

[YET]

so it is, i can see it now either he edited it in or some times not often bars don't always load for me but i normaly see an out line were it is so i know to reload (its my Internet connection)

ps: its a realy cool bar 

[Zoidy-Poo]

He edited his post.