Come creare un overlay
Hai da poco deciso di aprire un canale su Twitch o su un'altra piattaforma di streaming per trasmettere in diretta i tuoi video più creativi, e ora stai cercando un modo per sovrapporre degli overlay personalizzati, così da rendere le sessioni live esteticamente più coinvolgenti e professionali. Beh, sono assolutamente d'accordo con te: dare ai propri spettatori un'accoglienza curata e visivamente accattivante è sicuramente uno dei modi migliori per catturare sùbito l'attenzione.
Se vuoi, posso aiutarti io a capire come creare un overlay che rispecchi in tutto e per tutto le tue esigenze di streaming. Nei prossimi capitoli, infatti, oltre a mostrarti in che modo puoi procedere mediante alcuni programmi di editing grafico, ti suggerirò anche delle risorse che ti permetteranno di realizzarlo in versione “animata”, con la presenza di elementi dinamici in grado di rendere l'esperienza di visione ancora più immersiva.
Per concludere, ti illustrerò in che modo è possibile applicarlo sui programmi di live streaming facendoti degli esempi concreti. Scommetto che era proprio quello che volevi sapere, vero? Allora coraggio, diamoci dentro! Leggi attentamente la seguente guida per conoscere tutte le informazioni necessarie al tuo scopo e personalizzare le dirette live con overlay creativi e coinvolgenti. Ti auguro buona lettura e, soprattutto, buon divertimento!
Indice
- Come creare un overlay per la webcam
- Come creare un overlay animato
- Come creare un overlay per streaming
Come creare un overlay per la webcam
Cominciamo col vedere come creare un overlay per la webcam, da utilizzare durante le dirette per conferire allo streaming una struttura visiva chiara e riconoscibile, eventualmente integrata da informazioni di base statiche. Per farlo, mi avvarrò di programmi di grafica professionali che offrono funzioni per la gestione di trasparenze e livelli.
Come creare un overlay con Photoshop
Eccoti qui! Accendi il motore della creatività e leggi attentamente le informazioni che ti darò in questo capitolo per scoprire come creare un overlay con Photoshop, il software di photo editing per eccellenza, prodotto da Adobe. Se non l'hai mai utilizzato prima d'ora, permettimi di consigliarti una rapida lettura alla mia guida su come scaricare Photoshop gratis e su come usarlo per farti un'idea sulle sue potenzialità e sui costi da sostenere (licenza mensile o annuale, dopo 7 giorni di prova gratis), in modo da valutare se è ciò che fa per te.
Per prima cosa, avvia Photoshop e vai nel menu File > Nuovo (in alto a sinistra) per creare un nuovo progetto. Nella finestra appena apertasi, inserisci un titolo a piacimento e imposta come dimensioni del progetto 1920×1080 px (Larghezza x Altezza, in pixel), che rappresenta lo standard più usato. Infine, conferma facendo clic sul pulsante Crea.
Non appena visualizzi l'interfaccia di editing, fai clic sullo Strumento Rettangolo presente nella barra degli strumenti collocata sulla sinistra e premi sul riquadro accanto la voce Riemp. (Riempimento) nella barra delle opzioni in alto. Seleziona, quindi, la modalità Nessun colore (quella con la diagonale rossa al centro), poi fai clic sul box della voce Traccia e scegli un colore di tuo gradimento dalla tavolozza dei colori.
Sempre agendo dalla barra delle opzioni dello strumento Rettangolo, inserisci 20 px nel campo dello Spessore della traccia. Ora, clicca al centro del foglio e, nella piccola finestra appena apertasi, inserisci le dimensioni 1900×1060 px (Larghezza x Altezza in pixel) e dai conferma.
Utilizzando lo Strumento Sposta (quello con l'icona delle 4 frecce), posiziona il rettangolo fino a farlo aderire perfettamente ai bordi del foglio. Fai quindi clic destro sul livello del rettangolo ora presente nel pannello Livelli in basso a destra e scegli la voce Opzioni di fusione dal menu contestuale.
Nella colonna di sinistra della relativa finestra, premi sulla voce Sovrapposizione sfumatura e poi, nell'area centrale della stessa, fai clic sul riquadro Sfumatura. Qui puoi scegliere le combinazioni di sfumature che preferisci, ad esempio selezionandole da quelle predefinite, e confermarle premendo sul pulsante OK.
Sempre dalla colonna di sinistra, pigia anche sulla voce Ombra esterna e imposta i parametri Opacità con valore 40 e Dimensione con valore 25, lasciando a 0 gli altri. Ovviamente, puoi personalizzare queste preferenze a tuo piacimento, se lo ritieni opportuno.
Se hai un tuo logo in formato .png, puoi importalo dal menu File > Inserisci incorporato, scegliendo l'opzione Sul tuo PC e utilizzando la finestra di navigazione per selezionarlo. Una volta fatto ciò, posizionalo ad esempio in un angolo dell'overlay, facendo in modo che non occupi troppo spazio.
Ci siamo quasi. Ora devi nascondere il livello Sfondo facendo clic sull'icona a forma di occhio posta sul lato sinistro del livello in questione. A seguire, vai nel menu File > Salva con nome e salva il tuo overlay impostando l'estensione .png nella casella Salva come. Perfetto, hai creato il tuo primo overlay statico con Photoshop!
Come creare un overlay con GIMP
Esistono molti software gratis che consentono di modificare e creare immagini con una metodologia del tutto simile a quella esposta nel capitolo precedente. In particolare, di seguito vorrei spiegarti come creare un overlay con GIMP, un software gratuito e open source che rappresenta una delle più valide alternativa free a Photoshop, ed è disponibile per Windows, macOS e Linux.
Per sapere come ottenerlo e imparare le basi di disegno, ti suggerisco di leggere la mia guida completa su come usare GIMP, in modo da avere le idee chiare sulle potenzialità del programma e capire se può fare al caso tuo.
Per iniziare, avvia dunque GIMP e vai nel menu File > Nuova (in alto) per creare un nuova immagine. Nella finestra appena apertasi, imposta le dimensioni di 1920×1080 px (Larghezza x Altezza in pixel), poi fai clic sul pulsante OK.
Recati poi nella scheda dei livelli, in basso a destra, e fai clic sulla prima icona a sinistra (quella con un foglio e il [+] sovrapposto) per creare un nuovo livello. Assegna un nome al livello (ad esempio overlay), seleziona l'opzione Trasparenza nel menu Riempi con, e mantieni i valori di dimensione e scostamento, quindi premi il pulsante OK.
A seguire, applica lo Strumento di selezione rettangolare dal pannello in alto a destra e disegna una forma sul foglio. Per impostare dimensioni precise, quindi, utilizza la barra delle opzioni dello strumento sulla sinistra (se non la vedi, richiamala dal menu Finestre > Finestre agganciabili > Opzioni strumento), applicando il valore 0 nei campi dedicati alle Posizioni e nuovamente 1920×1080 in quelli relativi alle Dimensioni.
Ora, trasforma la selezione in tracciato tramite il menu Seleziona > A Tracciato (in alto). Successivamente, dalla scheda Tracciati che trovi in basso a destra nel pannello dei livelli (per visualizzarla, premi sull'icona della curva di Bézier), fai clic destro sull'unico livello esistente, quindi scegli la voce Delinea tracciati dal menu contestuale.
Nella finestra Delinea tracciato appena apertasi utilizza le impostazioni della scheda Linea, definendo in particolare quale colore utilizzare (primo piano, sfondo o motivo) e lo spessore. Applica eventuali altre preferenze di stile ivi presenti, anche relative al tratteggio, e fai clic sul bottone Tratto.
A seguire, dalla barra degli strumenti posta a sinistra, scegli lo Strumento di selezione fuzzy (quello con il simbolo della bacchetta magica) e clicca sul bordo della cornice appena creata per selezionarla, quindi fai clic destro sullo strumento Riempimento colore (quello con l'icona del secchio di vernice) e scegli lo strumento Gradiente.
Nella sottostante barra delle opzioni, seleziona le tonalità del gradiente dai riquadri dei colori e applica una delle modalità proposte. Ora, trascina il cursore del mouse attraverso il foglio tenendo premuto il tasto sinistro per creare una sfumatura colorata sulla cornice.
Per conferire un effetto di ombreggiatura interna, vai nel menu Filtri > Ombre e luci > Proietta ombra, imposta il valore 0 sulle assi X e Y, poi amplia il Raggio di sfocatura a 25px e accentua l'Opacità portandola al massimo. Una volta dato conferma, vai nel menu Immagine > Imposta la superfice alla selezione per ridimensionare correttamente l'overlay.
Se vuoi inserire un'immagine o un logo per decorare il tuo overlay, ti basta fare clic sul menu File > Apri come livelli (in alto) e utilizzare la finestra di navigazione per selezionare il file. Potrai poi posizionare l'immagine dove preferisci con lo strumento Sposta e aggiungere, ad esempio, un testo colorato.
Prima di salvare l'overlay, ricordati di nascondere lo sfondo facendo clic sull'icona a forma di occhio posta sulla sinistra del livello Sfondo. Infine, fai clic sul menu File > Esporta come (in alto) per scegliere la posizione in cui salvare l'overlay, utilizzando l'estensione .png e premendo poi sul pulsante Esporta.
Come creare un overlay animato
Vediamo, ora, come creare un overlay animato, arricchito da effetti visivi dinamici che catturano l'attenzione e guidano lo sguardo dello spettatore verso gli elementi informativi chiave del contenuto trasmesso in streaming.
ShapeLoop
Il modo più semplice per creare un overlay animato è senz'altro quello di rivolgersi a una piattaforma online ad hoc come ShapeLoop che, oltre a risultare particolarmente immediata e intuitiva, permette di salvare il progetto in formato WEBM, perfetto per ottenere una qualità più alta dell'elemento grafico in questione. Ti avviso sin da ora, però, che sebbene il suo utilizzo sia di base gratuito, nell'esportazione finale viene aggiunto un watermark.
Per ovviare a questo inconveniente è possibile utilizzare i crediti free assegnati dal servizio previa registrazione. In alternativa, puoi sottoscrivere un piano con costi a partire da 9 euro al mese, oppure effettuare acquisti in-app (5 euro per 10 crediti), soluzioni che consentono di accedere a feature aggiuntive, come l'utilizzo di template per Twitch e la possibilità di selezionare tutti gli effetti disponibili.
Dopo esserti collegato alla home page di ShapeLoop, dunque, premi il pulsante per avviare un progetto gratis e, non appena visualizzi l'interfaccia di editing, seleziona innanzitutto il formato corretto dal menu Shape Templates posto a destra. A seguire, definisci le caratteristiche della forma dalla sottostante sezione Shape Settings.
Una volta fatto ciò, scegli anche l'effetto da applicare alla cornice nell'area sottostante alla finestra di editing (Choose animation effect) e imposta durata e intensità mediante le barre di regolazione che trovi poco più in basso.
Infine, fai clic sul pulsante Download in 4K e completa la procedura di creazione di un account associando quello di Google o tramite indirizzo email, dopodiché fai clic sull'opzione Use my free credits e premi il pulsante Download, ora presente nell'interfaccia di editing.
A questo punto, non ti resta che selezionare l'editor di riferimento e cliccare nuovamente sul bottone Download per scaricare il progetto nel formato corretto, compatibile con la piattaforma prescelta.
Canva
Un altro strumento che puoi utilizzare per creare un overlay animato è Canva, la popolare piattaforma di progettazione grafica accessibile online dal suo sito Web, come client desktop per Windows e macOS, e come app per dispositivi Android (cercala anche su store alternativi se il tuo device non supporta i servizi Google) e iPhone/iPad.
Considera, però, che benché l'utilizzo del servizio sia gratuito e siano presenti diversi modelli idonei del tutto free, l'esportazione in un formato idoneo (GIF con trasparenza) prevede la sottoscrizione almeno di un account Pro (con costi da 12 euro al mese), il quale comunque include spesso un mese di trial.
In alternativa, puoi anche salvare il progetto in video MP4, ma per gestire la trasparenza dovrai utilizzare uno sfondo verde o un altro colore uniforme e, successivamente, modificare il contenuto mediante un programma di editing video adatto, come DaVinci Resolve, applicando soluzioni come il green screen (con un risultato, però, generalmente meno "pulito).
Detto ciò, se ad esempio vuoi procedere da browser senza scaricare nulla, collegati dunque al suo sito ufficiale e provvedi a registrarti premendo il pulsante Iscriviti collocato in alto a destra, scegliendo se associare uno degli account proposti (ad esempio Google, Apple o Microsoft), oppure tramite indirizzo email.
Ti consiglio, quindi, di iniziare con un modello già pronto, preimpostato con dimensioni e layout ad hoc, che potrai poi personalizzare a tuo piacimento. Se, ad esempio, sei alla ricerca di informazioni su come creare un overlay per Twitch, ti consiglio di specificare questo formato nel campo di ricerca ivi presente, premendo poi Invio per visualizzare i risultati pertinenti.
Una volta scelto il template, clicca sulla sua anteprima e, nella nuova finestra apertasi, premi il pulsante Personalizza questo modello per accedere all'interfaccia di editing. Se hai scelto un modello animato, troverai oltre alla schermata centrale di creazione e al pannello di sinistra con gli strumenti e i contenuti, anche una timeline (in basso) tramite cui gestire la riproduzione degli effetti.
Ora, se vuoi, puoi eliminare degli oggetti che non ti piacciono cliccandoci sopra per selezionarli e premendo il tasto Backspace, e inserirne di nuovi dalla sezione Elementi, dove è presente la libreria del servizio, o da quella Caricamenti, per effettuare l'upload di contenuti creati da te mediante il pulsante Carica file (ad esempio il logo del tuo canale).
Dovrai poi semplicemente trascinare quelli di tuo interesse nell'area di editing tenendo premuto il tasto sinistro del mouse, spostarli nella posizione ideale, e utilizzare le maniglie che compaiono quanto l'elemento è selezionato per ridimensionarlo.
Applicare un'animazione all'oggetto è semplicissimo: basta farci clic sopra, premere poi la voce Animazione che compare nella barra dinamica in alto, e selezionare dal pannello di sinistra l'effetto desiderato, in modo da visualizzarlo in anteprima.
Verrà così creata anche il relativo clip nella sottostante timeline, tramite cui potrai gestire la tempistica degli eventi, ad esempio anche copiando e incollando l'elemento per creare delle ripetizioni. Inoltre, avrai modo di controllare la durata di ogni sequenza cliccandoci sopra e trascinando le frecce che compaiono ai lati verso destra o sinistra, a seconda delle tue esigenze.
Se vuoi partire da zero e approfondire come usare Canva, ti raccomando vivamente di leggere la guida dedicata appena linkata, dove trovi utili suggerimenti per imparare a usare i vari strumenti messi a disposizione dal servizio.
Come ti ho accennato all'inizio del capitolo, dovrai poi scaricare il risultato finale come GIF con sfondo trasparente o video MP4, cliccando sulla voce Condividi posta in alto a destra, pigiando l'opzione Scarica, selezionando il formato desiderato e la qualità, e premendo infine il pulsante Scarica.
Altre soluzioni per creare overlay animati
Di seguito ti riporto altre soluzioni per creare overlay animati funzionali allo scopo: si tratta di piattaforme di editing grafico che supportano la trasparenza e permettono di accedere a dei modelli già pronti all'uso, personalizzabili in vari modi.
- Adobe Express — questa piattaforma, di base gratuita, offre diversi template che si prestano alla perfezione per realizzare overlay personalizzabili con animazioni. Alcuni dei contenuti messi a disposizione prevedono la sottoscrizione di un piano Premium, con costi a partire da 12,19 euro al mese, che include anche crediti generativi per l'utilizzo dell'IA integrata e funzionalità evolute.
- Kapwing — si tratta di una piattaforma di editing video che consente anche di realizzare overlay animati, esportabili in formato WEBM, il quale offre una qualità migliore e una piena compatibilità con i vari servizi di streaming. L'accesso è gratuito, ma per poter utilizzare tutte le sue funzioni e i contenuti è necessario sottoscrivere un piano a pagamento, con costi a partire da 16$ al mese.
- Pippit — piattaforma che permette di creare, mediante tecnologia generativa IA, diverse tipologie di progetti, inclusi overlay animati, basandosi su una descrizione testuale. Può essere provata gratuitamente, ma per esigenze maggiori occorre sottoscrivere un piano Starter, con costi a partire da 19$ al mese.
Come creare un overlay per streaming
In questa sezione della guida ti farò un esempio di come creare un overlay per streaming, illustrandoti quindi le modalità di importazione del progetto grafico previste da uno dei principali sistemi della categoria, ovvero OBS.
Come creare overlay OBS
Se vuoi sapere come creare overlay OBS, uno dei programmi per la registrazione e la realizzazione di video live più famosi al mondo (di cui ti ho parlato in questa mia guida dedicata), per iniziare disegna un progetto statico o animato seguendo le indicazioni riportate nei capitoli precedenti.
Una volta fatto ciò, avvia il software OBS Studio e recati nel pannello Fonti situato in basso, quindi premi il pulsante [+] ivi presente, scegliendo poi l'opzione Immagine dal menu contestuale se si tratta di un overlay statico. A seguire, assegna un nome all'elemento nel campo Crea nuova e dai OK.
Nella nuova finestra apertasi, quindi, pigia il pulsante Sfoglia e seleziona l'elemento da caricare. Conferma l'operazione, e provvedi successivamente a inserire anche la sorgente in primo piano (ad esempio Dispositivo di cattura video per una webcam, oppure Browser), sempre dal pannello Fonti.
Per quanto riguarda gli overlay animati, occorre invece utilizzare l'opzione Media del pannello Fonti. La procedura è del tutto identica, ma sarà necessario ovviamente importare un contenuto multimediale di tipo GIF (in questo caso va valorizzata l'opzione Ripeti) o WEBM precedentemente realizzato.
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e ha curato la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
