Менять размер картинок и баннеров под разные форматы утомительно ― много времени уходит на ручной труд. Нашли несколько способов, которые помогут автоматизировать рутину.
Что такое ресайз и зачем он нужен
Ресайз в дизайне — это изменение размера или формата изображения. Например, нужно уменьшить изображение в три раза, чтобы оно легче загружалось, но при этом сохранить его качество. Другой пример — адаптировать баннер для разных сайтов и соцсетей, а затем на основе этих макетов создавать новые.
Баннер и его ресайзы для разных форматов: соцсети, поиск, реклама на сайт
Работа с ресайзами — полезный навык для дизайнера ― с ним адаптировать графический контент получается быстрее. Дизайнер автоматизирует рутину и фокусируется на верхнеуровневых задачах — концепции, макете и процессах. Студенты курсов по дизайну осваивают работу с графикой, анимацией, интерфейсами и вебом с нуля. Во время работы над учебными проектами преподаватели и практикующие наставники дают не только базу, но и делятся лайфхаками, которые помогут упростить монотонные задачи.
Методы ресайза изображений
Если опыта в дизайне мало, а в программировании вообще нет, быстро изменить размер изображения можно в графических редакторах или онлайн-сервисах. Минус этих методов — они подходят в основном для уменьшения изображений, а итоговое изображение может быть низкого качества:
1. Простые графические редакторы.
Например, GIMP: «Изображение» (Image) > «Масштабировать» (Scale Image).
2. Онлайн-редакторы изображений.
Например, в tinypng можно прямо в браузере загрузить изображение, а сервис выдаст его уменьшенную версию.
3. Приложения для уменьшения изображений.
FastStone Photo Resizer для Windows, ImageOptim для macOS.
Иногда изображения нужно не только сжимать, но и увеличивать. Чтобы сохранять при этом высокое качество, понадобится Photoshop, софт на базе нейросетей или знание Python. Разберём несколько способов изменить размер изображения.
Если нужно сразу сжать много фото, самый простой способ — загружать максимально доступное число фотографий несколько раз в tinypng или любой другой онлайн-сжиматель. Другой вариант — написать небольшой макрос для Photoshop. Это алгоритм, который программа будет автоматически выполнять. Вот как пошагово его настроить:
- Меню операций.
- Поставить «Запись».
- Открыть картинку.
- Ctrl+Shift+Alt+S.
- Настроить параметры сжатия (где-то 50—70%).
- Сохранить в будущую папку для сжатых картинок.
- Остановить запись макроса.
- Файл → Автоматизация → Пакетная обработка
- В открытом окне выбрать источник (где хранятся исходные картинки).
- Выбрать сохранённую «операцию» (ту, которую писали только что).
- Поставить чекбокс на «Игнорировать команды “Открыть”».
- В правой стороне окна выбрать папку, куда сохранить сжатые картинки.
- Поставить галочку на «Игнорировать “Сохранить как”».
- Готово. Теперь при запуске макроса программа будет автоматически сжимать выбранные картинки по заданным параметрам.
Создаём шаблон на любой случай
Если создавать баннеры и другие креативы приходится часто, на это будет уходить много времени. Автоматизировать подготовку и сэкономить ресурсы помогут шаблоны для ресайза. Можно скачать готовый или создать свой, если должны получиться разные по стилю баннеры.
Шаблон будем создавать в Figma — универсальной программе для задач по веб- и UI-дизайну:
1. Создаем компоненты
Компонент в Figma — это функция, которая помогает связывать однотипные элементы. Если наделить этим свойством, например, заголовок в баннере, то он становится мастер-компонентом. Теперь достаточно редактировать только его, чтобы текст поменялся на всех остальных макетах.
В этом шаблоне фото, текст и кнопки на баннере слева — мастер-компоненты. Если изменить их — они изменятся на всех ресайзах баннера
Компоненты часто используют в UX/UI-дизайне — когда нужно, например, спроектировать экраны входа для приложения. Выпускники курса «Дизайнер интерфейсов» разработали готовый UI-кит на основе компонентов и добавили инструкцию по работе с ними
Допустим, для проекта понадобится баннер, который состоит из градиентного фона, изображения, заголовка, подзаголовка и дополнительной плашки. Создаём все эти элементы и делаем их мастер-компонентами.
Так выглядит пример компонентов для баннера, который будем адаптировать под разные форматы
2. Создаём ресайзы на основе компонентов
Заготовки под ресайзы — прямоугольники разных размеров — в зависимости от того, для каких площадок будем готовить ресайзы. Например, для рекламной сети Яндекса часто используют квадратные баннеры 300х300 пикселей и горизонтальные 700х200 и 700х370 px.
Чтобы сделать ресайз, который будет связан с мастер-компонентами, сначала собираем макет из мастер-компонентов, затем копируем его и меняем размер под нужную площадку.
С мастер-компонентами редактировать баннеры проще. Если нужно будет поменять текст или картинку во всех копиях, достаточно будет сделать это в мастер-компоненте
Совет эксперта
Статью подготовили:
Полина Овчинникова
Яндекс Практикум
Иллюстратор
Иллюстратор
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
