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

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

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

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

Первый вопрос. Трансформация прямоугольного выделения (Rectangular Marquee). Допустим, необходимо выделить какой-либо участок или элемент на psd-макете. Как обычно, выбираю инструмент выделения на панели Photoshop. И произвожу само выделение. Но бывает так, что после того, как выделение уже построено, его нужно изменить. Увеличить высоту или ширину. Или же наоборот - уменьшить. Каким образом нужно поступить в случае?

Все просто. Для изменения размеров выделения его нужно перевести в режим трансформирования. Проще всего это выполнить с помощью сочетания горячих клавиш Ctrl+T. Легко запомнить, Т - трансформирование.

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

Чтобы легче было представить, как это выглядит на деле, достаточно взглянуть на рисунок “Трансформация выделения” ниже.

С первым вопросом разобрались. Приступаю ко второму. В чем же заключается неточность, которая может “сгубить” шаблон?

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

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

В зависимости от цвета заливки, это может быть достаточно трудной задачей. Тут нужна внимательность и точность.

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

На этом можно закончить этот краткий обзор.

Хороший ресурс со шрифтами создан усилиями нескольких участников форума forum.htmlbook.ru.

Адрес ресурса - http://webfont.ru. На этом сайте собрана коллекция самых разнообразных и, самое главное, часто используемых шрифтов для web. Шрифты постоянно обновляются и добавляются.

Пользоваться сайтом можно двумя способами.

Первый - поиск и скачивание нужного набора шрифтов на самом ресурсе. На нем реализован механизм поиска. Скачивание необходимо делать в обязательном порядке, если шрифты будут использоваться на вашем собственном сайте. На локальную машину скачивается набор шрифтов, составляющих указанное семейство, и css-файл c правилами подключения его в коде. Точно также, как у известного FontSquirrel.

Второй - участник форума forum.htmlbook.ru Softlink сделал замечательную вещь - плагин под Sublime Text 2. Плагин называется WebFont и его установка производится как обычно, через менеджер плагинов в этом редакторе:

После подключения вставка в код нужного набора шрифтов производится двумя движениями. Для начала открываем сам плагин с помощью сочетания клавиш Ctrl+Alt+F:

В появившемся списке выбираем нужный шрифт (можно клавишами-стрелками) и нажимаем Enter. Плагин автоматически вставит в тело документа ссылку на выбранное семейство шрифтов и в комментариях укажет, какие именно семейства были подключены.

Теперь достаточно выбрать нужный

1

font-family

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

Но, помимо этого, плагин WebFont обладает еще несколькими интересными способностями. Если посмотреть на первые три пункта списка при запуске плагина, можно увидеть следующие строки:

• • перейти на webfont.ru
• • обновить список шрифтов
• • скачать шрифт

Первое действие - перейти на webfont.ru - это прямая ссылка на сайт webfont.ru. Если выбрать ее, то автоматически запуститься браузер по-умолчанию, который откроет данный сайт. А именно - сразу в каталоге шрифтов. По-моему, это полезно, когда хочется/нужно поискать шрифт на самом сайте.

Второе действие - обновить список шрифтов - говорит само за себя. Плагин обновляет список шрифтов, соотносясь с сайтом webfont.ru.

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

Сделаю экспресс-пробежку по данной возможности.

Открываем плагин (сочетание клавиш Ctrl+Alt+F - учимся работать правильно, по максимуму забываем о мыше). Выбираем пункт “* скачать шрифт”.

Откроется еще один список, который по сути будет повторением первого, но без первых трех “служебных” пунктов:

Выбираем нужный шрифт и жмем Enter. Плагин спросит, куда нужно сохранить скачиваемый шрифт. Дело в том, что он умеет работать с файловой системой на локальном компьютере и определять в ней местоположение редактируемого файла (открытого на данный момент в редакторе Sublime Text 2).

И предлагает, на выбор, варианты сохранения. Надо сказать, его “предложение” меня впечатлило. Не буду голословным и приведу лучше скриншот:

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

1

fonts

Она отображена внизу списка - это те папки, которые находятся на одном уровне с файлом MyFreeLancer.html. Выбираю ее - и опять появиться дополнительный список с вопросами. Я просто хочу “* да, распаковать сюда”:

Sublime “скажет” о том, что нужно немного подождать (1-2 секунды). И все - больше ничего не появиться. Скачался шрифт или нет, неизвестно. Что-же, посмотрю сам. Открываю Total Commander и смотрю:

Вот они - выделены красненьким! Более того, тут присутствует и файл

1

css

1

acid.css

P.S.

Для меня ресурс WebFont показался полезным в первую очередь тем, что на нем собраны наиболее часто используемые шрифты. Хотя на момент написания статьи там находилось 133 семейства шрифтов.

Еще одной очень привлекательной чертой этого ресурса является наличие плагина WebFont под редактор Sublime Text 2, с помощью которого можно подключить нужный шрифт удобно и быстро.

Очень простой способ получить полный доступ (права

1

root

‘а) к системе Linux, используя загрузчик GRUB (даже LiveCD не нужен).

Что для этого нужно? Просто грузим систему и ждем появления меню GRUB’а со списком установленных в системе операционных систем.

Список может быть примерно такой:

Gentoo Linux 2.6.31-r6
ArchLinux 2.6.31
Ubuntu Karmic Koala 9.10
Sabayon Linux r5.1 KDE

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

1

e

1

e

1

edit

Выбираем пункт ArchLinux 2.6.31, нажимаем

1

e

1

menu.lst

1

grub.cfg

title Archlinux 2.6.31
  root (hd0,5)
  kernel /boot/vmlinuz26 root=/dev/sda6 ro vga=0?318
  initrd /boot/kernel26.img

Удаляем в строке

1

kernel

1

/boot/vmlinuz26

1

root

1

root=/dev/sda6

kernel /boot/vmlinuz26 root=/dev/sda6

Дописываем в конец этой строки это:

1

rw init=/bin/bash

kernel /boot/vmlinuz26 root=/dev/sda6 rw init=/bin/bash

Сохраняем результаты нашего “непосильного” труда – нажимаем Enter и затем грузим ArchLinux с исправленными нами параметрами, нажав

1

b

1

b

1

boot

В итоге у нас загружается консоль с правами

1

root

На этом все.

Маленькая заметка о хитрости верстки.

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

С появлением стандарта CSS3 цветовые переходы можно передать в коде легко и быстро. Поэтому, закодировать градиент - это не вопрос. Главное - быть внимательным и не пропустить (заметить) его.

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

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

Допустим, есть страница 404 от известной web-студии TemplateMonster.com с фоновой заливкой определенного цвета:

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

1

I

Не закрываю окно “Пипетки”. “Забираю” цвет во-второй четверти фоновой заливки и проверяю, не изменился ли цвет. И так далее - третья четверть, четвертая четверть. И каждый раз смотрю, поменялся цвет или нет:

Другими словами, я “пробежался” по-вертикали с помощью пипетки и выяснил, что в конкретном случае, который представлен здесь, цвет везде одинаков -

1

#140100

background: #140100

Все. Просто и со вкусом.

При версте сайта из макета одним из часто повторяющихся действий является наполнение содержимого так называемой “рыбой”.

Что такое “рыба”? Это ничего незначащий текст, единственная роль которого состоит в качестве наполнителя текстом тех областей, в которых в последствии предполагается располагать осмысленный контент.

В процессе верстки такого текста у верстальщика естественно нет такого контента. Но он ему и не нужен. Для него главное создать полную копию макета и заполнить каким-либо текстом.

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

Помимо двух указанных источников, существует так называемая классическая “рыба”. Это текст на латинском языке, начинающийся со слов “Lorem ipsum dolor sit amet”.

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

В Интернете имеется достаточное количество сайтов, являющихся генераторами подобного текста. К примеру, популярный сайт Lipsum.com.

Однако, для распространенного блокнота программистов Notepad++ имеется плагин, который также является генератором Lorem ipsum. Название плагина именно такое - “Lorem Ipsum”. Устанавливается плагин через менеджер плагинов “Plugin Manager”.

После установки плагин прописывается в меню “Плагины - InsertLoremIpsum - View Insert Dialog”. При его активации открывается диалоговое окно в правой части:

Управление “LoremIpsum” минималистичное, но что называется - все по делу.

В верхнем окошке устанавливается число (по умолчанию оно равно 5), являющееся счетчиком слов, предложений или параграфов, которые будут вставлены в тело кода.

Следующие за ним три строки:

• 1

  words

  (слова)

• 1

  sentences

  (предложения)

• 1	paragraphs

  (параграфы)

… являются радиопереключателями, с помощью которых можно выбрать, что необходимо вставлять в код - слова, предложения или параграфы.

Флажок “Start with Lorem ipsum” задает условие, при котором каждый набор слов, предложения или параграфы начинаются с Lorem ipsum. И в самом низу расположена кнопка “Insert”, предназначение которой очевидно - вставить выбранный набор слов, предложений или параграфов в код html-документа.

Перейдем от слов к делу и на практике вставим “рыбу”.

Вставляем 4 слова. Устанавливаем в окне счетчика число 4, выбираем радиопереключатель в положение words. Чтобы вставляемые записи не повторялись, убираем галочку

1

checkbox

Устанавливаем курсор мыши в то место html-кода, куда необходимо поместить “рыбу” и нажимаем кнопку “Insert”:

Вставим 3 предложения. Устанавливаем счетчик в значение

1

3

1

sentences

Устанавливаем курсор мыши в то место html-кода, куда необходимо поместить “рыбу”. Жмем на “Insert”:

Вставляем 1 параграф. Устанавливаем счетчик в значение 1. Переводим радиокнопку в положение

1

paragraphs

Заключение

Как мне кажется, использование плагина “LoremIpsum”, встроенного в Notepad++, более удобно, чем сторонние источники, типа сайтов-генераторов. Удобство заключается в том, что все “под рукой”. В любой момент можно открыть диалоговое окно вставки “рыбы” и произвести практически моментальное наполнение содержимым.

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

На этом все.