Как рисовать макет в Photoshop, если у тебя Retina дисплей?
В этой статье мы расскажем, в чем особенность Retina-дисплеев, почему одно изображение может отображаться по-разному на устройствах, а также как учитывать особенности Retina и создать макет, корректный для любого экрана.
Веб-дизайн
3136
3 дек. 2019
Технология экранов Retina передает своим пользователям улучшенное, более яркое и детализированное изображение, вызывая вау-эффект для глаз. Четкое отображение объектов достигается программным множителем, которым не обладает графический редактор Photoshop, что приводит к изменению размерности пикселей при просмотре на неретиновых дисплеев. В этой статье мы расскажем, в чем особенность Retina-дисплеев, почему одно изображение может отображаться по-разному на устройствах, а также как учитывать особенности Retina и создать макет, корректный для любого экрана.
Технология принадлежит компании Apple и обозначает экран, плотность пикселов которого больше 300 ppi (pixels per inch, точек на дюйм). Если рассматривать экран устройства без Retina дисплея, то можно увидеть пикселы изображения, в то время как дисплей с 400 ppi покажет четкий экран, не искажающий качество и цвет отображения вне зависимости от угла обзора.
Фотошоп – растровый редактор и он отражает действительное разрешение макета. Дисплей 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 формат – векторный и способен адаптироваться под любой размер без потери качества.
Для конвертации в нужный размерный коэффициент вам понадобится Adobe Generator –проект с открытым исходным кодом/расширение для Adobe Photoshop, с помощью которого преобразование 2х макета в 1х и наоборот становится очень легким.
С помощью сценария экспорта макета – https://github.com/murd/psd-export-document-retina-png/ можно узнать, как ваш проект будет отображаться на разных дисплеях. Разрабатывая 1х макет зайдите по директории Файл > Сценарии > ExportDocument2xPNG. Результатом процедуры будет папка c файликом PNG – 200% увеличением макета и оптимизированными изображениями.
Подводя итог, важно отметить, что ответственное и внимательное отношение к своей работе, учет тонкостей и желание глубоко разбираться в сфере своей деятельности – бесценный профессионализм, который показывает вас с лучшей стороны.
Дисплеи 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, несомненно, лучшие в передаче качества изображения, но важно учитывать особенности их технологии и знать, как правильно произвести адаптацию и выбрать нужное разрешение для корректного отображения макета на всех устройствах.
Читайте другие статьи
Как использовать цвет 2024 года Pantone в дизайне?
Нежный и романтичный, фруктовый и витаминный, тактильный и обволакивающий — любым из этих эпитетов можно охарактеризовать главный цвета 2024 года по версии Pantone. Узнайте, что это за оттенок и как дизайнерам использовать его в своей работе.
Веб-дизайн
1054
9 янв. 2024
Аффордансы в веб-дизайне: что это и как использовать?
Как вовлечь пользователя в использование нового цифрового продукта? Для этого дизайнеру нужно спроектировать эффективный интерфейс, в котором легко разобраться человеку с любым бэкграундом. Сегодня разбираемся, как в этом помогают аффордансы.
Веб-дизайн
1888
23 авг. 2022
Базовые навыки веб-дизайнера
Веб-дизайнер — это безумно интересная творческая профессия, которая сочетает в себе множество других. Узнайте, какими навыками нужно обладать, чтобы успешно начать карьеру веб-дизайнера.
Веб-дизайн
17151
11 сент. 2019
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Никакого спама. Только ценные и полезные статьи для вас!