5 Replies Latest reply on Oct 8, 2014 7:46 AM by adplusverb

    Creating a png sequence graphic for iOS in After Effects

    adplusverb

      I want to create an animated icon to be used in an iOS application. I'm having a hard time with the logic...

      Obviously this isn't what After Effects is built for, so what size should my composition / render settings be?

       

      I want to make the png sequence @2x to support retina displays—so 64px x 64px would be my export size and then I would batch size them to 50% for @1x.

       

      Maybe there is a better way to do this. Any help would be greatly appreciated!

        • 1. Re: Creating a png sequence graphic for iOS in After Effects
          Dave LaRonde Level 6

          Some missing information here....

           

          What application will use your image sequence NEXT?  Is there a specific frame rate these devices require?    And how big will this animation be in comparison to the resolution of the devices?

          • 2. Re: Creating a png sequence graphic for iOS in After Effects
            adplusverb Level 1

            Thanks for the follow up!

            Sorry for not being clear—I'm designing the mobile application itself. I'm providing assets to the developers to build the UI.

            24fps would be fine, I think.

            This is for an icon within the application. So a retina display iPhone is 640 x 1136. The icon is 64px. About the size of most buttons within an application.

            • 3. Re: Creating a png sequence graphic for iOS in After Effects
              sobei_

              Hi there, Im familiar with exporting frames for iOS. It's straightforward enough.

               

              First off decide what size you want the icon to be @2x & @1x (also don't forget @3x). Also iOS can handle up to 60fps last time I checked so whatever you set in Ae make sure your developer plays back the sequence at the same fps.

               

              So for example you want your icons frame to be 60x60px at @2x.

              Create your comp in Ae at this size.

              When your happy with the animation add it to the render queue, choose Export as Png sequence.

              Make sure you select RGB & Alpha if your icon has transparency.

               

              Render the png sequence.

               

              If you re-add the comp to the render queue you can then select to output at 50% in the render settings this will provide you with your @1x sequence.

               

              After Effects names the files ridiculously so I use Renamer to quickly rename all the output frames for the developers.

               

              They should be named along the lines:

              frame-1.png

              frame-1@2x.png

              frame-2.png

              frame-2@2x.png

              ....

               

              And then all added to the one folder for development.

               

              Is this clear?

              • 4. Re: Creating a png sequence graphic for iOS in After Effects
                Dave LaRonde Level 6

                If you can work with PNG sequences in your design, that's good.  You'll still need to 1) finalize a frame rate and 2) be certain this new application can support it.

                 

                Make the big one first.  Then it's easy to to make a smaller comp, nest the big one in it and adjust the scale.  You should then be good to go.  I'll assume you're familiar with the drill for making alpha channel animated graphics.

                • 5. Re: Creating a png sequence graphic for iOS in After Effects
                  adplusverb Level 1

                  Thanks so much for your help!

                  One more question though. In order to export 60x60 what should be render settings be? regardless of the composition size I only get these options: Dropbox - Screenshot 2014-10-08 09.46.20.png