Come creare un overlay
Hai forse deciso di aprire un canale su Twitch, la celebre piattaforma di streaming firmata Amazon, per trasmettere in diretta i tuoi video più creativi e stai cercando un modo per sovrapporre degli overlay personalizzati? Oppure stai cercando di creare un grande pubblico con le live su StreamYard e vorresti rendere la schermata di streaming più accogliente e personale? Beh, hai avuto un’ottima idea!
Non c’è cosa migliore che dare ai tuoi spettatori un’accoglienza unica e inimitabile, e mostrare loro una schermata personalizzata è proprio il modo più semplice per farli sentire speciali e considerati. Però il fatto che tu sia finito in questa mia guida, mi fa pensare che la tua dimestichezza con la creazione e la personalizzazione degli overlay non sia molta. Dico bene? Se ho indovinato, lasciami dire che hai appena trovato la guida che fa al caso tuo!
Nei prossimi capitoli, infatti, ti spiegherò come creare un overlay e in che modo applicarlo sulle piattaforme di streaming più note del momento. 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. Buona lettura e, soprattutto, buon divertimento!
Indice
- Come creare un overlay statico
- Come creare un overlay animato
- Come creare un overlay per Twitch
- Come creare un overlay per StreamYard
- Come creare un overlay per OBS
Come creare un overlay statico
Un overlay è un oggetto grafico decorativo che viene sovrapposto a un altro oggetto dinamico o statico. Solitamente, l’oggetto sottostante è quello di maggiore rilevanza, come ad esempio il riquadro della webcam. L’overlay assume lo scopo di decorare e dare un maggiore risalto alla registrazione video.
Insomma, puoi paragonare l’overlay alla cornice di un quadro o alla descrizione sovrapposta di un’immagine. Più è speciale l’overlay e più risalto avrà il suo contenuto (in questo caso, la tua live). Dopo questa piccola introduzione, possiamo procedere! Segui i prossimi capitoli per imparare come creare un overlay statico.
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 sapere come creare un overlay con Photoshop, il software di photo editing per eccellenza, prodotto da Adobe.
Se non hai dimestichezza con Adobe Photoshop o non lo conosci affatto, permettimi di consigliarti una rapida lettura alla mia guida su come scaricare Photoshop gratis e al mio tutorial generale su Photoshop. In questo modo potrai farti un’idea sulle potenzialità del programma e sui costi da sostenere (licenza mensile o annuale, dopo 7 giorni di prova gratis) e valutare se è ciò che fa per te, in caso contrario puoi saltare al capitolo successivo del tutorial.
Pronto? iniziamo! Per prima cosa, avvia Photoshop e vai nel menu File > Nuovo (in alto a sinistra) per creare un nuovo progetto. Nella finestra che si è appena aperta, inserisci un titolo a piacimento e imposta come dimensioni del progetto: 1920×1080 px (Larghezza x Altezza, in pixel). Infine conferma, facendo clic sul pulsante azzurro Crea.
Ora, fai clic sullo Strumento Rettangolo presente nella barra degli strumenti collocata sulla sinistra, poi seleziona la voce Riempimento e seleziona il riempimento vuoto, per dare trasparenza al corpo del rettangolo. In seguito, fai clic sulla voce Traccia e scegli un colore a piacimento dalla tavolozza dei colori posta appena più a destra; inserisci 20px nel campo dello Spessore della traccia. Bene, ora clicca al centro del foglio. Nella piccola finestrella che si è appena aperta, inserisci le dimensioni 1900×1060 px (Larghezza x Altezza in pixel) e premi il tasto Invio sulla tastiera.
Utilizzando lo Strumento Sposta, posiziona ora il rettangolo fino a farlo aderire perfettamente ai bordi del foglio. Fai quindi clic col tasto destro del mouse sul livello del rettangolo e scegli la voce Opzioni di fusione dal menu contestuale. Nella colonna di sinistra, fai clic sulla voce Sovrapposizione sfumatura e poi, nel centro della finestra, fai clic sul riquadro Sfumatura. Puoi scegliere le combinazioni di sfumature che preferisci, poi conferma quella che desideri e premi sul pulsante OK. Sempre dalla colonna di sinistra, fai clic sulla voce Ombra esterna, poi al centro imposta i seguenti parametri.
- Opacità: 40
- Distanza: 0
- Estensione: 0
- Dimensione: 25
Puoi personalizzarli a tuo piacimento, se lo desideri. Infine, clicca sul pulsante OK.
Se hai un tuo logo in formato .PNG, puoi importarlo dal menu File > Inserisci incorporato (in alto a sinistra) e posizionarlo in un angolo del progetto. Decidi tu le dimensioni e la posizione, in base a dove ti sembra più carino, ma fai in modo che non occupi troppo spazio (altrimenti rischi di invadere la scena del video sottostante).
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; poi vai nel menu File > Salva con nome e salva il tuo overlay impostando l’estensione su .PNG nella casella Salva come. Perfetto, hai creato il tuo primo overlay statico con Photoshop!
Come creare un overlay senza Photoshop
Esistono molti software gratuiti per modificare e creare immagini. In questo capitolo vorrei spiegarti come creare un overlay senza Photosohop utilizzando il software gratuito e open source di nome GIMP, che è la più valida alternativa free a Photoshop ed è disponibile sia per Windows che per 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 che ti si è appena aperta, imposta le dimensioni di 1920×1080 px (Larghezza x Altezza in pixel), poi fai clic sul pulsante OK. Nella scheda dei livelli, sulla destra, fai clic sulla prima icona in basso a sinistra per creare un nuovo livello.
Ora, attraverso lo Strumento di selezione rettangolare, crea una forma semplice nel foglio, poi puoi perfezionarla digitando il valore 0 nei due campi della Posizione e digitando 1920 e 1080 nei campi della Dimensione. Ora devi darle un contorno, quindi vai nel menu Seleziona > A Tracciato (in alto) e dalla scheda Tracciati, sulla destra, fai clic col tasto destro del mouse sull’unico livello esistente e scegli la voce Delinea tracciato dal menu contestuale.
Ci siamo quasi. Dalla barra degli strumenti posta a sinistra, scegli lo Strumento di selezione fuzzy (o bacchetta magica) e clicca sul bordo della cornice appena creata, per selezionarne il riempimento. Ora fai clic destro sullo strumento Riempimento colore e scegli lo strumento Gradiente. Puoi selezionare i due colori del gradiente dall’icona dei colori, situata sempre nella barra degli strumenti nel lato sinistro del programma. Trascina quindi il cursore del mouse attraverso il foglio, tenendo premuto il clic sinistro, per creare una sfumatura colorata sulla cornice. Puoi provare e riprovare fino a quando non trovi la sfumatura che più ti piace.
Per darle un effetto di ombreggiatura interna, vai nel menu Filtri > Luci e ombre > Proietta ombra (tradizionale) (in alto), imposta il valore 0 sulle assi X e Y, poi amplia il Raggio di sfocatura a 25px e accentua l’Opacità portandola al 100%. Per confermare le impostazioni dell’ombra, fai clic sul pulsante OK. Non ti resta, poi, che fare clic 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). Fopodiché puoi posizionare l’immagine dove preferisci e ridimensionarla con lo Strumento sposta. Puoi aggiungere un testo colorato con lo Strumento testo per inserire, ad esempio, il tuo nickname da streamer. Prima di salvare l’overlay, devi 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. Scegli l’estensione .PNG dal menu Seleziona tipo di file (Per estensione) e, cliccando su Esporta, otterrai il tuo overlay per lo streaming.
Come creare un overlay animato
Alcune piattaforme per lo streaming supportano gli overlay animati: possono essere dei piccoli video oppure delle immagini composte da più frame, come ad esempio le note GIF animate. Se creare un overlay statico è stato divertente, beh, allora i prossimi capitoli saranno un vero spasso. Se vuoi sapere come creare un overlay animato, trovi tutte le indicazioni utili per riuscirci qui sotto.
Come creare un overlay animato con Photoshop
Creare un overlay animato con Photoshop è piuttosto semplice. Per iniziare devi creare un nuovo progetto delle dimensioni che desideri, dopodiché fai clic sul menu Finestra > Timeline (in alto) e premi sul pulsante Crea timeline video che troverai nella parte bassa di Photoshop.
Fatto questo, potrai vedere un’icona formata da tre piccoli riquadri nella parte bassa a sinistra della finestra: fai clic su di essa, per convertire la timeline in animazione di fotogrammi. Al di sotto del primo frame, puoi decidere quanto tempo debba passare prima di riprodurre il frame successivo. Ti suggerisco di impostare un tempo di attesa pari a 0, ossia Nessun ritardo.
Ora, puoi disegnare nel tuo primo frame (la tua prima scena). Ti suggerisco di iniziare con qualcosa di semplice, ad esempio una cornice colorata (puoi seguire il capitolo precedente per la creazione di una cornice). Quando hai terminato di disegnare la tua prima scena, fai clic sul simbolo + nella parte bassa della timeline per aggiungere un nuovo frame.
Aggiungi poi anche un nuovo livello, facendo clic sul pulsante + collocato sotto la scheda dei livelli. Nel nuovo livello, disegna qualcosa di diverso rispetto la prima scena, ad esempio potresti replicare la cornice del primo livello ma semplicemente cambiarle colore. Una volta che avrai determinato le modifiche nel secondo livello, fai clic sul primo frame e, con esso selezionato, nascondi il secondo livello dalla scheda dei livelli. Fai clic sul pulsante play (sotto la timeline) per provare la tua animazione.
Hai capito il trucco? Esatto! A ogni nuovo frame, devi creare un nuovo livello che dovrai poi nascondere nei precedenti frame. Se devi fare un’animazione graduale, ti basta selezionare due frame diversi contemporaneamente e fare clic sul pulsante Effettua tweening tra fotogrammi, situato proprio al di sotto della timeline. Questo genererà un’animazione graduale tra il primo frame selezionato e il secondo.
Se sei soddisfatto dell’animazione, puoi esportarla facendo clic sul menu File > Esporta > Salva per Web (versione precedente), in alto a sinistra. Nella finestra di esportazione che si è appena aperta, i parametri di default sono sempre ottimali, assicurati però di avere selezionato le opzioni Trasparenza e Opzioni ciclo: Sempre. Dopo aver fatto questo, puoi cliccare sul pulsante Salva per ottenere il tuo overlay animato (puoi trovare un esempio del risultato finale qui).
Come creare un overlay animato senza Photoshop
La creazione di un overlay animato è molto semplice anche con GIMP, anzi anche più semplice rispetto a Photoshop. Quindi, se stai cercando come creare un overlay animato senza Photoshop, hai trovato il programma che fa per te.
Nel software GIMP, la timeline delle animazione è la stessa scheda dei livelli. Esatto! I livelli diventano i frame e l’ordine di riproduzione inizia dal livello più in basso fino al livello più in alto. Il procedimento da seguire, dunque, è davvero semplice. Ti basterà fare un po’ di pratica e otterrai subito l’autonomia che ti serve!
Prima di tutto, devi disegnare il primo stato del tuo overlay nel primo livello: per iniziare, ti suggerisco una cornice colorata (puoi seguire il capitolo precedente per la creazione di una cornice), dopodiché devi creare un nuovo livello, ma ti suggerisco di fare clic sul pulsante Duplica livello, sotto la scheda dei livelli, in modo da ottenere una copia esatta del primo livello.
Ora puoi modificare il colore o la forma del secondo livello a tuo piacimento, in modo da differirla dal primo. Puoi creare quanti livelli desideri e modificare progressivamente qualche elemento a tuo piacimento: ricorda che l’ordine di riproduzione dei livelli sarà dal più basso al più alto. Quando hai preparato tutti i livelli per l’animazione, nascondi il livello di sfondo, in modo da avere la trasparenza dell’overlay.
A questo punto, ti basta andare nel menu Filtri > Animazione > Ottimizza (per Gif) (in alto). Se vuoi, puoi vedere un anteprima dell’animazione dal menu Filtri > Animazione > Esecuzione. Se sei soddisfatto dell’animazione, non ti resta che salvarla, quindi fai clic nel menu File > Esporta come e, nella finestra di esportazione, scegli la destinazione in cui vuoi esportare l’overlay e imposta l’estensione .GIF nella casella Seleziona tipo di file. Infine, fai clic sul pulsante Esporta.
Nella finestra che è appena comparsa, assicurati di avere selezionato i riquadri Come animazione e Ciclo continuo, in modo da avere un’animazione continua e ripetuta. Benissimo: ora clicca sul pulsante Esporta per ottenere il tuo overlay animato con estensione .GIF. Missione compiuta!
Come creare un overlay per Twitch
Con la nota piattaforma di Twitch Studio è possibile applicare gli overlay statici in pochi minuti. Purtroppo non è possibile caricare gli overlay animati poiché la piattaforma li traduce come immagini statiche. Tuttavia, è possibile caricare dei piccoli clip video in alternativa alle animazioni. Ma non dilunghiamoci oltre, ti spiegherò come creare un overlay per Twitch in pochi e semplici step. Trovi tutti i dettagli in questo capitolo della guida.
Per iniziare, disegna il tuo overlay preferito seguendo le indicazioni che ti ho dato prima per creare un overlay statico. Quando hai ottenuto il file in formato .PNG, avvia la piattaforma Twitch Studio. Nella parte inferiore della schermata principale, fai quindi clic sul pulsante Modifica scena.
A questo punto, clicca sul pulsante + posto nella scheda dei livelli situata in alto a sinistra e, successivamente, fai clic sul pulsante Immagine. Vedrai comparire un riquadro di selezione al centro della schermata: puoi spostarlo dove vuoi e dargli le dimensioni che preferisci; in seguito, sulla colonna di sinistra, dovrai fare clic sul pulsante Sfoglia e scegliere un immagine da caricare al suo interno. Quando avrai individuato il tuo overlay in formato .PNG, fai clic sul pulsante Apri.
L’overlay che hai scelto si adatterà automaticamente alla dimensione del riquadro di selezione, ma tu puoi spostarlo, ingrandirlo e rimpicciolirlo a piacimento, facendo clic su un angolo e trascinandolo nella direzione che desideri. Quando hai finito di personalizzare la scena, fai clic sul pulsante Salva situato nella parte bassa della schermata.
Ecco fatto! Ora puoi sperimentare la creazione di nuovi overlay e caricarli su Twitch Studio per personalizzare la tua diretta live in modo unico e creativo!
Come creare un overlay per StreamYard
La piattaforma Web StreamYard permette l’inserimento di overlay solo nei piani a pagamento. Purtroppo l’account gratuito per le dirette live non permette di effettuare grandi modifiche al proprio canale. Tuttavia, basta il piano base (ovvero il più economico) per accedere a tante funzionalità come questa, inclusa quella di poter caricare overlay animati.
Trovi tutti i dettagli sui piani economici nella pagina ufficiale di StreamYard. Se stai utilizzando questa piattaforma con il piano Basic (base) e ti stai chiedendo come creare un overlay per StreamYard, ti farà piacere sapere che puoi trovare tutte le informazioni necessarie allo scopo in questa sezione del tutorial.
Per iniziare, disegna dunque un overlay seguendo le indicazioni su come creare un overlay statico o come creare un overlay animato che ti ho dato prima. Dopo aver esportato il tuo overlay statico o animato, accedi al tuo account di StreamYard mediante il browser che utilizzi solitamente per navigare online.
Ora, se hai un Broadcast memorizzato, fai clic sull’opzione Enter Broadcast Studio; se, invece, non hai un Broadcast, fai clic sull’opzione Create Broadcast e dai un titolo al tuo nuovo canale. Nella schermata del Broadcast Studio, devi poi fare clic sull’icona Brand (quella forma di tavolozza dei colori) situata nella colonna di destra. A questo punto, non devi far altro che cliccare sul pulsante + situato sotto la voce Overlay, per caricare il tuo overlay statico con estensione .PNG oppure un overlay animato con estensione .GIF.
Noterai che StreamYard caricherà l’overlay in dimensioni reali, quindi a tutto schermo. Purtroppo non è concessa la personalizzazione delle dimensioni o della posizione dell’overlay.
Come creare un overlay per OBS
Se stai utilizzando OBS Studio, celebre software per la registrazione e la realizzazione di video live più famosi al mondo (di cui ti ho parlato qui), ti sarà sicuramente capitato di voler personalizzare l’aspetto del tuo canale. Ebbene, se sei arrivato qui per capire come creare un overlay per OBS, ti accontento subito.
Per iniziare, disegna un overlay seguendo le indicazioni su come creare un overlay statico o come creare un overlay animato che ti ho dato prima (esatto! OBS supporta anche gli overlay animati con estensione .GIF).
Dopo aver creato il tuo overlay, avvia il software OBS Studio, fai clic destro al centro della scena e vai nel menu Aggiungi > Immagine, in alto. Nella finestra che si è appena aperta, scegli la voce Crea una nuova fonte e poi fai clic sul pulsante OK. In seguito, fai clic sul pulsante Sfoglia per cercare e selezionare il tuo overlay e introdurlo nella scena.
Se vuoi caricare un overlay animato, devi aggiungere una Fonte multimediale invece di un’immagine: nella finestra di conferma, potrai fare clic sul pulsante Sfoglia per cercare e selezionare l’overlay animato con estensione .GIF. Verifica che l’opzione Ripeti, posta appena sotto il percorso del file, sia selezionata, in modo da permettere all’animazione di ripetersi in continuo senza sosta; in caso contrario, il file multimediale eseguirà solo un ciclo di animazione poi apparirà come un immagine statica.
Quando hai scelto l’overlay statico o animato da includere nella scena di OBS, potrai spostarlo liberamente, facendo clic su di esso e trascinandolo in qualsiasi direzione. Se soffermi il cursore del mouse sugli angoli del riquadro, invece, potrai ridimensionarlo a piacimento.
Può capitare che dopo aver caricato l’overlay tu non riesca a vedere nessun nuovo oggetto inserito, come se fosse nascosto dallo sfondo o dalla registrazione video. Non preoccuparti, dai un occhiata alla scheda Fonti, situata in basso. Noterai che il tuo overlay (immagine o fonte multimediale) è finito al di sotto del Dispositivo di cattura video o sotto altri livelli immagine: non devi far altro che trascinare il livello dell’overlay in una posizione superiore al livello del cattura video e il gioco è fatto.
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 cura 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.
