Turn .PNG into .GIF

Support
1

Coruja Cor
Coruja Cor535Ă—731 34.4 KB

3 Likes
2

You need several Images to make a GIF . For Facer Creator no more than 25 . I go for 24 . Two of course is the minimum but you might as well just swap them with a Timed TAG . What is your Question ?

3 Likes
3

For sequence of images with so much gradients I would suggest to use .jpg format rather than .png, resulting in smaller file size.

4 Likes
4

I transform the image into .JPG but, after that, how do I make it appear to move?

3 Likes
5

1000062061
You can create video from an image or text into mp4 using site

Then you can use Video to animated GIF converter to turn a video into a gif and finally use the optimise features to reduce it to 25 or less frames.

5 Likes
6

Thanks friend, I’ll see if I can do it?

3 Likes
7

Friends…I’m not succeeding…haha…but, I’ll keep trying

2 Likes
8

What you are wanting to achieve is quite complex. If you are an artist it will be easier. A moving sequence animation in facer consists of up to 25 different different images. If you open any gif in a photo application you will see the different images to understand the task at hand. As such if you are creating content yourself, then there is alot of work to do there.

3 Likes
9

Take a look at the animations example “Expression Playground” from facer. It shows you many ways you can move a single object to give the illusion of motion. You don’t necessarily need a gif.

3 Likes
10

I think the better question is what effect are you trying to achieve?

With a single image it’s hard, but not totally impossible, you just have to be creative with some formulas.

With the advent of AI as seen above it’s easier but people are way divided over it’s usage.

3 Likes
11

Hello cth4242, Really, my difficulty in expressing and translating languages greatly changes the desired objective, which my friend Russell already warned me about.
My intention is to create a .GIF, where an Owl is flying. The colors or even the art doesn’t have to be the image I sent because I want to get, if possible, a 3D effect and with fewer colors… I want to learn more about creating art in that sense, I don’t know how to use it and I don’t even have applications like Corel .
Anyway, my intention is more clearly: an owl flying as if leaving the screen!
Thank you and I apologize for my difficulty in explaining.
Hug to everyone!

2 Likes
12

No problem!

I’ve got inspection mode turned on for this watchface ( You Want Some Whine With That? • Facer: the world’s largest watch face platform). Specifically, the animation at the top which sort of resembles the flapping motion of wings if you squint hard enough :smiley:

What I would do if I had to tackle this is find an image of an owl in flight like this:
Veil Owl In The Flight Stock Photo - Download Image Now - Owl, Barn Owl, Flying - iStock (istockphoto.com)

  1. Open the image in an editor like Photoshop (a free online version can be found at http://www.photopea.com)
  2. Cut the image up (put parts of the owl on separate layers… ie: Body, Left Wing, Right Wing)
  3. Add the layers to your watch making sure to layer them correctly (right wing will need to go underneath the body to hide any parts you cant see. In my watchface, if you look hard enough the arms clip a bit, but when dealing with a small watchface it’s hard to notice. In other words, get creative if you have to hide things. I used Photopea to create some extra space when I rotate the arms so the rotating parts looked round (if that makes sense).
  4. When exporting the wings, you may need to alter the anchor point. This is the point where the image rotates from. So, either pick a corner and hope it rotates correctly or you can rotate the wing so that it’s horizontal or vertical which is usually easier.
  5. Once you get the basic motion down pat (flapping wings) you can then move onto giving the illusion of movement. Again, it depend on what you want to accomplish. For me, a realistic photo I would want to animate it briefly off screen so someone isn’t looking too hard for flaws. Which to me, means making the photo enlarge and fade to 0 over a few seconds. I did this with the facehugger on this watchface (Cth42 - Alien Xenomorph 2024 - watch face for Apple Watch, Samsung Gear S3, Huawei Watch, and more - Facer)

X: (380-(interpAccel(#DWE#,0,.1,1)*+220))
(This is to move the facehugger on screen when the watch wakes up)

WIDTH: (225+(interpAccel(#DWE#, 0, 2, .5)*500))
HEIGHT: (225+(interpAccel(#DWE#, 0, 2, .5)*500))
(This scales the size of the image in both directions over the course of 2 seconds. I recommend writing the formulas down and changing things to see how things change to best understand and get the exact movement you want)

OPACITY: (100-(interpAccel(#DWE#,0,2,1)*200))
(This starts at 100 opacity and fades away over the course of 2 seconds)

I know this is a lot, especially in another language potentially. I’ll try to work up an example to give you a better idea and something you can play with. This was just some quick thoughts and not organized at all :smiley:

4 Likes
13

You have a great example from a facer partner above.
Another alternative is to create a an animated gif of an Owl or bird with flapping wings (static), and use the X and Y coordinators to move the object around the screen as desired.

The example below is using 2 examples owl gifs from giphy in a Sequence element type.
If you click on the Sequence, you will see the images required to get a sense of what you would need to create. One gif has 10 images and the other has 8.
You would want to make your images with transparent background, and modify the X, Y values to make the birds fly in the direction and speed of your choice. But the gif examples, show you the quantity and style of images you need to achieve a realistic owl flying.

3 Likes
14

Thank you very much friends, I’m going to download, study and try to do it both ways, so I can create screens for several other options.
Happiness to all!

1 Like
15

Ok so here’s what I threw together. Feel free to ask any questions.

Here’s the image I posted, cut into layers:

BODY

LEFT WING (After I got rid of the empty space)

RIGHT WING (Before getting rid of the empty space)

I show the before and after so you can see how it affects the rotation/anchor point.

Here’s the left wing before I reduced the empty space:
(The red stars indicating the points where the image rotates/grows/shrinks from)

And here’s what it’s like when I got rid of the empty space. It’s not exact but I know I can change a rotation point/anchor to the lower right which will work for what I want to do.

At this point I make three layers in Facer:
BODY
LEFT WING
RIGHT WING

That way the body hides the duplicate image parts of both wing layers.

I select the left wing layer and click on the Align button and choose the anchor point:

Here is the default:
(The red star showing where it is anchored)

And here it is with the correct/updated anchor spot:

Bear with me, it’s been years, so I don’t know how to turn on inspection mode for a draft watchface.

For the left wing layer, I change the following:
WIDTH: (103+(interpAccel(#DWE#, 0, 2, .5)*200))
HEIGHT: (98+(interpAccel(#DWE#, 0, 2, .5)*200))

Here’s where you play around with numbers to get a feel for how things change. Think of it as a cook adding salt and pepper to a dish as they’re cooking. Tweaking the movement until it feels right. Sure you can look up what the formulas do exactly here’s my vague recollection from memory:

HEIGHT: (98+(interpAccel(#DWE#, 0, 2, .5)*200))
98 is the original image height
interpAccel(#DWE#,0,2, .5) - When the watch wakes up, from seconds 0 to 2 do the following at speed .5
*200 - This is the scale/something I forgot but can look up.

So, it goes like this:
Second 0 - Image Height = 98
Second 1 - Image Height = ??
Second 2 - Image Height = 298

Basically, scaling it up. When this formula is applied equally to the height and width it makes something bigger (you can tweak it to make it shrink too!) Just be sure to keep the original height/width set to the original image size.

Now onto transparency,

We have the owl flapping it’s wings, and growing larger giving the illusion of flying towards the screen. You’ll want it to fade away or you’ll be stuck with an owl in your face blocking everything.

Keeping in mind what we did for the wings, we have it animating from 0 to 2 seconds, at which point we want it to fade.

In the TRANSPARENCY field of the L WING, R WING and BODY you’ll need to add:
(100-(interpAccel(#DWE#,0,2.5,1)*200))

100 being the inital transparency, in this case 100 transparent (visible)
At second 2, we want it to be 0. Notice 100 has a - after it… that makes it shrink/go down.
I wanted the owl to be a little visible so I set it to 2.5 seconds. The .1 is the factor on how fast it fades I believe. Again, change the number and see how it changes.
*200 should technically be 100 (same in the above) but I want to make SURE it’s invisible. Technically you can’t get more transparent than 0, mine ends up at -100. Hopefully this doesn’t break things down the road, so something to keep in mind… maybe use 100 instead of 200 :smiley:

Do as I say not as I do. :slight_smile:

So now the owl flaps, flies towards us and fades away and you’re left with a black screen. Mission accomplished, but now what?

I threw together a quick set of numbers, hour hand, minute hand and set the transparency the opposite of the owl.

TRANSPARENCY
(0+(interpAccel(#DWE#,0,2.5,1)*200))

It starts at 0 transparency (invisible) and scales up to 200 (way visible) in 2.5 seconds. Exactly the time the owl fades out, this fades in.

Here’s the watchface:
Barn Owl Example - Flapping • Facer: the world’s largest watch face platform

My recommendation? Keep a notepad full of formulas with descriptions of what they do. If you need a certain motion, look it up. Or refer to an old watchface that uses said motion.

5 Likes
16

I ended up publishing it and left inspection mode on. Hopefully I can figure out how to publish a draft and keep it private :smiley:

3 Likes
17

To make an inspectable draft without publishing, in a browser view the item then click the share icon and you can set inspectable mode on.

3 Likes
18

Thanks friend…I’ll try it right now
Just one more abuse, with this image the owl will flap its wings (.GIF) or, do you think it wouldn’t look cool?

2 Likes
19

Got it! Adding that one to my notes!

Thanks!

3 Likes
20

Oh wow! When partners show up they do make a difference! Bookmarked this one.

In my opinion being a partner should be a privilege similar to having access to the lounge meaning no regular contributions to the forum means losing the privilege. Also in my opinion some of the regular contributors, including the cavalry should have a fast track to being a partner

4 Likes