Photoshop - как определить альфа-канал слоя

Reading time ~2 minutes

Недавно столкнулся с такой проблемой. Точнее - проблемой ее можно назвать с большой натяжкой. Для новичка в Photoshop это и может быть трудностью, но не для опытного пользователя. Итак, в чем же заключается та трудность, с которой мне пришлось иметь дело?

Имеется макет сайта в формате PSD. В нем есть несколько фоновых слоев - один основной, второй для контентной части. Для наглядности приведу примеры обоих слоев:

Два фоновых слоя макета в Photoshop

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

Выделяем фон контентной части. Видим, что из себя он представляет фоновую заливку. Градиент при ее создании не использовался. Из эффектов имеются только внутренняя тень и внешняя тень, которые мы отключим. Обе тени легко воссоздать с помощью стилевых правил CSS:

Эффекты контентного фона в Photoshop

И приведу изображение самого фона контентной части, представленного одним слоем, продублированным в новый документ:

Фоновый слой контентной части в Photoshop

Внимательно смотрим на скриншот и видим. Что мы видим? Слой с заливкой однотонной, в которой градиент не применяется. Вырезать кусок изображения, чтобы использовать его в качестве фонового изображения контентной части нет смысла. Более правильным решением будет использовать цвет изображения через свойство background.

Однако, даже “на глаз” видно, что фон имеет прозрачность, которую мы также должны передать через стилевые правила CSS.

Как же узнать значение прозрачности слоя? Не скрою, для меня до данного момента это было загадкой. Но все решилось очень просто. Открываем свойства слоя Shape13 двойным щелчком на нем. В появившемся окне свойств видим такую картину:

Свойства фоновой заливки в Photoshop

Смотрим в подраздел “Дополнительные параметры” в правой части. В этом подразделе находим параметр (самый верхний) “Непрозрачность заливки”. И видим значение этого параметра - 45%. Это и есть прозрачность фоновой заливки контентной части.

Теперь осталось написать CSS-правила для этого слоя:

.content {
 background:#2b2e28;
 background:rgba(43, 46, 40, .45);
}

В первом правиле background: #2b2e28 мы обошлись значением цвета в формате HEX, который не поддерживает передачу полупрозрачности. Это сделано для браузеров, которые не могут передать полупрозрачность фонового слоя и вообще не понимают такого свойства, как полупрозрачность.

Во втором случае background: rgba(43, 46, 40, .45) цвет задан через значение rgba, где a - это альфа-канал. Второе правило было создано для современных браузеров, которые “понимают”, что такое полупрозрачность и могут ее передать через соответствующие CSS-правила.

Значение альфа-канала, как мы узнали в Photoshop, равно 45%. Поэтому в правилах CSS значение 45% прописываем так - .45. Значение каналов rgb также узнаем в Photoshop (в том же окне, в котором мы брали значение HEX) и прописываем в соответствии с синтаксисом - 43, 46, 40.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке