Каждый может создавать значки и изображения для macOS и iOS только с помощью приложений Keynote и Preview!

Пару лет назад Adobe выпустила очень хорошее программное обеспечение под названием Adobe XD. Я был очень счастлив. Будучи на 100% бесплатным для частных лиц и очень малых предприятий, где вообще не требуется совместное использование и совместная работа в Интернете, это действительно отличное предложение.

Наконец-то мы можем создавать значки приложений и небольшие изображения с помощью векторной графики и с такой легкостью экспортировать их в формат PNG (@1x, @2x, @3x вместе!)

А если мы говорим об Adobe, Photoshop и Illustrator — это другие их важные инструменты, которые нужны многим графическим дизайнерам и с радостью платят за них ежемесячно, но — даже если мы, разработчики, тоже могли бы использовать их для создания небольших вещей, таких как значки приложений, изображения панели инструментов и т. д., когда это необходимо — нам никогда не понадобится (или не будет использоваться) их полный набор дорогостоящих функций… так что такая подписка гораздо менее привлекательна.

Более того, на момент написания ни один из упомянутых программных пакетов не доступен в Mac App Store. Лично я не хочу устанавливать приложения на свой основной компьютер прямо из Интернета, если они мне действительно, действительно не нужны, иначе. Во избежание беспорядка. И боль.

И я точно знаю, что приложения Adobe, даже бесплатная версия Adobe XD, поставляются со встроенным программным обеспечением Creative Cloud, которое очень навязчиво для самой macOS: оно интегрируется в Finder, настраивается для запуска при входе в систему и отображается в виде значка меню. постоянно ест ресурсы. Я имею в виду, если вы действительно не используете его.

Вы можете «удалить» его, но это, как правило, оставит много «Других» вещей, несмотря ни на что, и оно может вернуться всякий раз, когда вы снова обновите XD, поэтому я абсолютно не фанат этого. (Пожалуйста, поймите меня, у меня был MacBook модели 2015 года вплоть до этого года!)

Существуют бесплатные специализированные альтернативные приложения в Mac App Store, которые могут помочь с вашими требованиями к дизайнеру (например, обратите внимание на Vectornator), и я вовсе не против них, но я все же хотел узнать — скажем, из чистого любопытства — можем ли мы придерживаться собственного программного обеспечения для всего, которое нам нужно во время разработки, включая (ограниченный) графический дизайн и другие вещи.

И после некоторых исследований и после многих экспериментов я обнаружил, что (как и Боб): да, да, мы можем!

Создание значков приложений: файлы PNG

Первое первым. (Хм. Вы пропустили красивое введение выше? 😀) Вашему приложению действительно нужна иконка. Xcode требует изображений PNG с разным разрешением, в зависимости от типа создаваемого вами программного обеспечения. Например, для приложения macOS вам нужно заполнить 10 слотов, и 3 пары из них используют одинаковый размер, как вы можете видеть ниже:

Итак, приступим, мы создадим изображения размером от 16×16 до 1024×1024. Давайте начнем с самого большого, а затем мы просто изменим размер копий, дублируя их по мере необходимости, пока не достигнем самого маленького.

Настройка Keynote

Откройте приложение Keynote и создайте новый пустой документ. Мы будем использовать в презентации один слайд — тот, что создан по умолчанию, достаточно хорош. Вам просто нужно выбрать и удалить любые текстовые заполнители в макете, чтобы действительно начать с нуля.

Нажмите значок Документ в правом верхнем углу и выберите Пользовательский размер слайда в раскрывающемся списке в правом нижнем углу. Выберите 1024 пт для длины слайда по горизонтали и по вертикали и нажмите ОК.

Если нам нужны прозрачные значки (как в macOS), вернитесь на вкладку Формат в правом верхнем углу и разверните раздел Фон, чтобы выбрать Без заливки. . Черный выглядит сейчас, но это нормально! (Конечно, вы можете немного отложить этот шаг — просто пока поработайте с белым цветом и просто очистите фон перед сохранением результата несколькими строками ниже.)

Затем вступает в игру первый трюк: создайте квадрат без заливки, который почти соответствует размеру слайда. В нашем случае сделайте его размером 1022×1022 pt, оставив также по одной точке с каждой стороны для прозрачной рамки. Расположите его по центру стороны.

Это гарантирует, что размер содержимого будет таким же, как у слайда. Это важно и требуется для последних шагов этого руководства, не пропускайте его. (На самом деле у вас может быть даже любой размер слайда — важен общий размер содержимого, но будет проще, если вы будете синхронизировать их, как я описал выше.)

Подготовка собственно художественной работы

Теперь вы можете раскрыть в себе художника — используйте все формы, которые вам нужны. Просто убедитесь, что ничего не выходит за границы прозрачной формы «контейнера». И убедитесь, что вы не создаете уродливые вещи, как мой пример ниже:

Второй трюк, однако, состоит в том, чтобы не сохранять документ напрямую из Keynote — это по какой-то причине не сохранит прозрачность! — а просто выделить все фигуры и скопировать содержимое в буфер обмена. Мы скоро сохраним его из приложения Preview, см. ниже.

Создание файлов с помощью предварительного просмотра

Скопировав содержимое изображения в буфер обмена, откройте приложение Предварительный просмотр и выберите команду Файл / Создать из буфера обмена (Cmd+N), чтобы получить изображение. и сохраните его как альфа-файл PNG с именем, например, icon.png.

Примечание: фон больше не черный — он прозрачный серый, ура!

А теперь: часть дублирования файлов. О боже. Готовьтесь с большим терпением и вниманием. Но это может быть сделано:

Для каждого слота уникального размера в Xcode создайте дубликат файла значка, назвав его на основе названия слота (например, [email protected]). Откройте каждый из этих файлов с помощью приложения Предварительный просмотр и используйте Инструменты / Настройка размера в меню, чтобы изменить их размер до нужного вам размера, используя пиксели На этот раз на основе значений. И создайте (и переименуйте) дополнительные дубликаты для файлов, которые необходимы в разных слотах Xcode того же размера.

Конечно, есть приложения, которые могут выполнить эти шаги за вас. Но если вы действительно хотите автоматизировать вышеперечисленное, как насчет написать свой собственный инструмент? Тогда поделитесь им и с нами — спасибо. 😉

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

Затем, однако, просто перетащите файлы в область AppIcon Xcode (по одному или все сразу), и, наконец, все готово:

Ресурсы изображений с индивидуальным масштабом: также файлы PNG

Помимо значков приложений, вам часто нужно создавать общие изображения. Например, для панелей инструментов, панелей вкладок и так далее. (По крайней мере, когда вы не можете использовать SF Symbols.)

Самый распространенный способ заполнить ресурс изображения Xcode — использовать Индивидуальные масштабы по умолчанию: затем вам нужно указать 1x, 2x и 3x версии одного и того же (или слегка измененного) изображения:

Для этого просто выполните те же шаги, что и выше (как мы сделали для значка приложения), убедитесь, что вы используете самый большой размер, необходимый для начала, и сгенерируйте из него правильные выходные файлы PNG.

Затем перетащите все выходные файлы в Xcode и двигайтесь дальше.

Изображения в одном масштабе: PDF-файлы!

Однако в своих более новых версиях Xcode также поддерживает подход Single Scale — давайте поговорим и об этом:

В данном случае первым на ум приходит формат SVG. И действительно, Xcode теперь поддерживает SVG, а приложения Keynote и Preview — нет. Нам нужен обходной путь.

Давайте вернемся к Предварительному просмотру, загруженному содержимым, экспортированным из Keynote, и вместо этого сгенерируем PDF-файл большого размера (в векторном формате). Вы можете легко сделать это, используя ту же команду Сохранить как, просто выбрав PDF вместо PNG в качестве типа выходного файла в диалоговом окне, гарантируя, конечно, чтобы также установить флажок альфа, если вам нужно также включить прозрачность для изображения.

Не волнуйтесь, если после этого все вокруг вашей фотографии будет белым! Это просто приложение Preview, показывающее содержимое PDF и имитирующее бумагу. Реальный вывод по-прежнему альфа-изображен, поверьте мне, все в порядке!

Перетащите PDF-файл в Xcode, и вы готовы использовать новое изображение с изменяемым размером в любом месте вашего приложения!

А как насчет файлов SVG?

Иногда вы хотите включить в свои значки или другие изображения графику, являющуюся общественным достоянием (или иным образом лицензированную). Но что, если он будет в формате SVG?

Например, вы можете скачать множество SVG с creazilla.com (кстати, отличный ресурс). Можно ли их использовать, несмотря на то, что Keynote не позволяет вставлять файлы SVG в слайд в том виде, в котором они есть?

Ну да, опять же, можно. Если вы просто согласитесь потерять их векторность и вместо этого работать с ними в максимальном масштабе.

Допустим, мы хотим включить это изображение кота где-нибудь в наш выходной ресурс после того, как мы загрузили его в виде SVG. Чтобы использовать его, нам просто нужно сначала преобразовать его в PDF или другой формат, который поддерживает Keynote.

Откройте файл SVG с помощью Safari (это должно работать!) и используйте команду Экспортировать как PDF из его меню Файл.

Теперь вы можете перетащить файл на слайд Keynote и — бум — он появится внутри!

Но он такой белый! Таким образом теряется прозрачность; к сожалению, так оно и есть.

Чтобы немного обойти это, нам действительно нужен последний специальный трюк.

Выбрав только что вставленное изображение, выберите вкладку Изображение (вторая после Стиль) в правой части инспектора Keynote. Нажмите кнопку Instant Alpha, а затем несколько раз щелкните внутри изображения, чтобы указать белые области, которые нужно удалить.

И ничего себе, теперь это выглядит хорошо; или лучше, хотя бы чуть-чуть!

Завершение / TL; DR

Используя только Apple Keynote, Preview, Finder операционной системы и Safari (последний только для SVG), разработчики может создавать прозрачные (или непрозрачные) значки приложений и графические ресурсы точно так, как это необходимо для Xcode.

Чтобы пойти по этому пути, вам всего нужно знать пару трюков. Или, ладно, три:

  • убедитесь, что содержимое основной заметки имеет правильный размер (самый большой, который вам нужен, минус граница в одну точку);
  • используйте копировать-вставить и сохраните файлы PNG из приложения Preview, чтобы сохранить прозрачность, затем дублируйте файлы и изменяйте размер изображений по мере необходимости;
  • и используйте PDF на основе альфа вместо SVG или используйте Instant Alpha по мере необходимости, чтобы вернуть прозрачные части всякий раз, когда они были потеряны.

Это все, что вам нужно.