Hur man gör en Twitch Overlay med Photoshop

Annons

Twitch har förändrat spelets ansikte under de senaste åren, med populära Twitch-streamers som tjänat stora pengar på sina favoritspel. För många tittare är Twitch som en ny form av sociala medier, och trots senaste ändringar i Twitch-reglerna, dess popularitet är större än någonsin.

Om du vill tjäna pengar på streaming måste du göra det bygga en stor tittarsiffra på Twitch, och en viktig del av det är att få din stream att se professionell ut.

I den här artikeln visar vi dig hur du skapar en enkel Twitch-överlägg med hjälp av Photoshop. Och även om detta överlägg är för Minecraft, kan det modifieras för att fungera med vilket annat spel som helst. Och det kommer också att fungera perfekt för streaming på YouTube Gaming eller till och med Mixer, Microsofts alternativ till Twitch.

Komma igång

Innan vi börjar, låt oss titta på vad vi kommer att avsluta med idag:

Allt i denna handledning är relativt enkelt, men om du är ny på Photoshop kan det hjälpa att först läsa vår Handledning för Photoshop lager

Adobe Photoshop Tips: Photoshop Layers Tutorial Läs mer . Om du letar efter ett gratis alternativ till Photoshop är GIMP otroligt kraftfullt.

Om du vill göra en Twitch-överlagring utan att använda Photoshop är detta projekt fullt möjligt i GIMP. Eftersom verktygen du kommer att använda kommer att vara lite annorlunda skulle jag föreslå att du läser vår guide till GIMP En introduktion till GIMP-fotoredigering: 9 saker du behöver vetaGIMP är den bästa gratis fotoredigeringsappen som finns. Här är allt du behöver veta om att redigera foton i GIMP. Läs mer först.

Med det sagt, låt oss ta en titt på hur man gör en Twitch-överlagring med Photoshop.

Skapa duken

För att börja skapa överlägget, öppna Photoshop och skapa en ny bild i samma storlek som din skärmupplösning.

Nu när vi har ett tomt dokument behöver vi en guide för att bygga vår överlägg runt. Jag skulle föreslå att du tar en skärmdump av ditt valda spel och laddar in det i Photoshop genom att klicka Arkiv & Placera och välja din bild. Sträck ut bilden till full storlek på duken. Nu kan vi börja skapa våra överläggselement.

Lägga till en Top Bar

Skapa ett nytt lager och namnge det Topp banner. Välj Rektangelverktyg från menyn till vänster. På samma meny öppnar du färgväljaren och väljer din bakgrundsfärg.

Klicka och dra nu över toppen av ditt nya lager för att skapa en toppbanner. Oroa dig inte om du överlappar dukens kanter, rektangeln ska snäppa på plats med sidan.

Nu, för att ge denna rektangel en kant, högerklicka på lagret och välj Blandningsalternativ. Välj Stroke från menyn som visas och ställ in streckbredden och färgen till vad som fungerar för dig. I det här fallet ser 10px bred med en mörkröd färg bra ut. Klicka på OK och välj ditt lager. Slå på flyttverktyget genom att trycka på bokstaven V och flytta den övre bannern uppåt så att den har tillräckligt med utrymme för att lägga till text senare, men inte skymmer för mycket av spelskärmen.

Välj slutligen det översta bannerlagret och sänk dess opacitet till cirka 75 procent. Detta kommer att tillåta spelet att synas något och ger överlägget en mer dynamisk effekt.

Du har gjort en bra start och du kan använda det du har gjort hittills för att skapa de två nedersta banners.

The Bottom Banners

Istället för att göra samma arbete igen för dessa nedre banners, högerklicka helt enkelt på Topp banner och välj Duplicera lager. Namnge detta nya lager Nere till höger och använda Flytta verktyg (V på tangentbordet), flytta det längst ner till höger på skärmen. Se till att det inte överlappar med verktygsfältet i spelet och använd Ctrl tangenten medan du drar för att placera den med mer precision.

För att skapa den nedre vänstra fältet, följ bara samma metod som ovan och flytta den ner till den nedre vänstra sidan av skärmen. Vårt grundläggande överlägg är nu färdigt, så vi kan lägga till en ram för vår kamera.

Kameraram

Skapa ett nytt lager och anropa det Ram. Välj Rektangelverktyg igen, och skapa en perfekt fyrkant genom att hålla nere Flytta medan du drar muspekaren. Oroa dig inte för färgen på torget, vi kommer att bli av med fyllningen senare.

För att skapa ramen, högerklicka på lagret och välj Blandningsalternativ. Välj Stroke men den här gången väljer du Inre från Placera rullgardinsmenyn för att få ramen att hamna på torget i stället för att placeras på utsidan.

Välj återigen en färg och bredd som passar det färgschema du har hittills. Välj nu lagret och ändra det Fylla till 0 procent, vilket bara lämnar ramen.

Använd Flytta verktyg för att placera den ovanför den nedre vänstra bannern och ändra storlek på den om du behöver genom att hålla ned Flytta nyckeln för att bevara dess bildförhållande.

Överlägget börjar komma ihop, men nu är det dags att lägga till lite text.

Lägger till text

Skapa ett nytt lager för att börja lägga till text. Använd Textverktyg (eller tryck T på din keuyboard) och dra ut en ny textruta. Välj Karaktär menyn från höger sida som visas nedan:

Om du inte kan se den här knappen i din Photoshop-layout kan du öppna menyn genom att klicka Fönster > Karaktär. Välj ditt valda teckensnitt och färg här och lägg till din text. Använd Flytta verktyg för att placera din text på en av dina nedersta banners. Den ska snäppa på plats, men den Ctrl nyckel kan hjälpa dig att finjustera den till exakt där du vill att den ska vara.

Nu har vi text, men det ser lite intetsägande ut. Så för att få det att sticka ut högerklickar du på textlagret och väljer igen Blandningsalternativ. Ge texten a Stroke och även a Drop Shadow för att få det att sticka ut lite. Standardvärdena används här, men du kan leka med inställningarna för att skapa en mycket mer uttalad "flytande text"-effekt också.

Skapa textelement för de andra tre hörnen genom att högerklicka på det här lagret och markera Duplicera lager, och med hjälp av Flytta verktyg för att flytta varje nytt lager till sina respektive hörn.

Med vår text nu på plats är vi nära att vara klara. Låt oss bara lägga till logotyper för sociala medier och en header-logotyp för kanalen.

Logotyper för sociala medier

Det är lättare att använda färdiga ikoner som är kommersiellt fria att använda. En hemsida som Ikon Finder kan hjälpa till med detta, men se till att alla ikoner du använder är markerade Gratis för kommersiellt bruk för att undvika att hamna i juridiska problem senare. Importera din logotyp till Photoshop med hjälp av Arkiv > Plats meny. Om du inte kan se din logotyp, se till att den är överst genom att dra dess lager till toppen av lagermenyn.

Nu har vi en Facebook-logotyp, men den är lite intetsägande. Låt oss få det att passa in genom att högerklicka på dess lager och välja Blandningsalternativ, följd av Stroke. Ge den ett yttre slag med samma bredd som din översta banners slag. När du väljer färg kan du använda pipetten för att matcha färgen till din toppbanner.

Flytta logotypen upp till den övre vänstra delen av skärmen, och genom att använda Ctrl nyckel placera den försiktigt så att den passar in i hörnet.

Följ samma metod för Twitter-logotypen Plats för att lägga till det i projektet. Du kan spara lite tid här genom att välja Facebook-logotyplagret, högerklicka och välja Kopiera lagerstil, innan du återvänder till det nya Twitter-logolagret och använder Klistra in lagerstil för att ge den samma slagbredd och färg. Flytta den här logotypen till det motsatta övre hörnet och, om det behövs, flytta din text så att den passar.

Låt oss nu lägga till mittlogotypen.

Kanallogotyp

Om du har en kanallogotyp är det bra att ha den fram och tillbaka så att alla kan se den direkt när de börjar titta. Om du ännu inte har en logotyp kan du byta ut den mot en lite anpassad text med ditt kanalnamn eller webbplats.

Börja med att dra ut en linjal från det vänstra verktygsfältet, den ska fästa mot mitten av skärmen.

Om du inte kan se din linjal eller om den inte knäpper, titta under Se menyn och kontrollera att båda Linjal och Knäppa är valda.

Plats din logotyp in i projektet. Den ska automatiskt centreras på linjalen. Skapa ett nytt lager och dra det till lagret under logotypen. Använd Rektangelverktyg för att skapa en rektangel som är något större än logotypen, vilket ger den en inramad effekt.

För att få den att sticka ut, ge din nyskapade ruta en Yttre slag samma färg som resten av dina bårder. Håll ned för att göra det lättare att flytta logotypen och kanten som en Ctrl för att välja båda lagren. Högerklicka och välj Konvertera till smart objekt. Detta lagrar både vår logotyp och kant på samma lager, som fortfarande kan redigeras senare om det behövs.

Flytta din logotyp till toppen av överlägget och ändra storlek på den så att den passar. Och det är det, vi är alla klara.

Sparar överlägget

Innan du sparar överlägget som en bild, spara det som ett Photoshop-dokument med ett filnamn som "Minecraft Twitch Template" så att du kan ändra det senare för att användas med olika spel.

För att göra bakgrunden genomskinlig, välj Öga ikonen på spelets skärmdump och bakgrundslager, så att endast överläggselementen visas.

Spara den här filen med filtillägget .PNG och ladda in den i din strömningsprogramvara för att använda den. Här är det färdiga överlägget i min streamingprogramvara, med överlägget som översta skiktet, kameran som mellanskikt och Minecraft som bottenskikt.

Twitch-överlägget är klart: Kom nu till streaming!

Nu när du vet hur man gör en Twitch-överlagring är det dags att börja streama! Kom igång med din kanal ställa in din streamingprogramvara och välja vilka spel som ska spelas på Twitch Kan du inte få tittare på Twitch? Du spelar fel spelAtt försöka bygga en publik på Twitch känns som att vara värd för en fest som man glömt att skicka ut inbjudningar till. Om du vill öka din trafik, överväg dessa frågor när du väljer ett spel. Läs mer . Och om du verkligen vill ha produktionsvärde, försök sändning med grön skärm Hur man sänder live med en grön skärmSkulle det inte vara coolt om vi kunde använda denna gröna skärm-effekt för en livesändning - som på Google Hangouts eller Skype? "Ja, det skulle det verkligen vara, James" är svaret du letar efter... Läs mer . Framför allt annat, ha kul!