Создание дизайна сайта с помощью Inkscape
0

Создание дизайна сайта с помощью Inkscape

Среди веб-дизайнеров уже несколько лет идут дебаты, в чем лучше создавать макеты сайтов, в растровых редакторах или в векторных. Оба метода имеют как преимущества так и недостатки и в какой из них выбрать зависит лично от предпочтений того или иного дизайнера.

Довольно долгое время я создавал макеты в Adobe Photoshop, но потом открыл для себя, что в векторных редакторах работать гораздо удобнее.

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

На создание макета в векторном редакторе у меня уходит меньше времени чем на создание его в Photoshop.

Сейчас я создаю макеты в Inkscape. Это, пожалуй, лучший свободный векторный редактор, подходящий для этой цели.

В этой статье я хочу рассказать чем нужно руководствоваться, создавая макеты в Inkscape. Разберем следующие моменты:

1. Создавайте макет в масштабе 1:1
Сразу же переведите редактор в нужные нам единицы измерения — пиксели. И задайте размер рабочего пространства соответствующий размеру будущего сайта. Это позволит вам избежать путаницы с масштабом. И обеспечит точную картину.

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

Но если мы выполним экспорт нашего макета, скажем, в растровый формат, мы увидим, что линии уже не будут такими четкими как мы видели на экране.

rasterising3

Здесь мы видим координаты и размеры прямоугольника, изображенного ниже. Рядом приведен увеличенный фрагмент прямоугольника, из которого видно, что линия, толщиной в 1 пиксел не попадает четко в координатную сетку, что при выводе в растр даст толщину линии в 2 пиксела.

rasterising1

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

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

rasterising4

rasterising2

Здесь мы видим, что прямоугольник и его размеры выставлены правильно относительно координатной сетки. При выводе данного изображения в растр мы получим четкое изображение.

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

Зберегти

Картинка профиля Косареков Иван

Косареков Иван

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

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

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.