ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How To Make Your Own Whiteboard Video

Updated on July 26, 2014

Whiteboard Animations Pack

Whiteboard animations videos are used a lot in online advertising, By combining multiple hand drawing animations, they can express ideas and promote products in a cool way.

I will show you how to make your own whiteboard video using After Effects with a whiteboard package template. Although this pack contains 3 ready stories, It also has many pre-made drawing animations for a lot of characters and elements, they can be placed in scenes to make a new story easily.

If you don't have Adobe After Effects which is required to make the video, you can download a 30-day trial version from here. An essential knowledge of AE is preferred in order to deal with the package.

Whiteboard Package Preview

Pack Contents Details

Whiteboard Animation Pack Content
Whiteboard Animation Pack Content | Source

Package Structure

1."Configurations" has a settings layer to control the shadow of images with borders

2."Drawing Stuff" contains drawing hand photos and drawing masks, usually you won't use them directly

3."Music" folder contains music tracks used in stories

4."Precomps" folder contains drawing , dragging and other animation precomps for all characters and objects organized in sub-folders

5.Each preview precomp in "PreComps Previews" list all animation precomps for one category or one character and allows to browse them easily to select one of them

6.All the solids used in packge are found in "Solids" folder

7.Story 1 is the general "Advertising Solution"
Story 2 is "Marketing Service"
Story 3 is "D.Bill Slim Product"
Story 4 is an empty story to start making your own story from scratch.
Each story foolder has main composition with same name, you can render these main comps to get the final stories videos
You can find the scenes that compose a story in "Scenes" sub-folder

How to add content to a scene

Each story is made up of scenes, and the camera moves from one scene to another.
Double click on a scene to edit it.
To add a new text placeholder for example, go to the precomps previews folder.
Double click on the text drag preview precomp.
You can browse all text precomps to choose one.
Click to select the precomp then press: Command + C (for Mac) Ctrl + C (for Windows) to copy it, then inside scene press: Command + V (for Mac) Ctrl + V (for Windows) to paste the text precomp.
Now you can change the text precomp duration and position as you like.
You can add character precomps the same way we added text precomps. First open the preview for a character , then select the pose you want then copy it and paste inside the scene precomp, notice that there are drawing and draging animations for each pose.
You can reach precomps easily by search. type in a character or object name
Notice that animation type (drawing, draging, throwing and other) is found at the end of precomp name

How to change scene duration

In each story the camera moves from one scene to another, camera movements and zome in/out are controlled by "Camera Control" layer
You can zoom in/out by changing "Camera Control" layer scale.
Notice that "Camera Control" layer has position and scale keyframes aligned with each scene start.
To change scene duration:
1. Select scene layer and change its duration (increase or decrease)

2. You have to move the next scenes on the timeline to consistent with the duration change you made.
To select all next scenes, click on the next scene layer to select it, then press (Shift) and click on the last scene layer

3. Move all the selected layers to be consistent with duration change.

4. Now you have to move the "Camera Control" layer keyframes to match with the changes you made to the scenes layers
First select all the keyframes then move it to match the start of the next scene layer. you may hold (Shift) while moving to snap the keyframes easily .

How to replace the logo

First you have to import your own logo to the project, press : (Ctrl + I) for Windows (Command + I)for Mac

then select the logo file you want to import and goto Precomps->Logo and open "Your Logo circle-30" precomp

drag and drop new logo inside the precomp you may edit the text or simply hide it

you have done replaceing the logo, this change applies on all logo precomps in preview and in stories

How to replace the music

first you have to import new music track to the project, press : (Ctrl + I) for WIndows (Command + I) for Mac
inside the story comp, click on the music layer
while holding (Alt) key, drag and drop new music over the old music layer to replace it.

Whiteboard Package Rating

5 out of 5 stars from 1 rating of Whiteboard Animation Pack For Promotion

How to render final video

first you have to select work area from the timeline, you can change start and end then press : (Ctrl + Shift + /) on Windows (Command + Shift + /) on Mac to add the composition to the render queue
make sure you select "Best Settings" for render settings, for "Output Module" I recommend H.264
cilck on the file name next to "Output to" to choose where do you want to save your video and you may also change filename you are ready now, press "Render"

Do you think about whiteboard videos promotion possibilities ?

See results

How to install animation presets

Copy "Adleh - Animation Presets" folder to your after effects Presets folder which is located in Program Files\Adobe\Adobe After Effects CC\Support Files (Windows) or Applications/Adobe After Effects CC (Mac).

You can find the new presets in "Effects&Presets" window and use them on layers like any other preset. Just select the layer and double click on animation preset you want, make sure to activate 3d layer check box before you apply xRotation and yRotation animation presets.

Font and Music

Music files used in preview video are not included in package, but you can get them from audiojungle :

  • Feel Good Journey
  • Happy Summer
  • The Cutest Story

The font "Short Stack" is not included in package, it can be free downloaded from here

© 2014 firas1

All suggestions, criticisms and questions are appreciated

    0 of 8192 characters used
    Post Comment

    No comments yet.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)