Как сэкономить время с ресайзами изображений

от admin

Менять размер картинок и баннеров под разные форматы утомительно ― много времени уходит на ручной труд. Нашли несколько способов, которые помогут автоматизировать рутину.

Что такое ресайз и зачем он нуженМетоды ресайза изображенийРесайз баннеровСоздаём шаблон на любой случайСовет эксперта

Что такое ресайз и зачем он нужен

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

Как сэкономить время с ресайзами изображений

Как сэкономить время с ресайзами изображений

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

Как сэкономить время с ресайзами изображений

Как сэкономить время с ресайзами изображений

Получите профессию дизайнера в IT за 9 месяцев
Освоите одно из популярных направлений дизайна. Изучите Figma, типографику, вёрстку и другие направления. Получите помощь в поиске работы.Начать учиться бесплатно

Методы ресайза изображений

Если опыта в дизайне мало, а в программировании вообще нет, быстро изменить размер изображения можно в графических редакторах или онлайн-сервисах. Минус этих методов — они подходят в основном для уменьшения изображений, а итоговое изображение может быть низкого качества:

1. Простые графические редакторы.
Например, GIMP: «Изображение» (Image) > «Масштабировать» (Scale Image).

2. Онлайн-редакторы изображений.
Например, в tinypng можно прямо в браузере загрузить изображение, а сервис выдаст его уменьшенную версию.

3. Приложения для уменьшения изображений.
FastStone Photo Resizer для Windows, ImageOptim для macOS.

Иногда изображения нужно не только сжимать, но и увеличивать. Чтобы сохранять при этом высокое качество, понадобится Photoshop, софт на базе нейросетей или знание Python. Разберём несколько способов изменить размер изображения.

Как сэкономить время с ресайзами изображений

Если нужно сразу сжать много фото, самый простой способ — загружать максимально доступное число фотографий несколько раз в tinypng или любой другой онлайн-сжиматель. Другой вариант — написать небольшой макрос для Photoshop. Это алгоритм, который программа будет автоматически выполнять. Вот как пошагово его настроить:

  1. Меню операций.
  2. Поставить «Запись».
  3. Открыть картинку.
  4. Ctrl+Shift+Alt+S.
  5. Настроить параметры сжатия (где-то 50—70%).
  6. Сохранить в будущую папку для сжатых картинок.
  7. Остановить запись макроса.
  8. Файл → Автоматизация → Пакетная обработка
  9. В открытом окне выбрать источник (где хранятся исходные картинки).
  10. Выбрать сохранённую «операцию» (ту, которую писали только что).
  11. Поставить чекбокс на «Игнорировать команды “Открыть”».
  12. В правой стороне окна выбрать папку, куда сохранить сжатые картинки.
  13. Поставить галочку на «Игнорировать “Сохранить как”».
  14. Готово. Теперь при запуске макроса программа будет автоматически сжимать выбранные картинки по заданным параметрам.

Ресайз баннеров

Чтобы баннер хорошо смотрелся в разных форматах, нужно изменить не только размер, но и композицию. Если этого не сделать, часть изображения или текста может обрезаться. Когда речь идёт о сайте товара или услуги в соцсети, неаккуратное оформление может отталкивать потенциальных покупателей.

Читать:
Как оформить цвета в CSS и описать оттенки в коде

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

1. Графические редакторы.
Adobe Photoshop позволяет изменять размер баннеров, текст и фон.
В Figma можно изменить размер баннера, применить стили и создавать компоненты, чтобы поддерживать согласованность между различными размерами баннеров.

2. Баннерные редакторы.
Adobe Spark — онлайн-платформа для создания баннеров и других графических материалов с простым интерфейсом.
Pikaban — онлайн-платформа с готовыми шаблонами креативов в рекламной сети Google или иностранных соцсетях.

3. Плагины для ресайза.
Плагины для Figma могут упростить процесс ресайза баннеров и частично автоматизировать процесс ресайза.

Создаём шаблон на любой случай

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

Шаблон будем создавать в Figma — универсальной программе для задач по веб- и UI-дизайну:

1. Создаем компоненты

Компонент в Figma — это функция, которая помогает связывать однотипные элементы. Если наделить этим свойством, например, заголовок в баннере, то он становится мастер-компонентом. Теперь достаточно редактировать только его, чтобы текст поменялся на всех остальных макетах.

Как сэкономить время с ресайзами изображений

В этом шаблоне фото, текст и кнопки на баннере слева — мастер-компоненты. Если изменить их — они изменятся на всех ресайзах баннера

Как сэкономить время с ресайзами изображений

Компоненты часто используют в UX/UI-дизайне — когда нужно, например, спроектировать экраны входа для приложения. Выпускники курса «Дизайнер интерфейсов» разработали готовый UI-кит на основе компонентов и добавили инструкцию по работе с ними

Допустим, для проекта понадобится баннер, который состоит из градиентного фона, изображения, заголовка, подзаголовка и дополнительной плашки. Создаём все эти элементы и делаем их мастер-компонентами.

Как сэкономить время с ресайзами изображений

Так выглядит пример компонентов для баннера, который будем адаптировать под разные форматы2. Создаём ресайзы на основе компонентов

Заготовки под ресайзы — прямоугольники разных размеров — в зависимости от того, для каких площадок будем готовить ресайзы. Например, для рекламной сети Яндекса часто используют квадратные баннеры 300х300 пикселей и горизонтальные 700х200 и 700х370 px.

Чтобы сделать ресайз, который будет связан с мастер-компонентами, сначала собираем макет из мастер-компонентов, затем копируем его и меняем размер под нужную площадку.С мастер-компонентами редактировать баннеры проще. Если нужно будет поменять текст или картинку во всех копиях, достаточно будет сделать это в мастер-компоненте

Совет эксперта

Александр Старинский

Ещё один способ сжать много изображений — сделать это в Figma. Нужно добавить все картинки в программу, выделить их и на панели справа перейти в пункт Export. Дальше — выбрать степень сжатия. Можно экспортировать большим или меньшим размером — 0,5х, 0,2х. Главное — прописывать цифру руками. После — выбрать папку для сохранения и просто подождать.

Похожие публикации