Введение: зачем рисовать вибрацию и где это пригодится
Эффект вибрации в графике — это не просто декоративный элемент, а мощный инструмент для передачи движения, энергии или даже эмоций. На iPhone его можно использовать в самых разных целях: от создания мемов с дрожащим текстом до профессиональных анимаций для сторис в Instagram или презентаций в Keynote. Но как правильно изобразить вибрацию, чтобы она выглядела естественно, а не как хаотичный набор линий?
В этой статье мы разберём 5 рабочих способов — от простейших, которые освоит даже новичок с помощью стандартных приложений iOS, до продвинутых техник с использованием Procreate и Adobe Fresco. Вы узнаете, как рисовать вибрацию вручную, с помощью фигур и слоёв, а также как анимировать её для динамичных эффектов. А ещё — почему классическая «зигзаг-линия» вокруг объекта часто выглядит дешёво и как её улучшить.
Неважно, занимаетесь ли вы дизайном, создаёте контент для соцсетей или просто хотите удивить друзей в чате — эти методы помогут добавить вашим работам профессиональный штрих. Начнём с самого простого!
Способ 1: рисуем вибрацию вручную в «Заметках» или «Фото»
Если под рукой нет специализированных приложений, можно обойтись стандартными инструментами iOS. Этот метод подойдёт для быстрых набросков или мемов.
Откройте приложение Заметки и создайте новую заметку. Нажмите на значок карандаша, чтобы активировать инструмент рисования. Выберите маркер или ручку (не карандаш — он слишком прозрачный для вибрации). Теперь обведите объект, который должен «дрожать», волнистой линией с частотой 3–5 волн на сантиметр. Чем чаще волны, тем сильнее будет казаться вибрация.
- 🎨 Для новичков: используйте направляющие линии. Сначала нарисуйте прямую линию рядом с объектом, затем «оденьте» её в волну.
- ⚡ Эффект усиления: добавьте вторую волнистую линию параллельно первой, но с меньшей амплитудой — это создаст иллюзию глубины.
- 🔄 Альтернатива: в приложении
Фото(режим разметки) можно использовать ластик, чтобы «стереть» края объекта неровными линиями, имитируя дрожание.
⚠️ Внимание: Не используйте для вибрации сплошные толстые линии — они сделают эффект слишком агрессивным. Оптимальная толщина: 1.5–2 px для экрана iPhone.
Способ 2: вибрация с помощью фигур и слоёв в Procreate
Procreate — одно из самых мощных приложений для рисования на iPad и iPhone, и здесь вибрацию можно создать максимально реалистично. Главный секрет — работа со слоями и масками.
Сначала нарисуйте основной объект на отдельном слое. Затем создайте новый слой над ним и выберите инструмент QuickShape (быстрая фигура). Нарисуйте эллипс, затем перейдите в Actions → Selection → Modify → Expand и расширьте его на 5–10 пикселей. Залейте эллипс цветом, контрастным фону (например, белым, если фон тёмный). Теперь дублируйте этот слой 3–4 раза, каждый раз немного сдвигая эллипс в сторону и уменьшая его прозрачность до 30–50%.
| Параметр | Значение для слабой вибрации | Значение для сильной вибрации |
|---|---|---|
| Количество копий слоя | 2–3 | 5–7 |
| Смещение между слоями (px) | 2–3 | 5–8 |
| Прозрачность слоя (%) | 40–60 | 20–40 |
| Цвет контура | На 20% светлее фона | Контрастный (например, красный на белом) |
Для болееadvanced-эффекта используйте Гауссово размытие (в настройках слоя) с радиусом 1–2 px. Это сгладит края и сделает вибрацию естественнее.
Создать новый проект с разрешением не менее 2000×1500 px|
Нарисовать основной объект на отдельном слое|
Добавить новый слой для эффекта вибрации|
Выбрать инструмент QuickShape для точных контуров|
Отключить «Сглаживание» (StreamLine) для неровных линий-->
Способ 3: анимация вибрации в Keynote (для презентаций и сторис)
Если вам нужна динамичная вибрация, например, для анимации в сторис или презентации, воспользуйтесь Keynote — стандартным приложением Apple для создания слайдов. Здесь можно задать дрожание объекту буквально в несколько кликов.
Добавьте на слайд объект (текст, фигуру или изображение), который должен вибрировать. Выделите его и перейдите во вкладку Анимация. Выберите эффект Дрожание (Jiggle). В настройках анимации укажите:
- 🕒 Длительность: 0.3–0.5 секунды для короткого эффекта, 1–2 секунды для продолжительного.
- 🔄 Интенсивность: 20–40% для лёгкой вибрации, 60–80% для сильной.
- 🎯 Направление:
Случайное(random) для хаотичного дрожания илиПо оси X/Yдля направленной вибрации.
Чтобы экспортировать анимацию для сторис, перейдите в Файл → Экспортировать → Видео. Выберите разрешение 1080p и формат MP4. Готовое видео можно загрузить в Instagram или TikTok.
Способ 4: вибрация с помощью фильтров в приложениях для фото
Не хотите рисовать вручную? Воспользуйтесь готовыми фильтрами в приложениях вроде VSCO, Snapseed или Afterlight. Например, в Snapseed есть инструмент Двойная экспозиция, который можно адаптировать для имитации вибрации.
Откройте фотографию в Snapseed и выберите Двойная экспозиция. Добавьте ту же самую фотографию как второй слой, но сместите её на 3–5 пикселей в сторону. Установите режим наложения Экран или Осветление и уменьшите прозрачность до 50%. Повторите процесс 2–3 раза, каждый раз смещая слой в разных направлениях. В результате контуры объекта «размоются», создавая эффект дрожания.
⚠️ Внимание: Этот метод работает только для статичных изображений. Если нужно анимировать вибрацию, используйте CapCut или Adobe Premiere Rush с эффектомТряска камеры(Camera Shake).
Для быстрого результата в Instagram можно воспользоваться стикерами с эффектом вибрации. Откройте создание сторис, добавьте стикер GIF и в поиске введите «vibration» или «shake». Выберите подходящую анимацию и разместите её поверх вашего объекта.
Способ 5: профессиональная вибрация в Adobe Fresco с кистями
Adobe Fresco предлагает уникальные кисти, которые имитируют реальные художественные материалы — включая те, что создают текстуру вибрации. Здесь можно добиться органичного, не цифрового эффекта.
Скачайте в Adobe Fresco кисти из пака Textured Brushes (например, Dry Ink или Charcoal). Нарисуйте основной объект, затем выберите кисть с грубой текстурой и обведите контуры объекта короткими, неровными штрихами. Используйте разную нажимаемость (если рисуете Apple Pencil), чтобы линии получились неравномерными. Для усиления эффекта добавьте слой с режимом наложения Перекрытие (Overlay) и нанесите на него светлые мазки по краям объекта.
Преимущество этого метода — естественность. В отличие от векторных линий, текстурированные мазки выглядят как настоящая дрожь, например, от ветра или механического воздействия. Это идеально подходит для артов, иллюстраций или концепт-дизайна.
Как сохранить кисти для вибрации в Adobe Fresco?
Чтобы не настраивать кисти заново, создайте набор кистей:
1. Откройте панель кистей и найдите ту, которая вам понравилась (например, Dry Ink).
2. Нажмите на три точки рядом с кистью и выберите Добавить в избранное.
3. Перейдите во вкладку Избранное и создайте новую группу с названием «Вибрация».
4. Перенесите туда все нужные кисти.
Теперь они будут доступны в один клик в любом проекте.
Типичные ошибки и как их избежать
Даже опытные дизайнеры иногда допускают ошибки при рисовании вибрации. Вот самые распространённые из них и способы их исправления:
- 🔴 Слишком ровные линии: Вибрация должна выглядеть хаотично. Если ваши волны похожи на синусоиду из учебника физики, добавьте случайные искривления.
- 🟡 Избыточная интенсивность: Сильная вибрация отвлекает от основного объекта. Уменьшите амплитуду или прозрачность дополнительных линий.
- 🟢 Несоответствие направлению: Если объект вибрирует горизонтально (например, струна гитары), не рисуйте вертикальные волны. Следуйте логике движения.
- 🔵 Игнорирование источника: Вибрация всегда имеет причину — ветер, удар, электричество. Подумайте, откуда исходит дрожь, и усильте эффект в этой зоне.
Ещё одна частая проблема — несоответствие стилю. Например, мультяшная вибрация (как в комиксах) будет выглядеть нелепо в реалистичной иллюстрации. Подбирайте технику под общий дизайн:
| Стиль изображения | Подходящая техника вибрации | Пример инструмента |
|---|---|---|
| Мультяшный/комикс | Жирные зигзаги, контрастные цвета | Procreate (кисть Inking Pen) |
| Реалистичный | Размытые края, текстурные мазки | Adobe Fresco (кисть Oil Paint) |
| Минималистичный | Тонкие линии, низкая амплитуда | Keynote (эффект Jiggle) |
| Цифровой арт | Световые блики, слои с наложением | Photoshop for iPad (режим Screen) |
FAQ: ответы на частые вопросы
Можно ли нарисовать вибрацию в стандартном приложении «Фото» без дополнительных инструментов?
Да, но возможности ограничены. В режиме разметки (Edit → Markup) можно вручную нарисовать волнистые линии маркером или использовать инструмент Ластик, чтобы «стереть» края объекта неровными мазками. Для более точного контроля лучше использовать Procreate или Adobe Fresco.
Как анимировать вибрацию для видео в TikTok?
В самом TikTok нет инструментов для создания вибрации, но вы можете:
- Снять видео с дрожащей камерой (вручную или с помощью штатива с функцией
shake). - Добавить эффект в CapCut: импортируйте видео, выберите клип, перейдите в
Эффекты → Визуальные → Тряска. - Использовать GIF-стикеры с вибрацией (доступны в библиотеке стикеров TikTok).
Какие кисти в Procreate лучше всего подходят для вибрации?
Рекомендуем следующие кисти из стандартной библиотеки:
Dry Ink— для неровных, текстурированных линий;Studio Pen— для чётких, но динамичных контуров;Spraypaint— для размытого эффекта (подходит для фона);Charcoal— для органичной, «живой» вибрации.
Также в Procreate можно скачать бесплатные кисти для вибрации, например, пак Motion Brushes от художников на Gumroad.
Почему моя вибрация выглядит неестественно?
Вероятные причины:
- Линии слишком ровные или симметричные (добавьте хаос!).
- Амплитуда одинаковая по всему объекту (в реальности вибрация обычно сильнее в одной точке).
- Цвет контура совпадает с фоном (используйте контраст).
- Отсутствует «источник» дрожания (например, вибрация руки должна начинаться от локтя).
Попробуйте сфотографировать реальный вибрирующий объект (например, гитарную струну) и сравните с вашим рисунком.
Можно ли сделать вибрацию в Figma или Canva?
В Figma и Canva нет встроенных инструментов для анимации вибрации, но можно сымитировать эффект:
- В Figma: дублируйте объект, смещайте копии на 2–3 px и уменьшайте их прозрачность (используйте плагин
Auto Animateдля простой анимации). - В Canva: используйте элемент
Анимацияс эффектомPulse(пульсация) или добавьте GIF со стикером вибрации.