Summary of this page
Before reading this page, watch this 2 minute video to get an understanding of what image words are all about.
Introduction to image words
Start with GIMP
Make a Google search something like this: how to get a free copy of gimp for mac . Download and setup GIMP.
Now we will show you how to make an image word mask like the one in the animated GIF above.
- The size of the videos we make is 1920 x 1080 pixels. So, go to File > New.
- If the size given is 1920 x 1080 px or something in that proportion, click OK.
- Click the text tool and make sure it is set at a font you like.
- Type in the title such as How to Make Image Words.
- Select all of the letters and manipulate the Size section so that the title fills most of the page.
- Right-click in the right-hand column, and click Merge Down.
- Right-click again in the same column and select New Layer.
- Create a Transparent Layer.
- Merge Down.
- Click on the Fuzzy Select Tool.
- Click on a letter and then press Delete. You will notice that the area where the coloured letter was is now transparent.
- Do that with every letter.
- Click File > Export As > OK > OK.
- Before clicking OK, give it a descriptive name such as How to Make Image Words Mask.
The right size of animated GIFs
- Go to the instructional web page on how to make animated GIFs.
- In the ScreenFlow section below, you will record one of the animated GIFs from that page.
- Cmd/shift/4 to make a still copy of that GIF.
- Move the still copy into the upper left-hand corner of a Keynote page to measure it in pixels.
- Suppose it is 155 x 130 pixels.
- However, suppose you want to get 3 copies of the GIF in a row. Then you decide the GIF should be 350 pixels wide.
- How high should it be? Remember your algebra. Your new width should be 350 px and you old width was 155 px.
- So make an equation with new as the numerator and the old being the denominator. The proportions of the width and height will be the same.
- You must make 2 fractions with the new being over the old. The new height is h. So, you multiply each side of the equation by 130.
- You get out your calculator and find out that the new height will be 294 px.
Getting animated GIFs with ScreenFlow
- Open ScreenFlow
- Record that part of the page that has the girl throwing the orange
- In ScreenFlow click your Canvas Size icon. In this example here it will be 350 x 294 px.
- In the upper right-hand corner click Video and then move the Scale button so that the animated GIF fits exactly into the box on your screen.
- Using the instructions on the animated GIF page, change the animation into an animated GIF.
Download and set up a free copy of Keynote. You will use Keynote mainly to make online videos. Online videos measure 1920 x 1080 pixels. Therefore the size of your Keynote page will be in the same proportion as those 2 numbers.
For Keynote I usually use numbers that are exactly one half of the online videos. So, I move the corners of my Keynote screen like the examples here. The height is 540 px and the width is 960 px.
- Insert an animated GIF into the upper left-hand corner of the Keynote screen.
- One third of 960 is 320. So drag a corner of the GIF to make it 320 px wide.
- Cmd C to copy the GIF into your clipboard. Cmd V to paste it beside the first one.
- In the animation you see here, note how the digit 4 shows up as you are moving the fourth copy into position. That indicates the order in which the videos start as you are clicking the Play button.
- Copy the mask onto the Keynote screen.
- Size it so that it is the same height as the 2 images.
- Slide it left so that most but not all of it covers the images.
- Action > Add > Effects > Move.
- Move the right end point of the red line to the left like you see in the animation above.
- Drag the right end point so that the mask is almost but not totally beyond the images.
- Drag the left end point so that the mask totally covers the images.
- Start recording the screen with ScreenFlow.
- In Keynote, click Play and then move the cursor over to the right so that it does not show up in the video.
- Save your ScreenFlow video with a descriptive name.
Go to this index of all