Categories
Tutorial

How to Create an Animated GIF Thumbnail

How to Create an Animated GIF Thumbnail

Introduction

I received a great email from my friend, Rufus the other day. He makes a YouTube series about his family farm, more specifically he documents the day-to-day life of how his mum runs the farm. 

The email was a mini update about upcoming shorter videos that he’s planning to make. Not only was it a very nicely designed and written email, but it perfectly utilised a GIF thumbnail as a call-to-action to get readers to watch the latest video. Check it out in the video below.

After thinking about how cool the animated GIF thumbnail was, and realising that it made me want to click the video way more than an image would have, I thought “I bet I could recreate that with Vidds”.

So in this article I will breakdown how to recreate this kind of “call-to-action” GIF thumbnail.

For those who prefer watching videos, you can see a quick overview of how I did this in the video below and if you prefer reading your tutorials, continue down the page for all the good stuff.

Creating an Animated GIF Thumbnail

For the first part of this tutorial we are going assume that you have already prepared the video snippet that you’d like to turn into a GIF. If you need to create the snippet first, go ahead and check out this tutorial first and be sure to look at our other “getting started” tutorials too.

TLDR – Quick Overview

  1. Create a New “Square” Video Project in Vidds
  2. Choose “Create your Own” for the First Scene
  3. Add a media element and upload your video
  4. Select “Play Full Video” for the playback option
  5. Add a “Rectangle” Shape Element
  6. Resize the rectangle and adjust the colour and transparency
  7. Add a “Triangle” Shape Element
  8. Adjust the size and colour of the Triangle
  9. Rotate the Triangle
  10. Reposition the Rectangle to the centre of the canvas
  11. Position the Triangle over the centre of the Rectangle
  12. Export using the “switch to gif” option

Step 1 – Create a New Custom Sized Video Project

  • Once you’ve logged into your Vidds dashboard, go ahead and click the “New Video” button
  • Give your video a title
  • Select the “custom” size option and set the dimensions to 450×450
  • Select “Create Your Own” in the scene template library
Create new project - GIF thumbnail
Custom Size Screenshot - Create GIF Thumbnail
How to Create animated GIF Thumbnail - Create Your Own scene

Step 2 – Upload Your Video

  • Click on the “Add Media” icon above the video canvas
  • Choose the “Upload” option
  • Select a file from your device
  • Resize the element to fill the video canvas
  • Trim the clip to the length that you want (recommended 5 seconds, maximum 10 seconds)
Add Media Element Screen shot
Resize Media Element Screenshot
Select Custom Clip & Speed
How to create an animated GIF thumbnail - trim video clip

Step 3 - Add 'Play Button' Overlay

Rectangle

  • Click the “Add Shape” icon above the video canvas
  • Select Rectangle from the dropdown list
  • Resize and position the Rectangle into the middle of the video canvas
  • Set the border width to ‘0px’ on the slider
  • Change the colour to black and adjust the transparency (approx. 65%)

Triangle

  • Click the “Add Shape” icon above the video canvas
  • Select Triangle from the dropdown list
  • Resize the triangle (do this before rotating for easiest control)
  • Position the triangle over the Rectangle
  • Rotate the Triangle 90°
  • Set the border to ‘0px’ on the slider
  • Adjust the transparency (approx. 85%)
Add Rectangle Shape Screenshot
customise rectangle screenshot
Add Triangle Screenshot
customise triangle screenshot

Step 4 - Export as a GIF

  • Click the “Download” button
  • Select the “switch the gif” option
  • Download your GIF
Switch to GIF
Download GIF

If you followed these steps you should now understand how to create an animated GIF thumbnail, and in a matter of minutes no less. It truly is a great way to make your emails more engaging and to encourage your readers to click through to whatever you want to show them!

Give it a try and send us an email so we can see the result. Happy creating!

Don’t forget to check out Rufus and his videos about the farm, the links are below:

Rufus’ Marketing Website
Video series
Farm Website

 

Want to know how to add text to your videos? Check out this tutorial to level up your video!

More of our tutorials

Categories
Tutorial

How to Add Scene Transitions

How to Add Scene Transitions

How to Add Scene Transitions Cover image

Adding scene transitions to your videos is a piece of cake with Vidds, simply follow the steps below to find out how to add scene transitions.

In Vidds there are currently 6 scene transitions to choose from:

  1. Cut 
  2. Fade
  3. Slide
  4. Flip
  5. Blast Out
  6. Blast In

Scene transitions are a great way to increase the production value of your videos and give them that polished professional look. It’s amazing that something so simple can have such a big effect on the end result of a video.

Let’s get started with adding transitions to your videos.

Step 1 - Add a Scene Transition

To add a scene transition, you need to have multiple scenes added to your video project. Once you’ve added your scenes and customised each one in the way that you want, it’s time to add the transitions.

  • Click the “scene transition” icon between scene thumbnails in the scene list at the bottom of the video editor (highlighted with a red box in the image below). 
Scene Transition Icon

Step 2 - Select your Transition

Select one of the Scene Transitions from the list of six options.

  • Hover your mouse over the scene transition you’d like
  • Click to select the transition, once the button turns blue
Select Scene Transition

Step 3 - Set the Transition Timing

  • Click on “gear” icon next to the transition you chose
  • Move the slider left and right to increase or decrease the length of the transition
  • Click “Apply” to make sure your changes are made

Now that you’ve learned how to add scene transitions to your video, it’s time to learn more skills to level up your video creation game. Use the link below to learn how to animate your texts to make your videos look awesome!

Categories
Tutorial

How to Animate Text in Videos

How To Animate Text in Videos

How to Animate Text in Videos with Vidds

Animating text in Videos is one of the most common reasons people want to edit videos online, and Vidds makes it easy! Even better – once you know how to animate text, you can also animate images, videos, and shapes in Vidds using the exact same tools.

How easy? Let’s see!

Templates with text animated already

Before we get started, it’s worth mentioning that Vidds has tons of great templates with text already animated and ready to go. You can select the template (or templates) you like, plug in your own text, and it’s already animated for you.

Our templates are also customizable, which means you can change the animations for each text element to make it animate just the way you like it!

Text Animation Templates

A small sample of our animated scenes. Whether you want video or image content, or minimalist, pure text animations, we’ve got you covered!

Adding some text

The first step is to add the text that you want. Simply click the add text button and Vidds creates a text element for you. Next, update the placeholder text, resize and reposition the text element. You can then change settings like the font, letter spacing and color to make it look great.

On to the animations!

Vidds has 3 animations you can apply to your text:

  • In: How the text animates in
  • Out: How the text animates out
  • Highlight: An animation between the two that can bring the viewer’s attention to the text

With your text element selected, you simply click the dropdown you want to change (In, Out, or Highlight), and then select the animation you want to use.

Additionally you can update the “style” which allows you to animate the text in/out by character, word or line. You can leave this as default to have all the text element animate all at the same time.

Animation Options

Vidds has a list of animations you can apply to your text. We definitely recommend you play around with different options – they can help contrast elements, or even change the feeling of your video.

Here’s a list of the animations:

  • None: No animation.
  • In Scene Down: Moves the text down the entire height of the screen.
  • Fade: Fade it in/out
  • Up, Down, Left and Right: Animate in the direction selected.
  • Down Right: Animate the text down and to the right.
  • Scale Down: Animate the text from tiny to it’s size, or animate it out to a small size.
  • Scale Up: This is a kind of “blast” in or out, where it scales from a large size in to it’s position, or scales up and fades out.
  • Skew Right: Animates the text in right, but skews the text to give it a speedy look.
  • Bounce Up, Down, Left and Right: Just like the other positional animations, but gives them a fun, light, bouncy look.

It’s much easier to try them out than to read about them. But maybe you’d prefer to see some of them in action. Here’s a video showing them off.

Changing the Text Animation Speed

You can also change how fast the text and other elements in your scene animate, and it’s equally easy.

In the scene settings on the left, you can simply drag the Animation Time slider. If it’s under 1 second, it will look fast-paced and speedy, and over 2 seconds or so and it starts to look calm and tranquil.

Mix and Match!

That’s all there is to text animations with Vidds, but the real value comes from trying it out and learning what looks good to you!

Because it’s so easy, you can swap them out, match or contrast them with other elements in your scenes, and find the perfect animations for your videos!

More Vidds Tutorials

Categories
Tutorial

How To: Trimming and Cutting Up Videos Online

Trimming and Cutting Up Videos Online

How to Trim and Cut up Videos with Vidds.co online

Vidds is a simple but powerful editing tool, so it makes sense that we’d have tools for trimming and cutting up videos online – create clips from your videos, or cut videos into multiple segments to play back different parts. It’s amazing how much you can accomplish, all in your web browser!

In this tutorial, we’ll go over beginner to advanced options to play back clips from your videos.

And, as always, while you can use Vidds to make a trimmed version of an existing video, you can also use Vidds to add text and image overlays, use your video clip as an overlay on top of other content and backgrounds, and do cool stuff like add intro and outro sequences!

Video Overview

When you select a video in Vidds, you can choose from 3 different playback methods:

  • Auto: Play back for the length of the scene.
  • Full: Play the entire video.
  • Custom Clip & Speed: Select a custom clip to play.

We have the options to support a variety of use cases. Auto playback is great for backgrounds and stylistic elements, full is perfect if it’s your primary content and you want to play it all. Custom Clips take a little more work, but allows you to select a specific part of the video to play.

You can also use the Media Size option to choose how the video is displayed. Use “Fit” if you want to make sure the entire video is displayed, and “Cover” if you want to crop it to fit into the area.

Trimming Basics

It’s pretty easy to trim your video to play back just the part you want.

  1. If you haven’t already, add a new scene where you want the video to play back. If you’re only going to use your video, you can use the “Create Your Own” option.
  2. If there’s already a Media element, you can click it and select your video. If not, click the Add Media button and resize it to cover the entire canvas. Then select your video.
  3. You can use the Media Size option to choose the Fit vs Cover option.
  4. Now it’s time to trim! Select the dropdown below the video thumbnail, and select “Custom Clip & Speed.”
  5. You’ll see a popup window with the video at the top, and “Clip Selection” below it.
  6. Now, all you have to do is drag the blue (start) and red (end) bar to the location where you want the video to start and end. As you drag the bars left and right, the video at the top will update to show you the selected time in the video.
  7. If necessary, you can change the playback speed to make it play faster or slower.
  8. Once you’re done, you can select the “Clip” button to save your changes.
  9. If you need to adjust the clip, simply select the dropdown under the thumbnail and select the “Custom Clip & Speed” option to open the editor again.

That’s it! You’re all set with the new, clipped video.

Cutting Room: Using Scenes to Combine Multiple Clips

A single clip is usually perfect for most people, but sometimes you need more. Maybe you recorded a long video and want to cut out all but a couple parts. The great news is, Vidds can do this just as well as it can create a single clip!

To add a second clip, resulting in them being cut together, all you need to do is click the “Add Scene” button at the bottom, choose a layout or select “Create Your Own,” add your video to it, and select the second clip using the same steps you used above.

Not easy enough? There’s a simpler option!

You can also go to the scene settings, click the 3 dots, and select “Duplicate.” Now, you just have to select the video element, select the “Custom Clip & Speed” option, and update the clip to the new position, and you’re done!

You can repeat these steps and add as many scenes as you need to cut as many parts of your video together as you need.

Trimming & Clipping Videos - Duplicate scene

More things you can do with Vidds

That’s all there is to trimming videos or cutting them together.

But just a reminder: Vidds is powerful, and you can do a lot more with it. Here are some ideas to spice up your video and give it some additional production value:

Add Intro/Outro scenes.
You can add scenes at the beginning and end to show a little about what’s in the video and add your branding and logo.

Add interstitial scenes.
If you need to cut to different parts of the video, you can add scenes and move them between your clips and cuts. You can use them before cutting to different sections of a video.

Use a custom layout.
In the examples above, we mostly covered the entire video. But you can adjust the size and position of the video, add text or logo/image overlays, or add a background color or image. We also have shapes if you just want to make it look a little nicer or cover up some video blemishes!

More of our Tutorials

Categories
Tutorial

How to Create GIFs from Videos and Clips

How to Create GIFs from Videos and Clips

The Vidds "how-to" on creating GIFs from your videos and clips

Vidds makes it easy to create GIFs from your videos, and does it all in your web browser. You can clip the video, crop out unimportant parts, and resize it. You can even animate text over it!

Vidds is easy to use, powerful, and works 100% online, which makes it great for creating the perfect GIF clip from your videos.

In this post we’ll guide you through how to create gifs from videos and clips.

What is a GIF?

GIF is an animation format (Graphics Interchange Format) that’s been around on the web since 1989 – over 30 years! That explains its popularity and support. Compared to common video formats, it’s larger in size, which is why GIFs are often low quality or low frame rate. It also does not support audio.

Why do people use GIFs?

Considering how large GIFs are, it seems odd that they’re so popular online, but they do have their uses.

Because the format is so old, it’s very popular and works almost everywhere for sharing short clips and funny memes. Most social media sites — Facebook, Twitter, Reddit, and more — allow sharing GIFs easily.

Also, while videos generally don’t work in e-mail clients like GMail, you can add GIFs.

Last, because it loops and always plays in browsers, it’s great for quick clips on landing pages or other website content like blog posts.

We don’t recommend GIFs for all use cases, but it’s definitely a great format for sharing small bits. You can see them in action throughout this page – all of the usage videos below and the example are GIFs!

GIF Creation Tips

There are some general practices you should follow when creating GIFs, mostly due to the size of files generated.

  • Lower video size settings. 1080p may be great for normal video content, but GIFs should generally be much smaller.
  • Crop out the uninteresting bits. This makes it easier to use a smaller video and keep the size small.
  • Clip out the uninteresting bits. Select a few seconds of the video to keep the GIF small.
  • Lower the frame rate. Vidds does this automatically for you – we use 15 frames per second for GIFs, versus 30fps for normal videos.
  • Speed it up. If the clip is a bit slow, you can speed it up so it gets to the point faster (and has the added benefit of making the file size smaller).

Creating GIFs with Vidds

Let’s get started creating a gif. I have a video of my dog playing in a river, and I want to make a clip of a funny part where he dips his paws into water that’s deeper than he expected 🙂

Once you’ve done this, the process is so easy, you can knock them out in minutes!

Step 1: Create the Video

Start by creating a new video on your dashboard. Enter a title, then select Custom for the size to enter a small-ish size (you can resize it later to fit the content better). Last, I chose “Create Your Own” scene since I’ll be embedding my own video and don’t need a design.

How To Create GIFs from Videos and Clips 1

Step 2: Add your video to the scene.

Next, we’ll embed the video into our scene. First, click the Add Media button and then Choose Media button. You can upload your video now or select an existing video you’ve already uploaded.

Last, select the element and resize it to cover the entire video.

How To Create GIFs from Videos and Clips 2

Step 3: Clip your video (and change speed)

Next, you can optionally clip the video to just a small section you want to play back.

With the video selected, you’ll notice a dropdown in the settings that says “Auto: Playback for length of scene.” Click that, and select “Custom Clip and Speed.” That will bring up the clip dialog, where you can drag the start (blue line) and end (red line) to adjust to a specific clip.

Once you’ve clipped it, you can also increase the playback speed if you’d like it to play back faster.

Once you’re done, just click the “Clip” button to apply your changes.

How To Create GIFs from Videos and Clips 3

Step 4: Resize the video to crop out anything you don’t want (Optional)

If necessary, you can resize the element so it’s larger than the video. This allows you to crop the content to just the part you want.

Creating GIF Step 4

Step 5: BONUS! Add Text!

I meant for this to be a quick, straight-forward post, but sometimes, you just want some funny text in your GIFs. With Vidds, you can add text anywhere, choose how you want it to animate, and style it.

Just click the Add Text button on the left, type in your text, and choose the font. There are plenty of other styles you can use, like background color, shadows, and more.

Under the Animations section, you can select the animation in, out, and a highlight. We have a lot of animations to try out, like Up/Down/Left/Right, Fade, Scale, and Skew. Play around and see what looks good.

Creating GIF Step 6

Step 6: Preview your scene and make sure it looks right

Click the playback button (or the preview button in the bottom right) to watch your clip. Make sure it’s playing back what you want.

Step 6 - Preview

Step 7: Download the Gif

If everything looks good, click the Download button to get the video.

Make sure to click the “Switch to GIF” option in the Format section so Vidds generates a GIF instead of an mp4.

Creating GIF Step 7

All Set! GIF Created!

You now know how to create GIFs from your videos and clips that you can upload to social media, embed in an e-mail, add to a web page, or share any way you’d like!

Here are the results from this process. The one on the left is just the video clip converted to a GIF, while the second has some text animated on top.

Creating GIF Step 8.1
Creating GIF Step 8.2