Utopian.io GIF Contest - Animated Logo-Eye

Words
363
Reading
2 min
Listen
Play
9y

Utopian-GIF.gif

This is my contribution to the utopian-io@utopian-io project and the current GIF contest.

For this GIF I have used Photoshop CC 2018.

Step 1: Source material

I used the default logo from the Utopian logo files. For the background I am using an image from Pixabay.

Step 2: Creating the text layers and typing effect

First I created the text Utopian.io by creating a layer starting just with the U and then layer by layer adding one more letter. Then I activated the timeline window and created a new timeline. I moved each text layer a few frames futher to the right which creates the typing effect. No further effects were added to the Utopian.io text.

tut1.jpg

Step 3: Adding Fade-in Text

The text Open Source Rewarded got s simple Opacity Keyframe from 0% to 100% visibility after the first text appeared.

tut2.jpg

Step 4: Moving the Pupil

Finally the blue dot that looks like a pupil in the center of the logo needed to be cut out and animated. After making it a seperate layer I added a Position Keyframe to it to follow the typing effect. It is important here to add an extra stop keyframe or the animation will just continue directly. I did both: First the pupil goes to the top left of the Utopian eye and immediately continues to move to the right. Here I did not include a stop keyframe. Then it lingers on the top right and stops before going to the bottom to stop again. For both stops I added an extra stop keyframe or otherwise the pupil would have directly moved on to the next position.

tut3.jpg

Step 5: Saving as GIF

To generate a GIF out of this arrangement you need to save it as such. There are several options to reduce the size - and quality- but I have left it on the highest with 256 colours for best quality. I set the animation to infinite loop or otherwise it would just show the animation once as by default.

I hope you like the GIF. :)

🔗 GIF Link
🔗 My Giphy Channel

Utopian-GIF.gif



Posted on Utopian.io - Rewarding Open Source Contributors

Utopian.io GIF Contest - Animated Logo-Eye | Ecency