Playing with Figma

in Indiaunited2 days ago

I'd been experimenting with the Figma tool for the past few days for work-related stuff. (Mobile application screen designing.) And as a challenge, I tried designing a footer for myself, thinking that it's hardly a couple of minutes' work. But soon I realised that mastery of a tool does require one to put work into it.

Let's look at the end product first.
Divider 1.gif
I must say that I am impressed with myself that I pulled this off. I used the Figma tool to design the frames, and it took a total of 36frames to get here. Now. The GIF is of hardly 8-10 seconds, but it took me 1 hour and 45 minutes to complete it.

image.png

The First challenge was that I selected the dimensions as 1920x150, which would have been fine if I were designing an image. But I was aiming for a GIF, and the Idea was that Hive logos would roll from left and right, collide in the middle, and my name with subtext would pop. Here, the twist was that the logo I had of Hive was a 150x150 image. And whenever I am tilting the angle, the number(distances from the edges changes and werent linear, after wasting a good 20 minutes trying to achieve the rolling effect. I gave up on the rolling action and went with sliding. Added the fading effect without much difficulty.

And up next was adding the text. Wasn't that hard either.
Just went online to the font generator and typed the text along with effects. For Movies, I went with the iconic Pulp Fiction style, and for the TV shows, I wanted to use the GOT effect. It didn't look impressive. My next choice was Breaking Bad style, but it was locked behind a paywall. So I went with the first one that's available, and it was the F.R.I.E.N.D.S font. The result from the site wasn't good, so after downloading the Image, I edited it using Paint. For Anime, the Demon Slayer font was available. MHA font gave a very weird result, probably the font was designed for long words, but I was giving anime as input.
I wanted to add the Finance Blog, but it would have to be in plain text. So I dropped that, too. and clubbed the remaining content like the pointless blogs, stories and everything under philosophy.
Up next was to add the name.

image.png
Here, I got ambitious and tried showing my Hive handle in the Matrix-style animation. But those text effects would require a lot of work and time. So I went with the Stranger Things font for my name. It would have been a sick effect if I managed it. (I will give it a try sometime soon)

And the last headache was to download all the frames and add them to Ezgif for GIF generation. While the web application provided the frame-level delay set. But the trouble was uploading images in sequence, which forced me to look for any online solution, and the feature was already available. Animated GIF maker. I selected all the images and clicked on the generate GiF and thats the final result.

image.png

Et-Volia, the GIF is ready..
But I am still thinking about the two points. First, the rolling effect on the Hive logo and second is the Matrix-style Fonts. And till then will keep on trying.
💟☮️
That's all for now.
Thank you all for the love and support. 💟☮️

Sort:  

This post has been manually curated by @steemflow from Indiaunited community. Join us on our Discord Server.

Do you know that you can earn a passive income by delegating to @indiaunited. We share more than 100 % of the curation rewards with the delegators in the form of IUC tokens. HP delegators and IUC token holders also get upto 20% additional vote weight.

Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.

image.png

100% of the rewards from this comment goes to the curator for their manual curation efforts. Please encourage the curator @steemflow by upvoting this comment and support the community by voting the posts made by @indiaunited..

This post received an extra 15.64% vote for delegating HP / holding IUC tokens.

Curious about HivePakistan? Join us on Discord!

Delegate your HP to the Hivepakistan account and earn 90% of curation rewards in liquid hive!

50 HP
100 HP
200 HP
500 HP (Supporter Badge)
1000 HP

Follow our Curation Trail and don't miss voting!

Additional Perks: Delegate To @ pakx For Earning $PAKX Investment Token


Curated by bhattg