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

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

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

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

Макет с полупрозрачностью в Photoshop

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

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

Цвет продублированного слоя в Photoshop

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

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

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

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

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

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

На этом все.


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

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

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

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

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

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

PSD-макет сайта в Photoshop

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

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

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

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

Две касательные точки скругления в Photoshop

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

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

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

Прямоугольное выделение на макете в Photoshop

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

Размер построенного выделения в Photoshop

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

Схематичное изображение круга и квадрата в Photoshop

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

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

Смещение выделения в нужное место в Photoshop

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

P.S.

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

Почему на psd-макете радиус скругления равен 40px, а в AutoCAD - 41px? Да просто промахнулся, когда рисовал круг. Сути дела это ведь не меняет, только еще нагляднее показывает верность подхода.

На этом все.


При верстке из 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 - скрытие и отображение эффектов слоя в палитре слоев”

На этом все.


В предыдущей статье “Photoshop - преобразовываем обводку в CSS” была высказана неточность.

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

Однако, на самом деле эффекты слоя никуда не пропадают, просто они скрыты (точнее - свернуты). Если к слою применены эффекты, то на слое отображается буква fx. И стрелка в виде треугольника справа от этой буквы. Щелчок мыши на этой стрелке раскрывает или скрывает эффекты слоя. Если стрелка направлена вниз, свойства слоя скрыты. Если стрелка направлена вверх, то свойства слоя развернуты.

Давайте на примере рассмотрим, как можно скрывать или раскрывать свойства слоя.

Имеется фрагмент панели слоев Photoshop, на которой к одному из слоев применены эффекты. Смотрим на изображение. На слое есть буква fx, что означает, что у него есть свойства. Но на слое мы их не видим. Однако справа от символов fx есть стрелка, направленная вниз:

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

Щелкнем на этой стрелке одинарным щелчком мыши. И “картина” сразу поменяется:

Слой с развернутыми эффектами в Photoshop

Эффекты слоя развернулись и теперь видно, какие именно применены к слою.

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

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

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

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

Такой способ является очень неэффективным - можно легко не заметить или забыть о каком-либо эффекте.

На этом все.


Узнать, на каком CMS работает тот или иной сайт можно различными способами. Это делается в автоматическом режиме с помощью плагинов или сервисов.

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

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

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

Одной из возможностей укрепить оборону сайта является плагин kareebu Secure. Этот плагин написан два года назад и до сих пор пользуется популярностью на ресурсе Joomla! Extensions. Плагин поддерживается версиями Joomla 1.5 и 2.5, так что выбор для сайтовладельцев не ограничен.

Принцип работы kareebu Secure достаточно прост. Плагин устанавливает пароль на директорию /administrator в корневой директории сайта. Благодаря этому закрывается доступ извне и теперь без пароля невозможно просмотреть содержимое этой папки и узнать, что сайт-то работает на Joomla!

Установка плагина kareebu Secure выполняется стандартным способом, через менеджер расширений Joomla. После успешной установки необходимо перейти в раздел Менеджер плагинов и включить “kareebu Secure’. Выполняется это в поле “Состояние”. На изображении приведено изначальное состояние плагина, когда он еще не включен:

Плагин kareebu-Secure

Затем переходим к настройкам kareebu Secure. Они очень просты, запутаться тут невозможно:

Настройки плагина kareebu Secure

Первое поле “Enable” включает или выключает настройки плагина. Понятно, что если настройки введены, но отключены, то плагин работать не будет.

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

Третье поле “Mode” позволяет выбрать два режима авторизации на сайте с помощью плагина kareebu Secure. Первый (устаревший) режим “HTTP Authentication” работает следующим образом. В адресной строке браузера для входа в административную панель Joomla вводится:

http://localhost:7788/third/administartor?password

где password - это тот самый пароль, который был задан во втором поле. Браузер переадресовывается в back-end сайта и открывается стандартное окно Joomla для входа в административную часть. Необходимо ввести только пароль в соответствующем поле.

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

Кстати, если вы обратили внимание, стандартная строка:

http://localhost:7788/third/administrator

… для входа в административную часть Joomla после установки плагина kareebu Secure изменилась и теперь представляет из себя:

http://localhost:7788/third/administartor?password

Об этом не стоит забывать. Теперь не зная секретного пароля, невозможно получить доступ к back-end Joomla и войти в нее. На этом обзор плагина kareebu Secure можно закончить.

На этом все.