WebDesignMagazine.ru – Журнал о веб-дизайне

Лучший способ создать дизайн для Retina в Photoshop

0

Недавно у меня был проект, в котором мне было необходимо создать экраны для планшета с высокой точностью воспроизведения. Я должен был представить эти экраны на устройстве, а также произвести интерактивный прототип. Они должны были быть pixel perfect. Времени было мало (как всегда), поэтому я взялся за Photoshop. Я использую его более чем 10 лет, и он дает мне быстрый результат высокого качества.

Вы работаете при разрешении “Retina” в Photoshop? Если да, то эта статья для вас. Я проведу вас через проблемы, с которыми я столкнулся в создании Retina макетов, которые будут отображаться на планшетном устройстве. Затем я объясню более простой способ работы, который дает лучшую производительность. Это о моем опыте с Photoshop, но это также может быть применено к Illustrator и другому программному обеспечению.

01-iassessor-opt

Вот несколько дизайнов для планшета.

В этой статье, я буду использовать обозначения @2x и @3x. Хорошим примером являются иконки приложения. Для оригинального iPhone, это будет 60 × 60 пикселей (@1x). Для iPhone 4 – 120 × 120 пикселей (@2x). Для iPhone 6 Plus, иконка будет 180 × 180 (@3x). Когда мы говорим о @2x или @3x, я имею в виду использование двойных или тройных размеров пикселей.

Проблемы

Теперь, давайте рассмотрим дизайн этого планшета. Как и многие другие дизайнеры, мне сказали, что надо проектировать с разрешением Retina. Общее мнение – @2x или @3x. Итак, я выбрал @2x. Дизайн будет представлен на Nexus 9 с соотношением 4:3, так что мой Photoshop холст был установлен до 2048 × 1536 пикселей. После создания нескольких экранов, я понял на практике, что это совсем не работает. Давайте проработаем проблемы, которые я нашел.

Zoom

Во-первых, это не большая проблема. Уменьшить на 50% или 33%, чтобы увидеть свой дизайн на уровне примерно 1:1. Но в то же время, это немного смешно, не так ли?

02-zoom-opt

Вы увидите, как разрешение выходит из-под контроля. Показан угол дизайна на @1x до @3x.

Поделиться: