Did you know you can create animations in Photoshop? I mean, you’re not going to create the next Toy Story using just Photoshop, but still, you can create pretty little gifs and much more. I love equalizers. Equalizers are cool and eq animations, even cooler. So I was looking to create a simple equaliser animation of my own, when I came across animation with Photoshop. It will end up looking something like this…
To start of, I created a single tile and filled it with #ff5f44 (the theme colour of the website). You can fill your tiles with any colours you like and also apply pretty patterns / gradients / overlays, etc. I the created the six layers by copying and pasting the tile as follows. Each layer should be an individual Photoshop layer.
Then copy and pasted the layers from 0 to 5 and back down to 1. This is so that when the layers are animated, and the animation looped, it forms a continuous animation by looping through each layer and showing a continuous equalizer.
To animate the layers, click on Window -> Animation and an animation panel appears near the bottom of the interface.
Click on the little icon near the top right of the animation panel and click ‘Make Frames From Layers’ to create all the frames, quickly.
You should now see all the frames. Each frame has a frame duration, in seconds, written under it. Select all the frames and change the duration to 0.1 seconds.
Click File -> Save for Web and Devices, and select GIF as the file format. Set Animation Looping Options to Forever and save your beautiful new equalizer.
You can play around with different colours, gradients, overlays and even images for the equalizer tiles. You can also have a lot more frames, change frame durations, etc. I just needed a simple equalizer for a gif icon. I created a 1794 x 664 gif, which I’m going to resize down to just 81 x 30.