Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Emoticon Design
Design

Как создать стикеры эмоджи с женщиной Халиджи в Иллюстраторе

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Communication Week.
27 Restaurant Menu Templates With Creative Designs

Russian (Pусский) translation by Irina Molochnaia (you can also view the original English article)

Final product image
What You'll Be Creating

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

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

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

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

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

Шаг 1

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

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

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

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

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

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

Sketch Khaleeji woman emoji Expressions Miss Chatz

Шаг 2

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

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

Шаг 3

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

Place Shortcut Initial Sketch Emoji

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

Шаг 1

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

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

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

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

Шаг 2

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

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

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

Pen tool Copy Paste Sclera bring forward send Back

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

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

Clip Mask Pupil eyes Emoji

Шаг 3

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

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

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

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

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

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

Color Fill Object Arrange Bring front Back

Шаг 4

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

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

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

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

Transparency panel blending mode multiply radius

Шаг 5

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

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

eye group mirror symmetrical reflect

Шаг 6

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

Pen tool Trace Emoji Illustration tutorial

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

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

color fill shapes khaleeji woman emoji

Шаг 7

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

Direct Selection Tool Tweak illustration

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

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

Object Offset Path emoji

Шаг 8

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

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

object offset path hijab black

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

Шаг 9

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

window artboards duplicate artboard panel

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

  • Макет сетки по строкам
  • Колонки: 3
  • Расстояние: 20 пикселей
rearrange artboards by column layout spacing

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

Шаг 1

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

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

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

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

slection tool Eyedropper tool Color

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

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

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

Select Same Fill color Eyebrow fill change

Шаг 2

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

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

Шаг 3

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

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

angry emoji rotate pent tool draw sparks lips

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

angry emoji color eyedropper tool

Шаг 4

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

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

Шаг 5

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

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

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

cool emoji draw pen tool khaleeji

Шаг 6

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

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

Шаг 7

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

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

Шаг 8

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

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

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

cry emoji shape pop

Шаг 9

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

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

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

eyedropper tool color hearts love emoji

Шаг 10

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

Custom Khaleeji Woman emoji tutorial

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

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

Шаг 1

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

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

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

  • Разрешение: Экранное (72ppi)
  • Цвет фона: Прозрачный
  • Нажмите ОК
export emoji file Png Transparent Screen 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. Заполните поля Команда, Имя Организации, Идентификатор, и нажмите далее.
create new project xcode sticker pack application
product name xcode identifier team organization

Шаг 4

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

Xcode sticker emoji pack upload
  1. Под полем Set the Active Scheme, выберите вашу модель, в данном случае iPhone7 Plus.
  2. Запустите вашу сборку, чтобы проверить стикеры на симуляторе iMessage.
xcode set active scheme run build

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

test khaleeji emoji on simulator

Шаг 5

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

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

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

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

Xcode upload app icon images MakeAppicon

Шаг 6

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

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

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

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

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

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

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

Khaleeji woman Emoji Keyboard Tutorial
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.