Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Preparing a map for animation

From: After Effects: Principles of Motion Graphics

Video: Preparing a map for animation

Not every design job has to have the glamour of a title open. As a matter of fact, if you do your map animations right, you can create something that's not just informational, but also beautiful at the same time. The key thing is to make sure that you have a script to reference so you know the exact moves and features you'll need to create. Now there definitely a lot of third- party map applications out there that'll allow you to create some pretty complex and amazing map animations. But for the most part I've found that I've had to create my map animations myself with whatever resources I could find.

Preparing a map for animation

Not every design job has to have the glamour of a title open. As a matter of fact, if you do your map animations right, you can create something that's not just informational, but also beautiful at the same time. The key thing is to make sure that you have a script to reference so you know the exact moves and features you'll need to create. Now there definitely a lot of third- party map applications out there that'll allow you to create some pretty complex and amazing map animations. But for the most part I've found that I've had to create my map animations myself with whatever resources I could find.

And that led to me to this web site, visibleearth.nasa.gov. This is a great web site to use as a resource for maps. Now before you get started on this site, I want you to check out the terms of use. Click in the upper-left corner of your web browser and you'll notice there are multiple sections for the terms of use. The key one is the fact that NASA is giving you the imagery free of any license fees. You just have to make sure that you provide credit that they are the owners of the imagery. Now the next section, the Visible Earth Addendum, the Visible Earth team requests that you actually give them credit and show people the web site where you've downloaded the files.

But it doesn't require this. So you don't necessarily have to provide that credit. I typically recommend providing as much credit as possible because that helps keep these things free and available for use. So let's go ahead and download our maps. Go back to the Home section of the web site and go to the right side of your web browser. Under Collections click on Blue Marble. This is one of my favorite collections. I like the Blue Marble collection because you can see there are overviews of the earth that were captured at different months.

So if you notice in January here there's lots of snow cover. But if we go down to June, not so much. So let's go ahead and download a map from the June section. Now there are a couple different size options you can choose from. Most of the time this 5400x2700 file is plenty large enough, but if you really need to zoom into specific detailed areas, you might want to download one of the larger images. Now I've already downloaded this file at 5400, but there's one other file we need to download.

So let's go back just by clicking Back on our web browser and jump to the third section. If you look in the middle lower section in your web browser, there are three sections of maps. Go ahead and click on the third one. Now this BMNG imagery right here, if you go ahead and click on it, you can download the exact same size file. Now the reason I like using this file is the fact that the land is all knocked down in black. It's very easy to change this into a mask allowing me to cut out the land features of the other file that we've just downloaded.

So that being said, let's actually jump into Photoshop so I can show you how to prepare these files. Here in Photoshop you can see, this is the large color capture of the file and I'm only at 16% magnification. So let's go ahead and change that to 100%. So you can see exactly how close we can move in on the scene. This is actually plenty close enough for what we're trying to do, because in our map animations all we're trying to do is just have a little blip pop up in the same general area wherever the artist lives that we are featuring within the show.

So this is perfectly fine detail, but what if we want to actually just knock out the land and not necessarily have this ocean underneath of it? Well, that's when this map comes in handy. So in order to use this map let's make some quick changes. First thing, if you go up under Image, in the mode it's set to Grayscale. We need to change this to RGB Color. Now with RGB Color set, I want to go to my Channels panel. Under Channels you can copy any one of these channels.

So let's just click and drag on Red and drag it down to the bottom of the panel where we can duplicate that Red layer. Now we've actually created an alpha channel named Red copy, but since the ocean has all these little slight variance of gradients, we need to actually blow out these white levels a little bit. In the way to do that is just press Command+L or Ctrl+L to open up levels in Photoshop. Now if we click on the black eyedropper, we can make sure when we click in any landmass that that setting is 100% black.

Now let's do the same thing with a white eyedropper, but instead of clicking on an area that's already white, we want to click on the darker areas of the ocean. Now you notice as we click around we've actually knocked out all those extra features. Now sure we can go in and paint out all these little areas, but all in all this has done a pretty good job of creating a mask for me. So when we click OK, now I'm actually ready to load this landmass as a selection. In order to do that, all we have to do is go up under Select and choose Load Selection.

By default, Load Selection will load whatever channel is set up as the alpha channel, which is our Red copy layer. So we can go ahead and click OK and now you notice all of the water has been selected. So if we turned our color channels back on just by clicking on the RGB layer here, we can jump back to the Layers panel. Now what I want to do is just create a new layer here just by clicking on the New layer button in the bottom of the Layers panel and filling this new layer with the selected area.

So let's go ahead and fill this with black, so you can just go up under Edit and say Fill and choose Black. We could've also chosen the foreground color, but let's just choose black and click OK. Now we've filled in the ocean. If we turn off the visibility of the background layer, you'll notice that now the landmasses are transparent. We're going to use this as a mask layer when we actually animate our maps. So let's turn off our selection by going to Select and Deselect, or Command+D or Ctrl+D. Now I want to use this as a mask and the easiest way to do that is to copy that mask into our color document and since the documents were originally the same size, this will line up beautifully.

Just Ctrl+Click or right-click on the layer and choose Duplicate Layer. Now we need to choose the other document and when click OK and jump over to the other document you'll notice now the ocean is all black, and that's because I've copied this black layer right into the other document. So now all we have to do is make this background layer active by double-clicking and let's rename this Color Map, and Layer 1 we can rename that Mask.

Now we're ready to actually import this for animation. The easiest way I found to notate that this file has been prepared is come up under the File and choose Save As. When we choose Save As, now we can go ahead and rename this file Map_AE and that lets me know that this map is ready for animation in After Effects. Now I'm going to go ahead and save this project file right into my ch12 folder under the Psd-Comps.

Now when we click Save and OK, we've saved our layered Photoshop document ready for animation. Could we have downloaded these files and dropped them directly in the After Effects? Probably, but it's often faster to jump right into Photoshop so you can optimize the files and make sure everything is the proper size before you get started animating.

Show transcript

This video is part of

Image for After Effects: Principles of Motion Graphics
After Effects: Principles of Motion Graphics

60 video lessons · 22766 viewers

Ian Robinson
Author

 
Expand all | Collapse all
  1. 3m 37s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 4s
    3. Defining motion graphics
      1m 32s
  2. 11m 11s
    1. Workflow for creating motion graphics
      5m 7s
    2. Organizing projects for motion graphics
      4m 25s
    3. Defining a motion graphics "package"
      1m 39s
  3. 12m 58s
    1. Collecting visual inspiration
      2m 14s
    2. Listening to imagine
      3m 20s
    3. Creating elements for inspiration
      7m 24s
  4. 33m 4s
    1. Essential theories of typography
      6m 34s
    2. Understanding shortcuts for setting type in AE
      7m 27s
    3. Converting type from Photoshop
      5m 51s
    4. Importing type from illustrator
      9m 44s
    5. Creating shapes from text
      3m 28s
  5. 36m 30s
    1. Understanding the role of timing in motion graphics
      8m 1s
    2. Creating and using markers
      7m 58s
    3. Creating animation with markers
      5m 16s
    4. Using audio to create animated graphics
      5m 47s
    5. Editing techniques for graphics and video
      9m 28s
  6. 49m 27s
    1. Understanding different kinds of type in After Effects
      15m 53s
    2. Using animators with type
      7m 59s
    3. Using type presets
      7m 35s
    4. Creating custom type presets
      4m 35s
    5. Animating paragraph type
      13m 25s
  7. 45m 51s
    1. Exploring the use of color in motion graphics
      10m 40s
    2. Creating and using color palettes
      13m 45s
    3. Exploring color correction tools in AE
      6m 46s
    4. Advanced correction with Color Finesse
      8m 30s
    5. Creating custom color presets
      6m 10s
  8. 59m 6s
    1. Exploring textures in motion graphics
      8m 30s
    2. Building an animated background texture
      16m 48s
    3. Creating textures for type
      10m 19s
    4. Animating seamless textures
      15m 1s
    5. Creating custom vignettes
      8m 28s
  9. 38m 25s
    1. Understanding lighting in After Effects
      12m 57s
    2. Intro to lighting techniques
      5m 17s
    3. Using material settings to enhance lighting
      7m 36s
    4. Adding polish to a light setup
      12m 35s
  10. 50m 32s
    1. Animating swoops and swooshes
      12m 37s
    2. Creating repeating light trails with the Vegas effect
      6m 28s
    3. Repeating patterns with shape layers
      8m 11s
    4. Exploring graphic transitions
      10m 37s
    5. Exploring video transitions
      5m 16s
    6. Adding dynamic elements to a video transition
      7m 23s
  11. 22m 23s
    1. Working in 3D
      8m 36s
    2. Rigging cameras for animation
      8m 45s
    3. Working with depth of field
      5m 2s
  12. 50m 54s
    1. Creating storyboards in After Effects
      10m 20s
    2. Creating an animatic
      18m 14s
    3. Polishing the animation and timing
      8m 45s
    4. Applying the final effects
      13m 35s
  13. 47m 53s
    1. Preparing a map for animation
      7m 59s
    2. Animating and styling a map
      8m 24s
    3. Designing a lower-third graphic
      8m 22s
    4. Adding animation to the lower-third graphic
      9m 10s
    5. Creating bumper animations
      13m 58s
  14. 14m 17s
    1. Defining the toolkit
      2m 2s
    2. Preparing templates
      7m 12s
    3. Creating a style guide
      5m 3s
  15. 1m 3s
    1. Next Steps
      1m 3s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed After Effects: Principles of Motion Graphics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.