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

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

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

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

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

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

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

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

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

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

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