Rainbow GIF! - Printable Version +- Sinisterly (https://sinister.ly) +-- Forum: Design (https://sinister.ly/Forum-Design) +--- Forum: Tutorials (https://sinister.ly/Forum-Tutorials--78) +--- Thread: Rainbow GIF! (/Thread-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: 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: Now click the new frame button and you should notice two frames like thus: Now, with the second layer selected, show the orange layer in your layers panel and click new frame, it should now look like this: 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: Now select the first red frame and the orange frame, now open the menu shown below on the timeline panel. 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. Now go to File -> Save for web.. Make sure that the looping options are set to forever and click save. Here is the final product, I've also included the PSD just in case my 2am explanation was really bad. RE: Rainbow GIF! - Auth - 10-28-2013 Already knew how to do this, looks kinda cool though. Thanks RE: Rainbow GIF! - Cosmic - 10-28-2013 I'm gonna use that for something, thanks RE: Rainbow GIF! - Kureo - 10-28-2013 A nice, short and informative tutorial! Thanks for the share! RE: Rainbow GIF! - VirtualFrost - 10-30-2013 Looks nice although the purple/pink area seems a little weird. And then the transition from purple/pink to red needs to be fixed up otherwise it's pretty cool! Nice tutorial RE: Rainbow GIF! - Exiled - 11-12-2013 Holy fuck. I'm gonna make my sig like that one day.