ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
Как рисовать макет в Photoshop, если у тебя Retina дисплей?
В этой статье мы расскажем, в чем особенность Retina-дисплеев, почему одно изображение может отображаться по-разному на устройствах, а также как учитывать особенности Retina и создать макет, корректный для любого экрана.
Веб-дизайн
3136
Технология экранов 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, несомненно, лучшие в передаче качества изображения, но важно учитывать особенности их технологии и знать, как правильно произвести адаптацию и выбрать нужное разрешение для корректного отображения макета на всех устройствах.

Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
UX/UI-дизайнер
Подробнее о курсе
Читайте другие статьи
Как использовать цвет 2024 года Pantone в дизайне?
Нежный и романтичный, фруктовый и витаминный, тактильный и обволакивающий — любым из этих эпитетов можно охарактеризовать главный цвета 2024 года по версии Pantone. Узнайте, что это за оттенок и как дизайнерам использовать его в своей работе.
Веб-дизайн
1054
Аффордансы в веб-дизайне: что это и как использовать?
Как вовлечь пользователя в использование нового цифрового продукта? Для этого дизайнеру нужно спроектировать эффективный интерфейс, в котором легко разобраться человеку с любым бэкграундом. Сегодня разбираемся, как в этом помогают аффордансы.
Веб-дизайн
1888
Базовые навыки веб-дизайнера
Веб-дизайнер — это безумно интересная творческая профессия, которая сочетает в себе множество других. Узнайте, какими навыками нужно обладать, чтобы успешно начать карьеру веб-дизайнера.
Веб-дизайн
17151
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!