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

Зачем это делается? Дело в том, что практически любой объект макета рисуется дизайнеров с помощью, как минимум, двух слоев. На практике слоев может быть три, четыре или больше.

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

Чтобы преобразовать объект в один цельный рисунок, нужно найти в “Палитре слоев” программы Photoshop (в ней наиболее часто выполняется нарезка макета) все слои, которые отвечают за прорисовку данного изображения. Другими словами, из этих слоев состоит рисунок.

Когда слои найдены, отмечаем их каким-либо цветом в “Палитре слоев” Photoshop, чтобы не потерять из виду (пусть это будет зеленый цвет, неважно). Это делается с помощью контекстного меню (правая кнопка мыши):

Результат может быть таким:

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

Теперь осталось только объединить слои. Для этого вновь активируем контекстное меню (правая кнопка мыши) и выбираем в открывшемся списке пункт “Merge Layers”:

В результате все выделенные слои преобразуются в один. Это также будет заметно в “Палитре слоев” Photoshop - вместо нескольких слоев останется только один. Это означает, что операция объединения слоев прошла успешно.

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

На этом все.

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

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

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

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

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

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

1

background

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

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

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

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

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

В первом правиле

1

background: #2b2e28

Во втором случае

1

background: rgba(43, 46, 40, .45)

1

rgba

1

a

Значение альфа-канала, как мы узнали в Photoshop, равно

1

45%

1

45%

1

.45

1

rgb

1

43, 46, 40

На этом все.

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

Вот тут на помощь и приходит инструмент “Trim” в Photoshop. С помощью него производится обрезка изображения на основе выбранного фильтра. В результате картинка получиться меньшего размера и только с полезным содержимым. Чтобы было понятнее, давайте разберем на примере.

Имеется некий макет, из которого необходимо вырезать логотип (очень частая операция). Первым делом, находим и определяем слои, из которых состоит логотип. Затем объединяем их в один слой и выделяем логотип на макете с помощью инструмента “Выделение”:

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

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

Затем переходим в меню “Image - Trim”:

В окне настроек устанавливаем радиокнопку в положение “Transparent Pixels”. В этом случае обрезка изображения будет производиться на основе поиска прозрачных пикселей, окружающих само изображение. Нажимаем ОК и получаем результат:

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

На этом все.

Часто при верстке psd-макета приходится сталкиваться с ситуацией, когда дизайнер применяет полупрозрачность в слое.

Сегодня это достаточно стандартный прием, так как средства CSS позволяют легко передать в коде полупрозрачность любого цвета. Осуществляется это с помощью свойства

1

rgba

1

а

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

Допустим, есть пример psd-макета, в котором есть слои с полупрозрачностью:

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

1

#000

Если вдруг не уверены с правильностью определения цвета, то можно продублировать нужный слой в отдельный документ и ткнуть в него “пипеткой”:

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

Но вернемся к вопросу, ради которого и затевалась эта небольшая статья. Наверное, внимательные читатели уже ответили для себя на него, посмотрев на первую картинку. Последовательность действий в этом случае стандартная - открываем палитру слоев в Photoshop. Выбираем инструмент “Move Tool” (V) и ткнем мышью на нужном слое.

Если Photoshop настроен правильно, то искомый слой автоматически выделиться в палитре (как на рисунке). Переводим взгляд в верхний правый угол палитры и видим там небольшое окошко с названием “Opacity”.

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

1

90%

Например, так:

background-color: rgba(0,0,0, 0.9);

На этом все.

При создании макетов в Photoshop дизайнеры очень любят использовать скругление углов для самых различных блоков.

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

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

Но вот появился CSS3 и дело значительно облегчилось, так как в этой спецификации есть свойство, специально созданное для отрисовки круглых углов у блоков. Оно называется

1

border-radius

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

1

-webkit

1

-moz

1

-o

Но речь в данной статье не об этом. Точнее, не о том, как создать скругленный угол в CSS3. А о том, как померить этот угол на psd-макете. Допустим, у нас есть присланный дизайнером макет сайта:

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

1

border-radius: 20px

А вот как его узнать? Не звонить же дизайнеру с вопросом - какой радиус ты заложил в макете?

Скажу, что сразу ответ на этот вопрос я не получил. По привычке отправился на форум forum.htmlbook.ru, но конкретного ничего не вынес оттуда. После поисков в Инете все-же решение было найдено. И оно оказалось очень простым.

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

Проведем в качестве вспомогательных линий две направляющие - вертикальную и горизонтальную. На рисунке они отображены тонкими синими линиями. Нам они будут необходимы для того, чтобы получить точку их пересечения. Затем выберем в панели инструментов Photoshop прямоугольное выделение (Rectangular Marqee).

И построим квадрат (зажав клавишу Shift) так, чтобы его левый верхний угол совпал с точкой пересечения направляющих. Протянем его мышкой так, чтобы стороны расширяющегося квадрата совпали с касательными точками, о которых говорилось ранее. Как только линии квадрата и касательные точки совпадут, отпускаем мышь - построение закончено.

Можно выполнить построение другим способом. Начать выделение из одной точки (касательной) и закончить в другой, то есть, как бы по диагонали. Результат будет тот же самый, но не нужно создавать направляющие:

Теперь откроем панель “Инфо”, и взглянем на размеры построенного квадрата. Длины сторон и будут радиусом скругления для данного блока на макете:

Не верите? Это точно - любая из сторон построенного квадрата будет радиусом данного скругления! Чтобы еще немного разъяснить, я нарисовал в AutoCAD круг с радиусом

1

41мм

1

41мм

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

Строю квадрат дальше. Когда он построен и мышь отпущена, я просто перемещаю выделение в нужное место с помощью клавиш-стрелок на клавиатуре. А дальше - все как и прежде. Смотрю на панель “Инфо” и получаю точный радиус скругления:

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

P.S.

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

Почему на psd-макете радиус скругления равен

1

40px

1

41px

На этом все.