Спор о том, какой графический редактор лучше, обычно бессмысленный: инструменты решают разные задачи. Photoshop работает с пикселями, Illustrator — с кривыми, Sketch и Figma — с интерфейсами и повторяющимися компонентами. Ниже разбираем, что чем делать в веб-проекте, чем отличается командная работа в этих программах и как макет попадает в вёрстку без потерь.
Четыре инструмента и их назначение
Photoshop: работа с изображением
Растровый редактор остаётся стандартом там, где нужно обрабатывать фотографии: коррекция цвета, ретушь, удаление лишнего, монтаж, подготовка предметной съёмки для каталога. Слои, маски и смарт-объекты позволяют собирать сложные композиции и возвращаться к любому шагу.
Ограничение вытекает из природы растра: изображение состоит из точек и при увеличении теряет качество. Поэтому логотип, иконку или иллюстрацию, которую придётся показывать в разных размерах, в растре делать не стоит. Для макетов сайтов Photoshop сегодня почти не используют: в нём нет удобной работы с компонентами и состояниями, а любое изменение сетки превращается в ручную перестановку слоёв.
- Обработка фотографий для каталога и карточек товара.
- Подготовка фонов и сложных коллажей.
- Пакетная обработка большого количества снимков.
- Ретушь и цветокоррекция перед публикацией.
Illustrator: вектор и фирменный стиль
Векторный редактор описывает изображение формулами, поэтому масштабируется без потери качества. Это основной инструмент для логотипов, знаков, иконок, схем, инфографики и печатной продукции. Для веба важна ещё одна особенность: вектор экспортируется в формат SVG, который в браузере занимает мало места, остаётся резким на любых экранах и поддаётся перекрашиванию через стили.
Практические правила, которые мы соблюдаем при подготовке векторной графики для сайта: убирать лишние точки и группы, переводить текст в кривые только в финальной версии, задавать понятные имена слоёв, чистить экспортированный файл от служебных данных редактора и проверять, как иконка выглядит в мелком размере — тонкие линии на экране телефона могут просто исчезнуть.
Sketch: редактор под интерфейсы
Sketch появился как ответ на неудобство растровых редакторов в интерфейсной работе. Он сразу строился вокруг символов, стилей и артбордов, то есть вокруг повторяющихся элементов и множества экранов. За счёт этого макеты стало проще поддерживать: правка компонента расходится по всем экранам, где он используется.
Главное ограничение известно: программа работает только на macOS. Для смешанной команды это означает, что часть участников не сможет открыть исходник, а обмен идёт через экспорт и ссылки. Второе ограничение — совместная работа появилась позже, чем у конкурентов, и исторически строилась вокруг файлов, а не общего документа.
Figma: совместная работа в браузере
Инструмент, который в веб-проектах чаще всего оказывается основным. Работает в браузере, не зависит от операционной системы, позволяет нескольким людям находиться в одном файле одновременно и оставлять комментарии прямо на макете. Для проекта, где участвуют дизайнер, разработчик, менеджер и заказчик, это снимает основную головную боль — согласование версий.
Из того, что важно для практики: компоненты с вариантами, автоматическая раскладка, переменные для цветов и отступов, режим просмотра свойств элементов для разработчика, прототипирование переходов внутри того же файла. Всё это заметно сокращает путь от макета до вёрстки.
Сравнение по задачам
| Задача | Подходящий инструмент | Почему |
|---|---|---|
| Обработка фотографий | Photoshop | Работа с пикселями, маски, ретушь |
| Логотип и фирменный знак | Illustrator | Вектор, масштабирование без потерь |
| Иконки для сайта | Illustrator или Figma | Экспорт в SVG, контроль мелких деталей |
| Макеты страниц сайта | Figma, реже Sketch | Компоненты, состояния, много экранов |
| Прототип переходов | Figma | Прототипирование в том же файле |
| Совместная работа с заказчиком | Figma | Браузер, комментарии, единая версия |
| Макеты для печати | Illustrator | Цветовая модель для печати, кривые |
Как макет попадает в вёрстку
Хороший макет — это не картинка, а описание системы. Разработчику нужно понимать не только как выглядит экран, но и как он себя ведёт. Мы просим соблюдать несколько правил, и они одинаковы независимо от редактора.
- Сетка и отступы кратны выбранному шагу, а не расставлены на глаз.
- Цвета и текстовые стили заданы переменными, а не подобраны в каждом слое отдельно.
- Повторяющиеся элементы собраны в компоненты, у кнопок и полей нарисованы все состояния.
- Нарисованы крайние случаи: длинное название, отсутствие фотографии, пустой список, ошибка.
- Есть мобильная версия ключевых экранов, а не только десктоп.
- Слои названы понятно, лишние скрытые варианты удалены.
- Указаны шрифты с начертаниями и подготовлены файлы для самостоятельного размещения.
Форматы изображений для сайта
Отдельная тема, которую часто упускают на этапе дизайна. От выбора формата напрямую зависит вес страницы.
- SVG — иконки, логотипы, простые иллюстрации. Мало весит, остаётся резким, перекрашивается стилями.
- WebP — основной формат для фотографий на сайте: заметно легче JPEG при сопоставимом качестве.
- JPEG — запасной вариант для фотографий там, где нужна максимальная совместимость.
- PNG — только когда нужна прозрачность и векторный формат не подходит. Тяжёлый, для фотографий не годится.
Изображения стоит готовить в нескольких размерах под разные экраны, а не отдавать один файл шириной в две тысячи точек на все случаи: на телефоне такой файл тратит трафик впустую.
Что выбрать команде
Если коротко: для интерфейсной работы берём инструмент с компонентами и совместным доступом, вектор рисуем в векторном редакторе, фотографии обрабатываем в растровом. Смешивать назначения не стоит: макет сайта, собранный в растровом редакторе, потом придётся пересобирать, а логотип, нарисованный поверх пикселей, невозможно масштабировать.
Для заказчика практический вывод один: важно, чтобы исходники остались у вас. Мы всегда передаём файлы макетов, исходные векторные версии знаков и подготовленные экспорты. Это защищает от ситуации, когда для правки одной кнопки приходится перерисовывать всё заново.
Если нужен интерфейс, а не картинка
Инструмент вторичен, а система первична: сетка, компоненты, состояния и сценарии. Мы спроектируем интерфейс и соберём макеты, готовые к вёрстке, с полным набором состояний и мобильными версиями. Напишите нам, обсудим объём работ.
