+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Tutorials (https://sinister.li/Forum-Tutorials--78)
+--- Thread: Tutorial Rainbow GIF! (/Thread-Tutorial-Rainbow-GIF)
Rainbow GIF! - Lain - 10-28-2013
Today, we'll be making the rainbow animation seen in my avatar and signature.
It's fairly simple, and I'm going to assume that you have basic Photoshop knowledge.
First up, create a new document; I'm making mine 150x150px.
Right click on the background layer and select layer from background. With the paint bucket tool, change the color of that layer to red, you may want to rename the layer to red. Next (with the red layer selected in your layer panel) create a new layer, name this orange and using the paint bucket tool make this layer orange. Repeat this for the following colors; yellow, green, blue, indigo, violet. Hide all of the colors except for red, your layers should look like this:
![[Image: f7qIqW.jpg]](http://i.cubeupload.com/f7qIqW.jpg)
Now we'll start animating. Go to View > Timeline. Then click the dropdown arrow next to the button that says "Create video animation" and select "Create frame animation", Now click the button.
It should look like this:
![[Image: fgsGow.jpg]](http://i.cubeupload.com/fgsGow.jpg)
Now click the new frame button
![[Image: grjPcm.jpg]](http://i.cubeupload.com/grjPcm.jpg)
and you should notice two frames like thus:
![[Image: aRx6rv.jpg]](http://i.cubeupload.com/aRx6rv.jpg)
Now, with the second layer selected, show the orange layer in your layers panel and click new frame, it should now look like this:
![[Image: 1j5Hu3.jpg]](http://i.cubeupload.com/1j5Hu3.jpg)
Repeat this for the rest of the colors and add one red frame at the end(Do not click new frame once you've done the last red layer), and this is what your frames should look like:
![[Image: 9Npb2j.jpg]](http://i.cubeupload.com/9Npb2j.jpg)
Now select the first red frame and the orange frame, now open the menu shown below on the timeline panel.
![[Image: RXAJeT.jpg]](http://i.cubeupload.com/RXAJeT.jpg)
Change "Frames to add" to 10 and press Okay.
Do this for the rest of the frames Orange + Yellow, Yellow + Green.. etc..
Once you've done Indigo + the last red frame, delete the last red frame. This prevents pure red being shown more than once.
Highlight every frame and click the following arrow on one of the frames, select "Other" and set the interval to 0.05.
![[Image: gPlufs.jpg]](http://i.cubeupload.com/gPlufs.jpg)
Now go to File -> Save for web.. Make sure that the looping options are set to forever and click save.
![[Image: GKJDNb.jpg]](http://i.cubeupload.com/GKJDNb.jpg)
Here is the final product, I've also included the PSD just in case my 2am explanation was really bad.
![[Image: rainbow.gif]](http://dogstoy.net/rainbow.gif)
RE: Rainbow GIF! - Night Owl - 10-28-2013
Good tutorial i didn't know the tween opiton.
RE: Rainbow GIF! - Mercenary - 10-28-2013
Thanks for sharing, i will be use.
RE: Rainbow GIF! - DarkFlux™ - 11-03-2013
nice tutorial ! thanks for posting .
RE: Rainbow GIF! - ねこまっしぐら - 11-03-2013
Very nice tutorial. But, I don't have Photoshop anymore :-(.
RE: Rainbow GIF! - Tear - 11-03-2013
(11-03-2013, 05:24 PM)Johnny Wrote: Very nice tutorial. But, I don't have Photoshop anymore :-(.
Crack it, there are tuts on youtube :3
RE: Rainbow GIF! - ねこまっしぐら - 11-03-2013
(11-03-2013, 05:27 PM)Tear Wrote: Crack it, there are tuts on youtube :3
I have, but I re-installed my Windows and I didn't back up the Photoshop. And I have slow internet so I can't really download it again.
RE: Rainbow GIF! - StuffSneak - 11-20-2013
Thank you for the clear TUT. I did know the tweening but didnt know could use it with colors
RE: Rainbow GIF! - Lain - 11-20-2013
(11-20-2013, 08:53 PM)StuffSneak Wrote: Thank you for the clear TUT. I did know the tweening but didnt know could use it with colors
You're welcome
