Нарезка макета веб-страницы в Inkscape

В этом уроке я покажу, как при помощи Inkscape достаточно быстро нарезать отдельные части макета для будущего веб-сайта. Основной смысл урока — показать, как можно разметить изображение таким образом, чтобы без труда можно было сохранять в отдельности любую из ее частей в виде отдельного изображения (с целью дальнейшего размещения этих отдельных изображений в структуре html-страницы).

Урок включает в себя 9 простых шагов, использовалась версия Inkscape 0.46.

Урок по нарезке веб-страницы в Inkscape
1

Открываем в Inkscape исходное изображение, которое нам нужно нарезать.

Открываем в Inkscape исходное изображение

Изменяем размер документа в окне свойств документа Shift+Ctrl+D — выставляем значения ширины и высоты по размеру исходного изображения, в нашем примере это соответственно 800px и 600px. Выравниваем исходное изображение относительно страницы при помощи диалога выравнивания (Shift+Ctrl+A).

Изменяем размер документа и выравниваем изображение

Наверняка Вы уже и сами поняли назначение каждого элемента, но на всякий случай поясню немного:
HeaderШапка сайта, здесь обычно располагается логотип, возможно еще какое-то изображение, могут также быть другие вспомогательные элементы.
NavigationЭлементы навигации, в данном случае это вероятнее всего горизонтальное меню для навигации по сайту.
MiddleЦентральная часть — основная часть сайта, здесь располагается непосредственно контент сайта (статьи и прочее).
FooterПодвал, здесь обычно расположены копирайты и другая вспомогательная информация.

Назначения элементов на макете веб-страницы
2

После того, как приведенная выше часть макета готова, создаем в Inkscape новый слой, можем назвать его к примеру slice. По-умолчанию в Inkscape новый слой автоматически становится активным. Чтобы случайно не переключиться в первый слой, мы можем переключиться на панель Слои (Shift+Ctrl+L) и нажать на значок замка напротив первого слоя, чтобы запереть его, после чего вернуться к редактированию второго слоя.

3

Создаем во втором (незапертом) слое прямоугольник (F4), назначаем ему желтый цвет (или любой другой на Ваш выбор) и снижаем непрозрачность примерно до половины (все это можно сделать в диалоговом окне по Ctrl+Shift+F).

Создаем в Inkscape новый слой и прямоугольник в нем

Задаем этому прямоугольнику размер области Header, в нашем примере это 800x160px. При помощи диалога выравнивания (Shift+Ctrl+A) размещаем этот прямоугольник вверху страницы по центру.

Задаем прямоугольнику размер и выравниваем его
4

Не снимая выделения с желтого прямоугольника, создаем его дубликат (Ctrl+D) и назначаем ему размер области Navigation, в нашем примере это 800x70px. Возвращаемся к диалогу выравнивания (Shift+Ctrl+A) и выравниваем второй прямоугольник таким образом, чтобы он прилегал к нижней части первого. Это можно сделать, выделив с зажатой клавишей Shift первый прямоугольник (и не снимая при этом выделения со второго прямоугольника), а затем произвести выравнивание, но на этот раз не относительно страницы, а относительно последнего выделенного элемента.

5

Повторяем шаг 4 нашего урока, только теперь создаем прямоугольник размером 800x30px и выравниваем его относительно второго прямоугольника (это будет Middle).

Повторяем шаг 4 урока, выравниваем прямоугольник
6

Теперь дублируем второй созданный прямоугольник (Navigation) и помещаем его в самый низ страницы (это будет Footer).

7

Для удобства можем изменить идентификатор каждого из созданных прямоугольников на что-то более осмысленное. Это можно сделать, вызвав диалог свойст объекта (Shift+Ctrl+O).

Меняем идентификаторы прямоугольников
8

Теперь по очереди выделяем наши прямоугольники и снижаем значение непрозрачности для каждого из них до 0 (делаем их полностью прозрачными при помощи диалогового окна по Ctrl+Shift+F). В итоге все элементы в нашей структуре разметки станут полностью прозрачными.

Делаем прямоугольники полностью прозрачными с помощью диалога Inkscape
9

Теперь выделяем наш первый прямоугольник (Header) и выбираем в меню Inkscape Файл → Экспортировать (Shift+Ctrl+E). Открывается диалоговое окно экспорта. В этом окне мы задаем имя и путь файла. Кстати говоря, в качестве имени файла автоматически подставляется заданный нами идентификатор, так что имело смысл задавать элементам осмысленные названия.

Обратите внимание, чтобы в поле Экспортируемая область было активно значение Выделение. В этом случае в качестве отдельного изображения сохраняется именно тот участок изображения, который находится под нашим прозрачным прямоугольником. Жмем на кнопку Экспорт внизу окна — и получаем по указанному нами адресу файл изображения в формате png. То же самое выполняем с остальными элементами страницы (в нашем случае это второй, третий и четвертый прямоугольники).

Урок окончен, все элементы экспортированы и сохранены в качестве отдельных изображений

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

Update

На сайте 960.gs можно скачать заготовки для колоночной верстки макетов.
Там присутствуют 3 svg-файла для 12-ти, 16-ти и 24-колоночной верстки. Там они правда упакованы в архив с множеством других файлов, предназначенных для открывания в других программах. Если не хотите качать оттуда весь архив, можете скачать у меня облегченную версию архива (всего 4 Кб) только с этими 3-мя svg-файлами.
pilotmaks, спасибо за наводку! 🙂