Как сделать стикеры в иллюстраторе
Как сделать стикеры в иллюстраторе
Появление новых стикеров в социальных медиа вызывает немалый ажиотаж и интерес. Наклейки добавляются в коллекции, используются в чате с собеседником и просто поднимают настроение делая переписку насыщеннее. Пользователь, создавший набор самостоятельно — становится популярным среди использующих стикеры.
Эти картинки помогают выразить эмоции ярче, чем текстовые или графические смайлы, а также используются для кратких ответов на вопросы в беседе (Да, Нет, Согласен и т. д.).
Создать пакет стикеров легко. Достаточно идеи и желания.
И так, в этой статье описаны принципы по которым создаются стикеры. Начинаем с идеи! Новичкам лучше использовать референсы.
Пример референса! Если хотите сделать стикеры супергероев, для вдохновения лучше использовать комиксы, мультфильмы или картинки из гугла.
Берите с каждого рефа (картинки) только то, что нужно:
После нахождения необходимого образа, открываем знакомый редактор Adobe illustrator или Photoshop. Если эти программы не знакомы, создать собственный набор стикеров невозможно. Ситуация изменится, когда пробелы в знаниях будут заполнены. Стоит закончить курс графического дизайна или изучить отдельно программу на курсах Дизайн-класс.
Перед отрисовкой стикера, внимательно посмотрите на него, чтобы понять, какие инструменты и приемы подойдут.
Как делать отрисовку с помощью планшета или без него.
В дизайне внимание уделяется приложениям, которые облегчают работу с программами по графике. Лидирующие позиции среди устройств занимает графический планшет.
Планшет просто инструмент. По сути модернизированная мышка в форме карандаша. Им стоит пользоваться, если вы уверенно держите карандаш в руках.
Благодаря планшету, дизайнеры получили преимущества:
В Adobe Illustrator рисовать на планшете возможно кистью-кляксой, карандашом и кистью. Акцент сделаем на настройке инструментов для работы с графическим планшетом.
Хочу заметить, что кисть удобно использовать для рисунка из линий разной толщины, а карандаш больше подходит для отрисовки силуэтов. Чаще всего, для отрисовки используют перо, но прежде его нужно настроить.
Правильно настраиваем перо
Эти настройки позволят в дальнейшем изменять толщину контура в зависимости от степени давления от 0 до удвоенного размера.
Настраиваем инструмент — Кисть (Paintbrush Tool).
Настраиваем инструмент Карандаш (Pencil Tool)
Два раза нажимаем по иконке инструмента на — Панель инструментов, чтобы появилось окно с настройками. Знакомимся с настройками инструмента — Карандаш.
Выполняем заливку штрихов карандашом — параметр дает программе применить заливку к обводке. Перед рисованием не выберете цвет заливки.
Оставлять контур выделенным — выбор этого параметра позволяет сохранять контур выделенным после создания.
Зона редактирования выделенных контуров определяет, можно ли изменять или объединять контур, когда указатель находится на расстоянии заданном следующим параметром.
Отрисовка без планшета.
Если в векторе появилось очень много лишних точек, то их количество сокращается через упрощение контура Object — Path — Simplify.
Для создания стикеров, важно понимать основные принципы контуринга. Динамические контуры.
У динамических контуров главная черта – толщина. Линии варьируется в зависимости от выбранной логики. У постоянного контура толщина линии соответственно постоянна.
Как получить нужный цвет!
Используйте Библиотеки смесевых цветов.
Запускаем в работу наши изображения.
Если уже есть заготовки к картинкам и установлен Telegram (не мобильная, а десктопная версия), нужно написать любое сообщение специальному боту — @Stickers. В ответ он предложит следующий набор команд:
Выбираем первую команду и отправляем ее боту. Далее он предложит выбрать имя для нового пакета стикеров (просто введите название в строке чата и нажмите клавишу ввода), а следом прислать эмодзи, которое будет соответствовать первому стикеру.
Стоит отметить, что бот устанавливает ограничения на разрешение загружаемых картинок: их ширина должна составлять ровно 512 пикселей, а высота – не превышать этого же значения. Максимальный вес картинки не может превышать 350 килобайт. Изображение для будущего стикера нужно прикрепить через меню File, которое появляется при нажатии на изображение скрепки.
Не стоит переживать, если сразу не будет получаться – на каждом этапе создания стикера бот подскажет, как нужно действовать.
Когда первый стикер будет готов, необходимо выбрать эмодзи для второго стикера и снова загрузить нужную картинку. Повторять эти шаги придется, пока все «наклейки» не будут готовы. Для того чтобы опубликовать новый набор, отправьте команду
В ответ бот предложит придумать короткое название (с ним могут возникнуть проблемы) ссылки, которую в дальнейшем можно будет отправлять друзьям или публиковать в соцсетях.
Если вы создавали стикеры конкретно для Telegram, помните, эти же стикеры в мессенджере тоже будут актуальны.
Стикеры. Как подготовить макет для печати и плотеррной резки.
В последнее время нас часто спрашивают как готовить макеты для стикеров или наклеек.
Мы подготовили небольшое пособие, которое поможет подготовить макет для печати и дальнейшей резки наклеек на плоттере.
Важно учесть, что большинство типографий назначает цену за печать не из расчета количества наклеек, а из расчета расхода материала, как правило – это метр квадратный. То есть, в большинстве случаев, если у вас будет одна наклейка размером 10 мм * 10 мм, платить придется как за метр. Поэтому размер монтажной области нужно создать 1000 мм * 1000 мм (либо 500 мм * 500 мм как вариант).
На этом квадратном метре, можно расположить свои стикеры (наклейки), при чем они могут быть совершенно разного размера и формы, а также текст.
Но прежде чем заняться подготовкой макета, не поленитесь попросить у типографии технические требования. В разных типографиях они могу значительно отличаться.
1. По краям монтажной области необходимо выставить метки (крестики). Он помогут правильно расположить лист в режущем плоттере. Важно знать, что для изготовления наклеек необходимо будет создать 2 макета: один для печати (на котором будут напечатаны изображения), второй для резки (на нем отмечены только контуры).
2. Помещаете изображение на монтажную область. Если необходимо, чтобы вокруг вашей наклейки был белый контур с отступом, тогда нужно его создать. Для этого копируете свой объект – в окне «Обработка контуров» нажимаете на кнопку «соединение» (если в вашей иллюстрации использованы такие объекты как «сетка градиента», неразобранные кисти, то данная команда не сработает и вероятно придется обводить контур с нуля, кстати, то же самое придется делать, если вы решили использовать растровое изображение (обводить контур с нуля).
После того как у вас образовался единый контур, заходите в меню «Объект» – «Контур» – «Создать параллельный контур» выставляете необходимые для вас значения. Далее полученный контур выравниваете со своим объектом так, чтобы края контура были равноудалены от самой иллюстрации.
Если наклейка не предусматривает белой обводки вокруг и должна быть вырезана в край, тогда необходимо предусмотреть вылеты. Создать их можно по аналогии с предыдущим шагом. Если объект очень сложный, тогда придется повозиться.
Когда нужна наклейка с текстом белого цвета, тогда вы пишите текст, который необходимо вырезать. Переводите его в кривые. Заливки у такого текста быть не должно, а обводка черного цвета.
Если нужны будут буквы, например, золотого цвета, то макет делаете по аналогии, просто предупреждаете типографию о том, чтобы они вырезали буквы на золотой пленке. Обратите внимаете на то, чтобы текст был единый. Ниже представлена картинка как не должно быть. Иначе плоттер, просто изрежет вам весь текст по линиям контура учитывая все мелке кусочки.
Поэтому текст необходимо дополнительно обработать.
Выделить текст – в окне «Обработка контуров» нажать на “Соединение”. Результат будет как на картинке.
Но у нас остались еще небольшие «вкрапления» избавиться от них поможет «Кисть – клякса». Для это выбираем цвет кисти черный (в цвет контура), заливаем текст черным, выделяем текст и кистью водим по «вкраплениям». В итоге мы закрасим то, что нам не нужно. Далее цвет текста обязательно удаляем. Вот и все.
Так выглядят буквы в режиме просмотра контуров Ctrl+Х.
Результат должен получиться таким:
3. Далее нам необходимо расположить все изображения вместе с контурами по монтажной области.
Чтобы создать макет для режущего плоттера заходим в инструмент «Монтажная область», смотрим, чтобы кнопка «переместить копировать» была нажата. Далее делаем копию монтажной области (зажимаем клавишу альт на монтажной области, видим двойную стрелку и перетаскиваем монтажную область).
4. На одной монтажной области оставляем только цветные изображения, все черные контуры с этой монтажной области убираем, в том числе и с текста. На копии монтажной области наоборот убираем все цветные изображения – оставив только черные контуры.
Все. Макет готов. В некоторых случаях типографии могут попросить выслать 2 файла. В одном только цветные изображения, во втором только контуры резки.
Создаем в Adobe Illustrator стикеры для iMessage и зарабатываем деньги!
Russian (Pусский) translation by Dark Wood (you can also view the original English article)
Возможно вы заметили повальное увлечение стикерами для iMessage, которые были введены в iOS 10. Благодаря этому уроку сможете нарисовать свои стикеры, которые можно использовать вместо предустановленных вариантов, и продать их.
Если вы задумывались над тем, как же они создаются, то в данном уроке узнаете это. Начнем мы с эскиза стикеров, которые затем отрисуем линиями и фигурами в Adobe Illustrator, которые, в свою очередь, потом раскрасим. После этого вкратце познакомимся с iTunes Connect и Xcode, благодаря которым и запустим свой набор стикеров для iMessage в продажу на App Store.
Ну а если вам не хватает вдохновения относительно того, что можно изобразить на стикере, то вы можете найти его на GraphicRiver.
1. Придумываем концепцию и подготавливаем файл со стикерами для отрисовки в Adobe Illustrator
Шаг 1
Я часто отсутствую дома. Независимо от того, насколько мне нравится путешествие, мой желудок постоянно желает «домашней» пищи. Потому я посвятил свой набор «Ливанской кухне». Потому что вы нигде более не найдете такого разнообразия.
Итак. Начинаем с наброска идеи на бумаге или в цифровом виде.
Я нарисовал 12 «стикеров» с представителями ливанской кухни. Каждый из них я для удобства назвал соответствующим именем.
В оригинальный набор входит 24 стикера, но для урока я покажу лишь 12.
Эти 12 элементов будут распределены по сетке 4×3 как показано ниже.
Когда набросок будет готов, отсканируйте его, чтобы чуть позже перенести в Adobe Illustrator.
Шаг 2
Командой File> New ( Ctrl+N) создайте новый документ с профилем Custom:
Название: «Lebanese_Food_iMessage_Stickers».
Сами стикеры могут иметь три размера:
Я буду работать с размером 618×618. Соответственно настройки нового документа изменятся так:
Шаг 3
Командой Place (Shift+Ctrl+P) добавьте набросок в документ и расположите его так, чтобы рисунки соответствовали каждый своему артборду.
Теперь нам необходимо создать слой, на котором будем рисовать лайн-арт.
Откройте панель Layers (Window> Layers).
Создайте на панели Layers новый слой:
После блокировки слоя «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 задайте следующие параметры:
Теперь, когда кисть готова, удалите оригинальный овал.
Мы получили искомую кисть, чувствительную к нажатию!
Шаг 3
Можно переходить к отрисовке наброска.
Убедитесь, что «мазки» кистью не будут очень сглаженными. Они должны давать ощущение нарисованных вручную. Сделать это можно дважды кликнув по 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 можно добиться многого, просто изменяя ее размер и цвет. Ко всему прочему, это еще и быстро.
Таким же образом раскрасьте остальные стикеры.
Шаг 2
В процессе раскрашивания некоторые объекты будут нуждаться в упорядочивании (Arrange). Чтобы ускорить процесс, используйте следующие клавиатурные сокращения:
В результате получится красочный набор иконок, в котором все элементы должным образом упорядочены.
Шаг 3
Почистим наши артборды.
Увеличьте иконки, оставив совсем небольшой отступ от границ артборда. Чтобы соблюсти пропорции, удерживайте в процессе клавишу Shift.
Когда размеры всех иконок будут изменены, удалите слой «Color«, так как он пуст.
File> Save (Ctrl+S).
4. Экспортируем иконки
Шаг 1
Экспортируем файл командой Export for Screens (File> Export> Export for Screens).
Шаг 2
У вас есть два варианта для размещения стикеров: использовать сторонний магазин вроде LINE Creators Market или сделать это самостоятельно при помощи аккаунта Apple Developers.
Более подробно данная информация изложена в iTunes Connect Developer Guide. Обязательно ознакомьтесь с ним.
Шаг 3
Для генерации стикеров вам потребуется Xcode.
Скачайте версию Xcode 8 непосредственно из Mac App Store и установите ее.
Шаг 4
Загрузим стикеры в Xcode. Делается это так:
Запустите Xcode.
Залогиньтесь в Xcode, используя ваш Apple ID.
Preference> Account> Sign in.
Шаг 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 или просто запустить их на собственном устройстве. Вам необходимо:
Если вы получили сообщение об ошибке, то сделайте необходимые изменения, вновь экспортируйте и загрузите исправленные версии иконок.
Чтобы протестировать стикеры в Xcode Simulator, щелкните по кнопке Run. Выглядит отлично!
Изменить размер отображаемых в iMessage стикеров можно на панели справа, как показано ниже.
Размеры «Medium» или «Small» работают хорошо.
В завершение для стикеров необходимо зарегистрировать App ID.
Шаг 2
Войдите в свой аккаунт Apple Developer. Для регистрации App ID сделайте следующее:
Шаг 3
Наконец, экспортируем и загрузим (Export & Upload) наш «набор» в iTunes Connect.
Вернитесь в Xcode.
Появится новое окно, в которое будет показан архивированный «набор«. Сами стикеры можно увидеть на панели слева.
Нажмите кнопку Validate, чтобы еще раз удостовериться в качестве стикеров. В случае проблем, Xcode отобразит уведомление красного цвета в верхней части окна.
Если с «набором» всё хорошо, то вам нужно загрузить его в iTunes Connect для рассмотрения (Review).
Для этого нажмите кнопку Upload to App Store. Вот мы и загрузили стикеры в iTunes Connect. Через несколько минут они появятся в вашем аккаунте iTunes Connect.
Шаг 4
Пришло время добавить стикеры в App Store!
В iTunes Connect:
В разделах App information и Pricing & Availability с левой панели укажите описание приложения, язык, категории и цену. Не буду вдаваться в подробности, потому что там и так всё понятно. Выглядеть же оно будет так:
Шаг 5
При помощи Xcode Simulator и Adobe Photoshop сделайте несколько скриншотов своего набора. Загрузите их в iTunes Connect, чтобы показать пользователям примеры реального использования в iMessage. Сделайте 5 скриншотов для iPhone с дисплеем 5,5 дюймов (1242×2208 пикселей). Остальные размеры будут сгенерированы автоматически.
Наконец, нажмите кнопку Submit for Review.
Теперь вам нужно несколько дней подождать принятия вашей заявки.
Пока же стикеры находятся на рассмотрении, вы можете при помощи TestFlight рассылать вашим фанатам тестовые приглашения (Test invitations), давая им возможность пользоваться стикерами бесплатно в течение 60 дней. Или вы можете использовать это время, чтобы уточнить в Apple про налоги, договор о продажах, сертификаты и банковские реквизиты.
Это отнимет некоторое время и в процессе у вас могут возникнуть затруднения, но, проявив терпение, вы всё преодолеете.
Поздравляю! Наш набор стикеров «Lebanese Food» для iMessage готов!
Приобрести полный набор стикеров «Lebanesy Food» можно на iTunes.
Обязательно поделитесь своими стикерами в комментариях.