SECTION: 1
Overview
6:55
SECTION: 2
Creating your video background
56:34
SECTION: 3
Creating the video background website
1:01:52
SECTION: 4
Cheat Sheet
5:17
🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
Where to get video for your background
SECTION: 1
Overview
6:55
SECTION: 2
Creating your video background
56:34
SECTION: 3
Creating the video background website
1:01:52
SECTION: 4
Cheat Sheet
5:17
Questions
Student Gallery
Be the first to share something.
Course info
Overview
Hi there, I’m Dan. In this course we’ll learn how to create and edit a video for our website. Then we’ll go and build the site from scratch. It looks fancy, but it’s not particularly hard.
I built this course for beginners. You do not need to know how to code or how to edit video to take this class. We’ll start with the super basics. This could totally be your very first website, wouldn’t starting with a video background be a super cool first project?
We’ll go through the full process. I’ll show you where to find some video, I’ll show you how to edit it in Premiere Pro. We’ll do cool video effects like blurs, tints and transitions. I’ll show you how to export the video so we can get the file size super small. Once we’ve created our video we’ll build a basic website together and make our video all cool and full screen.
We’ll also create a second option where the video peeks in through a specific box.
In this course I’ve got exercise files so you can play along. I’ll also save my files as I go through each video so you can compare yours to mine - handy if something goes wrong. We’ll be using Dreamweaver & Premiere Pro but 95% of this can be done in generic web & video tools.
Remember: I’m happy to help & I’m pretty handy with replying. Also - there is a handy cheat sheet you can print out, plus there are teacher resources if you need them.
The best thing - is that it’s not that hard. But super awesome video background will impress the heck out of your clients.
What are the requirements?
- You'll need a copy of Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe .
- It will be handy if you know some basic HTML before this course. It’s focused more on video backgrounds and not the entire web design process.
What am I going to get from this course?
- 15 lectures 2 Hours 18 minutes of content!
- You'll learn to build a website with a video background.
- Pros, cons & cool examples of video backgrounds.
- How to edit your video in Premiere Pro.
- Where to get video.
- Basic editing, adding texture, fading, texturing, blurring, coloring.
- Premiere or After Effects? Both?
- What size should it be. HD? 4K?
- Minimising file size
- Exporting in the right video format
- Media Encoder. Webm, mp4, ogg, ogv.
- How to create a basic website.
- Add fullscreen background video
- Add a background video to a hero box.
- Integrating with an existing Bootstrap website.
- Make the site responsive.
- Downloadable exercise files & cheat sheet.
- Forum support from me and the rest of the BYOL crew.
- Techniques used by professional website designers.
- Professional workflows and shortcuts.
- A wealth of other resources and websites to help your new career path.
What is the target audience?
- YES: This course is for beginners. Aimed at people new to the world of web design. While no previous Dreamweaver experience is necessary, it would be good to do one of my other intro courses before attempting this course.
- NO: This course is NOT suited to people experienced in using HTML & CSS.
Course duration 2 hours
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
Okay, so now we're going to start making the videos... before we go and start coding it. If you want to get straight into the coding, you can skip this section. Now where do you get your videos from? Obviously, you can shoot it yourself, it's becoming more and more easy. I shoot a lot of my stuff, but I also do what's in front of us here.
and use things like Stock Library pre-mage footage. and that's what I'm going to use for this tutorial. Now, what it is, it's footage that's been made by someone else. So we could buy it, and the costs are actually pretty good... like, getting a video from here, either this site, Adobe Stock, or from iStock. They seem to be one of the most popular ones.
And they're going to cost you, between about, US dollars... between about 50 US dollars and 200 US dollars, depending on the video. And so what I have done is, I've gone and picked one from Adobe Stock. It's just kind of designer ones, it's more a photography one... but I quite like all design ?? about it.
Once you've picked it, you can right click it and save it... or if you're using Adobe Libraries, which is awesome, you can click on this... and download it either to your library, or download it to your computer. There's a couple of options if you know how to use libraries otherwise just hit download, and just save it to your desktop. And that's the video that we're going to use. Now if you've never used Adobe Stock and you want to, and you're going to go and try it...
I'll put a link up on the screen here, here it is. And I'll put a link in the notes down the bottom here. It's nothing other than, if you go to the website using my link... I get a little baby commission for sending you to them. You can go directly to the site, it's stock.adobe.com but if you want to help me out... click that before you go, it doesn't cost you any more.
Great! So now that we've got some video to work with... we're going to do some basic editing and getting it ready for our website. We're going to use Adobe Premiere. So let's go and load that one up.
and use things like Stock Library pre-mage footage. and that's what I'm going to use for this tutorial. Now, what it is, it's footage that's been made by someone else. So we could buy it, and the costs are actually pretty good... like, getting a video from here, either this site, Adobe Stock, or from iStock. They seem to be one of the most popular ones.
And they're going to cost you, between about, US dollars... between about 50 US dollars and 200 US dollars, depending on the video. And so what I have done is, I've gone and picked one from Adobe Stock. It's just kind of designer ones, it's more a photography one... but I quite like all design ?? about it.
Once you've picked it, you can right click it and save it... or if you're using Adobe Libraries, which is awesome, you can click on this... and download it either to your library, or download it to your computer. There's a couple of options if you know how to use libraries otherwise just hit download, and just save it to your desktop. And that's the video that we're going to use. Now if you've never used Adobe Stock and you want to, and you're going to go and try it...
I'll put a link up on the screen here, here it is. And I'll put a link in the notes down the bottom here. It's nothing other than, if you go to the website using my link... I get a little baby commission for sending you to them. You can go directly to the site, it's stock.adobe.com but if you want to help me out... click that before you go, it doesn't cost you any more.
Great! So now that we've got some video to work with... we're going to do some basic editing and getting it ready for our website. We're going to use Adobe Premiere. So let's go and load that one up.
