Guidance for Commissioned Illustration
Are you hiring an artist to create an illustration for your home page? Great, that is always fun to work with! But your artist will want to know what dimensions to use, and that is by far the hardest question to answer. You can share this page with them for some tips to help them help me make the best use of their illustration.
When you are designing something for print, you know exactly what size the paper will be. When you are designing for a website, the screen it is viewed on could be any of a seemingly endless array of dimensions, from very wide and tall (desktop monitors), to very wide and short (laptops), to sort of in the middle (tablets horizontal), to tall and narrow (phones and tablets vertical).
For example, here are just some of the more common screen sizes/dimensions/resolutions (in pixels):
Standard website resolutions for mobile screens:
- 360×640
- 375×667
- 414×896
- 360×780
- 375×812
Standard website resolutions for tablet screens:
- 768×1024
- 1280×800
- 800×128
- 601×962
- 962×601
Standard website resolutions for laptop screens:
- 1920×1080
- 1366×768
- 1440×900
- 1536×864
- 1024×768
And this list is not exhaustive — there are many more. So we can’t say “this is the size the screen will be” because it will all depend what it is being viewed on.
The first thing I need to know is how you are envisioning the illustration being used. Will it fill the whole screen or will there be space around it? Below are some scenarios with examples that I hope will be helpful! However, there are endless scenarios and different ways I can build things, so if your artist is able to send a rough sketch before they get too far, you can send it to me and I can let you know any potential issues I see.
One big illustration that will fill the width of the screen
These are the hardest to get exactly right and tell you dimensions for. My goal is to find a happy medium across all devices so that everyone can clearly see the most important parts of the illustration without scrolling. I may use the whole illustration on desktops/laptops, but crop it to be narrower on phones. I prefer these be a minimum of 1800 pixels wide. At that width, about the top 700ish pixels of the illustration will usually be visible without scrolling. With that in mind, some tips then for best success with illustrations:
Have the most important elements more towards the center:
They don’t have to be perfectly centered, but if there is some item you want everyone to see, avoid having it be off on the far left or right, or at the very bottom. A helpful but not definitive rule of thumb can be to have the most important stuff within the center-top 800 x 800 pixels of say an 1800 pixel wide illustration.
Here is a really good example of this. The image fills the screen, but the really important part — the hot air balloon — is towards the center of the illustration. On narrower screens you won’t see the landscape off to the sides, but you can always see the balloon.
When I receive illustrations for which really the whole illustration is needed, including all the way off to the sides, what I have to do is let the whole illustration scale down (rather than some of it being off screen on the right and left) which leads to be it being pretty short and small on mobile. This is fine! But it is important to consider as your illustration will be much smaller on phones and not as impactful.
Provide the illustration in pieces/layers if possible:
This allows me to move things around for different screens. This is usually not possible, but when it is, it really helps a lot. I can use most of the illustration as a background, and then have other things, like characters/animals/objects move closer together or be hidden on smaller/narrower screens.
For example, on this site it looks like I have used one big flat illustration, but in reality, the sky is a separate image that I can repeat over and over again off to the left and right to fill any screen. So is the wall. The cats and sun are separate images that I can keep towards the center, and I even remove one cat for the narrow phone screens.
Avoid cutting off things on the sides:
Again this is frequently not possible, but very helpful when it is. Say you have a tree off on the right side — I will have more flexibility if I have the whole tree, not a cut off tree.
Generally, I would prefer a very wide illustration with important things towards the middle 800 pixels, with lots of space (really, there can’t be too much) off on either side that is still pretty, but not crucial.
An illustration that will center the screen but not fill it:
These are much easier to work with. It is very important that no elements are cut off on the right or left. See this example. The tree and sun are two separate illustrations. I added the sky behind it as a separate layer.
And this one. The tree/hammock are the provided illustration. I added the sky behind it as a separate layer.
With these, the dimensions are much less important. What is more important is, unless you want a solid white background (like on this site), that I am able to isolate the illustration to place it on top of a background. This means either the illustrator provides it with a transparent background, or the edges of the illustration are clean enough that I can cut it out fairly easily.
Don’t panic!
I will make whatever you provide work. I always do. 😉 There will always be some compromises to make any illustration work across the wide variety of screen sizes. The above just minimizes the compromises we might have to make.
