Create Animated GIFs for a Special Promotion

Creating the Okanagan Quiz animated GIFs

These are the 2 animated create animated GIFs GIFs that make the Okanagan Quiz look more professional. This post tells how tocreate animated GIFs.

 

create animated GIFs

 

 


 

 

 

This is the animated GIF that was used in the explanation of how to make a quiz of any type on a WordPress page. Notice how subtle the movement is.

Create animated GIFs for the Okanagan Quiz

create animated GIFsThese two animated GIFs were on opposite sides of the page. They made the page appear more professional.

create animated GIFs

The two animated GIFs had a total of two pictures. When picture #1 appeared in on the left side, picture #2 appeared on the right side and vice versa.

A Keynote Confetti effect was used to transition from one picture to the other.

This is how to create animated GIFs pictured above.

1. Add city picture to Keynote slide

create animated GIFsDrag the right and bottom margins of Keynote so that the height & width are about the same. Add your picture of the city to a Keynote slide. Drag it so that it fits the entire width.

Note that an animated GIF cannot be greater than 2 MB in size. So, it may be necessary to use a program such as GIMP to make the city picture smaller.

2. Give photo confetti effect

create animated GIFs

 

 

Click Inspector icon & give photo a Confetti build in effect that lasts one second. Then give the photo a Confetti build out effect.

 

 

 

3. Drag 2nd picture into Keynote slide

  • create animated GIFsDrag picture of railway bridge into a second Keynote slide.
  • Give it a Confetti build in effect.
  • Then give it a Confetti build out effect.

4. Record Keynote slides with ScreenFlow

  • create animated GIFsOpen ScreenFlow
  • Select first Keynote slide
  • Click Play button
  • Click a few times until finished
  • Stop recording
  • Save video with a descriptive name

5. Copy video clips into clipboard

  • create animated GIFsSelect video clip on your ScreenFlow timeline
  • Move slider back and forth until you see a white segment
  • Right click on clip and click on Split Clips to remove the white area
  • Select the two clips
  • Cmd C to copy them into clipboard

6. Paste into new ScreenFlow document

  • create animated GIFsClick ScreenFlow > New & open a new document
  • Preset is custom with maximum width of 500 px each
  • Click icon in bottom middle of panel to open new document
  • Cmd V to paste clips into new document
  • Move second clip to front of first clip. This will make one picture open in animated GIF #1 at the same time that the other is opening in animated GIF #2.
  • Rename video with same descriptive name with digit 2 after it

7. Finishing touches

  • Watch the entire short video. There will likely be too much time devoted to Confetti effect
  • Use split clip to delete excess
    Confetti.
  • Use icon on left in this timeline image to expand the clips. Then make sure each
    of the 2 videos are exactly the same length. In the example they are 8 and 8 thirtieths of a second.
  • Save each of the videos
  • File > Export
  • Make sure you like the name, click on Animated GIF > Export.
  • In this example your animated GIF will be saved in your desktop.
  • Insert your two animated GIFs on a web page like the example at the top of this section.

Create animated GIFs with subtle radio buttons

This is how to create the Okanagan Quiz Radio Buttons animated GIF.

1. Record quiz with ScreenFlow

  • create animated GIFsStart ScreenFlow.
  • Open quiz.
  • Click the radio buttons starting from A and going down to D.
  • The whole process should be smooth and take less than 6 seconds.
  • Stop ScreenFlow & save with a descriptive name.

2. Export as an MP4 file

  • create animated GIFsChange the margins so that the canvas width is 1920 pixels and the height is barely enough to contain quiz question #1.
  • Export it as an MP4 file.
  • Save it with a descriptive name.

3. Drag MP4 file & photo into Keynote slide

  • Open a new Keynote slide.
  • Using a ruler, drag right edge so that length & height are approximately the same.
  • Drag & drop your new MP4 file onto your keynote slide.
  • Size it so that it fits entire length of slide.
  • Drag photo onto same slide.
  • Give the photo the Keynote Effect of None
  • Give the MP4 file the Keynote Effect of Start Movie
  • Size it so that it fits entire length of slide. Save with descriptive name.

4. Create animated GIFs with ScreenFlow

  • create animated GIFsOpen ScreenFlow.
  • Click the Keynote Play button.
  • Record the video until the radio buttons have been filled starting from the top & going to the bottom.
  • Stop ScreenFlow.
  • Change the canvas to 500 x 500 pixels.
  • You will like have to reduce the height of video to fit into canvas.
  • Save video with a descriptive name.
  • Export as animated GIF.

Special notes about size

You will not be able to import an animated GIF into a WordPress page if it is more than 2 MB. If your animated GIF ends up being more than 2 MP, you may want to use GIMP to make that photo smaller. Then remove your old  photo from Keynote and add the new one. From that point, reproduce whatever is necessary from points 3 & 4 above.

 

 


Peter Enns has been developing websites since 1996. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.



Better Videos & Animated GIFs, 20 Advantages

 More entertaining videos

Make better videos from your smartphone clips. Make more entertaining promotional videos.

You can use Mac-specific programs like ScreenFlow & Keynote. If you have a Mac, there are 20 advantages you have when making videos and animated GIFs. Then you can

1. Record entire computer screen including all movement

For example, make a presentation with Keynote or Powerpoint. Make sure there is lots of movement of images & text. Record the movement with ScreenFlow.

2. Zoom in on recorded portion of screen

After recording the entire screen, you can zoom in on movement on the screen. Delete everything else.

 


Click here for free tutorial on making more entertaining videos.

3. Use timeline to edit video

Below your video, you will have your editing timeline. Have all elements of video on a timeline. Manipulate elements to edit your video.

 

 

4. Make music soften during spoken word

Using a ScreenFlow feature called Audio Ducking, you can cause the music to automatically be quieter during each spoken portion. When the spoken portion stops, music will get louder.

 

 

5. Add background image using a green screen

Film your subject in front of a green screen. (For an amateur video, it can be something as cheap as green bristol board.) On ScreenFlow timeline, add interesting background movement below clip of main subject. Using ScreenFlow, remove green colour electronically.

6. Fade background image for  continuity

 

Fade background of a prominent image in your video. Have text moving over that image for an introduction or exit clip.

 

7. Add interesting text movement effects

There are 29 different ways in which to have your text moving in into your video. The top one is Squish. The bottom one is called Flame.

8. Animated GIFs

Get your message across with a simple short animation playing over and over again. This can be placed in a web page or into an email. An example is the text effect animated GIF above.

9. Record computer audio or microphone

You may want to record someone else’s finished video such as a YouTube video. In that case, you would use the computer audio. If you wish to add your own voice to a video you are making, you could use the built-in microphone.

10. Record yourself (both audio & video)

 

Use the built-in camera AND microphone in your Mac for recording yourself speaking in one of your videos.

11. Add callout areas

In order to call attention to a particular part of a video, you can temporarily zoom in on that area. This can be useful for things like getting more engagement on Facebook.

12. Add closed captioning

Adding another dimension to a video can help people grasp what you are trying to say. Adding closed captioning can help people follow what you are saying. It can also help with SEO.

13. Export as an MP4 file

You may want to upload a video to a Facebook page like the example here. It must be in the MP4 format. (MP4 is a media container format, storing video, audio, subtitles and images. This type of file usually has a .mp4 file extension.)

This is the type of file you would usually use for emailing someone a video.

14. Publish to YouTube, etc.

After you finish your video, use the ScreenFlow software to quickly publish it to YouTube, Wistia, etc.

 

15. Improve your blog

Bring new life to your blog by adding the occasional video or animated GIF. For instance, you can give

  • Product reviews,
  • Skype interview recordings,
  • Product demonstrations or other sorts of
  • Entertaining, engaging content.

16. Market promotional videos

Suppose you are trying to promote a product you are selling. You can create a promotional video with

  • Animations,
  • Images,
  • Text,
  • A soundtrack.

Then you’ll get a polished-looking video that helps sell your product or company.

17. Slow motion

 

You can make a video go in slow motion.  The animated GIF to the right has two images of the same juggler.  One is going at quarter speed.

18. Two or more videos in one shot

To create the above video, I created two MP4 videos.  One was regular speed and the other was slow motion.  Each were half the width of most of my videos.  Then I dragged each of the MP4 videos from my desktop into a single Keynote slide.  Then I recorded it with ScreenFlow & saved it as an animated GIF.

19. Video transitions when changing topics

When changing topics in a video, you might want to overlap two clip snippets and insert what is called a transition.  That is an unusual change to the screen to indicate to the viewer that a change is happening. For instance, you might want to indicate that some time has lapsed between events.

There are 38 different transitions from which to choose.

20. Add solid shapes

In order to emphasize words, numbers, etc., you can add solid shapes such as the ones you see in this example.

 

 

 


Peter Enns is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

This blog post as a YouTube video

 




Peter Enns is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

Logo Design, Begin with Descriptive & Simple

Logo creation

logo designAs far as the logo design is concerned, I want it to be simple and descriptive. I had to create a logo for 7 Day YouTube.
This is a free online course teaching people how to make their own YouTube videos. There are 7 lessons — one for each of 7 days. The idea is that after 7 days, they would be able to make a variety of entertaining YouTube videos.

Descriptive element of logo design

Let’s talk about the descriptive element of logo design first. The 3 most important words in the description of the course are 7, days and YouTube. So, I’ll make days into an adjective and make a logo combining 7, day and YouTube.

Simple

There are only 3 graphic elements. That also gives us the simple. With 3 simple elements people are being told that, within 7 days, they can learn how to make YouTube videos.

I used a free photo editing program called GIMP. That is a program similar to Photoshop.

Font information

After much experimenting, I came up with a large 7 with Day and YouTube printed on top of it. Following is the information about the fonts:

  • 7 — Name: Phosphate
  • HTML colour notation: 9a0f0f
  • Size: 400 pixels

 

  • YouTube & Day — Name: Muna PUA Heavy
  • HTML colour notation: 11703c
  • Size: 45 pixels

How to create that light red 7

Here is a YouTube video demonstrating how to create that light red #7 with GIMP.

Static image vs. animated GIF

logo designI made my first logo using GIMP. The process is described above.

The words YouTube & Day were created using the Muna PUA Heavy font.

Then I decided to create the same logo as an animated GIF with a website URL moving in at the bottom. This created a minor problem.

logo designI used Keynote to create the graphics. Muna PUA Heavy font is not available in Keynote.

logoSo, I had to search the Keynote fonts to find one that was similar.

I found one called Stone Sans ITC TT. Can you tell the difference?

Moving logo design info

The green text cannot be moved into Keynote as PNG files. The invisible background will have changed to white. So, it is necessary to create the green text over again with Keynote.

There are 4 graphic components in the animated GIF above:

  • Red #7 with a white background
  • Day
  • YouTube
  • bit.ly/7dayyoutube

Here is the descriptive information for each  component:

  • logo design#7
    • Because it is the background image, you can use the original PNG file
    • Spin Action to 50% for 1 second
  • Day & YouTube
    • Font: Stone Sans ITC TT
    • Size: 54 pixels
    • Colour: Green from colour picker
    • Blast effect for 1 second
  • bit.ly/7dayyoutube
    • Gill Sans 42 point font
    • Fly In effect from right to left for 3 seconds

 


Peter Enns is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.


Animated GIF onto Facebook Timeline

Slightly convoluted

animated GIFYou can add an animated GIF to Facebook. However, getting it there is not as smooth a process as uploading an image. The process is sort of convoluted:

  1. Create your GIF with maximum dimensions of 500 px.
  2. Add it to the web page to which you want people to go when they click on it.
  3. Highlight and copy the URL of the animated GIF in the source code of that web page.animated GIF
  4. Log into giphy.com.animated GIF
  5. Click on the purple Upload button.
  6. Paste the URL of the animated GIF into the white box. It will automatically be saved. You will be presented with a new page.
  7. Enter comma-separated tags that people might use  to search for a page such as this one.
  8. Into next white box, add URL of page from which you copied the source code snippet.
  9. Click Upload GIFs.animated GIF
  10. Click the Facebook button.
  11. Comment and then click  on Post to Facebook button. (It might take a few clicks or a few seconds to show up.)
  12. Go to your Facebook page to check your work.

 Animated GIF not automatically show up

The animated GIF does not automatically animate on Facebook. You have to click the white arrow.

That will take the visitor to the animated GIF playing on the Giphy website.

Note the box below the social media buttons. It gives you some Iframe Embed code. Copy and paste that into the source code of any web page in which you would like to see that particular animated GIF.

I embedded it into this blog post.  I changed the dimensions to 660 x 555 pixels. You can see it a little further on down this page.

If you do nothing else, it will go to the Giphy website when your visitors click on it.

I could have changed it to go to the page of my choice when people click on it.  However, out of courtesy to Giphy, I left it the way it was. However, to help people understand “how to make amazing YouTube videos”, I added a link to the course below this animated GIF.

Free 7-day YouTube course

YouTube video

Watching the short video below will help you understand more from this blog post.

 


Peter Enns is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.