Overlay HTML Filters (O-HTML_F) and wevvfx provide an excellent way of producing movie-style credits. Unfortunately a lot people who would like to use these do not have the necessary competence in HTML and CSS to do so. To help I have produced an online Credits O-HTML-F Generator. The user provides it with a simple text representation of the credits and then selects a few options to style these credits into something more professional looking, then clicks a button to generate the O-HTML-F that will enable these credits to be applied using Shotcut.
The picture below shows an example of the text file and the type of credits that could be produced. The example is a little “over the top” to demonstrate the features available.
It requires the latest version (1.11) of my WebVfx framework and included for download is a set of Google fonts to improve the typography. I have put together a half-hour tutorial on how to create the video credits in a step-by-step approach. This can be seen here:
The final result of this tutorial can be seen here:
Please feel free to use this facility. Judging by the number of queries on the forum about movie-style credits, it should come in quite handy. There is more that can be done and I hope to be able to enhance this facility in the future.
Great work, @elusien. Just going through your tutorial over a coffee. Will try to experiment with it soon, although I have a heavy week of commitments - I’ll try to find a few spare minutes!! This is a really helpful resource, giving another option for those creating movie-style credits. Well done!
Jon
PS I now know how to type in a vertical line (Pipe symbol) after 30+ years of not knowing about it!!!. Had to Google it though, perhaps it could be explained in the tutorial maybe?
Just wondering - may there be a way in future to control the AMOUNT of neon glow? I’d like to have the option of using little less if possible.
Also, a constructive comment about the tutorial - at times to me it seemed like it was paced quite slowly, with some hesitations. I think speeding it up by about 2x in places would be useful for the viewer - and it would decrease the length of the tutorial. Hope you don’t mind me suggesting this!
Thanks for letting me know - I have edited the post to correct it.
On most keyboards (QWERTY, Dvorak, etc.) vertical bar is produced using SHIFT + ‘\’, i.e. depressing the SHIFT key and the BACKSLASH key concurrently, though this is often shown as a BROKEN VERTICAL BAR on the key itself. Sorry, I come from a mainly Linux background where the pipe symbol ‘|’ is second nature to me.
I’ll have a look into this. I have changed it several times since I first started and making it a parameter shouldn’t be too much work.
I am more than happy to get suggestions like this. I kind of rushed the making of the tutorial as I wanted to get the feature published as soon as I could. I had to cut out quite a few mis-types and will look at improving it now that it is published.
I have just modified the online generator to do exactly that. There is a new control in the “Page” section called “neon-blur”. The default is set to 1.0em, which means the neon glow extends around the character for about the width of the character.
Setting the value higher (e.g. 3em) will expand the glow and make it more nebulous.
Setting the value lower (e.g. 0.2em) will shrink the glow and make it more condensed.
I cannot easily make the neon-glow blur different for Titles, Headings and Credits, so setting its value will make it the same (condensed, nebulous etc) for each section of the text. Please try it out and let me know if this is sufficient.
Brilliant, thanks @elusien for doing that. I have seen many TV credits featuring white scrolling text with a slight white blur added and it looks classy. Will have a try to replicate this when I can.
