Любите использовать эмоджи? Теперь вы сможете научиться делать свои собственные!

Мы все используем смайлики/смайлы (эмотиконы) в наших чатах мессенджеров, приложений и в онлайн-комментариях. Эмоджи - это очень забавный способ показать наши чувства без слов. Многие приложения предлагают бесплатные смайлы, но Вы не должны ограничивать себя только ими. Создайте свои собственные!

Сегодня вы узнаете, шаг за шагом, как установить и создать небольшой набор эмодзи женщины Халиджи. Мы будем работать с базовыми инструментами и горячими клавишами Adobe Illustrator, для создания женского персонажа с разными эмоциями, а двигаясь дальше, вы узнаете как использовать xcode для экспорта изображений.

Зайдите на GraphicRiver для получения порции вдохновения для дизайна эмоджи.

1. Как сделать набросок и настроить рабочую область для эмоджи

Шаг 1

Сначала  давайте сделаем набросок нашего персонажа. 

Распространенными чертами "красоты", которой одарены ближневосточные женщины генетически, и не только ими, являются:

• широкие брови
• большие подведенные глаза и загнутые ресницы
  
• смуглая кожа
  
• полные губы
• густые волосы
  

Помните об этих чертах, и набросайте "неэмоциональное" женское лицо, добавьте хиджаб чтобы она выглядела более "Халиджи" (из стран Персидского залива).

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

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

Шаг 2

Настройте новый документ (Command-N):

• Число рабочих областей: 1
• Ширина: 618 пикселей
  
• Высота: 618 пикселей
  
• Единицы измерения: Пиксели
  
• Цветовая схема: RGB

Шаг 3

Используйте горячие клавиши Поместить (Command-Shift-P), и разместите набросок. Затем заблокируйте его (Command-2), чтобы мы могли рисовать поверх него.

2. Как нарисовать первоначальный дизайн эмоджи

Шаг 1

Давайте начнем с обрисовки глаз

Выберите инструмент эллипс (L), на панели инструментов.

1. Создайте радужную оболочку глаз, круг 60 х 60 пикселей коричневого цвета (7C3722), используя инструмент эллипс (L).
   
2. Нарисуйте зрачок глаза, 40 х 40 пикселей коричневый кружок (351105)  и поместите его над радужкой.
3. С помощью инструмента эллипс (L), создайте два блика на глазах: один повернутый овал 26 х 17 пикселей и круг 14 х 14 пикселей с белым цветом заливки (FFFFFF).

Затем, с помощью инструмента "выделение" (V), выделите все четыре эллипса и сгруппируйте их вместе (Command-G).

Шаг 2

Из панели инструментов выберите инструмент перо (Р) и (FFFFFF) белой заливкой нарисуйте "склеры"—белок глаза.

1. Пройдите в Объект > Монтаж > Переложить назад (Command-[) для того, чтобы поместить его под зрачок.
   
2. Затем нажмите Копировать (Command-C).
3. И вставить на передний план (Command-F).
4. Объект > Монтаж > Переложить Вперед (Command-]) чтобы объект переложить на передний план перед зрачком.

Нам нужно  создать обтравочную маску для зрачков.

С помощью инструмента "выделение" (V), выберите склеры и зрачки, Объект > Обтравочная маска > Сделать (Command-7).

Теперь зрачки скрыты под маской.

Шаг 3

Используя инструмент перо (Р), нарисуйте верхние/нижние веки, тени для век, ресницы, брови, и румяна, черной обводкой без заливки.

Заполнение цветом:

• Брови #893A28
• Тени для век и нижнее веко #CC6E4A
• Ресницы #000000
• Тень на глазу #B5D7EA
• Затемнение щек #FFB7A6

Вам нужно выровнять фигуры по переднему или заднему плану.

Чтобы двигать выше или ниже, пройдите в Объект > Монтаж  > На передний план (Shift-Command-]) или Объект > Монтаж  >На задний план (Shift-Command-[).

Для всего одного шага вперед или назад, Объект > Монтаж > Переложить назад (Command-[) или вперед (Command‑]).  Объект > Монтаж > Переложить вперед.

Шаг 4

Откройте панель Прозрачности: Окно > Прозрачность.

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

Затем выберите овал щеки и задайте ему режим наложения "умножение" тоже.

Эффект > Стилизация > Размытие: Радиус: 13 пикселей.

Шаг 5

Сгруппируйте все детали глаз вместе (Command-G).

Мы должны создать симметричные глаза. Используйте инструмент "выделение" (V), и выберите группу глаза, тени щеки , и брови. Возьмите инструмент зеркальное отражение (О) и установите центр точки отсчета синий чуть выше носа; параметры > сдвиг >перетащите и отпустите зеркальное отражение в нужном положении.

Шаг 6

Проиллюстрируем остальные детали эмодзи. Используйте инструмент перо (P), и обведите остальные части эскиза.

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

Помните, двигать вверх и вниз Объект > Монтаж > На передний план (Shift-Command-]) или Объект > Монтаж > На задний план (Shift-Command-[), а на один шаг назад и вперед Объект > Монтаж > Переложить назад (Command-[) или Объект > Монтаж > Переложить вперед (Command-]).

Шаг 7

Объект > Освободить все (Command-Alt-2), и удалите набросок. Подкорректируйте и почистите работу с помощью инструмента прямое выделение (А).

Выделите лицо, и перейдите Объект > Контур > Создать параллельный контур, отступ 4 пикселя.

Затем выберите и задайте внешнему контуру лица более темный цвет кожи.

Шаг 8

Выделите хиджаб и пройдите Объект > Контур > Создать параллельный контур, отступ 5 пикселей и задайте новой внешней фигуре черную заливку.

У нас получилось первоначальное лицо для эмоджи.

Файл > Сохранить (Command-S).

Шаг 9

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

Затем из подменю панели Монтажные Области, выберите Переупорядочить Монтажные Области:

• Макет сетки по строкам
• Колонки: 3
• Расстояние: 20 пикселей
  

3. Как показать эмоции

Шаг 1

Теперь, когда мы выставили монтажные области, начнем рисовать эмоции.

Первая эмоция на новой монтажной области это "ах!"

• Удалите губы и брови.
• Затем выберите инструмент перо (Р) и придайте очертания буквы "о" губам и наклонные брови, как у эмоции :O

Выберите каждую новую фигуру с помощью инструмента выделение (V) и используйте инструмент пипетка (I), чтобы соответствующий партнер приобрел тот же цвет.

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

Пройдите в Выделение > Похожие > С одинаковой заливкой и задайте цвет #4F2018.

Используйте инструмент "выделение" (V), чтобы переместить небольшую родинку ближе к губам, и вы сделали первый эмодзи!

Шаг 2

Монтажная область 2: эмоджи "Расстроенный"

1. Удалите брови и губы.
2. Нарисуйте новое выражение лица с помощью инструмента перо (p), подберите цвета с помощью инструмента пипетка (I).
3. Используйте инструмент "выделение" (V), чтобы переместить родинку ближе к губам.

Шаг 3

Монтажная область 3: эмоджи "злой" 

Во-первых, выделите брови с помощью инструмента выделение (V) и поверните их внутрь, чтобы показать гнев. Затем, нарисуйте злые губы и искры гнева инструментом "перо" (Р), 1 пиксель, черная обводка.

Завершите путем сопоставления цвета с помощью инструмента пипетка (I), и задайте искрам красный цвет.

Шаг 4

Монтажная область 4: эмоджи "шок"

1. Удалите брови и губы.
2. Нарисуйте высоко поднятые и изогнутые брови и открытый рот, с помощью инструмента перо (Р), И подберите цвета с помощью инструмента пипетка (I).

Шаг 5

Монтажная область 5: эмоджи "крутой"

Используйте инструмент перо (Р), чтобы нарисовать крутые, в форме кошачьего глаза солнцезащитные очки на глаза, и добавьте на них белые блики.

Затем, используя инструмент прямое выделение (А), подправьте губы, чтобы они выглядели более "пухлыми", и удалите темный центр губ.

Шаг 6

Монтажная область 6: эмоджи "радостный"

1. Удалите глаза и темный центр губ.
2. Нарисуйте тени, и сделайте черные "зажмуренные" глаза с ресницами, используя инструмент перо (Р).
3. Используйте инструмент "выделение" (V), чтобы опустить брови и слегка повернуть их прямее.
4. Используйте инструмент пипетка (I), чтобы подобрать цвета.

Шаг 7

Монтажная область 7: эмоджи "хихикающий".

1. Удалите глаза, брови и губы.
   
2. Используйте инструмент перо (Р), чтобы нарисовать тени для век, арочные раскосые глаза с длинными ресницами, изогнутые улыбкой, и брови.
3. Используйте инструмент пипетка (I), чтобы подобрать цвета.
4. Используйте инструмент "выделение" (V), чтобы поднять тень щеки  вверх и переместить ее ближе ко рту.
   

Шаг 8

Монтажная область 8: эмоджи "пускающий слезу"

1. Удалите глаза, брови и губы.
   
2. Используйте инструмент перо (Р), чтобы нарисовать перевернутые брови, воду, льющуюся из глаз, много слез, и открытый рот.
   

Далее используйте инструмент пипетка (I), чтобы подобрать цвета, и сделайте заливку слез в оттенках голубого. Помните горячие клавиши для размещения элементов на задний/передний план. Переместите родинку ближе к губам. Используйте инструмент перо (Р) с цветом, темнее оттенка кожи, и нарисуйте треугольную форму ниже потока слез, чтобы сделать эффект разлетающихся во все стороны слез.

Шаг 9

Монтажная область 9: эмоджи "влюблен"

1. Удалите глаза и губы.
   
2. Используйте инструмент "выделение" (V), чтобы развернуть концы бровей, и опустить их немного ниже.
3. Используйте инструмент перо (Р) И нарисуйте два больших сердца на месте глаз, застенчивую улыбку, и сердца вокруг хиджаба.

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

Шаг 10

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

Файл > Сохранить  (Command-S).

4. Как экспортировать и построить клавиатуру с эмоджи

Шаг 1

Файл > Экспортировать как.

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

Появится диалоговое окно PNG:

• Разрешение: Экранное (72ppi)
• Цвет фона: Прозрачный
  
• Нажмите ОК

Шаг 2

Как сделать эмоджи-клавиатуру

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

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

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

Вам нужно настроить ваш аккаунт Apple Developer (USD99/year) и iTunes Connect. И скачать Xcode.

Шаг 3

Быстро пробежимся по процессу.

Войдите в Xcode с вашим Apple ID: Настройки > Аккаунт > Выбор + > Войти.

1. создайте новый проект Xcode и выберите Sticker Pack Application, и нажмите далее.
   
2. Задайте имя вашему сету эмоджи Имя продукта : "Девушка Халиджи Эмоджи".
3. Заполните поля Команда, Имя Организации, Идентификатор, и нажмите далее.

Шаг 4

Нажмите на голубую папку Stickers.xcstickers в левой панели навигации и перетащите эмоджи в поле редактирования.

1. Под полем Set the Active Scheme, выберите вашу модель, в данном случае iPhone7 Plus.
   
2. Запустите вашу сборку, чтобы проверить стикеры на симуляторе iMessage.
   

Протестируйте эмоджи в симуляторе.

Шаг 5

Если все работает хорошо, тогда создайте в imessage иконки приложений, и вы готовы к архивации и отправке в магазин приложений App Store..

Для создания иконки приложения, используйте MakeAppIcon.

Загрузите  изображения 1536 х 1536 пикселей на веб-страницу MakeAppIcon, и он вышлет Вам все размеры, необходимые для всех устройств iOS.

Нажмите на синюю папку Stickers.xcstickers в левой области навигации и выберите папку приложения iMessage App Icon и отправьте все иконки изображений путем перетаскивания.

Шаг 6

Наконец, Продукт > Архивировать.

• Окно > Организатор. Вы увидите стикеры на левой панели.
• Утвердить.
  
• Если все хорошо, загрузите их в магазин приложений  App Store, и они появятся на iTunes Connect и вы можете отправить ее через Проверку.
  

Когда вы будете  готовы, нажмите Отправить.

Дождитесь завершения процесса проверки, который обычно занимает несколько дней, и ваша клавиатура будет готова!

На старт, Внимание, Текст!

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

Делитесь и наслаждайтесь!