In this article, we have learned not only how to use an export GIF from after effects but also learned the techniques of using photoshop to get the most optimized result possible which will make their loading times lightning fast on the web and especially on mobile browsing. And then there are websites like and many others which will export a GIF but photoshop provides the most extensive options. Step #21Īnother option for GIF export is using a script like gifGUN or using an application like GIFRocket for MAC. GIF is very good for the web in a short format but if there is live video footage and even if it is a couple of seconds then the file size will be huge like greater than 15 mb which is not ideal for mobile browsing. After doing the adjustments save the file.Īgain, we can compare the size of the simple color version and the more optimized version with 128 colors and the file size is reduced to more than half. In the bottom left corner of the preview, you can see the estimated file size and how much time it will take to download the file. You can resize in percentage if you want. We have changed colors to 128 and height to 500 px and the width is adjusted automatically as the link is on to keep the original proportions. So, save for the web and we will reduce the resolution as GIFs are not viewed on high resolutions and also, they are square shapes for social media hence there is a need to change the size. We can do further optimization by doing some tweaks and for this, we will look at the simple color video. In the web world always remember one thing that the smaller the better. Let’s compare the file size and the one without effects is smaller. The settings will be the same as for the previous file. Now open the simple color version and similarly export to save for the web. We selected GIF 128 Dithered and then changed the colors to 256 so the preset became Unnamed. Go to File -> Export -> Save for Web (Legacy) or press Alt + Shift + Ctrl + SĪ dialog will be open from which we can select a preset if we are not sure of the exact option to choose. Open the full-color version video file in photoshop with vignette layer and motion blur. Render this file also and give it another name. This will reduce the render time as well as the file size will also be reduced. Now we will turn off the vignette layer and motion blur and again export the video to H.264. Again, add the comp to media encoder render queue and select H.264 as the preset.Įxport this file by starting the rendering and an mp4 file will be exported. Now let us look at how we use photoshop to generate GIF files. So we got the sequence of images 25 fps in gif format. Once the render is completed the status will be done and there will be a green tick on the right to indicate the files are generated. The elapsed time and remaining time is also displayed. In the encoding window, you can get the status of the render. Now press the green play button to start the queue of rendering. On the right side various tabs can be manipulated but for now, keep it as it is and click OK. We can manipulate in and out marker at the bottom for custom selection. The source range is to the work area instead of the entire composition. You can also change the location of the output file.Ĭlick on GIF and you will be greeted with Export Settings where there is Source and the Output as well as the settings to tweak. Let us first start with the new methods which is gif rather than the traditional method to export to H.264 and then convert in photoshop to GIF. Those files will also be listed here if added. Adobe media encoder is compatible with other Adobe products such as a premier pro. So, the after-effects file is added in the queue. You can also render in After effects but it will block your current work until the comp renders. We have also made sure that our workspace is around 5 seconds as GIF is generally a short time format that generally loops except for kinds of stuff like the text on the website.įirst, we will export the composition for this we will use Adobe Media Encoder or press Ctrl + Alt + M. We will start with a finished animation which is a simple pie chart showing various device types according to the usage. At the bottom, there is layers and a timeline panel which is used to add media and add animation keyframes. At the right, there are various sections used to edit the video. At the top right, we have various layout presets which will arrange according to the type of work. Then there is the composition panel which shows the preview of the animation or video. On the left side, there is a project panel that consists of the project files and an effects control panel which shows the effects applied on a particular layer. In the interface at the top is the menu bar like File, Edit, etc. 3D animation, modelling, simulation, game development & others Step #1
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |