3 Replies Latest reply on Oct 3, 2016 9:27 PM by monipom

    After effects output on retina screens


      I've been having issues with blurry graphics rendered out of AE. I hadn't changed any settings and made sure all of the "best" settings remained selected. I've also gone through and experimented with different formats and codecs and the quality either stays the further degrades.


      You can see the difference



      It's not an issue with my assets as the same thing happens with vectors drawn directly in AE. I've tried different scale & sampling methods and the output remains the same.


      I've come to the conclusion that it's an issue with AE not yet offering a built-in solution to displaying graphics on retina-screens. I export my vector drawings at 2x the target size - this is now standard practice in web - to a lossless PNG and I double the dimensions of my composition. The video then opens in quicktime to fit my screen and the graphics are perfectly crisp. I then pass it through media-encoder to compress the file from around 600mb to 6mb.


      I'm a bit of purist though. Is this bad practice? As I haven't seen any solved questions on this topic, this I have to say is the best solution but it feels a bit hacky. I want to learn AE properly so that I can use it professionally.

        • 1. Re: After effects output on retina screens
          Mylenium Most Valuable Participant

          There's nothing wrong with AE. You just don't understand how video works - from the encoding to how players use their own scaling. This has nothing to do with how you create the video in the first place. Even 4k video can look rubbish when encoded wrongly. So by all means educate yourself about such stuff. There is no point at all to create video for web at insane resolutions just in the vein hope it might ever look as sharp as a vector graphic. That's just not how it works and you need to learn to compromise and live with these limitations. It doesn't even make sense from a web design point. What good does creating your graphics at excessive sizes, when someone is going to view them on a mobile device, he's only going to hate you for long loading times? Contrary to what you claim, creating graphics at double the size is not at all common practice and it's not necessary. That's what your CSS rules and jQuery are for to ensure the correct resolution version is used on a web page.



          • 2. Re: After effects output on retina screens
            Rick Gerard Adobe Community Professional & MVP

            monipom wrote:


            I'm a bit of purist though. Is this bad practice? As I haven't seen any solved questions on this topic, this I have to say is the best solution but it feels a bit hacky. I want to learn AE properly so that I can use it professionally.

            Here's the difference between web design, vectors, graphic design in general and video in a nut shell.


            Using coding you can use CSS and SVG technology to line up lines as thin as 1 pixel on the pixel grid so you black line against a white background will stay a black line against a white background. You can animate the position of that line just about any way you want and it will remain lined up precisely with the pixel grid.


            In video, and to a lesser extent in still images, when you move a line, especially a thin line or a diagonal or curved line you not only have to be concerned with linking things up with the pixel grid, you have to be concerned with the interaction of the movement and the frame rate. Failure to consider the rules of motion will result in video that looks like it is not playing back smoothly, jittery lines, flickering edges and lots of other problems. Add to this that mobile devices, computer screens, and users can resize the media player to any size they want. This will further degrade the quality of thin lines and edges. Streaming services such as YouTube and Vimeo will always re-package your video using their own optimization techniques which will also cause problems, especially with fine lines. One last point, the only way to judge your video quality is when it is running at full frame rate and at full size on the output device you intend to have most of your audience use to view your product. There is NO accurate way to judge how a video will look while it is playing by looking at a single frame.


            Last point. All video that an end user is going to view will be compressed. Compression works on blocks of pixels so if you have a thin line against a solid background the compression is going to average the color values of the thin line and the background and give you artifacts. The higher the compression the more compression artifacts you are going to see. This means you have to be a lot more careful with your color values when you design for video. Single pixel wide moving lines against solid backgrounds like this:


            (your image - and BTW, it's a lot easier to just drag your images to the reply field on this forum so we can see them) ARE NEVER going to look perfect in video and they are going to look even worse if you move them.


            Designing for video recommendations.

            1. Avoid high contrast thin lines
            2. If you design in Illustrator for video make sure you have snap to pixel grid turned on and that you preview your artwork using pixel previews
            3. If you must use thin lines make sure that they are precisely lined up on the pixel grid and they stay lined up
            4. If you move thin lines study up on critical panning speeds and judder and make sure your lines are at least 2 pixels wide, wider if the video may be scaled down to less than full size (like anything you send to YouTube)
            5. Avoid small gradients and fine lines against a solid background
            6. Use motion blur that is appropriate for your frame rate for all moving elements on the screen
            7. Add noise to gradients to help with banding and compression artifacts
            8. NEVER pause a video in a media player and obsess about the quality from of freeze frame
            9. If you post video on line plan on somebody watching your video at a smaller size and lower frame rate and higher compression and think about minimizing those problems in your design
            10. Motion is a stronger pull on the viewers attention than color or composition so you have to learn a whole new set of rules to make the viewer pay attention to what you want them to see
            11. Audio can be at least as important as picture so there are a lot more things to consider
            12. Video is a temporary experience so for your own sanity you must learn how to judge your work when it is playing at full speed because NOBODY is going to pause your video on the frame you submitted as a sample and pick apart the design - not even an advertiser that has paid your design hundreds of thousands of dollars to create a new logo for them. The only thing they will be concerned with is how the images made them feel while the show was playing and what they remember after the show is over.
            2 people found this helpful
            • 3. Re: After effects output on retina screens
              monipom Level 1

              Thank you for your detailed response, I will definitely file that away for when and if I have to use AE professionally. Using my method I managed to get a crisp output for my purposes even though the file bigger than what people would like, especially if using mobile data. It's always a risk watching video on mobile because you never know what size you'll get.


              An example of my results which I am happy with

              Comp 1 on Vimeo


              I'm not planning a career in motion graphics, rather it's something to add to my skill set, so nobody feel sorry for me!