Hello everyone, this is my first contribution through the utopian.io platform and it is something that excites me since I believe that in the future it will be the medium that I will use to contribute some of my ideas.

in this opportunity I will try to explain how to make an animated gif through the adobe photoshop tool.

The first thing we must do is create a blank document, for that we go to the new label, located at the top left of the program. in this step we can give our design the measures that you wish.

Then we have opened the image that we are going to use and we paste it or drag it in our blank project, when doing this a new layer will be created, usually they are located down to the right of the program.

To develop my idea I had to separate the image into two segments, this I did with the intention of giving independent movements to each one, there are several ways to do it but I use the lasso tool to separate segments.

Then we place our image in the position we want to start the creation and duplication of layers, this is very important because if we change the position of the image after starting the creation of frames we could lose the progress made.

We create several layers of the image through the function duplicate layers which can be found by right clicking on the layer to be copied, then playing a bit with the imagination we modify each layer so that it becomes unique to give the appearance of movement, I I decided that the logo would rotate, so I made each layer smaller than the other on its own axis, in photoshop we can modify the size of an image without moving from its center with the move tool and holding the alt key. perform the same procedure with the second part of the logo.

Before starting to generate frames recommend that they hide the visibility of all layers so they can build the movement without losing the idea of ​​what you are doing, the first plot is important since it is the one that initiates the movement, I recommend that you place it from the beginning the speed that will have to pass from one plot to another and then can become somewhat tedious, for example if the first frame we put 0.1s that we believe will then have the same time, you must also decide if your gif will have a continuous movement or if it will stop at some point, for that the timeline is designed.

To give the appearance of movement we will have to play with the layers, if in a plot we show a layer, in the next we show the one that follows it and hide the previous one, we must be very careful with this, if we leave visible layers where they should not be, this will spoil the final result, of course everything has a solution, you should only look for the layer that you have forgotten to hide.

to conclude my idea I have added text and I have created as many frames as necessary, in total I have done 31 to achieve the desired effect, I will leave the link where you can download the original design in psd so you can given a more detailed look.

In photoshop, to save an animated gif we must do it through the tool "save for the web" located in the file tab, this is very important because if we only save it as a gif the image will not move. I hope that at least you understand half of what I have tried to explain, I am terrible teaching, I know but I am learning to do better for you, I hope you have been useful.

Link to the gif and psd format of my design
Link to my giphy channel

Regards

---

Posted on Utopian.io - Rewarding Open Source Contributors

---