Возможно вы заметили повальное увлечение стикерами для iMessage, которые были введены в iOS 10. Благодаря этому уроку сможете нарисовать свои стикеры, которые можно использовать вместо предустановленных вариантов, и продать их.

Стикеры iMessage - это крутой и веселый способ выражения своих мыслей и мнения. Для этого достаточно просто выбрать подходящий и вставить в чат!

Если вы задумывались над тем, как же они создаются, то в данном уроке узнаете это. Начнем мы с эскиза стикеров, которые затем отрисуем линиями и фигурами в Adobe Illustrator, которые, в свою очередь, потом раскрасим. После этого вкратце познакомимся с iTunes Connect и Xcode, благодаря которым и запустим свой набор стикеров для iMessage в продажу на App Store.

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

1. Придумываем концепцию и подготавливаем файл со стикерами для отрисовки в Adobe Illustrator

Шаг 1

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

Итак. Начинаем с наброска идеи на бумаге или в цифровом виде.

Я нарисовал 12 "стикеров" с представителями ливанской кухни. Каждый из них я для удобства назвал соответствующим именем.

В оригинальный набор входит 24 стикера, но для урока я покажу лишь 12.

Эти 12 элементов будут распределены по сетке 4x3 как показано ниже.

Когда набросок будет готов, отсканируйте его, чтобы чуть позже перенести в Adobe Illustrator.

Шаг 2

Запустите Adobe Illustrator CC.

Командой File> New (Ctrl+N) создайте новый документ с профилем Custom:

Название: "Lebanese_Food_iMessage_Stickers".

• Количество артбордов: 12 (зависит от количества стикеров; по одному артборду на стикер)
  

Сами стикеры могут иметь три размера:

• Маленький: 300x300 пикселей
• Средний: 408x408 пикселей
• Большой: 618x618 пикселей

Я буду работать с размером 618x618. Соответственно настройки нового документа изменятся так:

• Столбцов: 4
  
• Ширина: 618 пикселей
• Высота: 618 пикселей
• Единицы измерений: пиксели
• Цветовой режим: RGB
• И нажмите кнопку Create Document

Шаг 3

Командой Place (Shift+Ctrl+P) добавьте набросок в документ и расположите его так, чтобы рисунки соответствовали каждый своему артборду.

Теперь нам необходимо создать слой, на котором будем рисовать лайн-арт.

Откройте панель Layers (Window> Layers).

Создайте на панели Layers новый слой:

1. Название: Sketch
2. Заблокируйте (Lock) его
3. Ослабить изображение (Dim Images to): 20%
   
4. OK

После блокировки слоя "Sketch", создайте новый слой, который именуйте "Linework" и расположите выше "Sketch".

Командой File> Save (Ctrl+S) сохраните файл.

2. Рисуем лайн-арт

Шаг 1

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

Откройте панель Brushes (Window> Brushes).

Инструментом Ellipse Tool (L) нарисуйте небольшой овал с черной заливкой и без обводки.

Шаг 2

Перенесите этот овал на панель Brushes.

В появившемся диалоговом окне New Brush выберите пункт Art Brush, после чего нажмите OK.

Откроется окно настройки кисти (Art Brush Options).

Примечание. Если у вас есть графический планшет, то наилучшим вариантом будет создать кисть чувствительную к нажатию пера.

В том же окне Art Brush Options задайте следующие параметры:

• Ширина (Width): Pen Pressure
• Параметры масштаба кисти (Brush Scale Options): Stretch to Fit Stroke Length
  
• Параметры окраски (Colorization Method): Tints; это позволит нам изменять цвет кисти в будущем
• Нажмите кнопку OK
  

Теперь, когда кисть готова, удалите оригинальный овал.

Мы получили искомую кисть, чувствительную к нажатию!

Шаг 3

Можно переходить к отрисовке наброска.

1. Откройте панель Stroke (Windows> Stroke).
2. На панели Brushes выделите созданную чуть ранее кисть.
   
3. Активируйте Paintbrush Tool (B) на панели инструментов.
4. На панели Stroke задайте обводке толщину 0,5 pt, заливку удалите.

Убедитесь, что "мазки" кистью не будут очень сглаженными. Они должны давать ощущение нарисованных вручную. Сделать это можно дважды кликнув по Paintbrush Tool (B) на панели инструментов. Откроется диалоговое окно Paintbrush Tool Options.

Установите ползунок Fidelity на вторую слева позицию.

Шаг 4

Начнем отрисовку инструментом Paintbrush Tool (B).

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

Когда лайн-арт будет готов, заблокируйте слой "Linework" на панели Layers.

Создайте новый слой выше "Linework". Назовите его "Color". На нем мы будем, собственно, раскрашивать наш лайн-арт.

Обязательно сохраните файл (команда File> Save (Ctrl+S)).

3. Раскрашиваем стикеры

Шаг 1

Да будет цвет!

На панели инструментов активируйте Blob Brush Tool (Shift+B). Blob Brush очень похожа на маркер.

Теперь просто назначайте обводке желаемый цвет (убедитесь в отсутствии заливки) и раскрашивайте иконки.

• Совет: быстро уменьшать размер Blob Brush Tool можно клавишей "открывающая квадратная скобка" ([), увеличивать - "закрывающая квадратная скобка" (]).
• Наряду с Blob Brush Tool (Shift+B) используйте и Eraser Tool (Shift+E), которым можно стереть лишнее.
  

"Окраска", как и вся работа, не должна быть идеальной.

Начнем с хумуса.

Как вы видите при помощи Blob Brush Tool можно добиться многого, просто изменяя ее размер и цвет. Ко всему прочему, это еще и быстро.

Таким же образом раскрасьте остальные стикеры.

Шаг 2

В процессе раскрашивания некоторые объекты будут нуждаться в упорядочивании (Arrange). Чтобы ускорить процесс, используйте следующие клавиатурные сокращения:

• Arrange> Bring to Front (Shift+Ctrl+]) - отправить на самый передний план
• Arrange> Bring Forward (Ctrl+]) - отправить на передний план (один шаг)
• Arrange> Send Backward (Ctrl+[) - отправить на задний план (один шаг)
• Arrange> Send to Back (Shift+Ctrl+[) - отправить на самый задний план

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

Шаг 3

Почистим наши артборды.

1. На панели Layers разблокируйте слой "Linework".
2. Удалите слой "Sketch", просто перетащив его на иконку мусорной корзины на панели Layers.
3. Инструментом Selection Tool (V) выделите лайн-арт и окраску каждой иконки.
4. Сгруппируйте (Ctrl+G) их. Полученная группа автоматически переместиться на слой "Linework".
   
5. Каждую иконку центрируйте по своей монтажной области.

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

Когда размеры всех иконок будут изменены, удалите слой "Color", так как он пуст.

File> Save (Ctrl+S).

4. Экспортируем иконки

Шаг 1

Экспортируем файл командой Export for Screens (File> Export> Export for Screens).

1. Формат: PNG.
2. Кликнув по иконке Advanced Settings, укажите место сохранения файлов, а также задайте масштаб (Scale) 1x.
3. Цвет фона (Background Color): Transparent.
4. Export Artboard.

Шаг 2

У вас есть два варианта для размещения стикеров: использовать сторонний магазин вроде LINE Creators Market или сделать это самостоятельно при помощи аккаунта Apple Developers.

Я вам расскажу как открыть аккаунт на Apple Developers, который стоит $100 в год. Процесс подачи заявки прост, а ее одобрение происходит быстро. Учтите, что вам необходимо войти в iTunes Connect и задать определенные настройки в разделе Tax and Banking, если вы планируете продавать свои стикеры (для бесплатных наборов этого не требуется).

Более подробно данная информация изложена в iTunes Connect Developer Guide. Обязательно ознакомьтесь с ним.

Шаг 3

Для генерации стикеров вам потребуется Xcode.

Скачайте версию Xcode 8 непосредственно из Mac App Store и установите ее.

Шаг 4

Загрузим стикеры в Xcode. Делается это так:

Запустите Xcode.

Залогиньтесь в Xcode, используя ваш Apple ID.

Preference> Account> Sign in.

1. Создайте новый проект Xcode.
2. Выберите шаблон Sticker Pack Application.
3. Нажмите Next.
   
4. В поле Product Name введите название набора стикеров. В моем случае это: "Lebanese Food".
5. Также заполните поля Team, Organization Name и Identifier (com.yourcompany.ProductName).
   
6. Нажмите Next.
7. Командой Stickers.xcstickers> Sticker Pack укажите папку, в который находятся стикеры, и затем перетаскиванием добавьте их в программу.

Шаг 5

Теперь загрузим иконки для iMessage App.

Укажите родительскую папку для директории "Sticker Pack".

Выберите одно изображение из набора, которое станет иконкой приложения (App Icon), и в Adobe Photoshop конвертируйте его в JPG с белым фоном. Переименуйте этот файл: "Lebanese_Food_App_Icon.jpg".

Всего нам понадобится 12 иконок для Xcode и 1 для iTunes Connect. Чтобы облегчить задачу генерации иконок, посетите сайт MakeAppIcon.

Загрузите файлы на сайт, введите ваш email и спустя некоторое время получите иконки всех необходимых размеров.

Скачать их можно будет непосредственно из пришедшего письма.

Скачанные изображения добавьте в Xcode, просто перетащив их.

После загрузки картинок в Xcode должно получится примерно так:

5. Настраиваем и регистрируем стикеры

Шаг 1

Теперь стикеры необходимо протестировать ("Test the Build") в Xcode, чтобы они смотрелись хорошо в реальном использовании. Для этого вы можете использовать Xcode Simulator или просто запустить их на собственном устройстве. Вам необходимо:

1. В секции Set the Active Scheme укажите своё мобильное устройство.
2. Нажмите кнопку Run.

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

Чтобы протестировать стикеры в Xcode Simulator, щелкните по кнопке Run. Выглядит отлично!

Изменить размер отображаемых в iMessage стикеров можно на панели справа, как показано ниже.

Размеры "Medium" или "Small" работают хорошо.

В завершение для стикеров необходимо зарегистрировать  App ID.

Шаг 2

Войдите в свой аккаунт Apple Developer. Для регистрации App ID сделайте следующее:

1. В меню Account> Identifiers> App ID> нажмите на +
2. Укажите требуемые данные и нажмите Register
   

Шаг 3

Наконец, экспортируем и загрузим (Export & Upload) наш "набор" в iTunes Connect.

Вернитесь в Xcode.

1. В меню Set the Active Scheme выберите пункт "Generic iOS device".
2. Выделите папку "Stickers.xcstickers" и при помощи команды Product> Archive архивируйте набор.

Появится новое окно, в которое будет показан архивированный "набор". Сами стикеры можно увидеть на панели слева.

Нажмите кнопку Validate, чтобы еще раз удостовериться в качестве стикеров. В случае проблем, Xcode отобразит уведомление красного цвета в верхней части окна.

Если с "набором" всё хорошо, то вам нужно загрузить его в iTunes Connect для рассмотрения (Review).

Для этого нажмите кнопку Upload to App Store. Вот мы и загрузили стикеры в iTunes Connect. Через несколько минут они появятся в вашем аккаунте iTunes Connect.

Шаг 4

Пришло время добавить стикеры в App Store!

В iTunes Connect:

1. Выберите пункт My Apps
2. Далее нажмите +> New App и укажите "набор", который мы загрузили ранее.

1. Выберите платформу iOS.
   
2. Название: Lebanese Food.
3. Укажите язык (Language) и Bundle ID.
4. Создайте уникальный идентификатор (SKU) "eg.location.com.bundle_title".
5. Создать (Create)!
   

В разделах App information и Pricing & Availability с левой панели укажите описание приложения, язык, категории и цену. Не буду вдаваться в подробности, потому что там и так всё понятно. Выглядеть же оно будет так:

Шаг 5

При помощи Xcode Simulator и Adobe Photoshop сделайте несколько скриншотов своего набора. Загрузите их в iTunes Connect, чтобы показать пользователям примеры реального использования в iMessage. Сделайте 5 скриншотов для iPhone с дисплеем 5,5 дюймов (1242x2208 пикселей). Остальные размеры будут сгенерированы автоматически.

Наконец, нажмите кнопку Submit for Review.

И на этом всё!

Теперь вам нужно несколько дней подождать принятия вашей заявки.

Пока же стикеры находятся на рассмотрении, вы можете при помощи TestFlight рассылать вашим фанатам тестовые приглашения (Test invitations), давая им возможность пользоваться стикерами бесплатно в течение 60 дней. Или вы можете использовать это время, чтобы уточнить в Apple про налоги, договор о продажах, сертификаты и банковские реквизиты.

Это отнимет некоторое время и в процессе у вас могут возникнуть затруднения, но, проявив терпение, вы всё преодолеете.

Поздравляю! Наш набор стикеров "Lebanese Food" для iMessage готов!

Надеюсь, вам понравился этот урок. Дизайн стикеров - это весело, особенно если вы можете заработать на этом!

Приобрести полный набор стикеров "Lebanesy Food" можно на iTunes.

Обязательно поделитесь своими стикерами в комментариях.