This guide is to help with digital image sizing for general online media, with some specific focus on illustration.
If you’ve never pressed your nose against an old tv, you may not know that pictures on your screen are made up of miniscule dots called pixels. Pixels are the dots that make up most most pictures you’ll see online, known as Raster or Bitmap images. Pixels are almost impossibly small. Screens have tiny pixels so that instead of seeing the granules, you see the pattern produced from all of the dots. Because of this, it’s hard to get a feel for digital image sizing rules.
For most uses online, Image File Types will generally be: .png .jpeg or .gif
100px is roughly 1 inch on a screen
This can vary more when it comes to Retina screens and handling print media, but most screens will show about 100px per inch on the screen. Being able to measure out 1 inch can help you think in analog terms. It can also help to use a Screen Ruler Extension for your Browser for practice.
Most screens are 1920x1080 pixels
The most helpful reference is the average screen size. Knowing that most screens are 1920×1080 pixels on average, you can use that as a frame of reference for “how big a final product might need to be” for full-screen pictures and the smaller sizes from there. You can also check your own screen size on websites like this one.
This is where geometry comes in– if we needed an image to cover half of the width of the screen, we might need an image that’s around 950 pixels wide at the most. Smaller images can load faster on self-hosted websites, but it can be a generally good idea to “over-estimate” the size with your original images.
Keep a copy of the original full-size files, but always size down and optimize your images for the final image you want to post.
Oversized images can lag websites and even slow down your system while you work on the large files. Try to be wary about your digital image sizing when you upload to a social media platform, since it could also be compressed and lose quality. I like to use TinyPng to help with losslessly-compressing images, to keep them at the highest quality possible.
You can always scale images smaller, but you can never
go back up.
Digital illustrators start with huge canvases because of this principle: Start large, and you can scale down. Large images work best for small detail rendering as well as for use in print media. DPI means the dots per inch on a printed surface, and correlates to the concentration of the pixels on your canvas. Because of this, make sure you use at least 300dpi for anything you anticipate printing. 2550×3300 pixels is about the perfect size for standard printer paper sheets.
For print purposes, it can be best to use a canvas that's at least 3000px wide in either direction.
Feel free to save the base above and trace for practice!
Tag @grifnmore to share what you make
Read more about drawing in layers:
Once you have your canvas prepped with the right sizing, make sure you are using separate layers to start creating your sketches and art. Layers are the key to having complex artwork and being able to “color under” your lines. Planning to use separate layers will give you the most control over your work.
Read more about using layers to make your artwork into a puppet that can move and react:
Drawing a 2D vTuber for Adobe CH
A good majority of existing vtubers use 2D illustrated rigs!...
Read MoreWe only covered Raster Images in this tutorial.
Vector is another type of image file that helps with infinite scaling (as opposed to the stained-glass tiling of Pixels). We aren’t covering Vector in this tutorial, but More Club members can request upcoming topics and view our advanced tutorials as well.
This post was written in part by @Tessamackyo
