Из этой статьи вы узнаете, какие типы изображений используются в Xcode, почему этих типов несколько и какой когда выбрать.
В этой статье вы прочитаете:
- Про плотности пикселей.
- Растровые изображения PNG
- Векторные изображения PDF
- Код на Swift для создания изображений
- Иконки для интерфейса SF Symbols
Примеры изображений и кода из этой статьи доступны на GitHub
Про плотность пикселей
В 2010 году появился iPhone 4, экран которого по размеру был такой же, как iPhone3GS, но количество цветных лампочек стало в 4 раза больше. Это позволило повысить четкость картинки. Но прибавилось работы разработчикам и дизайнерам, потому что теперь требовалось 2 набора изображений, для старых и новых телефонов. Автоматическое изменение масштаба не подходило, потому что на новых дисплеях можно было добавить больше деталей.
Получается, что один и тот же физический квадратик экрана в зависимости от плотности может включать 1, 2х2=4 или 3х3=9 пикселей устройств. Поэтому важно различать понятия пиксель и точка.
- Точка / point / pt - виртуальная точка на экране, ей соответствуют 1, 4 или 9 пикселей
- Пиксел / pixel /px - это физическая трехцветная лампочка экрана.
Линия толщиной в 1pt будет смотреться примерно одного размера на экранах одного размера независимо от плотности пикселей.
Линия толщиной в 1px на экранах с большей плотностью будет тоньше
Линия в 1px толщиной используется как разделитель, она получается тонкая и не отвлекает на себя внимание.
Три варианта изображений используют внимательные к деталям дизайнеры для того, чтобы максимально точно управлять графикой и попаданием в пиксели для текста и pixelart. Разная плотность пикселей позволяет добавить больше деталей или немного менять стиль. Для примерна в разрешении @1x я увеличил звезды.
Для разработки используются:
- Растровые изображения PNG
- Векторные изображения PDF
- Код на Swift для создания изображений
- Иконки для интерфейса SF Symbols
PNG
Это растровые изображения, они состоят из отдельных точек. Это сетка, на которой каждая точка имеет цвет + прозрачность. Если изображение изначально создается как растровое, например 3D, нарисовано вручную или создано с помощью AI, оно может быть только растровым.
Иконки приложения пока могут быть только в PNG. И Xcode нужны изображения в разных размерах и плотности пикселей от 1024х1024 до 20х20. Если для иконок не создаются отдельные изображения под каждое разрешение, то достаточно загрузить изображение 1024х1024 и выбрать в боковом меню Single Size. Xcode сам создаст требуемые изображения
В моем проекте растровыми будут иконки приложения и узоры для панелей инструментов. Иконки, потому что выбора нет, а на узорах есть размытие, которое векторный формат не сможет передать. Возможно на этапе работы с панелями я смогу добавить фильтр размытия средствами SwiftUI.
Векторное изображение, исходный размер в пикселях в котором сохранен как pt. Скорее всего Apple выбрала PDF, а не SVG из-за этого, а также из-за возможности закрыть документ для редактирования. Векторные изображения хранят линии, фигуры, заливки - некий код картинки, который система использует для того, чтобы создать изображение. Но и векторное изображение в итоге все равно преобразуется в растровое.
В Xcode есть переключатель Preserve Vector Data в боковом меню сохраняет формат PDF во время работы приложения и позволяет получать четкие картинки любого размера(этим мы воспользуемся дальше для наклеек в будущих постах). Если переключатель выставлен в OFF, то данные по изображениям переводятся в растр и используются аналогично PNG.
Для векторных изображений также можно подготовить отдельные варианты под разную плотность пикселей. Но все удобство работы с ними заключается в возможности использовать Single Scale - Xcode сам создаст изображения требуемого размера.
В моем проекте все изображения доступны в векторе, поэтому я буду использовать формат PDF как основной. Это даст четкие изображения для всех кнопок, а также для наклеек, которые могут динамически менять размер.
Swift
Это не совсем формат изображений. Но в код на Swift можно преобразовать любое векторное изображение, потому что и то, и другое - это код. Но это имеет смысл только для простых форм и градиентов.
Есть инструменты для преобразования, например SVG-To-Swift, которую можно попробовать на сайте. Для картинки со шляпой получилось 200+ строк кода
А результат не впечатляет и очевидно требует доработок:
Градиенты
Генерация кода отлично подходить для переноса градиентов. Редактор Figma умеет создавать градиенты, которые можно вставлять в код и использовать. В этом примере градиент содержит 5 точек с заданными цветами.
В моем проекте я буду использовать градиенты, созданные на Swift там, где возможна их автоматическая генерация средствами Figma. Это панели и фоны. Но градиент на загрузочном экране будет из PDF, т.к. там нельзя использовать код.
SFSymbols
Системные иконки от Apple, которые можно использовать в своих приложениях. Они предназначены для создания пользовательских интерфейсов в строгом системном стиле. Это что-то среднее между изображением и текстом. В коллекции есть иконки на все случаи жизни. Можно настроить цвет, стиль и размер, а в новом iOS SDK добавить анимацию. Это большая тема, достойная отдельной статьи.
В моем проекте я пока их использовать не планирую
Заключение
Изображения в приложении необходимо подбирать под оформление и задачи таким образом, чтобы сэкономить силы и время себе, а пользователю трафик и место на устройстве. Но не в ущерб качеству.
Что я рекомендую:
- SFSymbols - отличное решение для небольших команд, которые хотят быстрее запустить прилично выглядящий продукт в системном стиле
- Swift - для несложных градиентов в качестве фона экрана или панели. Цвета лучше отправлять в Assets
- PDF - стоит использовать для всех изображений, которые изначально были векторными
- PNG - для иконок и изображений, которые изначально растровые
Пиши в комментариях интересующие вас темы для будущих статей, а чтобы их не пропустить - подписывайтесь на дневник.
