Подготовка изображений для мобильных устройств

Изображения для мобильных устройств не всегда то, что кажется

Для профессионалов в области графики становится все более популярным не только печатать свои работы, но и в Интернете и на таких устройствах, как iPhone, iPad, устройства Android и планшеты Android. На первый взгляд, это можно рассматривать как «хорошую вещь», поскольку средства массовой информации, на которых наша работа появляется, расширяются до цифровых экранов. Недостатком является огромное количество экранов и запутанное количество разрешений экрана. Нередки случаи, когда опытные профессионалы задаются вопросом, что же случилось со днями, когда нормой было изображение TIFF с разрешением 300 точек на дюйм в формате CMYK. Ох, в старые добрые времена!

Те дни прошли. Теперь нам приходится мириться с тем фактом, что изображение 200 на 200 может хорошо выглядеть на одном устройстве и при этом иметь размер четверти на другом и три четверти на другом. На самом деле все сводится к «гонке вооружений с разрешением», которую ведут производители устройств, когда они пытаются вставить больше пикселей в экран, чем их конкуренты.

Это подводит нас к тому, что мы будем называть «Восстание суффиксов». Суффиксами являются те вещи – @ 2x, @ 3x – привязанные к имени изображения. Они, например, по сути, помещают правильное изображение в нужное место на нужном устройстве. Тогда это становится еще лучше.

Большая часть нашей работы включает в себя работу с иконками, и с появлением движения «Плоский дизайн» эти вещи создаются в таких приложениях векторного рисования, как Illustrator и Sketch. Проблема в том, что устройства просто не могут отображать файлы .ai или .eps. Их необходимо преобразовать в масштабируемую векторную графику, и в зависимости от приложения, используемого для создания значков, может даже не быть опции SVG.

Тогда это становится еще лучше.

Существует новый класс программного обеспечения – приложения для создания прототипов, которые становятся точкой сборки до того, как ваши изображения и значки будут отправлены на устройства, и у них также есть свои особенности.

Это руководство переходит между Photoshop и Sketch для графики и использования Adobe Experience Design, чтобы продемонстрировать некоторые болевые точки между вашей идеей и возможным развертыванием. Давайте начнем.

Как подготовить изображения для мобильных устройств в Adobe Photoshop

Первым шагом в этом процессе является знание вашего целевого устройства или устройств. В этом случае вы будете нацелены на iPhone 6 с шириной экрана 375 пикселей и высотой 667 пикселей. Дизайн требует, чтобы изображение было шириной экрана.

Используемое изображение было снято в соборе Бернского монастыря в Берне, Швейцария. Как только изображение откроется в Photoshop, выберите «Изображение»> «Размер изображения» , чтобы проверить размеры изображения и его разрешение. Очевидно, что изображение размером 3156 x 2592 с разрешением 300 ppi и размером файла 23,4 МБ просто не будет работать.

В диалоговом окне «Размер изображения» уменьшите разрешение до 100 ppi . Сделайте это сначала, потому что размеры изображения также изменятся. С установленным разрешением измените ширину на 375 пикселей. Если вы проверите данные размера изображения, вы заметите, что изображение сократилось с 23,4 Мб до более удобного для мобильных устройств 338 Кб. Нажмите кнопку ОК , чтобы принять изменение и закрыть диалоговое окно «Размер изображения».

Как использовать диалоговое окно «Экспортировать как…» в Adobe Photoshop

Как только изображение будет готово к экспорту, выберите «Экспорт> Экспортировать как…» , чтобы открыть диалоговое окно «Экспортировать как».

Это диалоговое окно является недавним дополнением к Photoshop и заменяет диалоговое окно «Сохранить для Интернета», которое использовалось годами. Если вам все еще это нужно, вы можете найти его во всплывающем окне «Экспорт». По понятным причинам он теперь известен как «Экспорт для Интернета (Legacy)». Если это ваш первый визит в это диалоговое окно, вот краткий обзор:

• Размер . В этом столбце указывается выходной размер изображения. Интересным аспектом этой области является увеличение изображения, но изображение не будет выглядеть «нечетким» на устройстве из-за огромного количества пикселей на экране устройства.
• 1X: нажмите и удерживайте, и вам будет предложено несколько размеров. Категории 1x, 2x и 3x традиционно связаны с устройствами Hi Dpi от Apple, и они вместе с несколькими другими будут готовить изображения для устройств Android.
• Суффикс: . При этом выборе будет отображаться ваш размер, но он будет отображаться как @ 2x или выбран размер. Этот суффикс будет добавлен к имени изображения.
• Знак + . Нажмите, чтобы добавить различные размеры для вывода. В этом случае дважды щелкните по нему и выберите 2x и 3x из выпадающего списка. Это будет охватывать практически любое устройство iOS.
• Мусорное ведро . Нажмите на него, и выбор будет удален из списка.
• Настройки файла: выберите формат – jpg, png, gif или svg – наиболее подходящий для изображения.Если размер файла имеет значение, вы также можете уменьшить настройки качества.
• Размер изображения . Вы можете изменить физические размеры изображения.

• Размер холста . Вы можете изменить физические размеры холста изображения.
• Метаданные . Вы можете добавить авторские права и свою контактную информацию в метаданные изображения.

По завершении нажмите кнопку «Экспортировать все». Вас спросят, где вы хотите разместить изображения. Хорошей привычкой для развития является нажатие кнопки «Новая папка» и создание папки для экспортируемых изображений. При нажатии кнопки «Экспорт» вам будут показаны изображения в папке.

Как подготовить изображения для мобильных устройств в Sketch 3 из богемного кодирования

Sketch 3, приложение для Macintosh от Bohemian Coding, быстро завоевывает популярность среди дизайнеров UX и UI из-за его пристального внимания к дизайну веб-приложений и приложений. На самом деле Photoshop во многих отношениях находится в странном положении, когда ему приходится играть «догонять» Sketch.

Чтобы подготовить изображение для мобильных устройств в Sketch, выберите изображение на артборде и нажмите кнопку «Сделать экспортируемым» в нижней части панели «Свойства» . Откроется диалоговое окно «Экспорт». Нажмите на знак +, чтобы добавить версии 2x и 3x, а также добавить суффиксы. Доступные форматы: PNG, JPG, TIF, PDF, EPS и SVG. В этом случае выберите JPG. Нажмите кнопку “Экспортировать” и выберите или создайте папку для хранения экспортируемых изображений.

Почему вам нужно создать три (или более) версии изображения

Во многом Мобильный рынок – это «Дикий Запад» разрешений, и один размер определенно не подходит для всех. В приведенном выше примере от Adobe Experience Design изображение размещается на 2 монтажных областях iPhone 6 и артборде устройства Android. Обратите внимание, что версия 1x слева выглядит наполовину меньше. Именно так будет выглядеть изображение на iPhone 6 с экраном сетчатки. Версия 2х идеально подходит, а версия Android убегает с экрана. Ваш выбор – масштабировать изображение или экспортировать изображение из Photoshop другого размера.

Тестируйте рано, часто тестируйте, ничего не доверяйте, никому не доверяйте и особенно себе

Что вам нужно понять, так это то, что это только начало процесса. Просмотр вашей работы на как можно большем количестве устройств должен рассматриваться как жизненно важный элемент рабочего процесса. Вы также должны знать, что это только первый шаг в процессе создания графических ресурсов для приложения или мобильных веб-проектов.

Использование приложений для создания прототипов – отличный способ раскрыть болевые точки, но эти же ресурсы должны быть выведены для использования разработчиком. Во многих случаях физические размеры активов, включая значки, будут физически огромными и не в формате svg, а в формате png. На первый взгляд, это может показаться слишком сложным, но помните золотое правило масштабирования изображений: лучше уменьшать, чем увеличивать.

Суть в том, чтобы работать в тесном контакте с вашим разработчиком и использовать программное обеспечение для создания прототипов как способ показать ваши замыслы в дизайне. Однако в конечном итоге эти же активы должны быть готовы к конечному продукту, и ваш разработчик сможет лучше понять, что ему нужно, чем вы.