Looking to update your Twitch streaming channel with a brand new look? Or are you new to streaming and you're looking for the best way to visually attract viewers? Follow this tutorial and learn how to make an awesome Fortnite Twitch banner!
Your Twitch banner essentially acts as a cover image or header which is situated in a prominent position on your channel or page. This means that we'll want a unique and interesting image to attract more viewers to the Twitch channel. It is also important that the image is somewhat related to what your channel is focusing on. So with this in mind we'll be using the ever popular Fortnite as an example for our Twitch banner. However, feel free to use another game character to suit your needs.
Want to save time? Head on over to Envato Elements to download your Twitch template PSDs.
What You'll Learn in This Adobe Photoshop Tutorial
- How to use the recommended Twitch banner sizes and dimensions for 2021
- How to create a Fortnite Twitch banner using Adobe Photoshop
- How to choose and import images from the game
- How to customise your typography
What You'll Need
To learn how to create a Fortnite Twitch banner in Adobe Photoshop, you'll need to download a copy of the game, which is free to play on the Epic Games Store. You'll also need to download the pattern.png attachment which you can get by clicking on the "Download Attachment" button on the right.
1. What Is the Correct Document Size for a Twitch Banner?
Step 1
So let's begin by first determining the correct dimensions for our Fortnite Twitch banner. The recommended size as of 2021 is 1200 px by 480 px, with a file size of up to 10 MB.
Create a new document in Adobe Photoshop with these dimensions, and click on the create button.
- Width: 1200 pixels
- Height: 480 pixels
- Resolution: 72 dpi
Step 2
This will create a new document with the correct dimensions for us to start. The rectangular shape of our banner should look like the one shown in the image below.
2. How to Import a Background Image
Step 1
To create a background image, we'll need to grab the highest quality screenshot possible from within the game. In the game settings, we need to make the video options as high as possible (depending on your computer specifications).
For games like Fortnite, you can sometimes simplify this step by selecting the quality option which ranges from Low to Medium, High, and Epic.
Step 2
Fortnite also allows players to save their matches and then watch them again from any angle using the Replay System. This will allow you to focus on capturing the best layout and look for your background image, without having to worry about gameplay.
The Fortnite Replay System features many different camera modes such as Third Person, Drone Modes, and Gameplay Camera. It also features other unique cinematic settings and visualizations to help capture the best background image for your Fortnite Twitch banner.
To enter Replay Mode, go to the Career Tab in the lobby and then select the Replays button at the bottom of the screen.
Step 3
When you are using Replay Mode, make sure to enable the High Quality FX mode to enhance the quality of your image.
Step 4
Take a few screenshots, and once you have a few good shots of your background, choose one to use, and we'll import it into Adobe Photoshop.
Step 5
Import or paste your background image into Adobe Photoshop. This will act as our main background layer.
3. How to Colour the Background Image Using Gradient Maps
Step 1
To change the colour of the background, click on the Create New Fill or Adjustment Layer button (located near the bottom of the Layers Panel) and select Gradient.
Step 2
This will create a Gradient Map layer above our background image. Set it to 70% Opacity.
Step 3
With the Gradient Map layer still selected, click on the gradient bar, which can be found inside the Properties panel. This will open up the Gradient Editor window. Here we will be able to choose the colours for our Gradient Map.
Step 4
Leave the left colour stop as black and change the right colour stop to the following:
- R: 156
- G: 45
- B: 234
Then move it to a location of approximately 62%.
Step 5
The background image should now look similar to the image below. If you like, you can try experimenting and moving the colour stop locations or changing the colours slightly to get a look that you like.
4. How to Create the Background Shapes of the Twitch Banner
Step 1
Using the Polygonal Lasso Tool, draw out a shape which takes up roughly two-thirds of the composition. This space is where your name and social media icons will go. To follow the colours, use the following:
- R: 71
- G: 72
- B: 121
Step 2
Using the Polygonal Lasso Tool again, draw out a second shape near the bottom of your composition. Make sure that the layer is placed below the first shape to avoid any unnecessary overlap. To follow the colours, use the following:
- R: 255
- G: 54
- B: 253
Step 3
Using the Polygonal Lasso Tool again, draw out a third shape for some extra detail. Again, make sure that the layer is placed below the first two shape layers to avoid any unnecessary overlap. To follow the colours, use the following:
- R: 255
- G: 255
- B: 255
5. How to Create the Background Pattern
Step 1
For the background pattern of the Fortnite Twitch Banner, we can use the pattern which you can download from the attachment in this tutorial. Import the pattern into your document.
Step 2
Once you have imported the pattern into Photoshop, you can then change its colour using the Fill Tool or Colour Overlay to the following:
- R: 255
- G: 54
- B: 253
Step 3
Use a combination of the Warp Tool, the Perspective Tool, and the Transform Tool to manipulate the shape of the pattern to give it a more interesting look.
Step 4
With the pattern layer selected, change the Opacity to 15% to give it more subtlety so that it does not clash with the rest of the banner design.
Step 5
Remove any unwanted overlaps using the Polygonal Lasso Tool and the Eraser Tool to give it a cleaner look.
Step 6
You can also add some subtle colour to the design by using a Soft Round Brush. In this example, I've used the colour below:
- R: 107
- G: 38
- B: 142
6. How to Add a Character to the Twitch Banner
Step 1
We can also add a character to our design using the same techniques we used previously to capture the background image of our Fortnite Twitch Banner. Simply go to a screen where the character you want is displayed (such as the character select screen or the store) and then take a screenshot.
Feel free to go in-game and take some screenshots of some Fortnite Twitch Emotes of your character, to add some personality to your banner.
Once you have captured the character that you want to use, go back into Adobe Photoshop and import the character.
Step 2
Carefully use the Lasso Tool to cut out the shape of your chosen character. This can be quite a long process as certain characters' shapes can be quite complex. Certain Fortnite Twitch Emotes can also add more complexity to the overall shape. Use the Transform Tool to resize the character, and then place it near the left of the banner.
Step 3
We can also add a Drop Shadow to further highlight the character that you want to use. To do this, right-click on the character layer. Then choose Blending Options from the menu.
Step 4
This will open up the Layer Style options. Here, we can then select Drop Shadow, which can be found at the bottom of the list.
Then experiment with the Drop Shadow options to get a look that you like. In this example, I've used the following:
- Blend Mode: Normal
- Opacity: 100%
- Angle: 13%
- Distance: 24 px
- Spread: 100%
- Size: 1 px
The colour used for the shadow is shown below:
- R: 27
- G: 5
- B: 52
Step 5
Adjust the Drop Shadow options and experiment with different values until you get a result that you like.
7. How to Add Your Name
Step 1
Choose a font that you would like to use, and type in the first word of your name. I've used the Ammonite Font for this example, but feel free to use something else.
The colour for the first word is as follows:
- R: 255
- G: 255
- B: 255
Step 2
Place the second part of your name below the first part and use a different colour. Try and choose a colour that fits your overall colour scheme. For this example, I've used the following:
- R: 255
- G: 54
- B: 253
Step 3
Gather some social media icons of all the platforms you use. Import them into Adobe Photoshop and arrange them below your name. Here we have chosen to alternate between the two colours used for the name, but feel free to experiment.
8. How to Add Some Final Touches to the Twitch Banner
Step 1
In this section, we will add an adjustment layer, which will allow you to add some finishing touches to the overall look of your Fortnite Twitch Banner design.
Click on the Create New Fill or Adjustment Layer button (located near the bottom of the Layers panel) and select Hue/Saturation from the list.
Step 2
This will create a new Hue/Saturation adjustment layer, which you can now adjust. To do this, select the new adjustment layer that you have created and go to the Properties panel. Here you can use the sliders to change the look of your design.
In this example, I've increased the overall saturation by +30, which will make the colours stand out more.
Step 3
Feel free to experiment and play around with the settings.
Awesome! You're Finished!
Congratulations! And that's how to create a Fortnite Twitch Banner that you can use on your channel or page.
Now that you are familiar with the techniques, why not create a Fortnite Twitch pack? A Fortnite Twitch pack can include more elements to enhance the look of your channel such as Twitch Panels, Twitch Profile Pictures, Twitch Overlays, and more!
Feel free to share your own creations below! I hope you found this tutorial helpful and that you've learned some new tips and tricks that you can use for your own projects. See you next time!
Top 5 Gaming Banners
Need a Twitch banner sooner? Head on over to Envato Elements, where you can download many different gaming template designs. Here are five of my favourite banner template designs.
eSports Banners Ad (PSD)
This Adobe Photoshop template has a modern graphical design featuring a fun female character wearing a VR headset. It includes 15 PSD templates that are easy to customise and edit. All templates are resized according to the latest social media guidelines.
Gaming YouTube Channel Logo Promotion Mockup Pack (PSD)
This mockup pack contains three PSD template files that are easy to edit using organised layers. The template files are high res so they can be used for all your social media needs.
3 YouTube Banners - Gaming Channel Art V1 (PSD)
This pack contains three retro-style YouTube banners that you can use for your own social media channels and pages. All the layers contained in this pack are well organised, clean, and professional, with a resolution of 2560 x 1440.
Social Media Profiles - Art Kit (PSD)
This media kit is perfect for all those action video game fans out there! Use this social media kit to attract new viewers and subscribers to your channel. This pack features a fully editable PSD file that is resized according to the latest social media guidelines.
Gaming Community - Social Media Kit (PSD, PNG, JPG)
This social media kit is perfect for a gaming community or esports website. The template is fully customisable in Adobe Photoshop and features 13 social media headers, covers, and post formats. This set includes sizes suitable for all the popular social media networks, such as Twitter, Facebook, Instagram, and YouTube.
Looking to Learn More? Check Out Even More Gaming Tutorials Below!
45 Twitch Panel Templates (Using a Twitch Panel Maker)
45+ Cool Twitch Stream Overlays (Custom Twitch Overlays to Download)
How to Make Twitch Emotes
How to Make a Minecraft Twitch Overlay
Gaming Templates for Twitch & YouTube Gamers (Streaming Overlays, Banners, and More!)
20+ Best Custom Twitch Emotes (Using a Twitch Emote Maker)
