Глава 1 Понятие «Векторная графика».
Векторная графика описывает изображения с использованием прямых и изогнутых линий, называемых векторами, а также параметров, описывающих цвета и расположение. Например, изображение древесного листа описывается точками, через которые проходит линия, создавая тем самым контур листа. Цвет листа задается цветом контура и области внутри этого контура. (прил.1)
При редактировании элементов векторной графики изменяются параметры прямых и изогнутых линий, описывающих форму этих элементов. Можно переносить элементы, менять их размер, форму и цвет, но это не отразится на качестве их визуального представления. Векторная графика не зависит от разрешения, т.е. может быть показана в разнообразных выходных устройствах с различным разрешением без потери качества.
Векторный графический объект включает два элемента: контур и его внутреннюю область, которая может быть пустой или иметь заливку в виде цвета, цветового перехода (градиента), или мозаичного рисунка. Контур может быть как замкнутым, так и разомкнутым. В векторном объекте он выполняет двойную функцию. Во-первых, с помощью контура можно менять форму объекта. Во-вторых, контур векторного объекта можно оформлять (тогда он будет играть роль обводки), предварительно задав его цвет, толщину и стиль линии.
Под стилем оформления линии подразумевается набор штрихов и полосок, из которых она состоит, а также параметры этой линии в точках перегиба и на концах. Любое векторное изображение можно представить в виде набора векторных объектов, расположенных определенным образом друг относительно друга. Векторное изображение можно сравнить с аппликацией, состоящей из кусочков цветной бумаги, наклеенных (наложенных) один на другой. Однако, в отличие от аппликации, в векторном изображении легко менять форму и цвет составных частей.
Таким образом, векторная графика в основном «живет» созданием новых объектов, широко используется в дизайнерских проектах.
Ве́кторная графика — это использование геометрических примитивов, таких как точки, линии, сплайны и многоугольники, для представления изображений в компьютерной графике. Термин используется в противоположность к растровой графике, которая представляет изображения как матрицу пикселей (точек).
Простые геометрические формы
Речь о квадрате, круге, линиях, многоугольниках — чаще всего, конечно, они используются не сами по себе, а в сочетании с пентулом. Рисование с помощью геометрических фигур подходит тем, кто любит геометричность в картинках, кайфует от четких форм и минимума точек на путях 
Раньше я использовала формы только для каких-то очевидных действий — например, делала глаза персонажу с помощью круга, или каркас дома с помощью квадрата.
Посмотрев курс Illustration for Designers: Create Your Own Geometric Animal (Иллюстрация для дизайнеров: Создайте свое собственное геометричное животное) на Skillshare я переосмыслила роль форм в картинках и мне стало интересно научиться видеть формы в объектах. Так родилась серия животных, которую я скоро планирую продолжить:
Плюсы и минусы рисования формами:
+ Линии получаются идеальными, не нужно думать о том, куда поставить точку и как потянуть за ручку
— Перестроиться на «мышление формами» большинству людей очень сложно
— Все равно придется использовать дополнительные инструменты — пентул, панель пасфайндер или шейп билдер тул
Примерно 80% моих текущих картинок нарисованы плагином InkScribe — тот самый аналог пентула от Astute Graphics, о котором я уже говорила (я, кстати, планирую написать отдельный пост про астутовские плагины, как только меня перестанет пугать потенциальный размер этого поста).
Остальные 20% — это трейс, простые формы и иногда — Dynamic Sketch Tool. Это что-то вроде карандаша, только более аккуратный и с большим количеством настроек (опять же, астутовский).
Каким инструментом будет удобнее/быстрее рисовать лично вам кроме вас никто решить не сможет. Поэтому мой главный совет — пробуйте их все, применяйте для разных картинок, разных стилей, в разных ситуациях и не позволяйте чужому мнению на вас влиять. Потому что для кого-то блоб браш всех прекраснее и милее, а кому-то, чтобы рисовать крутые картинки, и планшет не нужен — справляются мышкой и пентулом.
Фото на обложке: ShutterStock
Как из растра сделать вектор в Фотошопе
Хоть Photoshop и является редактором растровой графики, в его арсенале имеются инструменты для создания векторных иллюстраций. Shapes (Фигуры) и Pen Tool (Перо). С их помощью можно создавать полноценные векторные картинки. В этом можно убедиться, изучив статью «Векторные изображения в Photoshop – как рисовать»
В тоже время в программе не так много возможностей для того, чтобы перевести растр в вектор. А понадобиться это может, например, если вы хотите преобразовать нарисованный на бумаге логотип или креативный текст в цифровой вид и использовать его в дальнейшей работе.
Фотошоп позволяет быстро трассировать рисунок, если он выполнен в одном цвете.
Разберемся, как это сделать.
С помощью выделения
Откройте в Photoshop изображение, которое хотите перевести в вектор. Например, вот такой каллиграфичный рисунок.
Изображение, нарисованное от руки. Источник – behance.net
Выделите надпись с помощью инструмента Magic Tool (Волшебная палочка) или любого другого известного вам способа
Выделение с помощью инструмента «Волшебная палочка»
Если какая-то область картинки не выделилась после одного щелчка по изображению – зажмите клавишу Shift и кликайте по нужным областям, до тех пор, пока объект не будет выделен полностью. Так работает булева операция «сложение». Если, наоборот, выделилось лишнее, используйте клавишу Alt.
Оставив активным все тот же инструмент «Волшебная палочка», щелкните правой клавишей мыши по выделенной области и в контекстном меню выберите пункт Make Work Path (Преобразовать в рабочий контур). Значение Tolerance выставите в 1 пиксель, когда вас попросит программа.
Будет создан векторный контур, который вы сможете увидеть на панели Paths.
Векторный контур, созданный на основании выделения
Теперь выберите Layer – New Fill Layer – Solid Color (Слой — Новый заполненный слой — Заливка цветом), задайте имя Vector. И выберите любой цвет. В результате будет создан заполненный цветом слой с векторной маской нашего контура.
Преобразование растра в вектор
Таким образом, мы перевели растровое изображение в векторное и можем использовать все преимущества данного формата.
Речь пойдет о разработке бренда Orange Box. Мы уже знакомились с их бесплатными плагинами для увеличения резкости фото и преобразования изображении в масляную живопись.
Плагин Pixel2Vector работает по тем же принципам, что описаны в предыдущем пункте. Только он автоматизирует их и делает процесс быстрее.
Как и в ранее рассмотренных статьях, сначала нужно поставить предустановочную коробку FXBox, а затем подключить бесплатный плагин.
Инструкция для этого есть на странице разработчика.
Пример работы плагина Pixel2Vector
Этот плагин, так же как и в первом случае, хорошо работает с одноцветными слоями на прозрачном фоне. Использовать его можно, например, для трассировки нарисованных кистью в Photoshop фигур и полноценных изображений. Если штрихи каждого цвета находятся на разных слоях, как на примере ниже.
Пример многослойной трассировки в Фотошоп
Иногда для преобразования растра в вектор требуются более легкие решения, не требующие установки тяжеловесных программ. Поговорим о них подробнее.
Как преобразовать растровое изображение в векторное в программе CorelDraw
Всю компьютерную графику можно разделить на две больших группы — растровую и векторную . Обеспечивая высокую точность передачи цветов, растровые изображения используются в вебе, в фотографии и при создании полноцветных рисунков, обладающие высокой точностью прорисовки и способностью масштабироваться без потери качества, изображения векторные находят широкое применение в полиграфии, компьютерном дизайне и проектировании.
Растровые изображения создаются в растровых графических редакторах, векторные — в векторных, также существует возможность перевода вектора в растр и наоборот.
Процедура преобразования растрового изображения в векторное называется векторизацией или трассировкой. Выполнить ее можно в Adobe Illustrator, Vector Magic, а также в CorelDraw — профессиональном векторном графическом редакторе. Как и в других подобных программах, трассировка в CorelDraw может быть выполнена в автоматическом и ручном режимах. Ручной режим в свою очередь предлагает два метода трассировки — по центральной линии и абрисом. Векторизация по центральной линии подходит для преобразования черно-белых иллюстраций, в том числе технических, различных карт, штриховых рисунков, подписей и т.п., трассировка абрисом используется при преобразовании в вектор логотипов, изображений низкого и высокого качества, а также черно-белых штриховых рисунков.
Поскольку CorelDraw не открывает растровую графику напрямую, создайте в редакторе новый файл.
И только потом в меню «Файл» выберите «Импортировать».
Размер создаваемого файла выставьте тот же что и у импортируемого растрового изображения или больше, режим основного цвета и профиль выберите RGB , разрешение оставьте 300 точек на дюйм.
Выделив загруженное в программу изображение, выберите в меню Растровые изображения -> Трассировка абрисом.
Окончательный метод выбираем по требованию.
Если вам нужно получить наиболее качественную и реалистичную картинку, выберите опцию «Изображение высокого качества», а когда файл будет обработан, увеличьте детализацию до максимума.
Если необходимо скрыть мелкие детали, имеет смысл использовать метод «Изображение низкого качества».
Средний по качеству результат вы получите, если отдадите предпочтение методам «Картинки», «Логотип» или «Подробный логотип».
На этом процедуру трассировки можно считать завершенной, останется только сохранить файл в одном из векторных форматов.
Преимущества и недостатки векторной графики
Векторная графика сильно отличается от растровой. Она не состоит из пикселов. Для создания картинки используются вычисления, координаты. При помощи опорных точек и кривых Бизье создаются геометрические фигуры. Векторное изображение, это, по сути, набор геометрических фигур, соединенных между собой.
При увеличении картинки компьютер знает каким цветом заполнить расстояние между точками, в отличие от растрового изображения.
Минусом векторной графики является отсутствие возможности применения сложных цветовых схем, теней, градиентов, не получится создать фотореалистичные изображения. Возникают трудности с редактированием и просмотром векторных изображений в «не родных» программах и приложениях.
Плюсом векторной графики называют то, что вес векторных изображений в разы меньше, а масштабировать их можно до бесконечности, не теряя качества. К тому же векторные файлы легче редактировать, чем растровые.
Важно! Векторные изображения с легкостью можно конвертировать в растровые, но не наоборот. Этот вид графики используется для создания логотипов, визиток, иконок, шрифтов, рекламных баннеров, билбордов, технических чертежей, вышивок, карт. Этот вид графики используется для создания логотипов, визиток, иконок, шрифтов, рекламных баннеров, билбордов, технических чертежей, вышивок, карт
Этот вид графики используется для создания логотипов, визиток, иконок, шрифтов, рекламных баннеров, билбордов, технических чертежей, вышивок, карт.
Распространенными программами для работы с векторной графикой являются Adobe Illustrator, Corel Draw. Форматы векторных изображений: PDF, AI, SVG, EPS, CDR. Формат SVG стал широко использоваться в веб дизайне, его стали поддерживать многие современные браузеры.
Дизайнеры в работе часто смешивают векторную и растровую графику. Такой гибридный вариант помогает найти оптимальное решение при создании изображений.
Важно! Большинство устройств вывода, включая точечные матричные принтеры, лазерные принтеры и мониторы отображения, являются растровыми устройствами (исключение составляют широкоформатные принтеры). Это означает, что все объекты, даже векторная графика, должны быть переведены в битовые карты (или растеризованы) до вывода. В итоговой таблице сравнения представлены все плюсы и минусы растровой и векторной графики. В итоговой таблице сравнения представлены все плюсы и минусы растровой и векторной графики
В итоговой таблице сравнения представлены все плюсы и минусы растровой и векторной графики.
TraceIT
Производитель: Pangolin Laser Systems, Inc.
Ссылка: http://www.pangolin.com/LA_Studio/TraceIT.htm
TraceIT — довольно интересная программа, использующая оригинальные алгоритмы трассировки (рис. 1). Загруженное в нее изображение сначала подвергается обработке фильтрами для очистки от «мусора» (noise, color noise), после чего уже трассируется.
Интересная особенность — помимо обработки изображений в распространенных форматах BMP, GIF, TIF, JPG, PSD и пр., есть возможность загружать видеофайлы в форматах AVI, MOV или MPEG и обрабатывать только выбранные кадры, какойлибо диапазон или весь видеофайл целиком. Сохранить результат можно в десяток форматов, в том числе в BMP, JPG и EMF.
Рис . 1. TraceIT
Макет в векторе: что это значит
Современные производства и дизайнеры, работающие с рекламными материалами, не могут обходиться без векторных изображений. Они удобны для разработки оптимальных решений и корректировки цветов в соответствии с цветовыми понтонами, используемыми в плоттерах или иных профессиональных печатающих устройствах. Начинающие полиграфисты должны знать основы создания макета в векторе, что это такое. Указанный вид файла является математической моделью, соответствующей рисунку, обрабатываемому специальными редакторами.
В отличие от растровой графики, изображение в векторе не состоит из мелких элементов наподобие пазла, а является совокупностью линий (в математике — лучей). В данном случае изображение состоит из линий, связанных между собой точками или замкнуты в рамках математических формул, которыми они описываются. Пространство между этими линиями залито определенным цветом, если изображение цветное.
При работе с растровой графикой важно иметь под рукой профессиональные качественные и стильные шаблоны на любой случай. В этом дизайнерам помогает онлайн редактор Canva. С пакетом ПРО доступны уникальные шаблоны, которые можно подредактировать и сразу отправить в печать с помощью Canva Print
С пакетом ПРО доступны уникальные шаблоны, которые можно подредактировать и сразу отправить в печать с помощью Canva Print.
Макет в векторе имеет синоним — макет в кривых или изображение в кривых (шрифт в кривых).
Макет в кривых способствует осуществлению привязки редактора изображения и печатающего оборудования к точке отсчета, выполнению заданных работ, к примеру, резки по контуру. С его помощью можно изменять цвет, соответствующий всему рисунку, причем одним движением. Данный формат эффективен для использования адаптивного рисунка для интернет ресурсов.
В полиграфии актуальным остается вопрос: макет в кривых — что это значит? Дизайнерам давно понятны преимущества данного формата. Дело в том, что подобная версия файла отличается малым весом в отличие от растрового варианта. Размер, свойственный векторному файлу, никак не связан с физическим размером и содержанием рисунка, что существенно для передачи посредством онлайн коммуникаций.
Макет в кривых: что это, такого вопроса не услышишь в современном рекламном агентстве либо издательстве. Он необходим для работы со многими технологическими операциями и расширениями, так как отличается универсальностью, безграничными возможностями, обусловленными масштабированием с полным сохранением качества.
Растровая графика
Растровая графика – это графика, которая образуется из большого количества маленьких цветных прямоугольников – пикселей.
Пример растровой графики
Качество такой графики зависит от того, сколько пикселей размещено на 1 дюйме изображения (2,54 см). Этот параметр называется разрешением и измеряется в dpi (точки на дюйм) или ppi(пиксели на дюйм)
Dpi и ppi обозначают одно и тоже. Только первый показатель используется для устройств, а второй для картинок.
Посмотреть, какое разрешение у фотографии в Photoshop можно, вызвав пункт меню Image – Image Size (Изображение – размер изображения)
Окно Image Size в Фотошопе
Естественно, чем больше разрешение, тем более качественным и детализированным выглядит графика.
Для размещения изображений в интернете будет достаточно 70 ppi, и весить они будут немного. А вот для печати лучше, чтобы разрешение было около 300 ppi. Но и весить такой документ будет немало.
Растровая графика – это, как правило, фотографии и их производные. А также результаты цифровой живописи, созданные в программах для растровой графики.
Примеры форматов растровой графики:
- JPG
- PNG
- TIFF
- GIF и другие
Самым мощным редактором растровой графики является Photoshop, но есть и его конкуренты и аналоги, такие как: Gimp, Paint, Procreate и другие.
Растровая графика используется в таких дизайнерских продуктах как:
- Сайты и мобильные приложения в определенных стилях
- Фотографии и фотоколлажи
- Цифровая живопись
- Презентации и многое другое
Примеры растровой графики
Обратите внимание на портрет девушки слева в коллаже. Это пример вексельной графики, имитирующий векторное изображение
Что такое векторное изображение?
Векторное изображение — это масштабируемое изображение, состоящее из значений, а не пикселей.
Большинство изображений, найденных в Интернете, представляют собой растровые изображения (см. Пояснения к различным типам файлов.
JPEG, GIF или PNG? Типы файлов изображений объяснены и протестированы
JPEG, GIF или PNG? Типы файлов изображений объяснены и протестированы Знаете ли вы различия между JPEG, GIF, PNG и другими типами файлов изображений? Знаете ли вы, когда следует использовать один вместо другого? Не бойся, MakeUseOf все объясняет! Прочитайте больше
). Растровые изображения используют квадратные пиксели (биты цвета) для передачи изображения. Векторная графика передает цвет с помощью масштабируемых цветных полигонов. Поскольку векторные изображения используют динамические цветовые сечения, а не статические квадраты, они обеспечивают идеальные линии и четкие цвета.
Геометрия, которая включает векторные изображения, является формульной, что делает их независимыми от разрешения. Это означает, что изображения не теряют качества при увеличении или уменьшении, поскольку цветные полигоны в векторном изображении всегда сохраняют свою форму. То же самое не относится к растровым изображениям, поскольку информация о цвете этих изображений растягивается при масштабировании.
Как только вы узнаете, как преобразовать файл JPG в вектор в Adobe Illustrator, вы сможете масштабировать все, что найдете, до нужного размера без потери качества изображения.
Inkscape
Inkscape — нужен мощный и бесплатный векторный редактор. В вашем распоряжении богатая палитра, пипетка для выбора цвета, копирование/вставка стиля, текстурная заливка, редактор контурных эффектов, пунктирная обводка и редактор градиентов. Для манипуляции с объектами используются операции с Z-порядком (подъем и опускание слоев), группировка объектов и слоев, а также выравнивание и распределение.
Доступны различные инструменты для рисования линий и геометрических фигур. Плюс возможность вставлять растровые изображения, текст и делать клоны. Надписи и простые элементы удобно и просто конвертируются в векторные изображения.
Есть возможность импорта и экспорта файлов различных форматов, в том числе SVG, AI, PDF, PS, PNG и EPS. Экспорт и преобразование можно выполнять в том числе через командную строку.
Как и зачем растрировать изображение
Так, с видами изображений разобрались, вернемся к растрированию. Попросту говоря, термин «растрировать изображение» означает преобразование картинки, состоящей из множества фигур, в такую, что полностью состоит из точек. Растрировать изображение можно при помощи Adobe Photoshop или другие подобных , который использует для работы векторные изображения, ведь их легко и просто масштабировать или редактировать (например, менять шрифт, деформировать строку и т.п.).
Вместе с тем, применять многие инструменты, а также практически все , к векторному изображению невозможно, следовательно, его необходимо растрировать. После растрирования можно применять любые фильтры и задействовать любые инструменты для рисования.
Растрировать слой очень просто. В нижнее правом окошке Photoshop, который именуется «Слои», выберите нужный вам слой, в случае необходимости – разблокируйте его, затем кликните по нему правой мышиной кнопкой и выберите пункт «Растрировать». После чего необходимо выбрать соответствующий пункт в выпавшем меню, а именно, текст, фигуру, заливку, смарт-объект и т.д.
Что ж, теперь и вы знаете, какие бывают изображения, зачем нужно растрировать слой, а также и то, как именно происходит процесс растрирования. Удачи в ваших начинаниях!
В своей третей части статьи по работе со слоями в Фотошопе я хочу рассказать некоторых трюках и нюансах которые помогут вам при работе со слоями. В этой статье вы найдете общие быстрые советы и приемы. Подчас наших знаний не хватает, чтобы понять, что происходит на панели слоев. Если вы начинающий пользователь, вы наверняка сталкивались с ситуацией, при которой вы не понимаете, что за слои находятся на панели слоев Layers, как с ними работать, как вообще привести все в более привычный для вас вид? Как сделать быстрые выделения? Как избавиться от стилей? Как слить режимы наложения?
Если вы присоединились к Хронофагу только что, вам стоит начать с первых статей этого цикла:
Что такое растровая графика
Растровая графика (растр) — это изображение/я построенные из пикселей разного цвета, или по-другому, точек, расположенных в определенной последовательности в виде сетки / сот. Примерно это выглядит так — есть сетка на которой расположено множество точек самых разных цветов, при удалении от нее будет складываться целая картинка.
На скриншоте снизу можно четко увидеть, как растровое изображение формируется из пикселей и представлено в виде графической сетки.
К такой графике также относится и видео, так, как это просто множество растровых картинок, которые идут в определенной последовательности. Все, что отображается не вашем мониторе — представляется в виде растра, даже векторная графика трансформируется в него. Так, как на мониторах устанавливается графическая матрица, которая выводит картинку по пикселям.
Растровое изображение — это набор пикселей, представленных в виде сетки пикселей разных цветов из которых и формируется картинка. Можно дать и такое определение.
Характеристики растровой графики:
- Разрешение изображения — количество пикселей по вертикали и горизонтали. Чем выше разрешение, тем качественнее и более детализированной будет картинка. Это относится ко всему контенту: видео, фото, игры.
- Глубина цвета — количество используемых цветов. Может быть: 4бита (16 цветов), 8бит (256 цветов), 24 бита (16 млн. цветов) и т.д.
- Цветовая модель/пространство. RGB, CMYK, YIQ, HSB, HLS и т.д.
Растровые изображения создаются любым фотоаппаратом, камерой, когда вы делаете скриншот или просто в редакторе для компьютера, например, в GIMP.
Важно! Существует и другой вид — векторный, о том, что такое векторная графика, можете прочитать в соответствующей статье
Достоинства растровой графики — плюсы
1. Можно создать абсолютно любое изображение, какой сложности бы оно не было. Полностью передать цветовую гамму, переходы — градиенты. В отличие от той же векторной графики.
2. Благодаря простоте создания может использоваться везде — в фотоаппаратах, печати, видео и т.д.
3. Быстрая скорость обработки и масштабирования.
4. Поддерживается всеми современными устройствами вывода информации на дисплее.
Недостатки — минусы
1. Может занимать много места если изображение сложное и используется высокая глубина цвета. Еще это зависит от его формата: PMG, JPG, BMP и т.д. Подробнее об этом написано ниже.
2. При масштабировании теряется четкость
Поэтому разрешение так важно
3. Не вывести на печать на плоттер или это сделать довольно сложно.
Многие думают, что векторная графика намного лучше и занимает куда меньше места — это действует только на несложные изображения, где используется мало деталей. Правильно сохраненный растр тоже занимает немного места. Есть множество различных форматов картинок, которые хорошо сжимают исходник без сильной потери качества. О том, как уменьшить размер фото написано в соответствующей статье.
Сравнительная таблица
Рассмотрим еще раз различия между вектором и растром, чтобы лучше понимать, какой вид графики выбрать для конкретных задач.
| Растровая графика | Векторная графика |
| сетка, состоящая из пикселей разных оттенков | геометрические фигуры, образуемые линиями с опорными точками |
| тяжелые файлы | легкие файлы |
| качество теряется при масштабировании | качество сохраняется при масштабировании |
| хранение в форматах IPG, TIFF, PSD, PNG, GIF | хранение в форматах AI, EPS, CDR, SVG, SVF |
| предназначается для обработки фото, создания иллюстраций и макетов сайтов | используется для чертежей, логотипов, рекламных вывесок, иконок, упаковочных изображений, надписей, визиток |
| высокая реалистичность | низкая реалистичность |
| нельзя векторизировать без потери качества | можно растрировать без потери качества |
