How to make GIFs by recording screen on an unrooted Nexus 5

GIF the people what they want.

Our in-office emails are heavily populated by Pokémon, Bring It On, and total weirdos busting a move. That’s right, we’re as addicted to GIFs as you are.

We’re convinced the future is video – quick, useful previews of what an app will be like before you have to take a chance on a download.

Recording video from the screen of Android devices is significantly more complicated than on their iOS counterparts. Not long ago, you used to have to be root to make it happen. Great news – that’s no longer the case, and we’ve figured out how to streamline the process from start to finish.

Here’s a step-by-step of how to make animated GIFs from recording your unrooted Nexus 5 screen.

You will need:

  • Nexus 5 (unrooted – there are easier ways to do this on rooted devices)
  • Adobe After Effects
  • Adobe Photoshop CS5

These steps assume a completely clean computer, so we’ve included details that may seem obvious (like “Install Java”).

We use Windows 8 in the Appszoom office. If you’re using a different OS, YMMV.

1. Screen recording an .mp4 from an unrooted Nexus 5

We followed and updated instructions from AndroidPit.

  1. Install Java.
  2. Install the Android SDK.
    1. Open SDK Manager.
    2. Check Extras > Google USB Driver and Install.
  3. Hook up Nexus 5 to computer with USB cable.
    1.  Check USB Debugging under Settings > Developer Options.
    2. Install the new driver: In Windows SO, right-click Computer >Properties > Device Manager. Go to the property with the exclamation mark and right-click it, choose “update driver software,” select the folder in the SDK which contains the USB Drivers (Extras), and install it.
  4. Enter folder sdk > Platform Tools. Shift + right-click to open a command prompt from there.
    • Type command: adb shell screenrecord /sdcard/NAME.mp4
      • Mind the space between screenrecord and /sdcard!
      • NOTE:  The first time you do this, you’ll have to give permission to your computer through a pop-up dialog box on the Nexus 5.
  5. Press Ctrl + C when done recording.
  6. Explore the Nexus 5 from your computer. Grab your .mp4 file from its main storage area.

2. Adobe After Effects Editing

  1. Install QuickTime.
  2. Open Adobe After Effects and create a new Composition.
  3. Import .mp4 file.
  4. Choose your clip (5 sec or less) and reduce your work area accordingly.
  5. Select a Region of Interest to crop out the default Android buttons, then go to menu Composition > Crop Comp to Region of Interest.
  6. Drag Composition to Render Queue.
    1. Choose Current Render > Output Module > Format: QuickTime.
    2. Choose Format Options > Video Codec: H.264.
    3. Change the name and destination as desired. Be careful not to overwrite previous work!
  7. Render.
    • This takes just 48 seconds for a 4 second long GIF for us.

3. Photoshop Transformation to GIF format

  1. Choose File > Import > Import Video To Layers.
    1. Check Limit to Every 5 Frames.
  2. Select all frames and change delay to 0.1 sec.
  3. Choose File > Save for Web & Devices.
    1. Select GIF from drop-down menu.
    2. Colors: 64.
    3. Size: set long side at 300px.
    4. Looping Options: Forever.
    5. Save.

You should now have an animated GIF small enough to display just about anywhere. The ones Appszoom makes end up between 200KB and 400KB apiece.

Happy GIFing!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: