Недавно я был проект, в котором я, необходимое для производства экранов высокого верности для планшета.Я должен был представить эти экраны на устройстве, а также производить интерактивные прототип.Они необходимы, чтобы быть совершенным пикселей.График было туго (как всегда), поэтому я пошел с моим идти к инструменту, Photoshop.Я использую его для более чем десяти лет, и это дает мне быстрый выход высококачественного .
Вы проектирования при разрешении Retina “” в Photoshop?Если да, то эта статья для вас.Я буду ходить вас через проблем я столкнулся в создании Retina макеты, которые будут отображаться на планшетного устройства.Затем я объяснить способ работы, что проще и дает лучшую производительность.Это о моем опыте с Photoshop, но она может быть применена к Illustrator и другого программного обеспечения .
В этой статье я буду использовать @ 2x и 3x @ нотации.Они представляют собой ведра Retina для IOS.Хорошим примером является иконки приложения.Для оригинальной iPhone, он будет 60 × 60 пикселей (@ 1x).Для iPhone 4, было бы точно дважды, 120 × 120 пикселей (@ 2x).Теперь, последние устройства погружения в тройном территории.Для iPhone 6 Plus, значок будет 180 × 180 (@ 3x).Когда мы говорим о @ 2x или 3x @, я имею в виду с помощью двойных или тройных размер в пикселях.Все должно быть ясно, как вы читаете на .
Problems
Теперь давайте в дизайн этого планшета применения.Как и многие другие дизайнеры, мне сказали, что надо проектировать с разрешением Retina.Общее мнение состоит в @ 2x или 3x @.Итак, я отправился в моей веселый путь, проектирование @ 2x.Дизайн будет представлен на Nexus 9 с соотношением 4: 3, так что мой Photoshop холст был установлен до 2048 × 1536 пикселей.После создания несколько экранов, я понял, на практике это не работает вообще.Давайте работать через проблемы, которые я нашел .
Увеличить Factor
Во-первых, это не большая проблема.Уменьшить на 50% или 33%, чтобы увидеть свой дизайн на уровне примерно 1: 1.Но в то же время, это немного смешно, право
Почему вы должны иметь, чтобы увеличивать и уменьшать масштаб постоянно видеть то, что происходит?Он также полностью разрушает пикселей snapping __27 | | 1__26 , который лучше всего подходит на 100%.Это почти невозможно узнать, выравнивается ли пиксель, когда вы увеличено на 33% или 50%!Достаточно сказать, я был довольно сыт масштабирование, как маньяк, чтобы получить вещи выровнены пикселей прекрасно .
Performance
Это большой.Давайте использовать планшет с соотношением 4: 3 в качестве примера.Я создал пустой PSD @ 1x (который 1024 × 768 пикселей), а другой @ 2x (2048 × 1536) и третий @ 3x (3072 × 2304).Затем я сделал некоторые сравнения .
Во-первых, я посмотрел на количество пикселей в ДПП.@ 2x PSD имеет в четыре раза больше пикселей.@ 3x девять раз больше.Это напрямую влияет на использование памяти, которая сама по себе идет вверх в четыре раза и в девять раз!Для нашей пустой PSD, это продолжалось от 2.25M до 9M @ 2x, а затем 20М для @ 3x .
Последнее, но не менее важно, он также должен хранить все из этих дополнительных пикселей.Так, размер файла увеличивается, а также.Размер на диске вырос на 280% за @ 2x, и до 590% от для @ 3x.Теперь, в нашем пустой PSD это только увеличение от 60 до 358 КБ.Но как только вы получили некоторые серьезные интеллектуальные объекты и слои происходит, будьте внимательны!Давайте возьмем пример PSD, что составляет 100 МБ.В @ 3x может быть 590 МБ.Затем умножьте это на 20 до 30 документов в проекте
С точки зрения производительности, это очень ясно, что работать на Retina будет стоить вам мастеринг RAM, CPU и диск использование .
Size
Этот вопрос становится очевидным довольно быстро, когда вы работаете @ 2x или 3x @.Предположим, вы создали, чтобы сделать текстовое поле со шрифтом, установленным в 16 пикселей.Но @ 2x это 32 пикселей, и @ 3x это 48 пикселей!Не идеально, это, того, чтобы постоянно умножить на два или три?Я не знаю о вас, но я мог бы сделать без постоянного математике.Когда я создаю, я хочу знать, что 16 пикселей 16 пикселей
Всего Pixels
Вот еще один глюк.Что происходит, когда вы используете 1px на @ 2x Retina?Вы уже догадались, это становится 0,5 пикселей!И @ 3x было бы еще хуже, 0,33 пикселей!Таким образом, вы также должны постоянно быть в курсе, что ваши размеры должны быть кратно 2 или 3 при работе в Retina.Еще одно соображение приходит в игру, если вы когда-либо использовать @ 2x с нечетным значением пикселя.Скажем, у вас есть окно, которое составляет 33 пикселей в ширину;когда преобразуется обратно в @ 1x для сборки, это становится 16,5 пикселей!Еще один утечка мозгов от работы с Retina .
1px упадет назад от 1x до @ @ 3x .Specs
Это еще один вопрос, который я видел на рабочем месте: дизайнеры, которые работают @ 2x или 3x @, а затем приступить к спекуляции их дизайн для разработчиков.Это, как правило, включает в себя документирование обивка, ширины, высоты, размеры шрифтов и так далее, чтобы убедиться, что конструкция построена хорошо.Но они забывают, что они находятся в двойной или тройной резолюции.Таким образом, бедные старые разработчики получают полный спецификации, в которых они нуждаются, чтобы разделить все на 2 или 3!Не большой, не так ли?Зачем делать их жизнь сложнее
Другой вариант, что дизайнер может спасти новый PSD в 50% или 33%, а затем спекуляция от этого.Но Retina-земля выглядит как улицу с односторонним движением.Это трудно понять, через те шоры .
Хорошо News
Не волнуйся.Ведь плохие новости, есть хорошие новости.Во время работы на экспорт иконки для Android от Illustrator __15 | | 2__14 , я открыл для себя мир плотности независимый пикселей (DP).Вы можете прочитать большую длинное объяснение на Android разработчиков о “ Поддержка нескольких Screens __21 | | 3__14 “, или я могу разбить его для вас действительно быстро .
В основном это ДП @ 1x измерение пиксель или, в терминах Android, базовый плотность, что является средней (MDPI).Плотность-независимый пиксель такой же, как 1 физического пикселя на экране 160 DPI.Преобразования DP = pixel ÷ (DPI ÷ 160) 7 .__ |
Давайте использовать наш пример планшета с дисплеем 2048 × 1536 пикселей и 320 DPI.Запуск через приведенном выше уравнении, для ширины мы получаем 1024 DP, и высотой, 768 DP.Это становится наша резолюция базовый.И мы также должны знать масштабный коэффициент дл …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров