fbpx

Cover YouTube in NuxtJS

Miki Lombardi Miki Lombardi

Full-stack developer

Cover Youtube

Il problema di ogni canale YouTube è sicuramente quello di creare contenuti interessanti che raggiungano il più alto numero di visualizzazioni.

Ma prima ancora di guardare il video, l’utente deve essere catturato dalla copertina che vede sul canale YouTube! Realizzare contenuti interessanti senza una copertina accattivante equivale a sfruttare solamente una delle armi a disposizione.

È quello che abbiamo cercato di risolvere per il canale di Schrodinger Hat con il cover YouTube generator.

Tanti contenuti ma poche visualizzazioni? 

Per il nostro podcast avevamo la necessità di velocizzare il processo di creazione della cover YouTube. La copertina deve essere interessante, contenente le giuste informazioni e con il giusto formato.

In Schrodinger Hat abbiamo solo un graphic designer, Francesca. Per questo motivo cerchiamo sempre di sovraccaricarla con le richieste, così da automatizzare quanto più possibile il processo.

Cover YouTube: perché l’example di Netflix? 

Beh, se non impari dal migliore da chi dovresti imparare?

Ci piacciono molto le copertine delle varie serie tv e dei film nel catalogo di Netflix. L’ispirazione nasce proprio dalla loro piattaforma. Lo stile rimanda chiaramente a quello di Netflix seppur con qualche modifica e dettaglio in meno.

Abbiamo preso come riferimento l’example title di Netflix, una pagina di testing dedicata al posizionamento e all’ingombro.

Di cosa tratta realmente il progetto?

Il progetto è una piccola applicazione che rende un canvas un editor drag-n-drop così da inserire immagini e modificare testi e ingombri. È completamente personalizzabile e non richiede troppe skill per essere modificato.

La codebase è Nuxt.js (VueJS framework) e KonvaJS, una libreria JS per interpolazione del canvas di HTML5.

La repository è disponibile al seguente link:

https://github.com/Schrodinger-Hat/netflix-show-generator

La demo è qui:

https://netflix.schrodinger-hat.it/

"Realizzare contenuti interessanti senza una copertina accattivante equivale a sfruttare solamente una delle armi a disposizione."

Come funziona?

Tramite Konva.JS inizializziamo un Canvas contenente più livelli, esattamente come un progetto Photoshop. Ciascun livello racchiude una parte del rendering:

– background e foto;

– sfumatura;

– intestazioni e testo;

– layer aggiuntivo per foto / testi aggiuntivi.

È grazie a questa struttura che è possibile avere un gioco di effetti, come lo sfumato in stile Netflix.

Nuxt gestisce molto bene le API di KonvaJS e questo rende lo sviluppo e l’implementazione di feature facile ed estremamente veloce.

L’elemento Canvas, inoltre, offre una proprietà davvero molto importate quale la pixelRatio.

Questa proprietà ci permette di esportare e salvare il nostro lavoro in alta risoluzione per successive modifiche o per lavorare con formati particolari.

In questo modo il progetto può risolvere molti problemi.

Ovviamente il tutto potrebbe essere migliorato, a partire dai colori che potrebbero essere selezionabili e personalizzabile direttamente in fase di creazione di un “progetto”.

Abbiamo deciso di lasciarlo così, come fosse una PoC, proprio perché potrebbe avere dei risvolti interessanti e perché è il nostro tema preferito.

Come posso farlo funzionare localmente?

Il progetto è portabile e può essere rilasciato ovunque. Noi abbiamo scelto Netlify.

Localmente sarà sufficiente clonare la repository dal link sopra, installare i moduli npm e avviare il dev server tramite Nuxt.

Nel README.md troverete tutte le istruzioni!

Risvolti futuri o future implementazioni?

Al momento lo utilizziamo internamente per la produzione delle copertine YouTube del nostro podcast, ma non nascondiamo che potrebbe diventare altro nel futuro.

Ci piacerebbe realizzare una specie di tool per velocizzare il testing della UI/UX avendo semplicemente i vari componenti in Vue/React/*JS così da provarli a renderizzare su un canvas (un po’ come se stessimo realizzando un microfrontend) e verificare che sia tutto corretto in termini di design.

Conclusioni

Il progetto è stato molto divertente da realizzare. KonvaJS è veramente intuitivo e la API Reference è stata veramente utile. Scaricare la cover YouTube in alta risoluzione da questo tool ci ha salvato molto tempo per ogni video caricato!

Il nostro canale YouTube è: https://www.youtube.com/channel/UC1QLLgrGrPmlaFhS0orykCA

Il podcast è disponibile solo in italiano.

Scopri la divisione Research Plansoft

Social Sharing

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *