Table of Contents
- Введение: ретро-патч в стиле национальных парков
- Шаг 1: Настройка документа в Illustrator
- Шаг 2: Строим пейзаж Tatooine
- Шаг 3: Иллюстративные детали и двойная обводка
- Шаг 4: Типографика и стиль текста
- Шаг 5: Подготовка и экспорт в Photoshop
- Шаг 6: Реалистичный эффект вышивки в Photoshop
- Из комментариев: частые вопросы и решения
- Контроль качества и финальные правки
Введение: ретро-патч в стиле национальных парков
Chris из Spoon Graphics предлагает сделать нашивку в духе значков национальных парков — с закатным небом, силуэтами и крупной типографикой «TATOOINE». Финальный результат — реалистичная текстура нитей и ткани, как у настоящего патча.
Совет Если дизайн планируете адаптировать под разные сюжеты, оставляйте базовую композицию (форма, обводка, полосы неба, блоки текста), а внутри меняйте палитру и силуэты — процесс из видео это позволяет.
Шаг 1: Настройка документа в Illustrator
Создание шестиугольной базовой формы
Откройте Illustrator, создайте новый документ формата A4 с единицами Pixels. Постройте шестиугольник инструментом Polygon Tool, удерживайте Shift, чтобы ось была ровной. При необходимости поверните на 90°, подрастяните по ширине и высоте, сохраняя пропорции.
Скругляем углы для мягкого силуэта
Переключитесь на Direct Selection и потяните corner widgets, чтобы скруглить все углы — патч зазвучит «мягче» и станет ближе к эстетике тканевых нашивок. В этом уроке скругление задаётся интерактивно, точные пиксельные значения для базовой формы не фиксируются.
Быстрая проверка Шестиугольник удлинён по вертикали, углы ровно скруглены.
Шаг 2: Строим пейзаж Tatooine
Передний и средний планы: карандашом по вектору
Pencil Tool — идеальный для свободной «неровной» линии горизонта: нарисуйте волнистый контур переднего плана и замкните путь. Заполните самым тёмным коричневым из палитры. Если у вас под рукой реальная вышивальная практика, этот слой будет напоминать подложку ткани — но здесь мы работаем с чистым вектором.
Для понимания сходства процессов можно представить, как в реальной вышивке роль «держателя» играет магнитный пяльцы для вышивки, фиксируя материал под стежки — в нашем случае роль фиксации выполняет геометрия внутри шестиугольника.
Аккуратная обрезка: Shape Builder на максимум
Выделите шестиугольник и новый «горизонт», возьмите Shape Builder, удерживайте Alt и щёлкните по лишним участкам снаружи — останется чистый силуэт внутри формы. Повторите для среднего плана: нарисуйте более гористую линию, задайте фиолетовый цвет, обрежьте.
Внимание Частая ошибка — незамкнутый путь у Pencil Tool: заливка окажется дырявой. Следите, чтобы контур замыкался.
Полосы заката: ретро-небо
Соберите небо из трёх горизонтальных прямоугольников (Rectangle Tool) — тёмно-красный, оранжевый и более светлый красный. Снимайте образцы Eyedropper’ом с палитры, располагайте слои за «горами» и подрезайте Shape Builder’ом. В итоге получаются ровные ретро-полосы без зазоров.
Такой многослойный «бутерброд» позже превратится в разные «нитяные» направления благодаря экшену.
Шаг 3: Иллюстративные детали и двойная обводка
Две «солнца» Tatooine
Ellipse Tool — для первого диска. Для аккуратного «захода» за гору сделайте дубликат фиолетовой «горы», поднимите его над солнцем и выполните вычитание (Minus Front) — лишний низ у солнца исчезнет. Второе, более маленькое солнце — светлее по тону.
Совет Если Shape Builder «пробивает» сразу оба объекта и даёт дырку — используйте приём с копией и Minus Front, как в видео.
Двойной обводкой — в характер
Выделите шестиугольник и в Appearance добавьте два штриха: верхний — бледно-жёлтый 5 pt, с выравниванием по внешней стороне; нижний — тёмно-коричневый 20 pt, и опустите его ниже в стеке Appearance. Порядок критичен: иначе тонкий штрих пропадёт под толстым.
Быстрая проверка Тонкая светлая линия аккуратно отделяет внутреннее поле от широкой тёмной кромки.
Силуэты построек: быстро и выразительно
Прямоугольник для «здания влагофермы» и скругление только верхних углов — получается характерный купол. Добавьте ещё пару простых силуэтов с индивидуально скруглёнными углами.
В производственной реальности такие формы удобно располагать в зоне устойчивой фиксации — например, как это делают владельцы mighty hoops для стабильного зажатия ткани в процессе вышивки.
Шаг 4: Типографика и стиль текста
Выбор и расстановка шрифтов
Type Tool: основной заголовок «TATOOINE» шрифтом Titling Gothic, заливка бледно-жёлтая. Дополнительный набор «NATIONAL PARK» — с высоким трекингом (в видео указан Tracking 400), точечные маркеры по бокам. Фраза «Visit the» — Scriptorama со сдвигом по вертикали (Shear 5°), «OUTER RIM» — узкий гротеск.
Идеальное выравнивание: ключевой объект
Для безошибочного центрирования преобразуйте текст в контуры (Create Outlines), выделите вместе с шестиугольником, затем сделайте шестиугольник «key object» (дополнительный клик) и нажмите Horizontal Align Center в Align.
Финишные штрихи
У Sans Serif элементов слегка скруглите углы: около 1.5 px у крупного текста и 0.5 px у мелкого — это смягчает графику и лучше «сходит» с идеей ткацкой фактуры.
Из комментариев Некоторые зрители хотели бы полностью обойтись Illustrator’ом. Это возможно для имитации (например, Scribble), но видео честно показывает Photoshop-экшен для реалистичной нитяной текстуры. Другие спрашивали про версии программ — точные версии не указаны, интерфейс может отличаться.
Шаг 5: Подготовка и экспорт в Photoshop
Финализируем эффекты: Expand Appearance
Перед экспортом выделите всё и выполните Object > Expand Appearance, чтобы процедурные стили (типа двух штрихов) превратились в обычные пути.
Divide + Unite: чистим файл по цветам
Pathfinder > Divide для разрезания всех пересечений. Затем по каждому цвету: Select > Same > Fill Color, и Pathfinder > Unite — чтобы собрать один цельный объект на цвет. Повторите для всех цветов. Это избавит от десятков мелких обломков, из которых иначе будет состоять PSD.
Совет Если вы работаете большим тиражом макетов, заведите себе чек-лист: Expand → Divide → (по цветам) Select Same → Unite → Export. Он экономит время и снижает риск случайной пропуски операции.
Экспорт PSD с слоями
File > Export > Export As… Формат Photoshop (PSD). Важно: Resolution — High (300 ppi), и включена опция Write Layers. Тогда каждый цвет попадёт на отдельный слой в Photoshop.
В комментариях кто-то путал это с подготовкой для настоящей вышивки на оборудовании (например, brother вышивальная машина или tajima пяльцы для вышивки). Здесь цель иная: сделать реалистичный графический мокап под презентации, мерч и превью.
Внимание Если после экспорта в Photoshop видите один слой — значит, слои при экспорте не были записаны. Вернитесь в Illustrator и проверьте Write Layers.
Шаг 6: Реалистичный эффект вышивки в Photoshop
Откройте экспортированный PSD в Photoshop. Экшен из видео — Realistic Embroidery (доступен на Envato Elements и как отдельная покупка). Автор показывает логику последовательного применения по каждому цветовому слою.
1) Запустите шаг «Stitched Outline» на первом цвете. 2) Затем «Fill Detail» для заполнения фактурой. 3) После этого «Render» — для финальной сборки слоя с текстурами. 4) Переименуйте получившийся слой/группу перед тем, как запускать экшен на следующем цвете, чтобы избежать перезаписи.
По окончании для восстановления исходной палитры верните видимость оригинальных цветовых слоёв, сгруппируйте их, поднимите наверх стека и установите для группы Overlay. Это перекрывает «синее» дефолтное тонирование экшена.
Быстрая проверка
- Видна волокнистая фактура нитей и шва на кромке.
- Цвета соответствуют исходному вектору благодаря Overlay на группе с оригинальными заливками.
Совет Экшен позволяет детально настраивать результат внутри смарт-объектов: автор видео отключал Cloth Displace для всех, кроме коричневого слоя; убирал тени и границы на очень мелком тексте, чтобы он оставался читаемым.
Из комментариев
- Ошибки вида «Command Invert is not available» или «Make is not currently available» встречались у части зрителей. Один из пользователей заметил, что причиной мог быть слишком маленький объект — попробуйте увеличить масштаб элементов, прежде чем запускать экшен.
- Некоторые расстраивались, что эффект — платный. В качестве компромисса для мокапов можно комбинировать шумовые карты, фильтры и паттерны, но качество и скорость будут отличаться от готового экшена.
Кстати, если вы смешиваете цифровой мокап с реальной вышивкой, полезно знать о системах фиксации ткани: «монстр-пяльцы» типа snap hoop monster и магнитные решения для бытовых брендов (например, bernina магнитный пяльцы для вышивки) обеспечивают стабильность при работе. В нашем кейсе они не используются, но знание терминов помогает корректно общаться с производством.
Из комментариев: частые вопросы и решения
- «Почему в Photoshop после экспорта вижу один слой?» — При экспорте из Illustrator включите Write Layers и High (300 ppi). Перед экспортом обязательно Unite по каждому цвету, иначе получите «мозаику».
- «Можно ли обойтись без платного экшена?» — В видео показан конкретный экшен. Теоретически возможно имитировать нитяную фактуру вручную, но это дольше и менее предсказуемо.
- «Экшен не запускается/сыплет ошибки.» — Проверьте размер объектов (слишком мелкие формы багуют), версию Photoshop и корректность порядка слоёв. Переименовывайте выходные группы после каждого прогона.
- «Где взять экшен?» — В описании под видео автор оставлял ссылки на Envato Elements и на разовую покупку.
- «Загрузил экшен в Illustrator — не работает.» — Экшен предназначен для Photoshop.
Справка по терминам Если вы планируете позже реальную вышивку, при общении с цехом вспомните ключевые слова: магнитные пяльцы, «могучие» пяльцы для плотных тканей, держатели для рукавов. Например, у домашних машин встречаются решения вроде mighty hoop и вышивальная машина for beginners — но они к данному видеопроцессу отношения не имеют, здесь цель — графический мокап.
Контроль качества и финальные правки
Чек-лист перед сохранением финала: - В Illustrator: форма шестиугольника с двойной обводкой корректна; все пересечения разрезаны Divide; каждый цвет объединён Unite в один объект (Select Same > Fill Color).
- В Photoshop: каждому цвету применён полный цикл экшена (Outline → Fill → Render), группы/слои переименованы, исходные цвета восстановлены через Overlay, нежелательные эффекты (синий тон, лишняя тень, рамка на мелком тексте) отключены.
- Визуально: фактура нитей читается и не «съедает» детали на малом тексте, кромка патча не слишком «жирная», освещение и тени гармоничны.
Если собираетесь демонстрировать макет в разных окружениях (деним, фетр, куртка), подготовьте несколько подложек и подстройте контраст/викнетирование по месту. В реальном производстве для точной посадки деталей часто используют специализированные оснастки, наподобие bernina магнитный пяльцы для вышивки или модульных систем под рукава и кепки; мы же остаёмся в зоне цифрового дизайна, где «фиксацию» берёт на себя слоистая структура файла.
Финальный штрих Подпишите версию, зафиксируйте палитру, сохраните мастер-PSD и экспортируйте превью. Готово — ваш «нашивной» Tatooine выглядит как настоящий.
Из комментариев Часть зрителей отмечала, что за 15 минут узнала о приёмах Illustrator больше, чем за долгое время — структура урока действительно насыщенная. Если же не получается с первой попытки, двигайтесь по нашим заголовкам: каждый раздел повторяет хронометраж логики видео.
Внимание Материал не охватывает юридические аспекты использования темы «Tatooine». В видео это не раскрывается. Если планируете коммерческое применение, изучите вопросы товарных знаков.
На заметку Если когда-нибудь вы решите превратить макет в реальную нашивку, общайтесь с производством на их языке: формат файлов, плотность стежков, тип основы, вид пялец (например, magnet-системы вроде snap hoop monster или линейки под домашние и промышленные бренды). Это поможет мостиком перейти от мокапа к изделию, хотя текущий урок — про цифровую визуализацию.