От зарисовок до iMessage App Store за 8 дней: Часть 1

Дизайнер Аделин Ваат в своем блоге рассказала о том, как она создавала стикеры для iMessage. Оказывается, что это довольно простое занятие. Почему бы вам не попробовать?

Когда Apple анонсировала iOS 10, я была в восторге от стикеров в iMessage. Будучи активным пользователем iMessage, когда эмодзи не могли передать мои мысли, я рисовала картинки, делала фотографии и посылала их другому человеку (кто сейчас звонит?).

Мне нравилась идея увидеть некоторые из моих рисунков в ежедневных разговорах и общении. В этой статье я делюсь тем, как бумажные зарисовки превратились в стикеры Dim and Sum в iMessage App Store. Это моя первая попытка самостоятельно опубликовать стикеры / iOS приложение (это тот же самый процесс), и я рассказываю об этом с точки зрения дизайнера. Возможно, некоторые шаги можно улучшить, и я буду рада услышать об этом.

Весь процесс вкратце:

• День 1-3: Разработала концепцию, набросала на бумаге. Использовала Illustrator для создания цифровой копии своих зарисовок. Получила 24 стикера.
• День 4: Скачала и изучила Xcode для создания стикеров. Купила аккаунт Apple Developer и проделала массу другой работы для загрузки своих стикеров.
• День 5: Наконец загрузила мой первый билд для проверки в iMessage App Store.
• День 6: Статус приложения изменился на «Ожидает ревью».
• День 7: Статус приложения изменился на «В ревью».
• День 8: Стикеры прошли проверку и готовы к продаже!

Я разделила это руководство на две части – в первой я буду рассказывать про подготовку рисунков, а во второй о технических вопросах создания и публикации стикеров. Вы можете найти мою шпаргалку по стикерам iMessage здесь.

1. Подготовка стикеров в Adobe Illustrator

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

• Знайте размеры ваших стикеров. Вы позднее в Xcode должны будете выбрать один из трех размеров (я рассмотрю это во второй части). Так что ваш артборд в Illustrator должен быть соответствующего размера. Как правило, чем больше у вас деталей, тем больший размер должен быть у стикера. Я использовала обычный размер (408х408 точек).

• Создайте отдельные артборды для каждого стикера. Нет точного количества стикеров (я не смогла найти эту информацию), которые нужны iMessage. Я полагаю, что надо просто сделать разумное количество, которое бы понравилось пользователям, особенно если вы собираетесь продавать стикеры.
• Помните, что это набор стикеров, так что постарайтесь сохранить визуальную однородность во всех них.
• Используйте функцию «Export for Screens». Экспортируйте PNG, убедитесь, что фон сделан прозрачным, @1x достаточно.

2. Создание иконку приложения

В работе над иконкой я выбрала Sketch. Вот полезный шаблон, который я нашла на Github для генерации иконок в Sketch. В общем, всего есть 12 изображений, которые вам понадобятся для Xcode и еще одна для iTunes Connect. Вот как они выглядят.

Некоторые советы по созданию иконок в Sketch:

• Если вы копируете вектор прямо из Illustrator, убедитесь, что вы заранее конвертировали кривые в контуры. Так вы избежите того, что некоторые кривые будут слишком толстыми или слишком тонкими при масштабировании до требуемых размеров.
• Сделайте ваши иконки символами. Таким образом, когда вы сделаете второй набор стикеров, вам понадобиться заменить только одно изображение.
• Экспортируйте их @1x и положите все в одной папке.

3. Переносим все ассеты в Xcode

Теперь, когда у вас готовы все ресурсы, настало время сконфигурировать их использование в Xcode – среде разработки от Apple. Вы можете скачать его бесплатно в Mac App Store.

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

Основная часть работы по публикации приложения наступает после этого, особенно если вы делаете все в первый раз, как я. Я расскажу о настройке Xcode, тестировании, загрузке приложения в iTunes Connect и других необходимых вещах в следующей части.

Я была чертовски взволнована, когда впервые увидела свои стикеры в магазине приложений, отдайте им должное, если вам понравился мой рассказ :). Я надеюсь, что это руководство будет полезно для других иллюстраторов, художников и дизайнеров, которые думают о выпуске своих работ для iMessage. Также я сделала Шпаргалку для издания стикеров для iMessage, что должно упростить эту работу для всех. Увидимся во второй части!