Published on <a href="https://blog.prototypr.io/a-simple-way-to-get-perfect-lightweight-gif-from-principle-c2b85a209685?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Volodymyr Safonov 
SPOILER: WE NEED PHOTOSHOP 🙁
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oKHeBF_Oe05l_TfBaFtIQQ.png">Our Louder.me iOS app simple interface animation as example. Check on <a href="https://apple.co/2nrNYC5">AppStore</a>.
Despite the 256 colors restriction (but every file can have its own palette out of 24-bit RGB), GIF is still useful and handy format. The best cases for it are portfolio presentation where size matters and all the designer’s sites like Dribbble and Behance where you have something about 5MB size limitations.
But Principle always gives us an enormous file with more than 10MB weight and tons of frames. That’s because it makes a frame for every 0.01 or 0.02 sec disregarding is there a movement or changes or not.
For a short 10–12 sec prototype screening I got about 18MB and 861 frames with 100 similar frames in the beginning I should cut off. But with 24 FPS it would be enough to have about 240 frames for it. And even less because we don’t need super smoothness for such GIFs, it should be at least ‘good’.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*e1h2hmsZUyh_21Y6oxxoFw.png">861 damn frames!
So, how to get fewer frames without deleting with your own hands all the unnecessary of them, get compact GIF size and save time?
<img alt="" src="https://cdn-images-1.medium.com/max/350/1*CshaKRiVdf03RRAvUYIK9w.jpeg">Ugandan Knuckles knows de wey
<h3>DE WEY</h3>
1. The first thing you need to do is to save your Principle screencast as MOV, not GIF. No sense to torture that huge GIF Principle makes. Also there are plenty of cases where we can upload a video file and don’t even hesitate.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lXV_gK_ov1j2cuyvMHf5ng.png">Save as MOV!
2. Open Photoshop and Import your video with ‘File — Import — Video Frames to Layers’. Not just by dragging it into PS window.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Tzzle10_wPsSRdtIFkyV2A.png">Importing menu
3. After choosing your file you can specify the video range you want to use and also you should check ‘Limit to every X Frames’ (so you’ll get less frames in your animation). If you have a very long video, PS will alert you that ‘it will take a lot of time’ until you limit it to a right amount of frames. Otherwise, if your video is short and you want to make it even neater you can go down to 2 frames. I prefer to limit it to every 4 frames, but it’s up to you to choose.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-3f0LVf-JqV3qA1rDEFQgA.png">Frame with limiting frames and specifying range settings
4. Well, now we have a GIF on our PS timeline with a decent amount of frames (169 pcs).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FPh5opAJmV0hmiK23BfzRQ.png">Normal frames count
The next thing we need to do is to normalize its duration.
<img alt="" src="https://cdn-images-1.medium.com/max/758/1*hQCbGN4zzR0cVf-8tf2NNg.png">
It can’t be spotted while we working with GIF but after export we will notice that all these limited frames have shortened the full duration and made everything happen very fast.
So we need to select all the frames and raise their duration to make it relevant (click on the frame timing at the bottom).
With limiting frames on the previous stage to 4 — 0.07 sec duration works for me perfectly.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IdB3u7zyR6OhD3-H9Jj18w.png">
5. Actually now we can export our GIF and it should be neat and lightweight. But there are some optional enchantments we can do to improve it if needed.
We can cut all the repeating frames. But don’t forget to raise the duration of the frame you left from this sequence to maintain the overall video duration, and keep the flow and pauses you made while screening.
In addition we’d better raise the duration of the first and the last frames to about 3 seconds. It will help the watcher to define the start and the end in forever-looping GIF and make it easier to understand what happens.
6. Export. Not a rocket science but should be mentioned. ‘Export — Save for Web (Legacy)’ and don’t forget to turn on Looping Options on ‘Forever’ to make it repeatable.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-bFjIa4RhKWfngjxEtnZvA.png">PS Export menu<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_8nRyB9eNmrG67ZzVCGQzQ.png">PS Export settings window (3.8MB — awesome)
Also, I often use x2 rendering in Principle, so I get x2 size in PS I don’t really need. So in image size settings I prefer to choose 50% scale. Usually that’s enough to get a GIF for demonstration.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*I31DcYB1V6lodpnKuu6wfw.png">PS Export settings window with 50% scale (1.4MB — even more awesome!)
And now I’m able to upload the result here:
<img alt="" src="https://cdn-images-1.medium.com/max/375/1*49HJg6SJh_HDOl1Rq7_t9w.gif">
P.S.: Despite the impression you might get it’s quite a fast sequence. I’ll be glad to see you in comments or on <a href="https://www.facebook.com/safonovvolodymyr">Facebook</a>. Tnx for reading!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c2b85a209685" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/a-simple-way-to-get-perfect-lightweight-gif-from-principle-c2b85a209685">A simple way to get perfect lightweight GIF from Principle</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

A simple way to get perfect lightweight GIF from Principle

Top Stories