AniList Banner Templates—or, "How I Figured Out AniList's Weird Banner Cropping"

For the longest time I could not make sense of AniLists automatic banner croppingit seemed that no matter what I did or how I made a banner something was always getting cut off. I found that I was not alone in this frustration and so decided to try finally get to the bottom of it It took a while but through some trialanderror experimentation I was able to generate templates for banners of 3 aspect ratioswhich hopefully youll find to be useful Please keep in mind these templates were made on and are generally intended to work with 16:9 aspect ratio displaysand that your results may vary Top Desktop Browser Full Screen view Bottom Left Desktop Browser Half Screen view Bottom Right Mobile Browser view These view types are important to know keep track of as they will be referenced a lot when denoting visible and nonvisible areas For best results try and positionkeep your banner focus in the white area + somewhere between the green linesit should ALWAYS be visible no matter the view type in that case just click on any of the template images to load fullsize versions which you can save or paste into any image editorGIMP Photoshop etc. Layout The white section is the main focusin the Desktop Browser Full Screen view the white + grey barred area is SEMITRANSPARENT Between the blue lines denotes the area visible when viewed on the Desktop Browser Half Screen Between the green lines denotes the area visible when viewed on the Mobile Browser The circles denote the areas covered by the user profile picture Traits remains comparatively centered + consistent across view types however height + width change Layout The white section is the main focusin the Desktop Browser Full Screen view the white + grey barred area is SEMITRANSPARENT The lightest grey area denotes the area visible when viewed on the Desktop Browser Half Screen The darker grey area denotes the area visible when viewed on the Mobile Browser The circles denote the areas covered by the user profile picture Traits The black areas at the top bottom are not visible Expands upwards + downwards across view types ALWAYS maximum width Layout The entire image is the focus in the Desktop Browser Full Screen view the white + grey barred area is SEMITRANSPARENT Traits Tightens on the center across view types ALWAYS maximum height I recently did design work for a users profile and used the 3:1 aspect ratio template to format a simple banner for them using a base image they provided The intended focal point of the banner the character was placed in the white area + between the green lines as previously mentionedwhile other elements are allowed to break cross or spill over the lines Here is another example a banner I threw together for illustrative purposeselements were placed and positioned within the guides allowing what is important to remain visible across all 3 view types Please remember these lines are not hard borders to work within but a means of centering and visualizing focal point analogous to guidelines on a crop preview If you have any questions feel free to leave a comment here or bug me on my profilehttps://anilist.co/user/onchyophoran