Photoshop - преобразовываем обводку в CSS

Reading time ~2 minutes

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

У нас стоит задача преобразовать изображение с обводкой из psd-макета в html-код, используя при этом стилевые правила, где это допустимо. Само изображение преобразовать с помощью стилей невозможно - это картинка. А вот создать рамку (в данном случае это обводка) в помощью правил будет легко выполнить.

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

Изображение с обводкой в Photoshop

Слои, отвечающие за изображение и обводку в Photoshop

На панели слоев видим два слоя - “Layer 16” и “Shape 14 copy”. Именно они выполняют прорисовку картинки футболиста. На слое “Shape 14 copy” также видим эффекты, применяемые к этому слою.

Если внимательно присмотреться к эффектам, то увидим надписи “Эффекты - Выполнить обводку”. Это как раз обводка, от которой нам необходимо избавиться, чтобы вырезать только саму фотографию.

Отлючаем эффект обводки. Для этого щелкаем мышью на “глазике” “Эффекты” на слое “Shape 14 copy”. “Глазик” “потухает”, то есть эффект отключен. Смотрим на фотографию и видим, что обводка пропала:

Слой с отключенным эффектом обводки в Photoshop

Outline Fragment Disabled

Теперь осталось вырезать изображение. Воспользуемся инструментом Photoshop под названием “Crop”.

Выбираем его и вырезаем изображение. Затем сохраняем его для “Web и устройств” в формате .jpg (наилучший вариант для фотографий).

Однако, нам еще необходимо узнать точные размеры и цвет обводки. Для этого опять воспользуемся слоями в Photoshop. Точнее - выберем слой “Shape 14 copy’ и откроем его свойства. В списке эффектов выбираем “Обводка” и смотрим на правую часть, где представлены параметры, с помощью которых она выполнена:

Свойства обводки в Photoshop

Нам потребуются только два из них. Это толщина линии обводки “Размер” и цвет линии обводки “Цвет”. Также проверяем, что прозрачность (альфа-канал) для цвета обводки не используется, так как стоит “Непрозр.” равная 100%.

Обводка выполнена сплошным цветом, так как на это указывает значение “Режим наложения: Нормальный”. Цвет обводки должен быть белым, но уточняем этот факт.

Щелкаем на окошке “Цвет”:

Цвет обводки в Photoshop

Так все и есть - цвет равен #fff. Все готово для написания стилей CSS:

img.football {
	border:2px solid #fff;
}

Outline Fragment Result

В результате получил изображение с обводкой. Однако, в случае исполнения через стилевые правила CSS это будет не обводка, а чистая рамка. Размер изображения равен 62px х 59px. Добавляем к нему рамку размером 2px. Получаем реальный размер картинки на сайте 64px x 61px.

Средствами CSS на данный момент невозможно выполнить обводку, как на макете в Photoshop. Поэтому, если размер изображения критичен для шаблона, лучшим вариантом будет вырезание картинки вместе с обводкой.

P.S.

Может быть так, что на самом слое в панели слоев эффект обводки не будет отображен:

Отсутствие эффектов на слое в Photoshop

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

Данное высказывание является несколько неточным. Эффекты слоя никуда не пропадают - они просто скрыты. Более подробное описание, как развернуть или скрыть отображение эффектов слоя в Photoshop можно почитать в статье “Photoshop - скрытие и отображение эффектов слоя в палитре слоев”

На этом все.


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

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

Комментарии

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