I've noticed some people have problems with their loading screen displaying properly. White bars, warped image, etc. I'm not here to say this is the best method to do your loading screen to your own liking, but it will generally make your loading screen look nice for nearly every monitor resolution.
Known:
"aspect scaled" setting forces top/bottom of image to conform with top/bottom of user screen
Image protruding off sides will be cut off
Lack of image to fill areas will become pure white (a method to changing this color is currently unknown)
Like this -> darken areas are cutoff for 4:3.
Solution: We are going to add in a border knowing that it may or may not be cut off. See below image for example of how it works.
Assumptions:
By creating an image at 16:9 aspect ratio, you will account for all widescreen users (17:9 is wider, but very uncommon)
The border on the sides is made aesthetically pleasing, but won't take away from your loading screen if removed.
You want your loading screen to work perfectly well with all users ranging from 16:9 to 4:3 aspect (5:4 is not common).
The relationship of how the game treats your image is determined by the following ->
width-height*(aspectRatio)=total_cutoff_Width// (divide by 2 to know how much it cuts off on each side)
Where Width and Height is that of your loading screen, and AspectRatio = 4/3 (or 5/4 for more support range, but the cutoff for 4:3 will have slight remaining borders.
The Solution
If your loading screen is not widescreen (16:9), then transform it into widescreen (16:9) using:
current_imageHeightx(16/9)=new_imageWidth
Then scale your image canvas to that width, and create your border as desired in the new space.
If your loading screen is already done and is at 16:9, then you must first expand it into a 4:3 aspect image, then expand again into a 16:9 image with borders all around using the following process:
// first determine new heightcurrent_imageWidthx(3/4)=new_imageHeight// then use the image height to get the new widthnew_imageHeightx(16/9)=new_imageWidth
After adjusting your canvas to the new height and width, you just put in borders in the new spaces as desired.
What if i don't like borders?
Then all you have to do is extend your load screen graphics past the cutoff areas, and make sure that anything that is inside a cutoff area is expendable. Like a blur effect applied to the borders areas, or just landscape/planet-scape you don't mind losing.
Conclusion:
Here's a quickly made example of the result, which keeps nearly all the details of the original image. White lines signify the cuttoff point for 4:3 users.
Border ideas:
Fill it with color that matches your current graphics
Black/white out
Use Blizzard style borders
Design your own border
Note: The aspect ratios can be replaced to expand this solution for resolutions outside of 16:9 and 4:3 range.
How Blizzard does it:
They do something similar with high resolution images that don't contain important material in outer rims. As shown in the first image.
For reference, Blizzard's loading screen size is 2048x1160, very close to 16:9, but still conforming with good dds resolutions (factorable by 2) for compression.
Edit: Factorable by 2 or 4 depending on how strict your compression is. Attached image with general monitor resolutions/aspect ratios.
Hope this actually helps people, or at least gets exposure. Too many problematic loading screens i see on Bnet becuz of my 4:3 aspect resolution. Or people just don't care about how ther loading screen looks on anything other than their own monitors....
lol, i was starting to think nobody actually needed this. Maybe everyone is just eyeballing any issues and trial and error on different monitors.
Personally, i'm not a fan of borders. I feel that the best method would be an invisible border that is made as part of your loading screen (like a large landscape or space scape). And then making sure that all your crucial content is within the bounds of a 4:3 screen.
Which the above is still good for, to make sure your loading screen keeps the same "feel" on all resolutions. The equation that i didn't really explain how to use, is actually the most useful; for projecting resolution cropping on all resolutions.
So basically, I should make my loading screen size 2048x1160(like Blizzard), then shrink it down to a 4:3 aspect ratio, create a new image sized at 2048x1160, Copy/Paste the 4:3 aspect ratio picture into the 2048x1160 file(in Photoshop it auto places it centered), then fill in my "border" around the image?
@BorgDragon: Go
lets assume 2048x1160 is 16:9 widescreen, because it's really close.
You have to do my instructions backwards to "scale down", i'll update the instructions.
1) scaling it down to 4:3 aspect, it would become this resolution -> 1547x1160
(by multiplying height by 4/3)
2) Then scaling it down back to 16:9, it would become this resolution -> 1547x870
(by multiplying new width by 9/16)
So a widescreen image at 1547x870 resolution in the center of a 2048x1160 canvas would suffer no truncation no matter how the resolution ranges in between 4:3 and 16:9. Alternatively, you only have to pay attention to the 1547x1160 resolution in step 1, if the background image is 4:3 aspect. Then you would only have side borders, and no borders would be needed on top and bottom.
Personally, i'd try to not modify the 2048x1160 image at all, if i can get away with losing some of the details on the outer rim. You can use the formula
width-height*(aspectRatio)=total_cutoff_Width// (divide by 2 to know how much it cuts off on each side)
to find how far it would cut off the left and right sides to determine how much to scale the image so that your main details are kept inside the loading screen at all times.
In photoshop, i like to create Guides (under View tab) at
I've noticed some people have problems with their loading screen displaying properly. White bars, warped image, etc. I'm not here to say this is the best method to do your loading screen to your own liking, but it will generally make your loading screen look nice for nearly every monitor resolution.
Known:
Like this -> darken areas are cutoff for 4:3.
Solution: We are going to add in a border knowing that it may or may not be cut off. See below image for example of how it works.
Assumptions:
The relationship of how the game treats your image is determined by the following ->
Where Width and Height is that of your loading screen, and AspectRatio = 4/3 (or 5/4 for more support range, but the cutoff for 4:3 will have slight remaining borders.
The Solution
Then scale your image canvas to that width, and create your border as desired in the new space.
After adjusting your canvas to the new height and width, you just put in borders in the new spaces as desired.
What if i don't like borders?
Then all you have to do is extend your load screen graphics past the cutoff areas, and make sure that anything that is inside a cutoff area is expendable. Like a blur effect applied to the borders areas, or just landscape/planet-scape you don't mind losing.
Conclusion:
Here's a quickly made example of the result, which keeps nearly all the details of the original image. White lines signify the cuttoff point for 4:3 users.
Border ideas:
Note: The aspect ratios can be replaced to expand this solution for resolutions outside of 16:9 and 4:3 range.
How Blizzard does it:
They do something similar with high resolution images that don't contain important material in outer rims. As shown in the first image.
For reference, Blizzard's loading screen size is 2048x1160, very close to 16:9, but still conforming with good dds resolutions (factorable by 2) for compression.
Edit: Factorable by 2 or 4 depending on how strict your compression is. Attached image with general monitor resolutions/aspect ratios.
@onisagi: Go
For best .dds compression it should be factorable by 4 :) Thumbs up!
@Genopath: Go
Keep your crazy ideas to yourself geno. lol, j/p.
Hope this actually helps people, or at least gets exposure. Too many problematic loading screens i see on Bnet becuz of my 4:3 aspect resolution. Or people just don't care about how ther loading screen looks on anything other than their own monitors....
Great tutorial. I was wondering what I was gonna do about this. I'm bookmarking this. Thanks!
@Marikh7: Go
lol, i was starting to think nobody actually needed this. Maybe everyone is just eyeballing any issues and trial and error on different monitors.
Personally, i'm not a fan of borders. I feel that the best method would be an invisible border that is made as part of your loading screen (like a large landscape or space scape). And then making sure that all your crucial content is within the bounds of a 4:3 screen.
Which the above is still good for, to make sure your loading screen keeps the same "feel" on all resolutions. The equation that i didn't really explain how to use, is actually the most useful; for projecting resolution cropping on all resolutions.
@onisagi: Go
So basically, I should make my loading screen size 2048x1160(like Blizzard), then shrink it down to a 4:3 aspect ratio, create a new image sized at 2048x1160, Copy/Paste the 4:3 aspect ratio picture into the 2048x1160 file(in Photoshop it auto places it centered), then fill in my "border" around the image?
@BorgDragon: Go lets assume 2048x1160 is 16:9 widescreen, because it's really close.
You have to do my instructions backwards to "scale down", i'll update the instructions.
1) scaling it down to 4:3 aspect, it would become this resolution -> 1547x1160 (by multiplying height by 4/3)
2) Then scaling it down back to 16:9, it would become this resolution -> 1547x870 (by multiplying new width by 9/16)
So a widescreen image at 1547x870 resolution in the center of a 2048x1160 canvas would suffer no truncation no matter how the resolution ranges in between 4:3 and 16:9. Alternatively, you only have to pay attention to the 1547x1160 resolution in step 1, if the background image is 4:3 aspect. Then you would only have side borders, and no borders would be needed on top and bottom.
Personally, i'd try to not modify the 2048x1160 image at all, if i can get away with losing some of the details on the outer rim. You can use the formula
to find how far it would cut off the left and right sides to determine how much to scale the image so that your main details are kept inside the loading screen at all times.
In photoshop, i like to create Guides (under View tab) at
to show the cutoff lines.