Start Free Trial Now

Author: Edward.Vidds

Categories
Tutorial

How to Create an Animated GIF Thumbnail

How to create an animated GIF THUMBNAIL
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

Getting started with Vidds

March 14, 2023

Getting Started with Vidds The Dashboard – “Create” Section Above is the Create section – here you’ll find the most common videos you can create with Vidds.

Read More »
Categories
Tutorial

How to Add Scene Transitions

How to Add Scene Transitions Cover image
How to Add Scene Transitions Cover image

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!

Learn how to animate text in your videos

Categories
Blog

How our Video went Viral on Reddit

How our video went viral on reddit cover image
How our video went viral on reddit cover image

How our Video went Viral on Reddit

How our video went viral on reddit - screemshot

How I took the #1 spot in r/bitcoin

N.B. Don’t read this if you’re not willing to experiment and take some risks with your Reddit account.

Growth hacking is hard, and marketing on reddit is even harder. Reddit users are exceptionally savvy to spotting that wolf-in-sheep’s-clothing hidden marketing message and they don’t take well to them.

It’s also difficult since “open” subreddits don’t bring the value you’d expect. Turns out that everyone knows they’re about self-promotion and posts there rarely perform well.

The holy-grail is the large, active subreddit where your post has the opportunity to go viral and get shared around other subreddits.

Viral video post - subreddit member info

The Viral Formula

So, how did I manage to get a video to 5.5K upvotes and 304 comments in 24 hours?

  1. Identify an active subreddit where videos perform well
  2. Pick a culturally relevant topic that will resonate with this audience
  3. Create a meme that includes humour and a truth about this community

The Specifics

1. Finding the right subreddit shouldn’t be too hard, you’re looking for a large number of members and a significant amount online at any one time. I chose r/bitcoin which has 2.7m members and upwards of 10k online at any given time. Another thing to look for is if this subreddit is posting a lot of video content and how well those posts generally perform. You want to see upvotes in the thousands and comments in the hundreds from previous posts, and these kind of numbers need to be the rule not the exception. It should also be a subreddit that contains your target audience

2. Reddit is a community which has its finger on the pulse, it’s exceptionally culturally relevant and this is reflected in the posts that perform well. It’s important to angle your post at something that is important to this audience right now. For my post, I highlighted the volatile nature of bitcoin and did so a time when a lot of people were starting to join the crypto movement and not only this, it was during the “bull-run” up to Bitcoin’s highest ever price.

3. Memes distill a feeling, emotion or sentiment that is experienced by a set or subset of society into a piece of short-form digital content, often an image or video with accompanying text. I created a video that utilised a scene from a well known film where a family ride a rollercoaster. I added the caption “When you finally buy into bitcoin”. This meme had multiple layers that would speak to different people.
– The visual comparison of the bitcoin journey to a rollercoaster ride
– The caption providing context and humour to the current bitcoin situation
– The famous clip itself creates nostalgia and makes people reminisce (John Candy was in the scene)

Top Tip. Include your logo as a faded watermark or as final scene to bring some brand awareness and give yourself credit when the video is shared around

Takeaways

This strategy worked for us in this subreddit because our product helps people create videos and memes so we are specifically targeting active audiences that enjoy memes and video content and are therefore likely creating this kind of content themselves. So it’s important to find subreddits where the members would actually have use for your product or services.

This tactic boosted my karma to over 4.0k in 24 hours which gives a lot of karma juice to use across the Reddit platform.

The increased traffic was noticeable from this experiment but it didn’t blow us away, I think if we’d picked a more video editing or content marketing focused subreddit we might have seen better results. But the increase in karma has been exceptionally valuable in terms of social-proof across my other posts and comments since (not sure if I’ve just got better at creating engaging content or if this has helped?).

 

See the original post here.

More from our video marketing blog

Categories
Tutorial

How to Animate Text in Videos

How to Animate Text in Videos
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!

Learn how to create a GIF from your video

More Vidds Tutorials

Categories
Tutorial

How To: Trimming and Cutting Up Videos Online

Trimming and Cutting Up Videos Online
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!

Learn how to add text to your videos online

More of our Tutorials

Categories
Blog

Top Video Trends and Ideas 2021

Top Video Trends and Ideas 2021
Top Video Trends and Ideas 2021

Top Video Trends and Ideas 2021

A complete guide to the top video trends and ideas for 2021

It’s been true on the web for 10+ years: If you want to make money online, you need to learn how to capture, and keep, attention.

We’re all learning how to do it consistently. Whether it’s on social media, a landing page, product page, advertisement, or YouTube, the goal is always the same. Get someone’s attention quickly, then make sure the content engages them enough so they hang around to see what you have to say.

Videos are definitely at the top of the list now. Even a plain text video with the exact same content you’d put in a post or page copy catches the eye with movement, and it can easily be augmented with images and videos. You always know exactly how it will look to every user.

So what are the top video styles early this year?

E-Commerce Product Videos

Close to my heart, from working with Shopify store owners, are e-commerce product videos. When I see a product online, the first thing I do is look for a video. Whether it’s a pair of socks or a high-end laptop, I want videos that tell me about the product.

Generally, marketers say to start with the benefits the product provides – how it improves the purchasers life. Luckily, with video, you can do that and link it to things like quality, comfort, and specifications.

An opening scene can be used to intrigue the viewer using questions or a statement with a solution. Use media, whether an image or a video, to intrigue them by showing part of the product, or blur/darken it as a background.

If you use high quality materials, be sure to highlight it in your video – just a single close-up, in-focus image or 2-3 second recording can work wonders on convincing a viewer that you backup your claims.

Have happy purchasers? Show testimonials! New to the industry? Create quotes from you or your employees that show you know what you’re doing. And if at all possible, show a human face – it gives a huge boost to credibility!E-Commerce videos do a few things really well: They are fast attention grabbers, they build trust and authority, and they get viewers interested enough to see what else is on the page – the product information and Buy buttons.

Product and Service Explainers

We like to think that our tagline is enough to get people to read what’s on our landing page, but that visitor may have just looked at 10 similar products, and their mind might’ve turned to goo.

If there’s one way to overcome that, it’s with video. You can easily mix text, images, audio, and video clips together to make your explanation clear and concise.

As usual, you can make a clear problem statement or question that speaks to your visitors, and affirm that you can solve it.

Follow it up with clear examples of it being used, the results it provides, how it benefits them, or other pertinent information.

Just like e-commerce, quotes and testimonials always help inspire confidence with social proof.

Don’t worry if you can’t fit your entire app, service, etc, into a single video. Hit the high points so they are encouraged to find what they need on your website.

Industry News and Editorial

A social media account that is just trying to sell something is hardly social at all! Talking about your industry and interests helps remedy that.

Maybe there’s some new tech you’re using where you can explain how it makes a product more precise, last longer, or cost less. What about exposing issues that you believe should be addressed? Is the industry making progress to be more clean or promote social welfare?

News and editorial content can help keep your followers interested in what you post, rather than feeling worn down.

And if you like, you can use it to encourage comments. It’s always nice to see “What do you think about this?”

Behind The Scenes

We live in a crazy, inter-connected world, and that drives all of us to seek out information about what we care about.

A behind the scenes look at part of a process, a quick explanation, or even catching a glimpse of employees or CEOs can make us feel more connected to who we buy from or listen to, and helps humanize you.

Keep watching this space. While some strive to show an almost robotic public face, customers are increasingly seeking out authenticity.

Inspirational Quotes and Stories

Just like the behind the scenes style videos, inspirational quotes and stories connect us to those we’re following and purchasing from. It shows a human side.

These style videos may not be new, but they’re still very effective.

To some, inspirational quotes just seem like a cheesy poster on a wall, but if you get the tone right and hit at the right time, they can truly change someone’s perspective, and do exactly what they say – Inspire them to do something.

Stories may have some of the same effects, but they can also be used to simply engage your social media followers and help give them a reprieve from what is often a feed of worries and cynicism.

If you’re the one who consistently brightens someone’s day or inspires them to action, they’re going to be fans for a long time to come.

Curiosity, Questions, and Thinkers

Sometimes, we don’t just want to have a horde of followers, but also want to learn from them, and show that they’re engaged with you to someone new.

Asking questions, hinting at a solution (or multiple solutions), and encouraging curiosity can trigger the “I. Must. Respond.” response.

Visually demonstrate a problem you have and show some potential solutions. Ask what their favorite feature is, or what their biggest problem is with a product, industry, etc.This is a quick way to get to the “talk to, not at, your audience” frame of mind. Video is the icing on the cake that gets them to stop and think instead of scrolling past.

Content/Podcast Clips

The next cliche to get through is “show, don’t tell.” Especially so if you’re a content business. These videos are often simple and easy to produce.

Take existing content, add a clip to a video, maybe an intro/outro scene, and you’re done! Make sure it’s a great clip – if you show a clip of the dull parts so the juicy bits are buried deep, somewhere else, they’re more likely to think you don’t produce interesting content.

But it’s also fine to cut out the resolution, or the most exciting part. Cliff-hanger dramas are being mass-produced now for a reason. Our version of “In the next episode…” is “Listen to the full podcast episode” or “We’ll show you exactly how this is solved in our full course!”

Conscious Business - Forward Thinking

As has been mentioned already, your brand has a running equity with your users on social media and elsewhere. Is the end result of watching or reading your posts a feeling of despair, guilt, and anguish? No way! No matter what happens, you want your followers to feel happy, excited, or up-beat about how you’ll help.

One way to do this is to show you have a conscience. Similar to other methods of giving your business a touch of humanity, this shows that you care and you want to give back.

Obviously, depending on your audience (or audiences!) and culture, you can do this in a myriad different ways. Greenness, serving your locality, helping individuals, etc, there are plenty of ways to highlight that you are looking forward to great things to come.

Miss something?

Let us know if we missed a key trend or style of video that you think is going to be popular in 2021. This is isn’t an exhausted list and we love the opportunity to add to articles and learn something new.

Conclusions of the top video trends and ideas 2021

The key takeaway for 2021 video trends and ideas is that it’s going to as important as ever (if not more so) to engage your audience with your authentic voice.

In the vast ocean of content it’s more and more difficult to stand out from the crowd. People are over-exposed to videos and they want to see content that resonates with them and their beliefs. 

So whatever video content you end up creating, make sure that it speaks to your values and gives your audience the opportunity to engage with you at a level far below surface impressions.

Discover the best stock video sites of 2021 to help you produce content

More from our blog:

Facebook Ad Video Sizes

Facebook Ad Sizes

February 1, 2021

Facebook Ad Video Sizes Up to date Facebook Ad Video Sizes Facebook Ads are a powerful tool for any brand or business. Not only can

Read More »
Categories
News

Vidds News February

Vidds News February

Ed and I (Andrew) did a lot in the early days of 2021 to prepare Vidds for launching to a wider audience. We’re really excited with what we’ve done, what we have planned, and what Vidds creators will be able to do!

First up, we finished a small beta round of around 25 users. We received some excellent feedback and saw some cool uses of Vidds.

That was a bit short-lived, because we were already planning a redesign! In general, we feel that a redesign isn’t a good use of time without substantial feedback, but we had some long term problems we wanted to address…

The Big News Part 1 - A powerful new editor!

The template system we launched with was very limited. We had around 10 core templates that were hand-written in JavaScript, and we made small extensions to them to create around 40 scene designs for creators to choose from. We needed something more flexible, because writing code to create a new scene wasn’t sustainable, and it felt too restrained and limited. Our top comment during beta testing was: “Can I move this text (or image/video) somewhere else?” While we did extend the code to choose a general location for some elements, we wanted drag-and-drop for our creators!

So we went from a super basic editor where you had a couple elements you could change, to a fancy new editor where you can add and remove elements, drag and drop to reposition and resize, and even customize each animation!

Before

Vidds February News - Old editor

(Before: 3 elements, little movement)

After

Vidds February News - New editor

(After: unlimited elements, custom positioning and animations)

There is an incredible difference already. Not only can you customize scenes, but our ready-to-go designs have much more variety! We are so excited with the new designs available, and how easy it is for us to add new ones!

Pre-designed Template Video editing

(From minimalist to complex, we think it’s much easier to find a fitting design and customize it now)

The Big News Part 2 - Audio and Live Video Playback!

We’ve been wanting to build this for a while, but finally got around to it – you can now include audio from the videos you embed! Whether you want to record a quick message on your phone and embed it as a circle popup in a scene, or record a screencast or other full-size video with voice, you can now do it within the app.

In order to do this, we also needed to switch away from our old, slow, inefficient video playback method and go to live video playback. The difference is night and day as you preview a video and see the playback perfectly instead of jumpy individual frames.

This makes our video Preview button an almost perfect playback of what you’ve created (as long as your Internet connection keeps up).

With all of this smooth playback and audio support, it also became important to control the volume of background audio and the videos you embed.

Vidds February News - Audio Support

And there’s more!

Here are a few additional tools we’ve added to Vidds.

  • We’ve done a huge redesign of the website to make it easier to understand what we do.
  • We got around to building payment plans.
  • We release a new renderer that can be 2x or more faster, and more to come in render speed!
  • Tools to manage your uploads and keep your media library clean.
  • Added powerful options to control how a video plays back:
    • Auto-calculate to play the video as a “background” for your scene.
    • Full to play the entire video
    • Custom Clip to select a clip from the video and change the playback speed.
  • Added shape elements so you can accent your designs with circles, rectangles, and triangles.

A Parting Word

We have so much more in store!

Early on, we invested a lot of time in creating a powerful underlying core for Vidds, so now that we’re seeing what users need, we are developing new features quickly! And we’re not building features for their own sake – we want to enable creators to do more with the Vidds editor!

You can sign up for a free account to see just how it works, or follow along by subscribing to our blog and newsletter.

Start creating awesome videos now!

Categories
Blog

What is an online video editor and how does it work?

What is an online video editor and how does it work? Cover
What is an online video editor and how does it work? Cover

What is an online video editor and how does it work?

A complete guide: Discover what an online video editor is and how does it work

If you’re a small business, you might be thinking a lot more about videos these days. They engage viewers, show authority, social media companies promote video content, and they look great in a feed. Whether it’s on social media, landing pages, product pages, or blogs, videos add a unique and satisfying element to content.

Large companies pay hundreds of thousands of dollars for ad campaigns and creative content, which usually end with videos. But we don’t have that kind of budget, so we need a way to <link? create simple content ideas> and bring them to life on a budget.

Desktop video editors are complex beasts (like we say, you shouldn’t need a phd to create great video content), and online video editors are bringing easy to use tools to market quickly.

We want to make creating videos just as easy as creating social media images and graphics.

At Vidds.co, we focus on making it dead simple to complete these tasks. Here are some of the things Vidds is great at, and all accomplished online, in your browser:

  • Creating videos without video content. Making it easy to animate text and images into beautiful videos.
  • Clipping your video content. Take a video from your phone or camera, and clip it so it only plays back the parts you want.
  • Combining both of the above. Using your video clips and content, mixing it with text, images, and designs to make professional content.
  • Beautiful, customizable scenes. Pre-designed scenes that look great and highlight your content in unique ways, animated to fit together.

The problem is, most online video editors require you to learn how to use timelines, which also take a lot of time to get just right. Or, alternatively, they have nice video designs but have absolutely no flexibility beyond changing some text or images.

At Vidds, our goal is to build a web-based editor to make most things easy, and the hard things possible.

So now you know what an online video editor is, how does it work, exactly?  We want to show you just how easy it is to create a video, right in your browser!

Starting with scenes

We break up each video into “scenes.” This is just a list of each part of your video, like an intro scene, your content, outros, and more.

We have a ton of predesigned themes that look great, but each one is customizable so you can change text, images, videos, colors, fonts, and more. You can remove elements (text, videos, images, shapes, etc) that you don’t want, and you can also add more elements if it needs more style.

Pre-designed Template Video editing

(A sample of some of the designs in Vidds)

It is crazy easy to work with Vidds because of the scenes. We auto-calculate how long it should be based on the videos and text, and make it really easy to add as many scenes as you want to get your point across.

If you don’t need a design and just want to include a video or clip, you can use a Custom design, add your video, and resize it to cover the full canvas.

That’s all I need to know about "What is an online video editor and how does it work?"

Yeah, kind of! It really is that easy to use Vidds to create videos. Add scenes, customize the content, and you’ve got yourself a well-crafted video!

It’s not often you can just drop in new content and an editor knows what to do with it, and we’re extremely excited to see what everyone does with our editor.

But like I said above, while we aim to make most things easy, we also want to make the hard things possible. The features of Vidds don’t end here.

We’ve taken all of the common video tasks and made them as easy to take care of as possible!

Clipping/Trimming Videos

We have 2 clever ways of integrating videos with your scene: If you’re adding a video as a background or stylistic element, you can set the playback to “Automatic” – so it just plays back the video as long as the rest of the content in the scene.

If it’s the primary content, you can tell it to play back the entire video, so the scene will last as long as your video.

But there’s one more. Say you’ve recorded a 1 minute video, but there’s only a 10 second clip in the middle that you want to display. We have a really easy clip tool to do just that!

Online Video Editor 2

Background Music

We have a curated list of background music in various genres to fit your video, so you can give it that extra style. You literally just click through our music selection to listen, select the one you like, and Vidds adds it to your video!

What is an online video editor and how does it work? 3

Logo Overlays

If you want to show your logo through your entire video, we also make that really easy! It’s just another setting – choose the image, select the palcement (and adjust the size or offsets if you need to tweak it a bit) and you’re set!

What is an online video editor and how does it work? 4

Audio Mixing

Audio mixing sounds complicated – you’ve got background music that’s playing too loud, or you have multiple videos in different scenes and one is louder than the other. You’d think that’s a pain to fix, but we provide a volume control for each video or audio track so you can adjust it, then play it back to make sure it’s just right.

GIF Support

Need to make memes, short content, or videos to share in an e-mail? No problem, when you click to download your video, just switch it to GIF and we’ll do it for you! Instant shareable video content.

Curious to discover exactly what Vidds can do? Find out here!

More great blog posts:

Categories
Tutorial

How to Create GIFs from Videos and Clips

How to Create GIF from Video Cover Image
How to Create GIF from Video Cover Image

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

Enjoyed this article? Check out our post on "How to make videos when you don't have content"

Categories
Uncategorized

How to add text to a video

How to Add Text to a Video Cover
How to Add Text to a Video Cover

How to Add Text to a Video

Adding text to a video is easy in Vidds.

Often, you’ll simply select one of our existing scenes, edit the text, and make some tweaks to the style. Here, we’ll go over adding and editing text elements step by step so you know what’s available and how to create new elements from scratch.

Adding Text to a Scene

Let’s jump right in by adding a new text element. Simply click the “Add Text” icon at the top of the video canvas to add a text element to your scene.

Add text to video screenshot

Changing Text

Once you add the Text element, you can type or copy in the text you want to display, simply input it in the box at the top of the configurator on the left.

Edit text - Add Text to a Video

Positioning and Resizing the Text Element

You can click and drag your text element to position it wherever you want it in the scene. You can use the circle handles to resize as well. As you move and resize, it will snap to the sides of the video (or other elements in your scene), and you’ll see a red line showing what it’s snapping to.

Resize Text Box - Add text to Videos

Styling the Text

With your text element selected, you’ll see the most common style options at the top. Click on the font name to change the font, use the Size dropdown to change the font size, and click the “T” with color block to open the color selector to change the color.

Update Text Styles - Add Text to Videos

Two things to note: The color picker has a transparency slider at the bottom. If it’s all the way to the left, the text will be invisible. All the way to the right and it will not be transparent at all. The second thing to notice is the “HEX value” – the box with the #0045FF in the image above. This is a short code you can copy and paste to other elements to reuse the same color.

Aligning the Text

Depending on where your text is in the scene, you may want it aligned to the left, center, or right, as well as the top, middle, or bottom. You can simply click the Align button and select the new position. Also see “Padding” below to add some space.

Alignment

Changing Letter, Line, and Border Spacing

You can also experiment with spacing to add additional style to your text.

Letter: Add or remove space between each letter in your text. Below, set to -6px, it has a nice compact look, while sliding it greater than 1 pixel will give the text a bold, spread-out look.

Line: Just like the letter spacing, you can increase or decrease the space between each line by dragging the Line Spacing slider.

Padding (Border): You can add space between the element outline and where the text starts with the Padding slider. This makes it easy to drag text elements to the corners and sides of the video, then space the text away from the edge.

Spacing

Adding Text Shadows

Shadows are useful to stylize your text and help it stand out from the background. By default, you’ll see “No Shadow – Add”. Click the add button to add and customize the shadow. Choose a color (including transparency, if you’d like less of a shadow).

Use the Horizontal Offset slider to move the shadow left or right and the Vertical Offset to move it up or down. The Blur slider is used to adjust between a sharp, solid shadow or a soft, diffused shadow.

To remove the shadow, select the “X” button to the right of the Settings dropdown.

Add text shadows in a video

Animating Your Text

The point of video is movement, and we provide a number of animations you can apply to your text. Below the Animations header, you’ll see 3 dropdowns: In (how the text moves into the scene), Out (how it leaves the scene), and Highlight (an animation to bring attention to the element in the middle).

There are so many animations, we won’t explain each one here. They animate based on position (left, right, up or down), fade the text in, or scale it up or down. We also have some “Bounce” animations for a more fun and friendly movement.

animate text in a video

They usually look great in any scene layout, but you can experiment by selecting an animation and pressing the play button to watch and find the perfect animation for your scene.

Container Background and Rounded Borders

You can add a background color to your text element by selecting the color circle and choosing the color you like. You can also adjust the transparency slider to allow it to blend into the background.

You can also add rounded corners using the “Border Radius” slider.

Text background and borders in a video

Removing Text and Making a Copy

If you don’t need the text element anymore, you can click the trash icon at the top to delete it.

Alternatively, you might want to use similar text and styles for another element. You can click the duplicate (2 squares icon) at the top to create a new text element with the same settings.

Duplicate or delete text in a video

Positioning

In most cases, you can just drag your text wherever you want. With the help of snapping, it will likely be in the right place for you. But you can also use the Position dropdown at the bottom to enter an exact location.

The locations are percentages, so 0% is at the left/top, and a width or height of 50% is half of the width or height.

position text in a video

Showing your Text Above or Below Other Elements

When your text overlaps with other elements, you may need to change it so it is displayed above or below other elements. 

Element Layering - Add Text to Videos

You can do this within the “Element Order & Timing” Tab at the bottom of the configurator, simply expand this section by clicking the arrow.

Here, you’ll see a list of the elements within the scene. To move an element, you can click the drag icon (6 dots) and drag it to the up or down the list.

Elements at the top show at the front of the scene, elements at the bottom are shown at the back of the scene.

This should cover most of the configuration tools available to you with text elements. We’re excited to give you the tools to bring your visions to life!

Common Problems and Solutions of Adding Text to a Video

Still having trouble? Here are some common problems and fixes.

I can’t see my text.

There are a few possible reasons for this:

  1. The text element is hidden behind something else. In the scene settings, you can drag your text element to the top of the list to fix this. See Showing Your Text Above or Below Other Elements above.
  2. A color may have been set to transparent. Transparency allows some or all of the background to show through. In the text color at the top, make sure the transparency slider is on the right so it will be visible. See Styling the Text above.
  3. The element has been moved outside of the video. It’s possible to accidentally drag an element outside of the video canvas. You can click the element in the Element list in scene settings, then use the Position section at the bottom to reset the Left/Top position to 0 (zero) to update the location.

My color isn’t showing up.

This is usually because of the transparency slider. See Styling the Text above to make sure it’s not transparent.

My text is hard to see in front of a background.

This is a common problem in design. Here are a few options to help it stand out:

  1. Change the text color to see if one stands out more.
  2. Use a bold font or increase the font size so more color comes through.
  3. Use a blurred shadow with a different color to add some contrast.
  4. Blur the image behind the text.
  5. If all else fails, you can set a container background color to something that your text stands out against. Once you find a good color, you can adjust the transparency of the background color so the background is visible but the text can still be seen.

I want to reuse my text style.

You can use the duplicate button at the top of the element to make a copy with the same styles.

I don’t need a text element anymore.

You can use the delete button (trash icon) at the top of the element to remove it from the scene.

Anything we missed?

We love helping creators! If this didn’t answer a question you have about how to add text to a video, then feel free to get in touch, or just give us your feedback!

Try Vidds now for free →

Interested in Video Marketing? Visit our blog for top tips!

Check out more of Vidds' Tutorials

vidds.co Logo - online video editing tool
Facebook Twitter Youtube Instagram

Use Cases

Shopify Product Videos
Social Media Videos
Instagram Story Videos
Facebook Ads Videos
Real Estate Videos
YouTube Videos
Email Marketing Videos
Employer Branding Videos
Banner Videos
News & Informative Videos

Tools

Free Online Video Editor
Add Text to Video
Add Image to Video
Add Watermark to Video
Add Audio to Video
Add Subtitles to Video
Merge Video Online
GIF Maker
Filter Video Online
Free Video Converter
Online Video Cutter
Video Screenshot Online
Tweet to Video
AI Video Generator

All Tools →

Learn

Tutorials
Video Marketing Blog
FAQs

Company

About Us
Pricing
Contact
Terms of Use
Privacy Policy

White Label Video Editor
Video Editing API

Login

© copyright vidds.co 2023 – made with ♡ from San Diego & Stockholm