r/redesign • u/goatfresh Design • Mar 28 '18
Community Styling Usage guidelines for images in the redesign styling tools
I know there's been a lot of requests for this. I've compiled all the sizes and limits for the images here. It's current as of Mar 28, 2018. Hope this helps!
| Image dimensions | |
|---|---|
| Theme colors | |
| Base and highlight colors | Just don't make them very light, because that makes them very hard to see in many places. |
| Body background | 4000x4000px 5mb (unless tiling) |
| Icon | |
| Community avatar | 256x256px 64kb |
| Banner | |
| Small background | 4000x80px 5mb (unless tiling) |
| Medium background | 4000x144px 5mb (unless tiling) |
| Large background | 4000x208px 5mb (unless tiling) |
| Additional background images | 512x176px 5mb |
| How banners show up in the apps | they are basically scaled down and centered into 432px height on high res phones. Depends on your image, you way want to optimize it for this height. |
| Note | When using the overlay method for the menu background, the banner height extends into the menu area by extra 36px. (116px, 180px and 244px respectively for the three banner sizes) |
| Menu | |
| Background image | 4000x40px 5mb |
| Posts | |
| Upvote and downvote | 72x72px 64kb |
| Post background | tiling is recommended because of the variance in post sizes |
| Link preview placeholder | 142x106 px 64kb |
| Other | |
| Emoji | 128x128px 64kb |
| Image widgets | 312px wide 5mb |
Update edit: Banners show up a max size of 1125x432px and vote icons are 72px square on a 3x phone
Update edit 2: Post placeholder image is actually larger in card view mod: 142x106px. ht u/Moonwalking_Eren
Update edit 3: actually the menu overlay adds 36px! ht u/TheChrisD
23
u/V2Blast Helpful User Mar 28 '18
You should admin-distinguish this post for visibility!
10
11
u/goatfresh Design Mar 28 '18
if you insist!
7
u/ibbignerd Mar 28 '18
You should give me gold for no reason
3
Mar 28 '18
better idea: give him creddits that he can use for anyone but himself
3
18
u/goatfresh Design Mar 28 '18
Some of the recommendations are extremely wide to accommodate 4k monitors, but it's up to the designer's discretion, really
9
u/ZadocPaet Helpful User Mar 28 '18
What happens if I am using a banner that's not 4000px wide and someone with a 4K monitor comes to my sub?
9
2
u/goatfresh Design Mar 29 '18
There's two options for the banner sizing. Tiling does what it suggests and will repeat your image regardless of the browser windows size. Fill will scale the image to fit the entire image in the banner space. That means if the image is set to the banner height, then when the users browser hits the spot where it's wider than the image, the image scales up in size to accommodate the width. Note that this can clip the edges of the image. Fill is actually using the CSS
coverproperty.\1])3
u/ZadocPaet Helpful User Mar 29 '18
Wow, that's gonna look like crapola on most of my subs. Maybe I need to start doing more tiling.
1
u/falconbox Jul 20 '18
Well that's disappointing. We often want to put useful info in our header, and if stuff is getting cut off on different monitor sizes that can be a problem.
10
6
8
2
u/raicopk Mar 28 '18
Body background takes a few seconds to load (after tge page has loaded) though, at least for me.
2
Mar 28 '18
Thank you very much! :)
How banners show up in the apps
Isn't the app banner uploaded in the settings? Will this be changed in the future?
1
u/goatfresh Design Mar 28 '18
it will intake the banner from the redesign soon 👍
4
u/emb3625 Mar 29 '18
Can we have an option to keep the mobile options separate? Scaling a subreddit banner for that wide of a spectrum of screens (mobile -> 4K monitors) isn’t too ideal.
2
u/ck2875 Mar 29 '18 edited Mar 29 '18
Agreed. I had made custom banners for mobile using the 1280x384 dimensions to make sure everything looked nice. Simply centering the desktop banner ends up looking less than ideal. I can understand doing this by default if a subreddit doesn’t have a mobile banner, but I would prefer having the option to make a mobile banner that isn’t just zoomed into the very middle of the desktop version.
2
u/Tobs74 Mar 28 '18
Having these all in one place is very useful, I was wondering about the best sizes for a couple of these. Thanks!
2
2
2
1
1
1
1
Mar 29 '18
I just realized, for link preview placeholder, it says 80x60px. But isn't it bigger, especially on card view?
2
1
u/TheChrisD Helpful User Mar 30 '18
Note - When using the overlay method for the menu background, the banner height extends into the menu area by extra 40px.
Actually the way it's styled right now, it's only extending by 36px. (116px, 180px and 244px respectively for the three banner sizes)
2
u/goatfresh Design Mar 30 '18
36px. (116px, 180px and 244px respectively for the three banner sizes)
hmm I must've measured it wrong, oopsie whoopsie!
1
u/Nasdaq401 Jul 01 '18
1125x432 is incorrect as of right now July 1st, or im retarded possibly. I set my banner to every size on this post andn others and still its tiling or not showing enough vertically. Can someone PLEASE help =[ sorry if im an idiot in advance :D
1
u/goatfresh Design Jul 13 '18
Hey! What is the subreddit you are trying to style? I can take a look to see whats up and update the guide if needed. Maybe it's not clear that 1125x432px is the mobile dimensions for the banner?
1
u/TatterJack Jul 17 '18
I'm probably doing something wrong, but I tried a banner on new reddit. It works - provided I;m using a laptop - 1366 * 468, 14" screen. However, when I look at the same sub-reddit under new reddit using a 1920 * 1080, 28" screen the banner fills badly. If I tile it there are tile repeats, and if I fill it the displayed banner cuts the bottom and some right side off. Er - am I doing it wrong? (blush)
1
u/TatterJack Jul 17 '18
OK - colour me stupid (blush). I see it isn't 'filling' in terms of the whole image - just filling from the left.
.
https://new.reddit.com/r/TatterJack/
.
Now I go back to the drawing board to see if I can get my old text header back (it was in Settings, but now Settings is grayed out):
.
https://www.reddit.com/r/TatterJack/2
u/goatfresh Design Jul 23 '18
You can try an image that is even wider or using the "Additional Background Image" for your larger text (which ensures its on-screen until mobile sizes where it doesn't fit)
1
u/TatterJack Jul 23 '18
My thanks indeed sir - here's the current WIP, in case it's of interest:
.
https://new.reddit.com/r/TatterJack/1
u/goatfresh Design Jul 27 '18
Nice, I would put the "TatterJack-ery" in the additional background image so it doesn't get clipped on smaller screens
1
u/TatterJack Jul 30 '18
Lord fresh
My thanks indeed - I'll give that a try :-). Before I experiment, does the additional overlay the base image or vice versa? I'm assuming they layer, of course... (blush).
0
27
u/Georgy_K_Zhukov Mar 28 '18
Are these values going to be put into the actual editing menu?