Spencer-Allen
commented
5 years ago Here's a basic idea of what we're looking to create for this js.la project.
At js.la, we create videos of every talk we have on a monthly basis. As of right now, our video editing workflow includes a series of photoshop files wherein we create a ton of "title cards" each month.
Those include three separate png files: 1) Speaker intro title card with the speaker's name, picture, social media information, and talk title. 2) Sponsor and host photos 3) A miniature version of the speaker intro card for the website with a transparent play arrow overlaid.
Photoshop is a pretty horrible tool for this, as it's a very simple workflow for which we already have the necessary data in our admin to create these cards. The ideal workflow would simply include 1) generating a webpage for each of these cards, 2) screenshotting the generated page, and 3) being done :)
I've included three png files of previously generated title cards as examples of finished products.
For each, the following online data would be pulled for a mockup: Speaker Avatar: https://i.imgur.com/JoWogJz.jpg Host Avatar: https://lh3.googleusercontent.com/-ZxK7RcVQdOE/Vd5bJfv4tYI/AAAAAAAAQ70/p8tAh6KU-OQfaAEiXteXDCpzLXe1jag6gCHM/d/logo_420_color_2x.png Sponsor Avatar: https://streamlabs.com/expandingthestream2018/imgs/playvs-logo.png
In case they're needed, can also share PSD files used to generate the cards so you can see the specific layouts, typefaces, drop shadows, etc involved.
Currently our videos require some tedious manual work to create the intro/title cards for sponsors and speakers. Examples below.
The purpose of this PR is to create them with the data/images available in the site repo -- saving lots of human time. We can either use something like Firefox's screenshot function or Puppeteer to convert the pages to images.
Example speaker title card:
HTML version created with this PR: