Экспорт изображений с декоративными эффектами

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

Обтравочная маска — это объект, фигура которого маскирует другие объекты, и показывает только области, лежащие внутри маски. Считается, что — это простой, но эффективный способ преобразить фотографии. При наложении маски исходное изображение остаётся неизменным, дополнительно, изображение можно перемещать под маской, показывая/скрывая его части.

Рассмотрим примеры изображений, к которым применены обтравочные маски и разберём как можно экспортировать такие изображения.

К изображению ниже применена маска в форме эллипса. Чаще всего данный эффект встречается в разделе «Отзывы клиентов» для вывода аватарок пользователей.

Изображение с декоративным эффектом в разделе Отзывы

На панели Layers (Слои) маска обозначается с помощью изогнутой стрелки вниз. Изображение стрелки добавляется к слою, на который воздействует маска. Сама маска расположена на следующем ниже слое. В нашем случае — это слой Ellipse 1.

К слою применена обтравочная маска

Эту маску просто реализовать с помощью стилей, а фотографию выгрузить в формате JPG и поместить на любой фон. Для этого нужно отключить маску слоя, выгрузить изображение в формате JPG, а затем с помощью CSS-свойства border-radius добавить скругления. Выглядит это примерно так:

.avatar { width: 50px; height: 50px; border-radius: 50%;}

Для отключения маски используется команда Release Clipping Mask в контекстном меню для слоя с изображением, на который воздействует маска. Либо можно воспользоваться горячей клавишей Alt/Option, при этом курсор нужно навести на границу между слоем с изображением и слоем (или группой слоёв) с маской.

Выключить маску для слоя

Чтобы вернуть маску, необходимо воспользоваться командой Create Clipping Mask в контекстом меню слоя с изображением. Либо снова воспользоваться горячей клавишей Alt/Option.

Возвращаем маску для слоя

Этом приём также можно использовать для каталога товаров, когда нужна полноцветная картинка товара, а в макете изображение товара вписано в круг, например, как в примере ниже.

Каталог товаров с круглыми фотографиями

Плюсы этого подхода:

· чёткие края даже при увеличении масштаба;

· независимость от фона, изображение можно поместить на любой фон;

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

Пример посложнее. На изображение воздействуют две обтравочные маски, объединённые с помощью Группы слоёв (Group 5) в одну группу (drops и splash).

К изображению применяется сложная обтравочная маска

В этом случае изображение лучше выгрузить вместе с маской в формате PNG.