Графический дизайн: от основ до работы в Photoshop, Illustrator, Figma и After Effects

Основы графического дизайна: композиция, цвет, типографика и визуальная система

Графический дизайн — это проектирование визуальной коммуникации: вы осознанно управляете формой, чтобы зритель быстро понял смысл и совершил нужное действие.

Эта статья — фундамент курса. Дальше мы будем переносить эти принципы в практику и инструменты:

Photoshop — работа с растровыми изображениями, коллажами, ретушью и композициями.

Illustrator и CorelDRAW — векторная графика, логотипы, иллюстрации, макеты для печати.

Figma — интерфейсы, дизайн-системы, компоненты, прототипы.

Lightroom — цвет, тон, единый стиль фото.

After Effects — движение, тайминг, анимационная иерархия.

> Форма следует функции. — принцип проектирования, который напоминает: визуальные решения должны обслуживать задачу, а не украшать ради украшения. Источник: Wikipedia — Form follows function

Что такое визуальная задача

Любой макет начинается не с программы, а с ответа на вопросы:

Кто аудитория.

Какое сообщение главное.

Где это будет показано: экран, печать, наружка, соцсети.

Какой следующий шаг зрителя: прочитать, купить, подписаться, понять.

Если вы не сформулировали задачу, дизайн неизбежно станет набором случайных решений.

Композиция

Композиция — это организация элементов на плоскости так, чтобы:

Взгляд шёл по нужному маршруту.

Главное было главным.

Макет ощущался цельным.

Визуальная иерархия

Визуальная иерархия — порядок, в котором зритель замечает элементы.

Инструменты иерархии:

Размер.

Контраст (цветовой, тоновый, по насыщенности).

Расположение (сверху, слева, ближе к центру).

Плотность и пустое пространство.

Типографика (кегль, начертание, межстрочный интервал).

Практическое правило: на экране зритель чаще всего сначала замечает самый контрастный и крупный объект, затем — заголовок, затем — пояснения.

!Схема визуальной иерархии и маршрута взгляда

Сетка, выравнивание и ритм

Сетка — невидимая структура, которая помогает размещать элементы последовательно.

Сетка упрощает выравнивание и делает макет собранным.

Выравнивание снижает визуальный шум: элементы начинают «разговаривать на одном языке».

Ритм — повторение размеров, отступов, форм и стилей, создающее ощущение порядка.

В интерфейсах сетка почти обязательна. В плакатах сетку можно «ломать», но осознанно — чтобы усилить идею, а не создать хаос.

Баланс и пустое пространство

Баланс — распределение визуального «веса».

Симметричный баланс ощущается спокойным и официальным.

Асимметричный баланс — более динамичный, но требует точности.

Пустое пространство (его часто называют white space, даже если оно не белое) — это не «пустота», а инструмент:

Улучшает читаемость.

Делает акценты сильнее.

Повышает ощущение премиальности и уверенности.

Группировка и гештальт-принципы

Гештальт-принципы описывают, как мозг объединяет элементы в целое. В дизайне особенно полезны:

Близость: стоящие рядом элементы воспринимаются как группа.

Сходство: похожие по цвету/форме/размеру элементы кажутся связанными.

Замыкание: мозг «дорисовывает» недостающие части формы.

Общая область: элементы внутри рамки/плашки воспринимаются как одно.

Хорошее объяснение принципов (с примерами): Interaction Design Foundation — Gestalt Principles

Цвет

Цвет управляет вниманием, эмоцией и читаемостью. Ошибка новичка — выбирать цвет «потому что красиво», не учитывая контраст, контекст и воспроизводимость.

Параметры цвета простыми словами

Оттенок: какой это цвет (красный, синий).

Насыщенность: насколько цвет яркий или «припылённый».

Светлота: насколько цвет светлый или тёмный.

На практике вы постоянно балансируете между акцентом и спокойным фоном.

Контраст: главное условие читаемости

Контраст — это различие между элементами. Он бывает:

По светлоте (самый важный для текста).

По цвету.

По насыщенности.

По размеру.

Для доступности интерфейсов широко применяется критерий контрастности текста в WCAG. Официальная спецификация: W3C — WCAG 2.1 Contrast (Minimum)

Практический вывод без формул: если текст трудно прочитать при беглом взгляде или на плохом экране — контраст недостаточен.

Гармонии и палитры

Палитра — ограниченный набор цветов с понятными ролями.

Типовые подходы:

Монохром: один оттенок + разные светлоты/насыщенности.

Комплементарные: противоположные цвета для сильного акцента.

Аналогичные: соседние оттенки для мягкого, цельного впечатления.

Инструмент для подбора: Adobe Color — Color Wheel

!Примеры гармоний и распределения ролей цветов

Роли цвета в макете

Чтобы цвет работал системно, назначайте роли:

Фон.

Текст основной.

Текст вторичный.

Акцент (кнопка, важная метка).

Состояния (успех, ошибка, предупреждение).

Это напрямую пригодится в Figma (стили, переменные) и в After Effects (цветовые акценты в движении).

Типографика

Типографика — управление текстом как визуальным объектом. Хорошая типографика делает дизайн «дорогим» даже без сложной графики.

Термины, которые нужно знать

Гарнитура: семейство шрифтов (например, Inter).

Начертание: вариант внутри гарнитуры (Regular, Bold).

Кегль: размер шрифта.

Межстрочный интервал: расстояние между строками.

Трекинг: общее разрежение/уплотнение букв в слове.

Читаемость и удобочитаемость

Читаемость: насколько легко различать буквы.

Удобочитаемость: насколько комфортно читать текст как поток.

На удобочитаемость сильнее всего влияют:

Длина строки.

Межстрочный интервал.

Контраст текста и фона.

Иерархия заголовков.

Иерархия текста

Создайте простую систему уровней:

Заголовок.

Подзаголовок.

Основной текст.

Подписи и служебный текст.

Не пытайтесь «вытянуть» иерархию только жирностью. Надёжнее сочетать:

Размер.

Межстрочный интервал.

Контраст.

Отступы до и после блоков.

Подбор шрифтов и сочетания

Универсальная стратегия для новичка:

Берите 1 гарнитуру с широким набором начертаний.

Либо сочетайте 2 гарнитуры: одну для заголовков, другую для текста.

Качественная база знаний с примерами: Google Fonts Knowledge

Для ориентира по структуре типографики в интерфейсах: Material Design 3 — Typography

Визуальная система

Визуальная система — набор правил, который делает дизайн узнаваемым и повторяемым. Это больше, чем логотип: это способ собирать новые макеты без «изобретения велосипеда».

Из чего состоит визуальная система

Сетка и отступы.

Палитра с ролями.

Типографическая шкала (уровни текста).

Стиль графики: иконки, иллюстрации, формы.

Стиль изображений: свет, цветокоррекция, кадрирование.

Компоненты и шаблоны.

Принцип консистентности

Консистентность — согласованность решений:

Одинаковые элементы выглядят одинаково.

Одинаковые действия ведут к одинаковым результатам.

Это снижает когнитивную нагрузку: зрителю не нужно каждый раз «разгадывать» интерфейс или макет.

Минимальная документация (даже для личных проектов)

Документировать систему можно очень просто:

Палитра с названиями ролей.

Типографика с примерами заголовков и текста.

3–5 правил композиции (например: «всегда выравниваем по левому краю», «акцентный цвет только один»).

Именно в таком виде это удобно собирать в Figma как стили и компоненты.

!Пример простой визуальной системы на одной странице

Как соединить всё в рабочий процесс

Ниже — базовый процесс, который одинаково хорошо ложится на плакат, баннер, обложку, экран приложения:

Формулируете задачу и ограничение по формату.

Собираете референсы и выбираете направление.

Делаете черновую композицию: крупные блоки и иерархия.

Настраиваете сетку и выравнивание.

Назначаете палитру по ролям и проверяете контраст.

Строите типографическую иерархию.

Проверяете консистентность: отступы, стили, повторяющиеся элементы.

Упрощаете: убираете всё, что не помогает задаче.

Частые ошибки новичков

Слишком много акцентов: когда всё важное, ничего не важное.

Слабый контраст текста и фона.

Случайные отступы и отсутствие сетки.

Слишком много шрифтов и «эффектов ради эффектов».

Нет ролей у цветов: акцент расползается по всему макету.

Что дальше по курсу

Дальше мы будем учиться применять основы в конкретных задачах и программах:

В Photoshop — собирать композиции, работать с изображениями и текстом без потери читаемости.

В Illustrator/CorelDRAW — строить чистую геометрию, сетки, логотипы и знаки.

В Figma — превращать визуальную систему в стили, компоненты и дизайн-систему.

В Lightroom — делать единый цвет и тон для серии изображений.

В After Effects — переносить иерархию в движение: что появляется первым, что поддерживает, что отвлекает.

Растровая графика в Adobe Photoshop и обработка в Lightroom

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

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

Photoshop — сборка композиции и точная пиксельная работа: слои, маски, ретушь, коллаж.

Lightroom — быстрый и системный потоковый процесс: импорт, отбор, единый стиль серии, цветокоррекция.

!Иллюстрация показывает, почему растр теряет качество при сильном увеличении

Где растр используется в дизайне

Фотографии для соцсетей, сайтов, баннеров.

Коллажи и постеры с изображениями.

Текстуры, зерно, шум, бумага, световые эффекты.

Ретушь портретов и предметки.

Подготовка изображений для печати и цифровых экранов.

Если ваша задача — логотип или иконка, то чаще нужен вектор (Illustrator/CorelDRAW). Если задача — фото, коллаж, обложка, то базовый инструмент — Photoshop и Lightroom.

Базовые понятия растра, которые влияют на результат

Пиксели и размеры изображения

У растрового изображения всегда есть:

Размер в пикселях: например, 3000×2000.

Физический размер для печати: например, 30×20 см.

Плотность пикселей при печати (PPI): сколько пикселей приходится на один дюйм.

Практическое правило:

Для экранов чаще важны пиксели (ширина/высота).

Для печати важны и пиксели, и PPI.

Термины для ориентира:

PPI — характеристика изображения для печати.

DPI — термин про устройство печати (принтер), а не про файл; в быту их часто путают.

Справка: Wikipedia — Raster graphics

Разрешение: что реально важно

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

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

Частая ошибка новичка: увеличивать маленькую картинку и ждать, что она станет резкой. Если исходник слабый, лучше:

найти изображение большего размера;

пересобрать композицию;

изменить идею так, чтобы низкое качество выглядело как стилизация.

Цветовые модели и профили

Ключевая идея: один и тот же цвет может выглядеть по-разному на разных устройствах, если не учитывать цветовое управление.

На практике вы будете встречать:

sRGB — самый универсальный профиль для экранов и веба.

Adobe RGB — шире по охвату, иногда используется в фото и печати.

CMYK — модель для печати.

Если вы делаете дизайн для цифровых площадок, безопасная база — работать в sRGB и экспортировать в sRGB.

Справка:

Wikipedia — sRGB

Wikipedia — Adobe RGB color space

Wikipedia — CMYK color model

Принцип недеструктивной работы

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

В контексте курса это напрямую связано с идеей визуальной системы: вы хотите уметь стабильно повторять стиль, а не «закрашивать» каждую картинку вручную.

В Photoshop недеструктивность обычно делается через:

корректирующие слои;

маски;

смарт-объекты;

работу на отдельных слоях для ретуши.

!Схема показывает безопасный порядок работы, чтобы можно было править дизайн без потери качества

Photoshop: ключевые инструменты для дизайнера

Слои и группы

Слои — это основа сборки макета. Дисциплина со слоями экономит часы.

Практика организации:

называйте слои по смыслу: bg_photo, headline, cta_button;

группируйте блоки: Header, Product, Text;

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

Это технический аналог принципа консистентности из базовой статьи: одинаковые элементы должны быть собраны одинаково.

Маски вместо ластика

Маска прячет часть слоя, не удаляя пиксели. Поэтому:

вы можете вернуть скрытое;

границы можно сделать мягкими;

один и тот же слой можно «вписывать» в разные композиции.

Типичный кейс: вырезать объект для постера и аккуратно интегрировать в фон.

Корректирующие слои

Корректирующие слои позволяют менять тон и цвет без необратимых изменений. База, которую стоит освоить:

Curves или Levels — контраст и тон;

Hue/Saturation — насыщенность и выборочная коррекция;

Color Balance — сдвиги по теням/средним/светам;

Black & White — управляемое ЧБ.

Связь с теорией цвета:

вы можете системно назначать роли: фон спокойнее, акцент контрастнее;

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

Смарт-объекты и смарт-фильтры

Смарт-объект полезен, когда вы:

масштабируете изображение и хотите избежать лишних потерь;

применяете фильтры, которые хотите редактировать позже.

Смарт-фильтры можно включать/выключать и настраивать — это поддерживает недеструктивность.

Ретушь: минимально необходимый набор

Цель ретуши в дизайне часто не в «гладкой коже», а в контроле внимания и чистоте изображения.

Базовые инструменты:

Spot Healing Brush — быстрые мелкие дефекты;

Healing Brush — более контролируемое исправление;

Clone Stamp — копирование пикселей, когда healing даёт артефакты;

Dodge/Burn (осветление/затемнение) — управление объёмом и акцентами.

Безопасная практика:

ретушируйте на новом пустом слое;

включайте опцию выборки со всех слоёв, если инструмент это поддерживает;

оставляйте текстуру, не «замыливайте» изображение.

Текст и типографика в Photoshop

Хотя интерфейсную типографику чаще делают в Figma, Photoshop нужен для баннеров, обложек и постеров.

Практические правила, напрямую продолжающие тему типографики:

держите 2–4 уровня иерархии (заголовок, подзаголовок, детали, дисклеймер);

избегайте случайных межстрочных и трекинга;

проверяйте контраст текста по светлоте, а не только по «разности цветов».

Форматы файлов и экспорт без типичных ошибок

Рабочие форматы

PSD — основной формат Photoshop со слоями.

TIFF — часто используют для печати и хранения высокого качества.

Экспорт для экранов

JPEG — фотографии и сложные градиенты, но с потерями.

PNG — когда нужна прозрачность или более чистые края графики.

Экспорт для печати

Экспорт под печать зависит от типографии. Часто требуется:

нужный размер;

CMYK-профиль;

вылеты и поля безопасности (если вы делаете макет целиком).

Если вы не уверены — не «угадывайте». Запросите требования типографии.

Справка по формату PSD: Wikipedia — Photoshop Document

Lightroom: обработка серии и единый стиль

Lightroom (чаще Lightroom Classic) — это инструмент для фотографического потока: вы быстро приводите серию изображений к единому виду.

Ключевая разница с Photoshop:

Lightroom рассчитан на пакетную обработку и каталог.

Photoshop рассчитан на точечную работу, композитинг и сложные правки.

Каталог и импорт

Lightroom работает через каталог: он хранит информацию об обработке и структуре вашей библиотеки.

Практика:

продумайте папки и схему именования;

делайте резервные копии каталога;

при импорте добавляйте ключевые слова и авторские метки, если работаете с большим объёмом.

Официальная справка: Adobe Help Center — Lightroom Classic catalogs

Отбор: рейтинг и флаги

Чтобы не «тонуть» в файлах:

быстро отсеивайте брак;

отмечайте лучшие кадры рейтингом;

группируйте серию для синхронизации обработки.

Базовая цветокоррекция

Цель — привести кадр к читаемой и управляемой основе.

Чаще всего порядок такой:

баланс белого;

экспозиция и контраст;

света и тени;

насыщенность и выборочные правки.

HSL, кривая и калибровка

Инструменты, которые помогают собрать фирменный стиль изображения:

HSL/Color Mixer — точная настройка отдельных цветов;

Tone Curve — управление контрастом более гибко;

Calibration — тонкая настройка цветового поведения (особенно полезна для единых пресетов).

Важно: не «крутите всё». Держите одну идею обработки и проверяйте, не разрушили ли вы читаемость кожи, товара, текста на макете.

Локальные правки

Lightroom умеет аккуратные локальные изменения:

градиентные маски для неба/фона;

кисти для осветления лица;

маски по объектам (в зависимости от версии).

Если правка сложная (коллаж, пластика, сложная ретушь) — переносите кадр в Photoshop.

Синхронизация и пресеты

Чтобы получить консистентность серии:

обработайте один кадр как эталон;

синхронизируйте настройки на похожие кадры;

сохраните пресет как часть вашей личной визуальной системы.

Совместный рабочий процесс Lightroom → Photoshop → Export

Типовой пайплайн для дизайнера:

В Lightroom импортируете съёмку и делаете отбор.

Делаете базовую цветокоррекцию и приводите серию к единому стилю.

Отправляете лучший кадр в Photoshop для сложной ретуши или композитинга.

Возвращаете результат в Lightroom (он сохранится рядом как отдельный файл) и делаете финальный экспорт в нужные размеры.

!Схема помогает запомнить, где быстрее делать массовую обработку, а где — точечную

Как применять принципы композиции и визуальной системы при обработке

Чтобы обработка работала как дизайн, задайте себе вопросы из первой статьи:

Что главное в кадре и куда должен прийти взгляд?

Достаточно ли контраста по светлоте между главным объектом и фоном?

Не спорят ли цвета с ролью акцента (особенно если поверх будет текст)?

Одинаково ли выглядят изображения в серии, если это единая коммуникация?

Практический приём для дизайнерских макетов:

сначала сделайте изображение чуть более нейтральным и читабельным;

затем добавляйте акценты так, чтобы они поддерживали иерархию, а не разрушали её.

Частые ошибки новичков

Обработка «ради эффекта», которая убивает смысл и читаемость.

Слишком сильная резкость и шумоподавление: картинка становится пластиковой.

Случайные пресеты без контроля баланса белого.

Экспорт не в том профиле: цвета «едут» на чужих устройствах.

Попытка делать сложный коллаж только в Lightroom или весь поток только в Photoshop.

Что дальше по курсу

Дальше логично перейти к вектору и системности формы:

в Illustrator/CorelDRAW вы научитесь строить чистую геометрию и графику, которая масштабируется без потерь;

в Figma вы превратите правила (цветовые роли, типографика, отступы) в стили и компоненты;

в After Effects вы перенесёте иерархию в движение: что появляется первым и почему.

Векторная графика и айдентика: Adobe Illustrator и CorelDRAW

В предыдущей теме мы работали с растром (Photoshop/Lightroom): пиксели, ретушь, коллаж, тон и цвет. Теперь переходим к вектору — графике, которая строится из математически описанных линий и форм и поэтому масштабируется без потери качества.

Вектор — основа для задач, где важны точность, чистая геометрия и воспроизводимость:

логотипы и знаки

иконки и пиктограммы

фирменные паттерны и графические элементы

макеты для печати (визитки, наклейки, упаковка)

инфографика

В этом уроке мы разберём, как мыслить вектором, как устроены Illustrator и CorelDRAW, и как собрать минимальный набор материалов айдентики.

Что такое векторная графика и чем она отличается от растра

Векторная графика описывает изображение через линии, кривые и заливки, а не через пиксели. Поэтому логотип можно увеличивать хоть до фасада здания — контуры останутся резкими.

Определение и общий принцип: Wikipedia — Vector graphics

Когда выбирать вектор, а когда растр

| Задача | Лучше вектор (Illustrator/CorelDRAW) | Лучше растр (Photoshop/Lightroom) | |---|---|---| | Логотип, знак, иконка | Да | Нет | | Фотообработка, ретушь | Нет | Да | | Плакат с типографикой и геометрией | Да | Иногда | | Коллаж из фотографий | Нет | Да | | Макеты для печати с чистыми формами | Да | Иногда | | Текстуры, зерно, реалистичные эффекты | Нет | Да |

Практическое правило: вектор отвечает за форму и воспроизводимость, растр — за деталь и реализм.

Базовая «анатомия» вектора: без неизвестных терминов

Чтобы уверенно работать и в Illustrator, и в CorelDRAW, важно понимать общие элементы.

Контур (path) — линия, по которой строится форма.

Опорные точки (anchor points) — узлы, которые задают форму контура.

Направляющие (handles) — «рычаги» у точек, которые управляют изгибом.

Заливка (fill) — цвет внутри замкнутого контура.

Обводка (stroke) — линия по контуру.

Кривые Безье — тип кривых, на которых основаны большинство векторных редакторов. База: Wikipedia — Bézier curve

!Схема показывает, как опорные точки и направляющие формируют плавную кривую

Ключевой принцип качества: меньше точек — чище форма

Чистый вектор почти всегда означает:

меньше опорных точек

больше плавности

аккуратные касательные (направляющие), без «ломаных» переходов

Типичная ошибка новичка — «обвести» изображение множеством точек. Так знак выглядит грязно, хуже масштабируется и труднее редактируется.

Айдентика: что это и из чего обычно состоит

Айдентика (visual identity) — визуальная система бренда: правила, по которым бренд выглядит узнаваемо в разных носителях. Это прямое продолжение темы про визуальную систему из первого урока: мы не рисуем один макет, мы создаём набор повторяемых решений.

Минимальный набор для небольшого проекта:

логотип (основная версия)

альтернативные версии (горизонтальная/вертикальная, монохром)

знак или монограмма (если уместно)

цветовая палитра с ролями

типографика (1–2 гарнитуры, иерархия)

правила применения (отступы, минимальный размер, запреты)

!Пример того, как выглядит минимальная страница гайдлайна

Логотип как система: читаемость, простота, воспроизводимость

Проверки, которые должны пройти почти все логотипы

Узнаваемость в маленьком размере (например, 24–32 px как аватар).

Читаемость в одном цвете (чёрный/белый).

Работоспособность на светлом и тёмном фоне.

Геометрическая чистота: выравнивание, одинаковые радиусы, единые толщины.

Контраст и иерархия (если есть знак + название): что главное, что вторично.

Это связь с базовой теорией:

Композиция — баланс знака и текста, отступы, группировка.

Цвет — роли и контраст, особенно в монохроме.

Типографика — выбор гарнитуры и аккуратная настройка интервалов.

Illustrator и CorelDRAW: что общего и в чём разница

Оба инструмента решают одни и те же задачи (вектор, печать, логотипы), но отличаются привычками интерфейса и некоторыми сильными сторонами.

Общее, что нужно освоить в любом редакторе

создание и редактирование контуров

операции над формами

выравнивание и распределение

работа с текстом

управление цветом (RGB/CMYK)

подготовка файлов к печати и экспорту

Отличия на уровне рабочего процесса

| Тема | Adobe Illustrator | CorelDRAW | |---|---|---| | Организация пространства | Artboards (монтажные области) | Pages (страницы) + слои | | Типичные сценарии | Брендинг, иллюстрации, web-ассеты, интеграция с Adobe | Печать, наружная реклама, полиграфия, сильная «производственная» ориентация | | Управление объектами | Панель Layers + Appearance | Object Manager + удобная работа с объектами в документе | | Часто используемые функции | Pen, Shape Builder, Pathfinder, Appearance | Bézier, Shaping, PowerClip |

Справка по продуктам:

Wikipedia — Adobe Illustrator

Wikipedia — CorelDRAW

Формы и операции: «строительная математика» вектора

Большая часть логотипов и иконок строится из простых фигур и операций над ними.

Операции над формами

Основные действия (названия могут чуть отличаться):

объединить (Unite) — слить формы в одну

вычесть (Subtract) — вырезать одну форму из другой

пересечение (Intersect) — оставить только общую часть

исключить (Exclude) — оставить всё, кроме пересечения

Практический совет: сначала собирайте знак из простых фигур, потом приводите к финальным кривым. Это сохраняет контроль над геометрией.

Обводка и заливка: важный момент для печати и экспорта

Обводка — это «линия», и её толщина может вести себя по-разному при масштабировании и экспорте.

Частый производственный шаг:

перевести обводку в объект (в Illustrator это обычно делают через расширение/преобразование), чтобы типография и другие программы увидели форму однозначно.

Внимание: делайте это в финале, сохранив рабочую версию с редактируемыми обводками.

Текст и логотип: базовые правила типографики в векторе

В логотипах типографика особенно чувствительна к мелким ошибкам.

На что обращать внимание

Кернинг: расстояния между отдельными парами букв (в логотипе почти всегда требует ручной правки).

Трекинг: общее разрежение/уплотнение.

Оптическое выравнивание: визуально ровные края важнее «математической» точности.

Преобразование текста в кривые перед передачей (чтобы шрифт не «слетел» на другом компьютере).

Связь с предыдущими уроками:

иерархия и контраст должны сохраняться даже в маленьком размере

шрифт — часть визуальной системы, а не случайный выбор

Цвет в векторе: RGB, CMYK и практическая дисциплина

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

RGB чаще для экрана и цифровых продуктов.

CMYK для печати.

Справка:

Wikipedia — RGB color model

Wikipedia — CMYK color model

Практическая дисциплина айдентики:

задавайте роли цветов (фон, текст, акцент), как в уроке про визуальную систему

храните точные значения (RGB/CMYK) в гайдлайне

проверяйте контраст (особенно в монохроме)

Подготовка логотипа к реальному использованию

Знак «готов» не тогда, когда вы довольны картинкой, а когда он готов к разным носителям.

Набор обязательных версий

цветная основная

чёрная и белая

горизонтальная и вертикальная (если нужно)

только знак (для аватаров)

Охранное поле и минимальный размер

Охранное поле — минимальный отступ вокруг логотипа, где не должно быть других элементов.

Минимальный размер — порог, ниже которого логотип теряет читаемость.

Это не «формальность», а продолжение принципов композиции и пустого пространства: отступы — инструмент читаемости.

Форматы файлов: что отдавать клиенту, типографии и для веба

| Формат | Для чего обычно используют | Комментарий | |---|---|---| | AI | рабочий файл Illustrator | хранит редактирование и структуру | | CDR | рабочий файл CorelDRAW | аналогично для Corel | | PDF | печать, обмен, просмотр | часто основной формат для типографий | | SVG | веб, интерфейсы, иконки | масштабируемый, удобен для digital | | EPS | печать/обмен «по старинке» | иногда требуют в производстве |

Справка:

Wikipedia — Scalable Vector Graphics

Wikipedia — Encapsulated PostScript

Wikipedia — PDF

Практический минимум:

храните исходник (AI/CDR)

отдавайте PDF для печати

делайте SVG для веба

делайте PNG для предпросмотра и быстрых задач

Рабочий процесс: от идеи до мини-брендгайда

Ниже — универсальный пайплайн, который связывает теорию композиции/цвета/типографики с практикой в Illustrator/CorelDRAW.

Формулируете задачу: что бренд делает и где будет использоваться логотип.

Собираете референсы и ограничения: конкуренты, настроение, запреты.

Делаете быстрые эскизы на бумаге: 20–50 вариантов.

Выбираете 2–3 направления и переносите в вектор.

Собираете знак из простых форм и операций.

Настраиваете типографику и расстояния.

Проверяете монохром, маленькие размеры, светлый/тёмный фон.

Готовите версии, экспорт, и одну страницу мини-гайдлайна.

Частые ошибки новичков в векторе

Слишком много мелких деталей: на маленьком размере логотип «рассыпается».

Случайные радиусы, разные толщины, нет геометрического единства.

Много опорных точек и «грязные» кривые.

Цвета выбраны без ролей и без учёта носителя (экран/печать).

Отдали логотип только в PNG, без векторных форматов.

Связь с дальнейшими темами курса

В следующем шаге вы будете переносить векторные элементы в Figma: иконки, компоненты, токены цвета и типографики.

Позже вы сможете анимировать элементы айдентики в After Effects: появление логотипа, кинетическая типографика, микроанимации.

Вектор — это «скелет» визуальной системы: чистая форма, которую легко масштабировать, повторять и оживлять.

UI/UX и прототипирование в Figma: сетки, компоненты, дизайн-системы

Figma — инструмент для проектирования интерфейсов, где вы соединяете композицию, цвет и типографику (из первой статьи) с системностью формы (из вектора) и превращаете всё это в повторяемый продукт: экраны, компоненты и прототипы.

Важно: Figma не отменяет основы. Она делает их проверяемыми и масштабируемыми.

UI (User Interface) — визуальный интерфейс: экраны, кнопки, поля, стили.

UX (User Experience) — пользовательский опыт: насколько понятно, быстро и без ошибок пользователь достигает цели.

Прототип — кликабельная модель, которая показывает поведение экранов до разработки.

Как Figma связывается с предыдущими темами курса

Из темы про композицию вы переносите в интерфейсы: иерархию, сетку, пустое пространство, группировку.

Из темы про цвет вы переносите: роли цвета (фон, текст, акцент, состояния) и контроль контраста.

Из темы про типографику вы переносите: уровни текста и дисциплину интервалов.

Из темы про вектор вы переносите: чистые формы и иконки, пригодные для интерфейса (SVG), и логику айдентики.

UI/UX без «магии»: что именно вы проектируете

Интерфейс почти всегда отвечает на три вопроса:

Где я? (контекст: экран, раздел, заголовок)

Что я могу сделать? (набор действий)

Что будет, если я сделаю это? (обратная связь)

Отсюда появляются ключевые принципы:

Иерархия: важные элементы заметнее.

Предсказуемость: одинаковые действия выглядят одинаково.

Обратная связь: интерфейс сообщает о состоянии (загрузка, успех, ошибка).

Полезная база по UX-практикам: Nielsen Norman Group.

Файл Figma как система

В Figma важно не только рисовать, но и организовывать.

Структура: страницы, фреймы, слои

Page (страница) — раздел файла (например, Design, Components, Prototype).

Frame (фрейм) — контейнер, который чаще всего соответствует экрану или блоку.

Layer (слой) — любой объект внутри.

Практическая структура для одного проекта:

Cover — кратко: что за проект, ссылки, статус.

Foundations — цвета, типографика, сетки, эффекты.

Components — кнопки, поля, карточки, навигация.

Screens — собранные экраны.

Prototype — сценарии и прототип.

Сетки в интерфейсах: как сделать макет «собранным»

Сетка в UI — это способ удержать выравнивания и отступы в системе. Она продолжает тему сеток и ритма из основ дизайна, но становится ещё более строгой, потому что интерфейс должен масштабироваться.

Базовые типы сеток в UI

Колоночная сетка: помогает держать композицию по ширине.

Модульная сетка: полезна для сложных экранов и карточек.

Базовая линия текста: помогает «прибивать» строки к одному ритму (используется не всегда, но принцип полезен).

!Пример колоночной сетки и ритма отступов в мобильном UI

Практика «шага» отступов

Чтобы интерфейс выглядел консистентно, выбирают базовый шаг отступов, чаще всего 8 px (иногда 4 px для мелких элементов). Смысл простой: отступы кратны одному шагу, поэтому всё выглядит упорядоченно.

Что это даёт:

меньше случайных расстояний

быстрее сборка экранов

проще передача в разработку

Layout Grid в Figma

Внутри фрейма можно включить Layout grid.

Для мобильных экранов часто используют 4 колонки.

Для десктопа часто используют 12 колонок.

Всегда задают поля (margin) и межколоночный интервал (gutter).

Официальная справка: Figma Learn.

Constraints и Auto Layout: адаптивность без боли

Constraints

Constraints (ограничения) — правила, которые говорят, как объект ведёт себя при изменении размера контейнера.

Примеры:

кнопка приклеена к низу

иконка держится справа

блок растягивается по ширине

Это важно, когда вы делаете несколько размеров экранов или компонент должен жить в разных контекстах.

Auto Layout

Auto Layout — режим, где контейнер сам распределяет внутренние элементы по правилам.

Он решает типичные проблемы:

текст стал длиннее, и кнопка должна расшириться

в карточке добавилась строка, и высота должна увеличиться

элементы должны быть всегда равномерно разнесены

Полезно думать так: Auto Layout — это сетка и отступы, превращённые в поведение.

Таблица для ориентира:

| Задача | Constraints | Auto Layout | |---|---|---| | Прикрепить элемент к краю | Да | Иногда | | Автоматически менять размер контейнера по контенту | Нет | Да | | Равномерные отступы и распределение | Частично | Да | | Быстрый список/таблица/чипы | Сложно | Удобно |

Компоненты: как перестать рисовать одно и то же

Компонент — это элемент интерфейса, который переиспользуется. Вы делаете кнопку один раз, а затем вставляете экземпляры (instances) в экраны.

Почему это критично:

консистентность: одинаковое выглядит одинаково

скорость: правите один раз — обновляется везде

меньше ошибок: не расползаются стили

Варианты (Variants)

Variants (варианты) — набор состояний одного компонента.

Типичные варианты для кнопки:

размер: S, M, L

стиль: Primary, Secondary, Ghost

состояние: Default, Hover, Pressed, Disabled, Loading

!Иллюстрация, как устроены Variants у компонента

Component properties

Свойства компонента позволяют управлять экземплярами без «разборки»:

переключать вариант

показывать/скрывать иконку

менять текст

включать состояние

Цель: дизайнер управляет интерфейсом на уровне системы, а не пикселей.

Стили, переменные и дизайн-токены: основа дизайн-системы

Стили

Styles (стили) — сохранённые настройки, которые можно применять повторно.

Обычно выделяют:

цветовые стили

текстовые стили

эффекты (тени, размытия)

Переменные

Variables (переменные) — значения, которые можно переиспользовать и переключать по режимам.

Типичный сценарий:

светлая и тёмная тема

разные бренды/подпроекты

разные плотности (компактный/обычный интерфейс)

Справка по возможностям: Figma Help Center.

Дизайн-токены простыми словами

Дизайн-токены — это имена для решений (цветов, размеров, радиусов), которые делают систему переносимой.

Пример логики (не «какой цвет», а какая роль):

text.primary

text.secondary

bg.surface

action.primary

border.default

Это продолжение идеи «роли цвета» из первой статьи, но в формате, который удобно использовать и в дизайне, и в разработке.

!Карта дизайн-токенов и их ролей

Мини-дизайн-система: что должно быть минимум

Если вы делаете учебный или небольшой коммерческий проект, достаточно собрать минимально жизнеспособную дизайн-систему.

Foundations

палитра с ролями

типографическая шкала (например: H1, H2, Body, Caption)

шаг отступов (например 8)

радиусы (например 8 и 16)

сетки для основных брейкпоинтов

Components

кнопки

поля ввода

чекбоксы/переключатели

карточки

навигация (верхняя/нижняя)

модальные окна или алерты

Guidelines

правила контраста

правила состояний (ошибка/успех/disabled)

принципы отступов

Для ориентира по структуре систем можно смотреть: Material Design.

Прототипирование: как проверять сценарии до разработки

Прототип отвечает на вопрос: что будет происходить при нажатиях, переходах и ошибках.

Сценарий (user flow)

User flow — путь пользователя к цели.

Пример:

Открыть приложение

Найти товар

Добавить в корзину

Оформить заказ

Получить подтверждение

Сильный прототип обычно делает две вещи:

показывает главный сценарий

показывает 1–2 критичных состояния (ошибка, пустой список, загрузка)

!Пример user flow для прототипа

Типы переходов в Figma

переход по клику

навигация назад

оверлей (всплывающее окно)

интерактивные компоненты (когда состояния переключаются внутри компонента)

Практический принцип: прототипируйте смысл, а не анимацию ради эффекта. Визуальная динамика глубже раскрывается уже в After Effects.

Доступность: контраст и читаемость как часть качества

Доступность (accessibility) — это когда интерфейс остаётся понятным для большего числа людей и в большем числе условий: яркое солнце, плохой экран, усталость, слабое зрение.

Минимум, который стоит делать всегда:

проверять контраст текста и фона

не кодировать смысл только цветом (например, ошибка не только красная, но и с текстом/иконкой)

держать достаточные размеры текста и кликабельных элементов

Спецификация контраста: W3C WCAG 2.2.

Хэнд-офф: как передавать дизайн в разработку

Даже если вы не разработчик, вам важно понимать, что снижает риск ошибок при реализации.

Что обычно нужно разработке

размеры и отступы (желательно системные)

стили текста (размер, начертание, межстрочный)

цвета по ролям

состояния компонентов

ассеты (иконки, иллюстрации)

Экспорт ассетов

иконки и простую графику чаще экспортируют в SVG

растровые изображения — в PNG/JPEG

Практика: держите векторные иконки из Illustrator/CorelDRAW в чистом виде и переносите в Figma как SVG, чтобы они масштабировались и редактировались.

Частые ошибки новичков в Figma

рисовать экраны без системы отступов и сетки

не использовать компоненты, из-за чего всё «расползается»

смешивать роли цветов (акцентный цвет оказывается везде)

делать прототип без сценария, только с красивыми переходами

не продумывать состояния (disabled, error, empty)

Что дальше по курсу

Следующий логичный шаг — движение:

в After Effects вы будете анимировать элементы интерфейса и айдентики

вы перенесёте иерархию в тайминг: что появляется первым, что поддерживает, что отвлекает

вы научитесь делать презентационные ролики и микроанимации для UI

Figma даёт вам структуру и систему, а After Effects добавит динамику и выразительность — без потери смысла.

Моушн-дизайн в Adobe After Effects: анимация, эффекты и экспорт

After Effects — инструмент для моушн-дизайна: вы добавляете движение к тем же принципам, которые уже изучили в курсе.

Из основ дизайна вы переносите в движение иерархию, контраст, ритм и пустое пространство.

Из Photoshop/Lightroom — работу с изображениями и подготовку растра.

Из Illustrator/CorelDRAW — чистую векторную форму и айдентику.

Из Figma — системность: компоненты, состояния, логика интерфейса.

After Effects не «делает красиво сам». Он помогает управлять вниманием во времени: что появляется первым, как быстро, с какой динамикой и почему.

!Как принципы графического дизайна превращаются в движение

Что такое композиция во времени

В статичном дизайне вы управляете маршрутом взгляда на плоскости. В моушне добавляется второе измерение — время.

Ключевые рычаги моушн-дизайна:

Порядок появления элементов (временная иерархия).

Скорость и ускорение (динамика и характер).

Паузы (дают смысл и читаемость).

Связи между объектами (когда движение выглядит «логичным», а не случайным).

Практическое правило: если зритель не успевает прочитать смысл — анимация мешает дизайну.

Базовые термины After Effects простыми словами

Композиция (Composition) — ваша сцена/кадр со своим размером, длительностью и частотой кадров.

Слой (Layer) — любой объект внутри композиции: текст, форма, картинка, видео.

Таймлайн (Timeline) — место, где слои живут во времени.

Ключевой кадр (Keyframe) — точка во времени, где вы фиксируете значение свойства (например, позицию).

Свойства трансформации (Transform) — базовые параметры слоя: Position (позиция), Scale (масштаб), Rotation (поворот), Opacity (прозрачность).

Интерполяция — как After Effects заполняет движение между ключевыми кадрами.

Сглаживание (Easing) — приём, когда движение плавно разгоняется и плавно тормозит (обычно выглядит естественнее, чем «робот»).

Официальный гайд по программе: Adobe After Effects User Guide

Правильный старт проекта: настройки композиции

Перед анимацией задайте ограничения, как вы делали это в макетах:

Размер кадра (например, 1920×1080 для видео или 1080×1920 для сторис).

Частота кадров:

- 24–25 fps часто выглядит «киношно». - 30 fps — распространённый стандарт для digital. - 60 fps — уместно для очень плавной UI-демонстрации, но тяжелее по весу.

Длительность (лучше коротко и читабельно, чем долго и пусто).

Если вы делаете моушн для интерфейса, мыслите как в Figma: сценарий, состояния, предсказуемость.

Анимация: от ключевых кадров к управлению характером

Самый важный навык: анимировать трансформации

Начните с четырёх свойств слоя:

Position: перемещение.

Scale: увеличение/уменьшение.

Rotation: вращение.

Opacity: появление/исчезновение.

Этого достаточно, чтобы сделать 70% базовых задач: интро, титры, появление карточек, акценты на кнопках.

Почему «просто два ключевых кадра» почти всегда выглядит плохо

Если объект начинает движение мгновенно и мгновенно останавливается, это воспринимается как механика. Сглаживание делает движение «живым».

Что делать на практике:

Применяйте сглаживание (в AE это часто делают через Easy Ease).

Дальше уточняйте динамику в Graph Editor (редактор графиков), где видно ускорение и замедление.

!Почему сглаживание делает движение естественнее

Ритм и паузы как продолжение сетки и отступов

Как в статичном дизайне у вас есть шаг отступов, так в моушне полезно держать «шаг времени».

Практика:

Выберите базовый ритм (например, появление элементов каждые 4–8 кадров).

Делайте микропаузу перед главным событием (помогает фокусу).

Старайтесь повторять одинаковую анимацию для одинаковых компонентов (консистентность, как в дизайн-системе).

Формы, текст и маски: ключевые инструменты моушн-дизайнера

Shape Layers (вектор внутри After Effects)

Фигуры в AE подходят для:

простых иллюстраций и геометрии;

анимированных плашек и подложек;

иконок;

линий, обводок, «рисования» контуров.

Если у вас уже есть вектор из Illustrator/CorelDRAW, обычно удобный путь:

подготовить чистые слои (без мусора, с понятными названиями);

импортировать в After Effects;

при необходимости конвертировать в Shape (чтобы анимировать как нативную форму AE).

Текст и кинетическая типографика

Кинетическая типографика — это когда смысл усиливается движением текста.

Базовые правила (прямое продолжение типографики из первой статьи):

Анимируйте иерархию, а не всё подряд.

Сначала показывайте заголовок, затем детали.

Не ломайте читаемость: скорость и амплитуда движения должны давать время на чтение.

Маски и матты: как «прятать» и «открывать» графику

Маска (Mask) — контур, который ограничивает видимость слоя.

Трек-матт (Track Matte) — когда один слой управляет видимостью другого (например, текст «проявляется» через движущуюся форму).

Это моушн-аналог аккуратной работы масками в Photoshop, только во времени.

Связи и порядок: parent, null и precomp

Эти инструменты помогают собирать анимацию системно, как вы собирали компоненты в Figma.

Parent (родительская связь) — один слой наследует движение другого. Удобно, чтобы кнопка двигалась вместе с карточкой.

Null Object — пустой управляющий слой, к которому «привязывают» несколько объектов, чтобы контролировать их вместе.

Precompose (прекомп) — упаковка группы слоёв в отдельную композицию, чтобы упростить сцену и переиспользовать блок.

Практическое правило: если таймлайн стал нечитаемым — вы теряете контроль и скорость. Прекомпы и нулевые объекты возвращают структуру.

Эффекты: как использовать выразительность без «перешума»

Эффект — это инструмент, а не цель. В графическом дизайне мы избегали «эффектов ради эффектов» — в моушне правило то же.

Самые полезные типы эффектов для новичка

Размытие в движении (Motion Blur): добавляет реализма быстрому движению.

Простые размытия (Blur): помогают убрать шум на фоне и поддержать иерархию.

Цветокоррекция: когда нужно привести элементы к единому стилю.

Тени и свечение: аккуратно, только чтобы отделить планы, а не «сделать красиво».

Принципы контроля качества

Делайте один главный акцент на сцену.

Проверяйте читаемость на паузе и в реальном темпе.

Повторяйте одинаковые эффекты для одинаковых элементов (консистентность).

2D и 3D: когда нужен объём

В After Effects есть 3D-слои и камеры, но большинству дизайнерских задач хватает грамотного 2D.

3D уместно, если:

вы делаете параллакс (планы двигаются с разной скоростью);

вам нужно движение камеры, глубина, свет;

это поддерживает идею, а не усложняет её.

Если цель — UI-анимация или типографика, 2D обычно быстрее, чище и понятнее.

Рабочий процесс: из Figma/Illustrator/Photoshop в After Effects

Типовой пайплайн для дизайнерских проектов:

Подготовить дизайн-исходник.

Разложить на слои логически (фон, текст, кнопки, иконки).

Импортировать в After Effects (PSD/AI поддерживают слои).

Настроить композицию под нужный формат.

Сделать анимацию блоками: сначала структура, потом детали.

Добавить эффекты только там, где они усиливают смысл.

Привести проект в порядок: названия, цветовые метки, прекомпы.

Экспортировать в нужный кодек и размер.

!Пайплайн от исходника до экспорта

Экспорт: как не испортить результат на последнем шаге

Понимайте задачу экспорта

Для соцсетей и веба чаще нужен H.264 (MP4): компактно и совместимо.

Для передачи в монтаж (например, Premiere) часто удобнее Apple ProRes: тяжелее, но качество и стабильность выше.

Для прозрачности иногда нужен последовательность PNG (PNG sequence) или кодеки, поддерживающие альфа-канал.

Официальная справка по очереди рендера: Adobe Help — Render and export with After Effects

Render Queue и Media Encoder

Render Queue — встроенный экспорт в After Effects (надёжно для многих задач).

Adobe Media Encoder — удобен для H.264, очередей и нескольких форматов.

Практика:

Делайте тестовый короткий экспорт (5–10 секунд), чтобы проверить цвет, резкость и размер.

Проверяйте результат на устройстве, где это будет смотреться (телефон, ноутбук, большой экран).

Частые проблемы экспорта и причины

«Цвета стали другими» — несоответствие цветового управления и профилей, неправильные настройки проекта/экспорта.

«Видео мыльное» — слишком низкий битрейт или неверный размер.

«Дёргается движение» — частота кадров не совпадает с площадкой или вы сделали слишком резкую динамику без сглаживания.

«Пропали шрифты у клиента» — вы отдали проектный файл вместо финального видео; для проектов также важно собирать шрифты и превращать в кривые там, где это уместно (в векторе).

Минимальный набор навыков, который даст быстрый рост

Чтобы уверенно делать моушн для дизайна, сфокусируйтесь на следующем:

Ключевые кадры + сглаживание + Graph Editor.

Маски и трек-матты для аккуратных появлений.

Parent + Null + Precomp для структуры.

Консистентность анимации как часть дизайн-системы.

Экспорт под задачу, а не «как получилось».

Полезные источники для ориентира

Общее описание программы: Wikipedia — Adobe After Effects

Принципы анимации для понимания характера движения: Wikipedia — 12 basic principles of animation

После этой темы вы сможете превращать статичные макеты в презентационные ролики, анимировать айдентику и делать понятные UI-демонстрации, где движение подчёркивает смысл и помогает пользователю, а не отвлекает от задачи.