Beginner’s Guide to Creating & Sharing Video Content
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.
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.
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.
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
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.
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.
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.
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.
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.
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:
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:
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.
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.
- 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.
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.
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.
Until next time 👋