Как редактировать изображения для блога и сайта: пример в Figma

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

Какие бывают варианты работы:
- Создатели сайта сразу готовят шаблоны изображений и маркетолог вносит контент в данные шаблоны
- Фирма заказывает разработку уникальных изображений для каждой отдельной новости
- Маркетинг готовит изображения своими усилиями

Многие специалисты думают, что для того, чтобы редактировать фотографии и графику им требуется освоить сложные инструменты для редактирования Adobe Photoshop или Illustration. На самом деле манипуляции с изображением можно осуществлять в современных простых для использования инструментах, например Figma.

Рассмотрим техники работы с фотографиями:

1. Обрезка фотографии

С помощью обрезки вы можете удалить нежелательные или отвлекающие элементы, улучшить композицию или выделить фокус.
Также, вы можете сделать визуальное представление нетривиальным.

Чтобы обрезать изображение в Figma используйте функцию Crop, находящуюся в верхней панели по центру.

Для того, чтобы сделать обрезку по фигуре - нужно создать фигуру с помощью ряда стандартных фигур - квадрата, круга, прямоугольника и т.д. > объединить их в Union > вставить изображение с помощью поля заливки (заменяем Solid на Image).

Советы:

• При выборе изображения важно проверить прямая ли фотография.
• Использовуйте "правило третей" или правило золотой сетки. "Правило третей" - метод выравнивания, популярный в фотографии и кинематографии. По нему, объект фокусировки изображения должен приходиться в одной из точек пересечения или близко к ним.

2. Нанесение теней

Вы можете сохранить узнаваемые фигуры или силуэты на ваших фоновых фотографиях с использованием теней.

В Figma тени наносятся следующим образом: Design > Effects > Inner Shadow / Drop Shadow.

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

На втором изображении используются внешние тени - создается ощущение трехмерности, подчеркиваются границы, видно направление источника света.

3. Размытие фона

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

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

Этот эффект также часто используется для интерактивных меню в iOS.

Путь в Figma следующий: Design > Effects > Layer Blur / Background Blur.

4. Насыщенность

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

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

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

5. Контраст

Контрастность - важный компонент редактирования фотографий, позволяющий передать определенное настроение через ваши фотографии.

Высокая контрастность используется для создания четкого соотношения между фотографиями, белыми и темными частями. Низкая контрастность - убирает четкость. Используется в рекламе для устранения любого конфликта между текстом и изображением.

Цветовой контраст - используется с цветными фотографиями, он помогает вашему объекту выделиться на фоне.

Другие статьи на тему создания сайтов
Платформа для создания сайта: какую выбрать?
Иконки для сайта: где их брать?
Топ 6 сайтов на Squarespace

Недавние публикации