FurAffinity's new banners are nifty, but they don't give much design info beyond dimensions, so I made up a template with some notes to help you ensure that the important parts of your banner aren't covered by site elements like the navigation or your profile pic. Hope it helps, spread the word if it does!
Category All / All
Species Unspecified / Any
Size 1850 x 300px
File Size 34.8 kB
Happy to help! You want to have your banner fill the whole width, because if you don’t you’ll just have blank space if the window gets super big. The “crop” zones just show you what will be visible at certain common window/display widths so you can plan your banner accordingly. So, you don’t want to put anything important in the far right because that’s going to get cut off a lot of the time!
Being able to upload different versions for different platforms would be a welcome option, but in terms of alignment/cropping, there's always going to be some variance in what can and can't be seen; there's no real perfect solution for banner sizing. Honestly, aligning to the left is probably the best option for this particular implementation because the leftmost side will always be seen regardless of window width, so it's the most predictable. In any case, I hope the template helps 😊
Please, does anybody know which are the best specs for export? Even if the banner respects the suggested resolution and export format, the banners looks always pixelated when viewed from mobile. I'm really curious how the FA home banner was exported, because the result is so clean and detailed <3
As near as I can tell, when you upload your banner image, FA generates a lower-resolution version of your banner image and pulls that up for mobile browsers, presumably to reduce bandwidth on mobile. This is something that doesn’t have an associated option anywhere that I can find, but the dimensions in the template are correct despite the resolution change.
Any image editor at all should be able to create a document using the dimensions of the image here. There are too many to go into, so do a Google search for “[App] create document from clipboard” where [app] is your image editor of choice. Right-click the image and “copy image”, then follow the instructions you found to create a new document using the image. Then create your banner using the guides of the template.
FA+

Comments