Beginner’s Guide to Creating & Sharing Video Content

Photo by Teono123 No from Pexels

In my early days of using the internet, I was hooked on Youtube. So much that I watched every trailer of my favorite movies and games. At some point, I came up with an idea to download those trailers, reorder the clips and make my own edit. I started a Youtube channel and the rest is history.

But I never considered it as anything more than a hobby. And due to my software developer career, I haven’t touched editing tools in years, up until two months ago when I was asked to live stream a gaming tournament.

I dug up the past, wrapped a stream, and then decided to write an article on how you can do it as well. Today I’m going to teach you what tools to use to create, edit and share video content with the rest of the world.

The idea

Let’s start with a couple of use cases where you’d want to use this skillset:

  • Rearrange album photos and play music in the background
  • Take a scene from your favorite movie or show and make custom edits
  • Live-stream presentation
  • Create tutorials
  • Make a montage of the game you’re playing

The possibilities are truly limitless.

Photo by Donald Tong from Pexels

Capture tools

First, we start with capture. I know very little about cameras, so let’s jump into the software world.

Capture screen

Sometimes you want to capture what is going in front of you, like record a presentation, tutorial, or demo. These are apps you can use to record videos directly on your desktop:

  • OBS
  • Bandicam
  • Windows Screen Recorder, etc.
Bandicam UI

Capture audio

Any tool used for screen recording can also record voice, but you can always capture audio separately, using:

  • Audacity
  • Windows Voice Recorder, etc.

Capture in-game

Every gamer knows that frame rate is very important and recording alongside playing can drop FPS and ruin your experience.

To avoid that, if possible, use demo recording software within the game to capture while you play. This will keep FPS intact. Then replay demo and record/export to video afterward.

CS: Global Offensive — Recording Demos

Otherwise, go with the default screen recording way. Open up an app and adjust the recording quality to the capacity of your pc. If it slows down your game, capture in lower quality.

These are the apps to use to record gameplay:

  • Fraps
  • Nvidia Shadowplay
  • AMD ReLive
  • Bandicam
  • OBS
  • Windows Screen Recorder

Capture screenshot

Often just a picture is enough. You can still use the print screen key on your keyboard, but to accurately capture part of the screen and modify it on the fly I suggest:

  • Snip & Sketch (expansion of Snipping Tool for Windows)
  • Lightshot
  • ShareX
  • Bandicam
Photo by Ron Lach from Pexels

Video editing tools

Now that we have a video it’s time to modify it, such as trim points, split, slow down, add transitions, animations, keyframes, apply visual effects, overlays, add and animate text, adjust sound, preview, and render.

Windows Live Movie Maker UI

There are many render options for different resolutions, and different render qualities. Some applications allow for the use of templates and plugins that others have made that expand your arsenal.

Editing tools:

  • Sony Vegas
  • Adobe Premiere
  • Windows Movie Maker
  • Microsoft Office Powerpoint
  • Photoshop

Hold on a second, Powerpoint & Photoshop?
If you are a fan of making presentations, you can make use of PowerPoint for quick and simple videos. Setup a few slides, add transitions and animations, and then save the presentation as a video.

Photoshop on the other hand has a timeline feature that serves as an editing utility.

Video Converting

You may have recorded a video or a sound only to find out later that the editing software does not support it. Some apps require very specific file formats.

One tool I used for such work is Total Video Converter which supports multiple video formats, GIFs, exporting sounds from videos and so much more.

If you are using a VLC player to watch videos, you may have not known that it has a built-in video converter. It’s not as sophisticated as the former, but it does the job.

Photo by Breakingpic from Pexels

Audio editing

When it comes to audio editing, the first tool that comes to mind is VirtualDJ. Free, very detailed software that allows you to shape audio however you like.

That’s not to say that you can’t modify audio within the video editor. It’s just that the music editor does it better with different effects like chorus, distortion, pan, echoes, etc.

And there are a bunch of effects you can download that others have made.

Audacity UI

Moving from sound to voice, I recommend Audacity. A free, professional, audio editor that allows you to record and modify audio on the fly, like reducing background noises, breathing, etc.

Photo by Lisa Fotios from Pexels

A picture is worth a thousand words

Every video should have a good thumbnail.
Experiment with tools. Create something that’s eye-catching, and intriguing that will stand out.

This is where you create and make adjustments to your image.
Add and remove, mirror, and reposition objects. Change colors, brightness, blur, and apply other effects. Crop, frame, scale, merge images, remove background, etc. And finally, render.

Tools of the trade:

  • Adobe Photoshop
  • Magix
  • GIMP
  • Powerpoint
  • Pixlr, etc.
Photo by Pixabay from Pexels

Animations

If you are in a cartoon-making business or you simply want to animate your drawings you can use tools like these to achieve the same:

  • Adobe Animate and Photoshop
  • SketchBook Motion
  • Pencil2D

For cinema 3D modeling and animations, several popular options are:

  • Blender
  • Maya
  • 3ds Max
  • Cinema 4D
  • Adobe After Effects

I didn’t spend too much time looking into animations myself, but it looks so cool I’m keen to give it a try.

Game Animations

Imagine that you can export assets from your game, such as maps, character models, and demo files into a program and then modify those assets, create and update scenes, add new animations and render them as a video. All of that is possible and these are some of the tools to do it:

Photo by Pixabay from Pexels

Online tools

Google Chrome has an extension called Slides. It’s a presentation-making tool, similar to Powerpoint, that is completely free and you don’t have to install anything to use it. Your presentions will be stored on Google Drive.

To edit a video, you can use Veed, an online video editor.

Photopea is the power of Photoshop in the browser. It has most of the same tools and the layout is almost exactly the same. But if you are looking for a tool to create simpler things, like thumbnails for your videos, Canva is what you’re looking for.
One site I use assets from across my articles is Pexels. They have thousands of free, no copyright images that anyone can download.

Speaking of online assets, you can download fonts for free on sites like:

To acquire a sound for your video, find a soundtrack online, reach out to the creator and make a deal. Otherwise, you can use Youtube Studio to get your hands on many free, no-copyright songs that anyone can use in their videos.
There are also some Youtube channels that publish no-copyright music:

Lastly, you can compress and convert files online, using:

Photo by Vishnu R Nair from Pexels

Share your work with the audience

After the render is complete, it’s time to upload your work of art on the internet.

Upload video on Youtube

First, you need to have a Youtube account. Once you create one, start by clicking on a Camera button in the top right corner, choose Upload video and then drag and drop a video you wish to upload.

Youtube Upload Process

This will take you to a setup screen with four tabs.

  • The first tab is where you describe what your video is all about, set a thumbnail, add tags, age restrictions, choose who can comment on your video, etc.
  • The second tab is where you add video elements, such as an ending screen or subtitles.
  • The third tab is copyright check where Youtube verifies if your video has any plagiarism and if so, it will display a warning or remove that content from your video (like removing audio).
  • The final tab is where you can schedule your video and set visibility, public, unlisted or private.

If you forget to add something, don’t worry, you can edit details anytime through Youtube Studio.

Live stream on Twitch

In this example, I’ll use OBS as it has a great Twitch integration.

OBS UI
  • To start, go to Twitch and create your account
  • Download OBS from the official site and install it on your pc
  • Setup recording (Tutorial)
  • Hook up Twitch & OBS (Tutorial)
  • Optionally — Add opening and closing screen (Tutorial)
  • Optionally — Connect with Discord (Tutorial)
  • Optionally — Export video files as .mp4 (Tutorial)

Once everything has been set up, click on Live Scene and then Start Recording / Start Streaming.

Starting Stream with OBS
Created with ImgFlip

Creating content with JavaScript

If you are a JavaScript nerd like myself, you might ask yourself if it’s possible to do this stuff using code? Surprisingly yes it is!

Manipulate Images

When it comes to image manipulation, JavaScript has you covered. Install Node.js on your PC, open a CMD and start a new project with:

> npm init -y // say yes to all

We’ll use Gulp to apply Lossy and Lossless compression. Install Gulp globally:

> npm i -g gulp

And install dependencies:

> npm i gulp jimp gulp-imagemin@7.1.0

I intentionally specified the version for imagemin plugin due to its incompatibility with CommonJS modules in the newer versions.

Your package.json file should look like this:

{
"name": "project-name",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"gulp": "^4.0.2",
"gulp-imagemin": "^7.1.0",
"jimp": "^0.16.1"
}
}

Now create a gulpfile.js and add the following config: (Tutorial)

const { src, dest, series } = require('gulp');
const imagemin = require('gulp-imagemin');
// take all .jpg & .png files from the given directory
const ENTRY_PATH = 'entry/*.{jpg,png}';
// this is an output directory
const DIST_PATH = 'dist';
function optimizeimg() {
return src(ENTRY_PATH)
.pipe(imagemin([
imagemin.mozjpeg({ quality: 80, progressive: true }),
imagemin.optipng({ optimizationLevel: 2 }),
]))
.pipe(dest(DIST_PATH))
};
exports.default = series(
optimizeimg
);

Add an image to the entry directory and run the script in the project directory:

> gulp

This will load the config we just wrote, duplicate, optimize and store new images in the dist directory.

Now let’s modify a single image using Jimp.
Import Jimp package into the same file and create a function to modify images.

const Jimp = require('jimp');
async function modifyImg() {
const image = await Jimp.read(`my-image.jpg`); // single image
image
.crop(0, 50, 1280, 720) // positionX, positionY, width, height
.quality(60)
.contrast(-0.05)
.opacity(0.5)
.sepia()
.write(`new-image.jpg`);
}

Make sure to edit the series function and pass modifyImg as well:

exports.default = series(
optimizeimg,
modifyImg
);

Now run the Gulp script again and watch the magic happen!

> gulp

Be sure to read more on Jimp and Gulp on the official sites.

Edit and stream videos

ShotStack provides an SDK that lets you style your videos, set track and output format, and publish using JavaScript.

After the render is complete you can upload your masterpiece on Youtube or create a live stream, as I already explained. However, for those who like to experiment, you can also build a streaming server with Node.js.

And this is just the tip of the iceberg.

Photo by cottonbro from Pexels

Wrap-Up

It’s important to note that there is an endless amount of tools like the ones I mentioned, but you do not need to know most of them.
As your viewers don’t know and don’t care about the tools you are using, try to keep it simple and not over-engineer things.

Heck, I even use Windows Live Movie Maker from time to time and create thumbnails in Powerpoint.
Learning and having fun are all that matter.

If you like my work you can support me with a cup of coffee

Until next time 👋

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mirza Leka

IT enthusiast. I Blog about JavaScript, Node.js and Software Development