Становится все более распространенным явлением для графических профессионалов не только, чтобы их работа отображалась в печати, но также в Интернете и таких устройствах, как iPhone, iPad, Android-устройства и планшеты Android. На первый взгляд это можно рассматривать как «хорошую вещь», как средства массовой информации, которые появляются в нашей работе, для расширения до цифровых экранов. Недостатком является огромное количество экранов и запутанное количество разрешений экрана. Нередко слышно, как опытные профессионалы задаются вопросом, что случилось с теми временами, когда разрешение TIFF с разрешением 300 dpi в формате CMYK было нормой. О, добрые старые времена!
Те дни закончились. Теперь нам нужно бороться с тем, что изображение на 200 на 200 может показаться прекрасным на одном устройстве, но при этом появляется четвертый размер на другом и трех четвертом размерах на другом. Все это действительно сводится к «Рамсе разрешения вооружений», которую ведут производители устройств, поскольку они пытаются застревать больше пикселей на экране, чем их конкуренты.
Это подводит нас к тому, что мы назовем «Восстание суффиксов». Суффиксы - это те вещи - @ 2x, @ 3x - привязаны к имени изображения. По сути, они, например, помещают правильное изображение в нужное место на нужном устройстве. Тогда это становится еще лучше.
Большая часть нашей работы связана с работой с иконками, и с ростом движения Flat Design эти вещи создаются в таких приложениях для векторного рисования, как Illustrator и Sketch. Проблема в том, что устройства просто не могут отображать файлы .ai или .eps. Они должны быть преобразованы в Масштабируемую векторную графику, и в зависимости от приложения, используемого для создания значков, может быть даже не опция SVG.
Тогда это становится еще лучше.
Существует новый класс программного обеспечения - приложения для прототипирования - которые становятся узлом сборки до того, как ваши изображения и значки будут выведены на устройства, и у них есть свои особенности.
Этот учебник перемещается между Photoshop и Sketch для графики и использует Adobe Experience Design, чтобы продемонстрировать несколько точек боли между вашей идеей и возможным развертыванием. Давайте начнем.
01 из 05Как подготовить изображения для мобильных устройств в Adobe Photoshop
Первым шагом в этом процессе является знание вашего целевого устройства или устройств. В этом случае вы будете ориентироваться на iPhone 6, который имеет площадь экрана 375 пикселей в ширину и 667 пикселей в высоту. Дизайн требует, чтобы изображение было шириной экрана.
Изображение, которое будет использоваться, было снято в соборе Бернского горного собора в Берне, Швейцария. Как только изображение открывается в Photoshop, выберите «Изображение»> «Размер изображения» для проверки размеров изображения и его разрешения. Очевидно, что изображение размером 3156 x 2592 с разрешением 300 ppi и размером файла 23,4 Mb просто не будет работать.
В диалоговом окне «Размер изображения», уменьшить разрешение до 100 ppi, Сделайте это сначала, потому что размеры изображения также изменятся. С установленным разрешением измените ширину на 375 пикселей. Если вы проверите данные размера изображения, вы заметите, что изображение уменьшилось с 23,4 МБ до более удобного для мобильных устройств 338k. Нажмите ОК. для принятия изменения и закрытия диалогового окна «Размер изображения».
Продолжить чтение ниже
02 из 05Как использовать диалоговое окно «Экспорт как …» в Adobe Photoshop
Как только изображение будет готово для экспорта, выберите «Экспорт> Экспорт как …» для открытия диалогового окна Export As.
Это диалоговое окно является недавним дополнением к Photoshop и заменяет диалоговое окно «Сохранить для Интернета», которое они использовали в течение многих лет. Если вам все еще нужно, вы можете найти его в папке «Экспорт». Это по понятным причинам теперь называется «Экспорт для Интернета (Legacy)». Если это ваш первый визит к этому диалоговому окну, вот краткий тур:
- Размер: Этот столбец устанавливает выходной размер изображения. Интересным аспектом этой области является увеличение изображения, но изображение не будет выглядеть «нечетким» на устройстве из-за огромного количества пикселей на экране устройства.
- 1X: Нажмите «удерживать», и вам будут представлены несколько размеров. Категории 1x, 2x и 3x традиционно связаны с устройствами Hi Dpi от Apple, и они вместе с несколькими другими будут готовить изображения для устройств Android.
- Суффикс: Этот выбор покажет ваш размер, но он будет показан как @ 2x или размер будет выбран. Этот суффикс будет добавлен к имени изображения.
- Знак +: Нажмите эту кнопку, чтобы добавить различные размеры для вывода. В этом случае дважды щелкните его и выберите 2x и 3x из списка. Это будет охватывать практически любое устройство iOS.
- Мусорное ведро: Нажмите эту кнопку, и выбор будет удален из списка.
- Настройки файла: Выберите формат - jpg, png, gif или svg - лучше всего подходит для изображения. Если размер файла вызывает беспокойство, вы также можете уменьшить настройки качества.
- Размер изображения: вы можете изменить физические размеры изображения.
- Размер холста: Вы можете изменить физические размеры холста изображения.
- Метаданные: Вы можете добавить авторские права и свою контактную информацию в метаданные изображения.
По завершении нажмите кнопку «Экспорт всех». Вас спросят, где вы хотите поместить изображения. Хорошей привычкой для разработки является щелчок по кнопке «Новая папка» и создание папки для хранения экспортированных изображений. Когда вы нажмете «Экспорт», вам будут показаны изображения в папке.
Продолжить чтение ниже
03 из 05Как подготовить изображения для мобильных устройств в эскизе 3 из чешского кодирования
Sketch 3, приложение Macintosh только из Bohemian Coding, быстро завоевывает известность среди дизайнеров UX и UI из-за его пристального внимания к дизайну веб-сайтов и приложений.Фактически Photoshop, во многом, находится в нечетном положении, чтобы играть «догнать» с помощью Sketch.
Чтобы подготовить изображение для мобильных устройств в Sketch, выберите изображение на монтажной области и нажмите кнопку «Сделать экспортируемый» в нижней части панели «Свойства», Откроется диалоговое окно «Экспорт». Нажмите знак +, чтобы добавить версии 2x и 3x, а также добавьте суффиксы. Доступными форматами являются PNG, JPG, TIF, PDF, EPS и SVG. В этом случае выберите JPG. Нажмите кнопку «Экспорт» и настроить или создать папку для хранения различных изображений, экспортированных.
04 из 05Почему вам нужно создать три (или более) версии изображения
Во многих отношениях мобильный рынок - это «Дикий Запад» резолюций, и один размер определенно не подходит для всех. В приведенном выше примере из Adobe Experience Design изображение размещено на 2 монтажных шкафах iPhone 6 и монтажной панели Android. Обратите внимание, что 1x-версия слева выглядит половинной. Именно так изображение появится на iPhone 6 с экраном сетчатки. Версия 2x идеально подходит, и версия Android работает на экране. Ваш выбор - либо масштабировать изображение, либо экспортировать изображение из Photoshop в другом размере.
Продолжить чтение ниже
05 из 05Испытайте рано, проверяйте часто, ничего не доверяйте, доверяйте никому и особенно себе
То, что вам нужно понять, это только начало процесса. Просмотр вашей работы на таком количестве устройств, как вы можете, можно рассматривать как важную часть рабочего процесса. Вы также должны знать, что это всего лишь первый шаг в процессе создания графических ресурсов для приложений или мобильных веб-проектов.
Использование прототипирующих приложений - отличный способ выявить болевые точки, но эти же активы нужно будет выводить для использования разработчиком. Во многих случаях физические размеры активов, включая значки, будут физически огромными, а не в формате svg, а png. На первый взгляд это может показаться немного выше, но помните о золотом правиле масштабирования изображений: лучше масштабировать, чем масштабировать.
Суть заключается в том, чтобы тесно сотрудничать с вашим разработчиком и использовать программное обеспечение для прототипирования как способ показать намерение вашего проекта. В конце концов, тем не менее, те же активы должны быть готовы к окончательному продукту, и ваш разработчик лучше справится с тем, что ему или ей нужно, чем вы.
