Нарезка макета веб-страницы в 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, спасибо за наводку! 🙂


Оставить комментарий

13 комментариев на «“Нарезка макета веб-страницы в Inkscape”»

  1. В начале можно использовать пустую заготовку-шаблон, уже размеченную под блоки (x)html с помощью чудного проекта http://960.gs/ (см.внимательно, там есть template для Inkscape), потом делаем с дизайном ориентируясь на эту статью, потом режем изображения… И вуаля, у нас уже есть готовый хорошо свёрстанный макет, куда эти изображения вставлять – (скачанный с того же сайта).

    • pilotmaks, спасибо за наводку 🙂
      Про колоночную верстку и сайт 960.gs я знал давно, но не обращал внимания, что у них там есть svg-шаблоны.
      Добавил информацию об этом в конец урока.

      • Пожалуйста! 🙂 Спасибо за статью. Для меня было приятной неожиданностью, что в Inkscacpe есть возможность нарезки макета на slices (куски для вэба), и это более продвинуто чем в Gimp.

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

    • Что еще за человек? Браузеры не работают с векторной графикой, кроме костылей и Adobe Flash. Многие операции как раз проще сделать в фотошопе и там же его монтаж. А ввиду данной статьи, даже нет нормального инструмента Slice, который есть в фотошопе. Не надо лялякать тут {censored}. Гимп убог, Инкскейп недорос до нужного состояния. Не знаю никого кто делает сайты и серьезный коммерческий дизайн в Гимпе или Инкскейпе. А примеры работ в интернете говорит об ущербности опенсорцевых редакторов и кто в них работает.

      • Ух, как резко… Откуда столько злобы? 🙂

        Браузеры не работают с векторной графикой?

        Википедия говорит:

        SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML.

        А К.О. подсказывает, что SVG является дефолтным форматом хранения данных в Inkscape. По-моему, все достаточно очевидно.

      • Чисто риторический вопрос) Господин Erwin оплатил Фотожоп и проповедует его использование? Или крякнул и ратует за воровство?

  3. Статья конечно полезная, но какая-то стрёмная)) Уже несколько раз наткнулся на неё. Автор, ты бы сам написал ченить на эту тему… ато очень уж неправдоподобно смотрится… такое впечетления что даже скрины не твои). Вывод: ты того что написано от а до я не делал! (хотя я чтот не вижу ссылку на источник)
    А так – хорошая пища для размышлений.

    • DeburgER, все что здесь написано я делал «от а до я» и все работает четко как описано в статье. Не понимаю, что не так-то?

      • Прости, я наверное слишком резко выразился и ты не понял суть))
        Я не говорю что что-то не так… все отлично работает… просто урок не авторский (то есть не твой), я всего лишь предлагал что-нибудь новое добавить в этот урок… от себя, так сказать от автора статьи) … а-то этот заезженный урок еще с версии инкскейпа 0.45. Уже где только его нету))

        • Если имеется ввиду, что урок откуда-то скопипащен — то точно могу сказать, что это не так — каждое слово в этой статье написано мной.

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

          • Да копипасти себе на здоровье! 🙂 Я не о том. Давай по пунктам 😛

            – урок старый (хоть и полезный, это не претензия) 🙂
            – урок не твой (ну или идея, это тоже не претензия) 🙂

            Вывод:
            А почему-бы автору не написать нормальный, глубокий урок на эту же тему, только с учетом новых возможностей редактора и на практическом примере, а не на убитом и нигде не применимом макете сайта образца "96 года.
            Без обид… просто конструктивное предложение 😉

            П.С.: Удачи. Прикольный сайтик тут. Можно сказать, я им вдохновился )

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *