Why is the sketch preset canvas size smaller than the true resolution?

Why is the size of the artboard preset in sketch smaller than the true resolution? This question has been asked by hundreds of beginners, every time it is difficult to explain, but static electricity is jiabuzhu two or three times a day even more people ask the same question. So, in this article, let's take a good look at why the pre-built artboards are so small.

　　For a reason, sketch wrong?

There are too many small partners who have just started sketch, why do I build artboards in sketch, the artboard size of software presets is always so small? For example, the real resolution of iphone6 is 750-1334 pixels, But the size of the artboard in sketch is actually 375-667 pixels. The same other models of the preset size also has a problem, is sketch error?

　　PX and PT, don't be silly to tell.

We must understand the most basic principle, in order to status quo in the design. First we will popularize two units of measure--px and Pt. px Everyone may be more familiar with, is the pixel, English pixel abbreviation. Static electricity to do the most popular explanation, please find a magnifying glass (not the computer's magnifying glass, is the real put-big-mirror), and then point to their front of the monitor or mobile phone screen to watch, most of the display will appear under the magnifying glass a dot. This is what we call the concept of pixels. In a display with a physical resolution of 1080-1920, a horizontal distribution of 1920 points and a longitudinal 1080 points. These points make up different images for us through the optical properties of the display.

Please note that the unit area of these points is not the same on different sizes of monitors. For example, a 22-inch 1080p LCD monitor and a 27-inch LCD monitor with the same resolution, we can find the pixel distribution of the two monitors by careful observation. The intuitive impression is that the 27-inch 1080p resolution display is significantly less effective than the 22-inch 1080p display, such as a grainy sense of gravity and so on. One important reason is that the size of the "pixel" particles in the two LCD panels varies.

Thus, the pixel unit is a relative unit, we can not use centimeters, millimeters and so on these absolute units of measurement to measure his length or width, because, 1 pixels only represents a unit of "point."

Another important unit is PT, which is also the unit used in the iOS development process, and unlike PX, the PT (point) is an absolute unit with the Chinese name "pound (or pound)" and 1PT equals 1/72 inches. We also use simple and intuitive examples to illustrate.

If you have two different models of iphone on hand, such as Iphone6,iphone5, or iphne4. Static electricity is recommended to use a IP6 and a IP5 or IP6 Plus, open the same application. Prepare a ruler at the same time.

For example, we use the most QQ music, open it, using a ruler to measure the top title "Music Hall" text size. Measured, the width of the music hall text is 8mm, at this time open iphone6plus or different size of the iOS phone, the same measurement of its size, we found that the "music Hall" text size is about 8mm or so. If you find this method inappropriate, you can ask iOS developers to write two identical files for different size models and install them on two phones to make sure the fonts in this file use a font size, such as 30PT. Running on two phones and measuring with a ruler, we found their physical size exactly the same.

Please remember that PX is relative unit, PT is absolute unit (similar units are centimeters, millimeters, etc.). PX does not have any comparability with PT without determining the density of the screen.

　　Why use 3XX pixels as the base width for sketch design drafts?

　　Reason one :

As to how PX and PT are converted, the principle involved is beyond the scope of this article, and here we simply tell you, when dpi=160, 1dp=1px=1pt (author experience conclusion). So here we want to draw out why use 375-667 such size to do the design, because in this case, that is, the resolution of MDPI (about 320-480), 1dp=1px=1pt.

Simple to calculate, when the resolution increases, such as increased to 640-960px, in the case of a constant density, 2px=1pt, because the pixel is dense, so need more points to fill the unit physical size. This is why we feel that the iphone4 picture is more delicate than the 3GS screen because the DPI (PPI) is raised. (DPI or PPI is dots per inch or pixels, which represent density.) )

So, 320 this width (3XX) as the reference width, also known as one-size lineage down. Because using 1 as the base, the conversion is really convenient.

The following figure is the design output size and resolution comparison table.

　　cause two :

For iOS, the same concept, unlike Android, the 320-wide reference resolution of the exported material is @1x, also known as one-times graph. Then the diagram used on the Iphone4,iphone5 or Iphone6 is @2x, also called twice times, the same, Iphone6 Plus is @3x three times times the graph. You should be aware of the corresponding resolution and the corresponding relationship between the exported picture. If we use the 640 width or 750 width as the datum of the plot, of course, is not not, but when we output the @3x graph, is not to be multiplied by 1.5? If you must use @3x three times times the resolution of the plot, then the final to generate twice times the graph, is not to the output size multiplied by two-thirds?

If 1.5 is OK, then two-thirds what is the ghost of multiples, 0.6666666? Is there a compelling designer who really sees the past?

But if we use the one-times graph design, then 1x2=@2x,1x3=@3x, how easy and easy to understand is it?

Plus sketch is a full vector drawing software, no matter how you zoom in and out, the exported bitmap is not virtual.

　　reason three :

In the eyes of development engineers, if you use 640 resolution mapping, then the size of the design in the original size, they are also in the development environment to be converted to one-fold size, such as you mark the size of 40px, then the final development engineer written in the code is 20PT, divided by 2 of the relationship.

However, if you use one-time benchmark resolution to plot, then you do not have to divide by 2, all size development engineers directly take the past with the use of, how easy. Believe that the previous follow the static of the Xcode tutorial to do the demo of the small partner, you must be very impressed with the size of Xcode, right?

To understand the principle, we recommend that you use Xcode, personally experience the work of the development engineer principle, I believe you can solve these problems.

　　Use one-of-the-benchmark resolution graphing-your smart choice

Sketch as a pure vector mobile UI design software, whether from the design or to the later and the development Engineer's cooperation, all strictly follow the development principle, this design method can maximize the reproduction of the design manuscript, but also can reduce the file volume and system resource consumption, regardless of from which aspect, is a smart choice for designers to create UI interfaces. However, Photoshop, which is based on bitmap output, does not have this benefit, although Photoshop CC 2015 adds multi-artboard functionality, but then spat. Placing five or six artboards in a file is extremely easy for sketch, and the output file is only a few m, but the reverse Photoshop, with a few grams of file volume and huge system resource consumption, hmm, you know.

Finally summarizes the reason, the designer uses one times the datum size drawing, is mainly convenient, the unit conversion is convenient, the output cut diagram is convenient, the understanding is simple. For engineers, they do not have to perform complex conversions to help perfect the reproduction of a design manuscript.

Therefore, in both domestic and foreign countries, more and more designers began to use a benchmark size design mobile interface, still hesitate? If your friends are still struggling with this problem, especially those who have just transferred from Photoshop to sketch, speed this article forward to them.