В этом уроке я покажу, как при помощи Inkscape достаточно быстро нарезать отдельные части макета для будущего веб-сайта. Основной смысл урока — показать, как можно разметить изображение таким образом, чтобы без труда можно было сохранять в отдельности любую из ее частей в виде отдельного изображения (с целью дальнейшего размещения этих отдельных изображений в структуре html-страницы).
Урок включает в себя 9 простых шагов, использовалась версия Inkscape 0.46.
Открываем в Inkscape исходное изображение, которое нам нужно нарезать.
Изменяем размер документа в окне свойств документа Shift+Ctrl+D — выставляем значения ширины и высоты по размеру исходного изображения, в нашем примере это соответственно 800px и 600px. Выравниваем исходное изображение относительно страницы при помощи диалога выравнивания (Shift+Ctrl+A).
Наверняка Вы уже и сами поняли назначение каждого элемента, но на всякий случай поясню немного:
Header — Шапка сайта, здесь обычно располагается логотип, возможно еще какое-то изображение, могут также быть другие вспомогательные элементы.
Navigation — Элементы навигации, в данном случае это вероятнее всего горизонтальное меню для навигации по сайту.
Middle — Центральная часть — основная часть сайта, здесь располагается непосредственно контент сайта (статьи и прочее).
Footer — Подвал, здесь обычно расположены копирайты и другая вспомогательная информация.
После того, как приведенная выше часть макета готова, создаем в Inkscape новый слой, можем назвать его к примеру slice. По-умолчанию в Inkscape новый слой автоматически становится активным. Чтобы случайно не переключиться в первый слой, мы можем переключиться на панель Слои (Shift+Ctrl+L) и нажать на значок замка напротив первого слоя, чтобы запереть его, после чего вернуться к редактированию второго слоя.
Создаем во втором (незапертом) слое прямоугольник (F4), назначаем ему желтый цвет (или любой другой на Ваш выбор) и снижаем непрозрачность примерно до половины (все это можно сделать в диалоговом окне по Ctrl+Shift+F).
Задаем этому прямоугольнику размер области Header, в нашем примере это 800x160px. При помощи диалога выравнивания (Shift+Ctrl+A) размещаем этот прямоугольник вверху страницы по центру.
Не снимая выделения с желтого прямоугольника, создаем его дубликат (Ctrl+D) и назначаем ему размер области Navigation, в нашем примере это 800x70px. Возвращаемся к диалогу выравнивания (Shift+Ctrl+A) и выравниваем второй прямоугольник таким образом, чтобы он прилегал к нижней части первого. Это можно сделать, выделив с зажатой клавишей Shift первый прямоугольник (и не снимая при этом выделения со второго прямоугольника), а затем произвести выравнивание, но на этот раз не относительно страницы, а относительно последнего выделенного элемента.
Повторяем шаг 4 нашего урока, только теперь создаем прямоугольник размером 800x30px и выравниваем его относительно второго прямоугольника (это будет Middle).
Теперь дублируем второй созданный прямоугольник (Navigation) и помещаем его в самый низ страницы (это будет Footer).
Для удобства можем изменить идентификатор каждого из созданных прямоугольников на что-то более осмысленное. Это можно сделать, вызвав диалог свойст объекта (Shift+Ctrl+O).
Теперь по очереди выделяем наши прямоугольники и снижаем значение непрозрачности для каждого из них до 0 (делаем их полностью прозрачными при помощи диалогового окна по Ctrl+Shift+F). В итоге все элементы в нашей структуре разметки станут полностью прозрачными.
Теперь выделяем наш первый прямоугольник (Header) и выбираем в меню Inkscape Файл → Экспортировать (Shift+Ctrl+E). Открывается диалоговое окно экспорта. В этом окне мы задаем имя и путь файла. Кстати говоря, в качестве имени файла автоматически подставляется заданный нами идентификатор, так что имело смысл задавать элементам осмысленные названия.
Обратите внимание, чтобы в поле Экспортируемая область было активно значение Выделение. В этом случае в качестве отдельного изображения сохраняется именно тот участок изображения, который находится под нашим прозрачным прямоугольником. Жмем на кнопку Экспорт внизу окна — и получаем по указанному нами адресу файл изображения в формате png. То же самое выполняем с остальными элементами страницы (в нашем случае это второй, третий и четвертый прямоугольники).
Все, нарезка завершена, урок тоже. Теперь нам остается, используя любой текстовый или визуальный редактор, связать сохраненные нами элементы в едином html-коде.
На сайте 960.gs можно скачать заготовки для колоночной верстки макетов.
Там присутствуют 3 svg-файла для 12-ти, 16-ти и 24-колоночной верстки. Там они правда упакованы в архив с множеством других файлов, предназначенных для открывания в других программах. Если не хотите качать оттуда весь архив, можете скачать у меня облегченную версию архива (всего 4 Кб) только с этими 3-мя svg-файлами.
pilotmaks, спасибо за наводку! 🙂
В начале можно использовать пустую заготовку-шаблон, уже размеченную под блоки (x)html с помощью чудного проекта http://960.gs/ (см.внимательно, там есть template для Inkscape), потом делаем с дизайном ориентируясь на эту статью, потом режем изображения… И вуаля, у нас уже есть готовый хорошо свёрстанный макет, куда эти изображения вставлять — (скачанный с того же сайта).
pilotmaks, спасибо за наводку 🙂
Про колоночную верстку и сайт 960.gs я знал давно, но не обращал внимания, что у них там есть svg-шаблоны.
Добавил информацию об этом в конец урока.
Пожалуйста! 🙂 Спасибо за статью. Для меня было приятной неожиданностью, что в Inkscacpe есть возможность нарезки макета на slices (куски для вэба), и это более продвинуто чем в Gimp.
Как раз только что общался с человеком по поводу засилья растровых редакторов. Многие операции, которые легче (и перспективней с точки зрения дальнейшего масштабирования ) делать в векторе, многие почему-то упорно продолжают делать в растре. Видимо, немалую роль в этом сыграла могучая компания Adobe с ее не менее могучим редактором Photoshop, который, как следует из названия, первоначально был довольно узкоспециализированным, но потом превратился в комбайн для всего и вся.
Что еще за человек? Браузеры не работают с векторной графикой, кроме костылей и Adobe Flash. Многие операции как раз проще сделать в фотошопе и там же его монтаж. А ввиду данной статьи, даже нет нормального инструмента Slice, который есть в фотошопе. Не надо лялякать тут {censored}. Гимп убог, Инкскейп недорос до нужного состояния. Не знаю никого кто делает сайты и серьезный коммерческий дизайн в Гимпе или Инкскейпе. А примеры работ в интернете говорит об ущербности опенсорцевых редакторов и кто в них работает.
Собственно, гимп убог, а инкскейп не дорос — это не причина, а следствие.
Ух, как резко… Откуда столько злобы? 🙂
Браузеры не работают с векторной графикой?
Википедия говорит:
А К.О. подсказывает, что SVG является дефолтным форматом хранения данных в Inkscape. По-моему, все достаточно очевидно.
Чисто риторический вопрос) Господин Erwin оплатил Фотожоп и проповедует его использование? Или крякнул и ратует за воровство?
Статья конечно полезная, но какая-то стрёмная)) Уже несколько раз наткнулся на неё. Автор, ты бы сам написал ченить на эту тему… ато очень уж неправдоподобно смотрится… такое впечетления что даже скрины не твои). Вывод: ты того что написано от а до я не делал! (хотя я чтот не вижу ссылку на источник)
А так — хорошая пища для размышлений.
DeburgER, все что здесь написано я делал «от а до я» и все работает четко как описано в статье. Не понимаю, что не так-то?
Прости, я наверное слишком резко выразился и ты не понял суть))
Я не говорю что что-то не так… все отлично работает… просто урок не авторский (то есть не твой), я всего лишь предлагал что-нибудь новое добавить в этот урок… от себя, так сказать от автора статьи) … а-то этот заезженный урок еще с версии инкскейпа 0.45. Уже где только его нету))
Если имеется ввиду, что урок откуда-то скопипащен — то точно могу сказать, что это не так — каждое слово в этой статье написано мной.
Ну а с тем, что подход не новый, я и не спорю. Сам я этот подход не изобретал, а статью написал после просмотра одного англоязычного видеоролика.
Да копипасти себе на здоровье! 🙂 Я не о том. Давай по пунктам 😛
— урок старый (хоть и полезный, это не претензия) 🙂
— урок не твой (ну или идея, это тоже не претензия) 🙂
Вывод:
А почему-бы автору не написать нормальный, глубокий урок на эту же тему, только с учетом новых возможностей редактора и на практическом примере, а не на убитом и нигде не применимом макете сайта образца "96 года.
Без обид… просто конструктивное предложение 😉
П.С.: Удачи. Прикольный сайтик тут. Можно сказать, я им вдохновился )