A few months ago I got an idea to create a website for making video slates. In production, slates are stills that get put at the front of a video file that contains information the TV station will need in order to air it. We've been making slates in Photoshop since I can remember, and although Photoshop is certainly powerful enough to create slates, it's somewhat of an overkill. We don't need that many controls when making slates, and the Creative Cloud subscriptions add up.

So I thought it would be handy to have a website that anyone could access from their laptops or phones. I started sketching it out and adding features in my mind as time went by.

Initially I built this using Python and the pillow package, but it didn't give me the control I wanted. Plus, I wanted it to be easy to use without having to download anything to use it. Whenever I started learning HTML and CSS, I started to think it might actually work.

Layout

Here's a rough mockup of the page:

On the left are all the input fields I would use for an average slate. My plan for the right is a live-preview of what the finished slate image will look like. So when someone fills in " Conglom-O" as the client, "Client: Conglom-O" appears on the slate on the right.

Buttons

Download Slate will download a png of the completed slate. Email Slate will attach a png of the slate into an email. Make Another is for making a slate from the same campaign. So the client, agency, audio, date and notes fields would stay the same, and the rest would be cleared for new information. Restart would wipe the slate clean, both literally and figuratively.

Additional Features

I'd like to create a json file so that a user could be notified if the AD-ID entered has already been used (AD-IDs are serial numbers for broadcast commercials and are unique). Additionally, if someone wanted to export a slate that's already been made, they can pull from that json file.

We love Slack, so it would be super handy to be able to send to a user or channel from this page.

And of course I want it to be pretty. I'll have to think about the aesthetics once this shapes out and is functional.

Conclusion

I am so excited to have finally made the progress I have. I know there's a ton of work to do still, and I'm going to completely rewrite all my code in all likelihood. But it feels so good to see something that's existed in my mind come to life.