Content of the article: "[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:
- 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.
- 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.
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. ･ᴗ･
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!
- [Guide/Analysis/Comparisons] Nvidia Image Sharpening : Guide to Squeezing Higher Frame Rates with Minimal Visual Compromise
- HITMAN Photoshop Contest
- Chat overlay CSS formatting
© Post "[Tips] Making your channel banner fit the new Offline Page" for game Gaming News.
Top 7 NEW Games of June 2020
Quite a few exciting games are releasing for PC, PS4, Xbox One, and Nintendo in June. Here's what to keep an eye on.
Top 10 NEW Open World Games of 2020
Video games with open worlds continue to roll out in 2020 on PC, PS4, Xbox One, Nintendo Switch, and beyond. Here are some to look forward to!
Top 10 Best New Upcoming Games 2020-2021
The best selection of games which will be released in 2020 and 2021 for PS4, PS5, Xbox One, Xbox Series X, Google Stadia and PC - and you can watch in amazing UHD 4K and 60FPS with latest updates about all of the games in this list!