Технология экранов Retina передает своим пользователям улучшенное, более яркое и детализированное изображение, вызывая вау-эффект для глаз. Четкое отображение объектов достигается программным множителем, которым не обладает графический редактор Photoshop, что приводит к изменению размерности пикселей при просмотре на неретиновых дисплеев. В этой статье мы расскажем, в чем особенность Retina-дисплеев, почему одно изображение может отображаться по-разному на устройствах, а также как учитывать особенности Retina и создать макет, корректный для любого экрана.

Что такое Retina?

Технология принадлежит компании Apple и обозначает экран, плотность пикселов которого больше 300 ppi (pixels per inch, точек на дюйм). Если рассматривать экран устройства без Retina дисплея, то можно увидеть пикселы изображения, в то время как дисплей с 400 ppi покажет четкий экран, не искажающий качество и цвет отображения вне зависимости от угла обзора.

Почему PSD макет становится другого размера в зависимости от типа дисплея?

Фотошоп – растровый редактор и он отражает действительное разрешение макета. Дисплей Retina, как мы уже описывали выше, подразумевает большее разрешение. Например, вам прислали макет с прямоугольником размером 320x122, но на ретина дисплее произойдёт автоматическое преобразование пикселов, заложенное в операционной системе. Как итог, вы увидите прямоугольник размером 640х244 пикселов.

Пример обратной ситуации: когда вы создаете макет на таком дисплее и устанавливаете рабочее полотно размером 1024х720, то, когда его откроет пользователь, чей компьютер не имеет Retina дисплея, он увидит макет ровно в 2 раза меньше!

Как подстроится под особенности ретины и быть уверенным в правильности своих макетов?

Коэффициент масштабирования на Retina дисплее равен 2х, а на неретиновом экране –1x. К примеру, если ваше изображение закодировано в пространство равном 1024 ppi, то экран с разрешением 1х так и останется равным этому значению, в то время как разрешение экрана 2х закодирует пространство, удвоив количество пикселей на дюйм и отобразит его равным 2048 ppi. Поэтому работая в программе Photoshop, вам необходимо учесть особенности вашего дисплея и начать работу над макетом с выбора правильного масштаба:

– Если вы создаете дизайн с 2-кратным разрешением на 2х дисплее, то нужно установить увеличение – 100%.
– При работе с 1х дизайном на 2х дисплее следует увеличить масштаб до 200%.
– В случае если у вас макет дизайна с 2х коэффициентом на 1х дисплее, вам нужно работать с вы 50% -ым увеличением.

SVG, а не PNG

По возможности работайте с иконками и логотипами в SVG формате, а не PNG. SVG формат – векторный и способен адаптироваться под любой размер без потери качества.

Adobe Generator

Для конвертации в нужный размерный коэффициент вам понадобится Adobe Generator –проект с открытым исходным кодом/расширение для Adobe Photoshop, с помощью которого преобразование 2х макета в 1х и наоборот становится очень легким.

Сценарный экспорт PSD

С помощью сценария экспорта макета – https://github.com/murd/psd-export-document-retina-png/ можно узнать, как ваш проект будет отображаться на разных дисплеях. Разрабатывая 1х макет зайдите по директории Файл > Сценарии > ExportDocument2xPNG. Результатом процедуры будет папка c файликом PNG – 200% увеличением макета и оптимизированными изображениями.

Подводя итог, важно отметить, что ответственное и внимательное отношение к своей работе, учет тонкостей и желание глубоко разбираться в сфере своей деятельности – бесценный профессионализм, который показывает вас с лучшей стороны.

Дисплеи Retina, несомненно, лучшие в передаче качества изображения, но важно учитывать особенности их технологии и знать, как правильно произвести адаптацию и выбрать нужное разрешение для корректного отображения макета на всех устройствах.