To design (graphic design macarthur) in a web environment it is necessary that you understand well the essential differences between the paper and the screen, because each one has its particularities. Resolutions, screen sizes, color, units of measure, image formats, etc. Take note:
Resolution to print VS web resolution
To print on paper, a resolution is usually requested that ranges from 150 pixels per inch of digital printing to 300 dpi of offset. On the internet, it is not necessary to upload images with such resolution. Traditionally, computer screens have been offering a resolution of 72 pixels per inch , so this is the quality in which you must save your images so that they look properly on the webs. It is very important that you do not upload the images to the web with more quality than necessary, since you would be increasing the loading time and damaging the usability and SEO positioning of your website.
But beware, despite the fact that the standard has always been 72ppp, in recent times retinal devices have begun to proliferate, increasing the resolution and requiring you to upload your images at twice the quality.
Design sizes in paper VS screen sizes
In physical printing, sometimes you can send a file to print with a size and weight greater than necessary in case you fall short in terms of print quality, but not in web, because no matter how much you increase the size or resolution of the elements, the screen will show the images in the exact resolution and the exact width they have.
When you generate images for a web, you must upload them to the exact size in which they will be displayed, since putting them to a larger size would increase the loading time. If you are going to upload images in full screen mode, you should upload them to the size of the largest screen in which you anticipate that your website will be viewed, so that in no case will the image be pixelated or cut. For example, if you have header images in your web in full width, you must upload them at 2560px wide if you want them to be optimally displayed on a 27-inch iMac.
Here is a list of devices with their respective screen sizes most common in pixels wide:
- Normal desktop or laptop screen: from 1224 pixels.
- Large screens: from 1824 to 2560 pixels (iMac size of 27 “).
- Tablet: from 768 to 1024 pixels.
- Smartphone: from 320 to 480 pixels.
Color formats in physical printing VS color formats on screen
In physical printing, color parameters such as CMYK or Pantone are handled. In web, colors are encoded in RGB (Red, Green, Blue) or hexadecimal (color code with # and 6 characters). When you work in screen color, the colors are more vivid. If you transfer a web color to a physical print color, the color usually shows a loss of luminosity, so if you want to make the equivalence between print and web colors you will have to recalculate manually so that they are as similar as possible.
With a tool like Paletton you can choose a good web color palette from the color you want and get its hexadecimal values to use in your project.
Different units of measurement
In physical printing the elements are measured in millimeters, centimeters, etc. In websites, the dimensions are measured in pixels . The number of pixels a screen has depends on the device: monitors, tablets, smartphones, etc. In addition, not all devices have the same resolution, that is, in the same space there are screens that offer more pixels than others. All this must be taken into account when designing (graphic design macarthur). To know how many pixels an element of your screen measures, you can install the Page Ruler extension for Google Chrome.
Image formats for printing VS web image formats
The most common image formats on the webs are JPG and PNG . The PNG format is great for uploading cut-out images with no background or transparency. In contrast, in physical printing, the files are usually sent to print in PDF, AI or EPS format, the latter two being vector formats. When you work on paper, any printer can print vectors directly in vector formats such as. ai, .eps, .svg, etc. In web environment, a priori the browser can not interpret or show these vector formats, with which the ideal is that you export your vectors in .png or .jpg format. However, if you work in WordPress, you can directly upload vectors to a website using plugins such as SVG Support. By uploading the vectors to the web you make sure that the images will always look perfect, regardless of the size and resolution of the screen.