Gaming News

[Tips] Making your channel banner fit the new Offline Page

Hello everyone! I'm not a fan of the new offline page design. In particular I dislike the new banner for two reasons:

  1. It seems to compress pretty badly no matter what resolution or filesize you adhere to, because it resizes the banner for a 1280 pixel wide browser and then proceeds to blow up the image for any wider window resolution.
  2. It doesn't properly fit the page body width, and as a result you get this nasty overhang if you have a solid banner taking up the whole space.

Fortunately, there is a way to work with this if it bothers you. While a neat offline page banner won't magically get you viewers, it is ultimately part of your brand and it might bother you if it looks awry like it bothered me.

Anyways, the solution is that the banner accepts transparency in the design. Any areas that are transparent will reveal the Profile Accent Color behind it.

The tl;dr is all you need to do is make the right side of your banner be transparent and end your banner a little early given the space provided. If you do it right, your banner will seamlessly blend into the rest of the background color that extends to the right of the page body. No more overhang! This is approximately what it looks like when I leave the entire banner transparent with the exception of the face on the right and the logo on the left.

Read more:  What are the effects of social deduction games like Among Us on the psyche?

Regarding the rest of the banner, there's a little bit of space to work with on the left side. If you place some sort of image between the left boundary of the banner and the left-center console, it won't break in any way if someone maximizes the window on a resolution greater than 1920×1080. I recommend designing your banner for 1920×1080 in mind first, since the better majority of users still use 1920×1080 monitors. This is for you 2560 or 3440 or higher folks when you're testing your banner. If it looks good at 1920×1080, it will probably work for higher resolutions too.

That being said, the higher the resolution the window goes, the more Twitch will blow up the image to fit the higher resolution. It blows up the compressed 720p banner so it's unfortunately hard to get clear quality compared to what your design actually is. When it starts blowing up the banner, it will stretch it from the right boundary while the left boundary stays anchored. The result is that some of your image will now dip behind the page body and will no longer be visible. It's pretty extra to design for people with larger resolutions in mind but it's not too hard and it's fairly satisfying? One fun idea that does come of this though is that if you have a banner that has an image completely hidden in the center-left console you can make it peek out when the window size increases since the cropped-enlarged banner appears more zoomed in but those two consoles don't increase in size with the banner. ・ᴗ・

Read more:  AI: The Somnium Files - The Writer of 999/Zero Escape Series Succeeds With a Killer Murder Mystery Visual Novel Fusion

Even if you follow Twitch's banner size guideline though, just remember that some of your banner will bleed into the topnav and the page body. You'll only get your full banner height back once you shrink the browser window width to 1280 pixels or smaller, at which point the width of the banner is actually too long for the browser and bleeds into the leftnav if you have it expanded. Though at that point if you were working with any logos or images in your banner, they'll be obscured at this point by the two center consoles. You can also see in that image that I opted to use gradient transparency to make it look a bit cleaner when those parts show, though I could also just increase the face size to touch the top boundary and not have to worry about that.

This is unrelated, but I also took /u/ferretbomb's idea of putting a link to VODs in the bio links to shorten the trip to one click. A very nice idea.

Lastly I made this reference in like 2 minutes (so the precise dimensions are a little off) here. Hope this helps!


Similar Guides

Read more:  While you weren't paying attention, GTA Online started becoming a car collectors paradise and it's been pretty cool.

More about Gaming News

Post: "[Tips] Making your channel banner fit the new Offline Page" specifically for the game Gaming News. Other useful information about this game:

Top 20 NEW Medieval Games of 2021

Swords, dragons, knights, castles - if you love any of this stuff, you might like these games throughout 2021.

10 NEW Shooter Games of 2021 With Over The Top Action

We've been keeping our eye on these crazy action oriented first and third person shooter games releasing this year. What's on your personal list? Let us know!

Top 10 NEW Survival Games of 2021

Survival video games are still going strong in 2021. Here's everything to look forward to on PC, PS5, Xbox Series X, Nintendo Switch, and beyond.

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *