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