Come creare una sovrapposizione di Twitch usando Photoshop

Twitch ha cambiato il volto dei giochi negli ultimi anni, con i migliori streamer di Twitch che hanno fatto un sacco di soldi giocando ai loro giochi preferiti. Per molti spettatori, Twitch è come una nuova forma di social media e, nonostante le recenti modifiche alle regole di Twitch, la sua popolarità è più grande che mai.

Se vuoi fare soldi con lo streaming, dovrai farlo costruire un ampio pubblico su Twitch e una parte importante di ciò è rendere il tuo streaming professionale.

In questo articolo, ti mostreremo come creare un semplice Sovrapposizione di Twitch usando Photoshop. E mentre questo overlay è per Minecraft, può essere modificato per funzionare con qualsiasi altro gioco. E funzionerà perfettamente anche per lo streaming su YouTube Gaming o anche su Mixer, l'alternativa di Microsoft a Twitch.

Iniziare

Prima di iniziare, diamo un'occhiata a cosa finiremo oggi:

Tutto in questo tutorial è relativamente semplice, ma se non conosci Photoshop, potrebbe essere utile leggere prima il nostro tutorial sui livelli di Photoshop. Se stai cercando un'alternativa gratuita a Photoshop, GIMP è incredibilmente potente.

Se vuoi creare una sovrapposizione di Twitch senza usare Photoshop, questo progetto è completamente possibile in GIMP. Poiché gli strumenti che utilizzerai saranno leggermente diversi, ti suggerirei di leggere il nostro guida a GIMP primo.

Detto questo, diamo un'occhiata a come creare una sovrapposizione di Twitch con Photoshop.

Creare la tela

Per iniziare a creare la sovrapposizione, apri Photoshop e crea una nuova immagine delle stesse dimensioni della risoluzione dello schermo.

Ora che abbiamo un documento vuoto, abbiamo bisogno di una guida per costruire la nostra sovrapposizione. Suggerirei di fare uno screenshot del gioco scelto e di caricarlo in Photoshop facendo clic su File e luogo e selezionando la tua immagine. Allunga l'immagine fino alla dimensione massima della tela. Ora possiamo iniziare a creare i nostri elementi di sovrapposizione.

Aggiunta di una barra superiore

Crea un nuovo livello e chiamalo Banner in alto . Seleziona il Strumento rettangolo dal menu di sinistra. Nello stesso menu, apri il selettore dei colori e scegli il colore di sfondo.

Ora fai clic e trascina nella parte superiore del nuovo livello per creare un banner superiore. Non preoccuparti se sovrapponi i bordi della tela, il rettangolo dovrebbe scattare in posizione con il lato.

Ora, per dare un bordo a questo rettangolo, fai clic con il pulsante destro del mouse sul livello e seleziona Opzioni di fusione . Selezionare Ictus dal menu che appare e imposta la larghezza e il colore del tratto su ciò che funziona per te. In questo caso, una larghezza di 10 pixel con un colore rosso scuro sembra buona. Fare clic su OK e selezionare il livello. Accendi lo strumento di spostamento premendo la lettera V e sposta il banner in alto verso l'alto in modo che abbia spazio sufficiente per aggiungere testo in seguito, ma non oscuri troppo lo schermo di gioco.

Infine, seleziona il livello del banner superiore e riduci la sua opacità a circa il 75%. Ciò consentirà al gioco di trasparire leggermente e darà alla sovrapposizione un effetto più dinamico.

Hai fatto un ottimo inizio e puoi utilizzare ciò che hai fatto finora per creare i due banner in basso.

Gli striscioni in basso

Invece di fare di nuovo lo stesso lavoro per questi banner in basso, fai semplicemente clic con il pulsante destro del mouse su Banner in alto e seleziona Duplica livello . Dai un nome a questo nuovo livello In basso a destra e usando il Strumento Sposta ( V sulla tastiera), spostalo in basso a destra sullo schermo. Assicurati che non si sovrapponga alla barra degli strumenti del gioco e usa il Ctrl mentre si trascina per posizionarlo con maggiore precisione.

Per creare la barra in basso a sinistra, segui lo stesso metodo di cui sopra e spostala verso il basso nella parte in basso a sinistra dello schermo. La nostra sovrapposizione di base è ora completa, quindi possiamo aggiungere una cornice per la nostra fotocamera.

Cornice della fotocamera

Crea un nuovo livello e chiamalo Portafoto . Seleziona il Strumento rettangolo di nuovo, e creare un quadrato perfetto tenendo premuto il tasto Spostare mentre si trascina il cursore del mouse. Non preoccuparti per il colore del quadrato, ci libereremo del riempimento in seguito.

Per creare la cornice, fai clic con il pulsante destro del mouse sul livello e seleziona Opzioni di fusione . Selezionare Ictus ma questa volta seleziona Interno dal Posizione menu a tendina, per far entrare la cornice nel quadrato invece di metterla all'esterno.

Ancora una volta seleziona un colore e una larghezza che si adattino allo schema di colori che hai finora. Ora seleziona il livello e cambialo Riempire allo 0 percento, lasciando solo il frame.

Utilizzare il Strumento Sposta per posizionarlo sopra il banner in basso a sinistra e ridimensionarlo se necessario tenendo premuto il tasto Spostare chiave per preservare le sue proporzioni.

L'overlay sta iniziando a prendere forma, ma ora è il momento di aggiungere del testo.

Aggiunta di testo

Per iniziare ad aggiungere testo, crea un nuovo livello. Utilizzare il Strumento di testo (o premere T sulla tastiera) e trascina una nuova casella di testo. Seleziona il Carattere menu dal lato destro come mostrato di seguito:

Se non riesci a vedere questo pulsante sul layout di Photoshop, puoi aprire il menu facendo clic su Finestra > Carattere . Seleziona qui il carattere e il colore che hai scelto e aggiungi il testo. Utilizzare il Strumento Sposta per posizionare il testo su uno dei banner in basso. Dovrebbe scattare in posizione, ma il Ctrl chiave può aiutarti a rifinirlo esattamente dove vuoi che sia.

Ora abbiamo il testo, ma sembra un po' insipido. Quindi, per farlo risaltare, fai clic con il pulsante destro del mouse sul livello di testo e seleziona nuovamente Opzioni di fusione . Dai il testo a Ictus e anche a Ombra esterna per farlo risaltare un po'. Qui vengono utilizzati i valori predefiniti, ma puoi giocare con le impostazioni per creare anche un effetto 'testo fluttuante' molto più pronunciato.

Crea elementi di testo per gli altri tre angoli facendo clic con il pulsante destro del mouse su questo livello e selezionando Duplica livello , e usando il Strumento Sposta per spostare ogni nuovo livello nei rispettivi angoli.

Con il nostro testo ora a posto, siamo vicini alla fine. Aggiungiamo solo i loghi per i social media e un logo di intestazione per il canale.

È più facile utilizzare icone predefinite che sono commercialmente gratuite. Un sito web come Trova icone può aiutare con questo, ma assicurati che tutte le icone che usi siano contrassegnate Gratuito per uso commerciale per evitare di finire in guai legali in seguito. Importa il tuo logo in Photoshop usando il File > Luogo menù. Se non riesci a vedere il tuo logo, assicurati che sia in cima trascinando il suo livello nella parte superiore del menu dei livelli.

Ora abbiamo un logo di Facebook, ma è un po' insipido. Facciamo in modo che si adatti facendo clic con il pulsante destro del mouse sul suo livello e selezionando Opzioni di fusione , seguito da Ictus . Dagli un tratto esterno della stessa larghezza del tratto del tuo banner superiore. Quando selezioni il colore, puoi utilizzare il contagocce per abbinare il colore al banner in alto.

Sposta il logo in alto nella parte in alto a sinistra dello schermo e usando il Ctrl chiave posizionarlo con attenzione in modo che si inserisca nell'angolo.

Per il logo Twitter, segui lo stesso metodo di utilizzo Luogo per aggiungerlo al progetto. Puoi risparmiare un po' di tempo qui selezionando il livello del logo di Facebook, facendo clic con il pulsante destro del mouse e scegliendo Copia stile livello , prima di tornare al nuovo livello del logo di Twitter e utilizzare Incolla stile livello per dargli la stessa larghezza e colore del tratto. Sposta questo logo nell'angolo in alto opposto e, se necessario, sposta il testo in modo che si adatti.

Ora aggiungiamo il logo centrale.

Logo del canale

Se hai il logo di un canale, è bene averlo davanti e al centro in modo che tutti possano vederlo immediatamente quando iniziano a guardarlo. Se non hai ancora un logo, puoi sostituirlo con a del testo personalizzato con il nome del tuo canale o il tuo sito web.

Per iniziare, trascina un righello fuori dalla barra degli strumenti a sinistra, dovrebbe agganciarsi al centro dello schermo.

Se non riesci a vedere il tuo righello o non si spezza, guarda sotto il Visualizzazione menu e controlla che entrambi Governate e Affrettato sono selezionati.

Luogo il tuo logo nel progetto. Dovrebbe essere centrato automaticamente sul righello. Crea un nuovo livello e trascinalo sul livello sotto il logo. Utilizzare il Strumento rettangolo per creare un rettangolo leggermente più grande del logo, dandogli un effetto incorniciato.

Per farlo risaltare, dai al tuo quadrato appena creato e Corsa esterna lo stesso colore del resto dei bordi. Per spostare più facilmente il logo e il bordo come uno, tieni premuto Ctrl per selezionare entrambi i livelli. Fare clic con il tasto destro e selezionare Converti in oggetto intelligente . Questo memorizza sia il nostro logo che il bordo sullo stesso livello, che può ancora essere modificato in seguito, se necessario.

Sposta il tuo logo nella parte superiore dell'overlay e ridimensionalo per adattarlo. E questo è tutto, abbiamo finito.

Salvare la sovrapposizione

Prima di salvare l'overlay come immagine, salvalo come documento Photoshop con un nome file come 'Minecraft Twitch Template' in modo da poterlo modificare in seguito per utilizzarlo con giochi diversi.

Per rendere lo sfondo trasparente, seleziona il pulsante Occhio sullo screenshot del gioco e sui livelli di sfondo, lasciando visibili solo gli elementi di sovrapposizione.

Salva questo file con l'estensione .PNG e caricalo nel tuo software di streaming preferito per usarlo. Ecco l'overlay finito nel mio software di streaming, con l'overlay come livello superiore, la fotocamera come livello intermedio e Minecraft come livello inferiore.

Sovrapposizione Twitch completata: ora passa allo streaming!

Ora che sai come creare una sovrapposizione di Twitch, è ora di iniziare a trasmettere in streaming! Avvia il tuo canale con configurare il software di streaming e scegliendo a quali giochi giocare su Twitch. E se stai davvero cercando il valore della produzione, prova trasmettere con uno schermo verde . Soprattutto, divertiti!

Condividere Condividere Tweet E-mail 5 suggerimenti per potenziare le tue macchine Linux VirtualBox

Stanchi delle scarse prestazioni offerte dalle macchine virtuali? Ecco cosa dovresti fare per aumentare le prestazioni di VirtualBox.

Leggi Avanti Argomenti correlati

Gioco
Creativo
Adobe Photoshop
Video online
Contrazione
Cultura del gioco
Tutorial Photoshop

Circa l'autore Ian Buckley(216 articoli pubblicati)

Ian Buckley è un giornalista freelance, musicista, performer e produttore di video che vive a Berlino, in Germania. Quando non scrive o sul palco, armeggia con l'elettronica o il codice fai-da-te nella speranza di diventare uno scienziato pazzo.

come dire che mobo ho?

Altro da Ian Buckley

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti