Мини-лекции 21. Векторная графика. Начало

   Наверняка многие знают, что в компьютерной графике существуют два типа изображений: растровые и векторные. Растровые состоят из пикселей-точек на экране телевизора или монитора. По-английски pixel, — графическая точка. В другом варианте, — минимальный элемент изображения. Как правило, визуально пиксел по форме представляет собой квадрат. Физически несёт информацию о цвете (в цифре, естественно). Вы в фотошопе, при большом увеличении без труда можете эти пикселы увидеть.

   А, что же такое векторные изображения? Основой векторных изображений являются ОБЪЕКТЫ состоящие из многочисленных как прямых линий так и кривых называемых векторами или контурами. В векторных программах английской национальности всё это называют path, — дорожка, путь, линия... В русификаторах вектора обозвали путями. Палитра векторов так и называется ПУТИ рис6. Путин здесь не причём! Все эти кривульки описываются математическими формулами (набором формул). Так прямая линия формулой рис.1a. Кривые же, либо рис.1b, — второго порядка или рис.1c, — третьего порядка. Каждый контур шибко независим (незалежный!), его можно перемещать, изменять как конфигурацию, так и размеры как пропорционально, так и не очень. Неким профессором Пьером Безье были введены в обиход такие понятия как кривые Бизе. Они описываются формулами типа рис.1с, но с меньшим числом коэффициентов. Так, что если Вам осваивать векторы, по-серьёзному от Бизье будет не отвертеться!!!

   Так, что же это за векторы-контуры-пути? Если Вы строитель или как-то имели со строительством дело, или хотя бы слышали такое понятие как ОПАЛУБКА. Опалубка в большинстве случаев временное сооружение. Скажем для залива бетоном фундамента. Всю конфигурацию для заливки первоначально обозначает эта самая опалубка. А как только, так сразу, опалубку убирают за ненадобностью... Вот контура это и есть та самая опалубка для заливки изображения или составляющих изображения. Если Вы далеки от всех этих опалубок, то есть ещё вариант, — детские раскраски рис.7,a,b. Вот он контур-вектор. Осталось его закрасить (залить) цветными карандашами или красками и всё! Вы, Малевич!!! Вот только контур не получится убрать, даже покрасив его?.. А вот с контурами-векторами всё как с опалубкой. Они нужны только при возведения фундамента изображения. Их по-тихому видят только компьютеры да WEB-дизайнеры. А мы простые смертные только превращённые в растровые картинки, либо как печатную продукцию. Как в роддоме, много чего там происходит, а Вам только выдают готовую продукцию! Малолетних бандитов и далее по списку... В смысле, для нас с Вами контура исчезают!

   Для Вашего заманивания в сети векторной графики вот несколько примеров. Дли жителей ПРОЗы на рис.3 знакомая Вам с детства логотипа ПРОЗА.РУ. Это формат SVG, масштабируемая векторная графика (Scalable Vector Graphics). Я, ничего не соображая влез в код и методом тыка изменил коэффициенты и пр. Итог на рис.4! При желании эту ПРОЗУ можно забабахать размером с хрущёвку и ещё выше, изменив эти самые коэффициенты! На рис.7,а,b,g пример превращения обычной детской раскраски рис.7 в векторную фигуру. И далее масштабирование рис.7а,b. Напоследок заливка зелёным цветом и синим. Естественно здесь, на странице всё в растре. Вот только заливка получилась только контуров этой раскраски. Как это понимать? Забегая вперёд, я волшебной палочкой всё выделил, затем превратил в вектор. Каждая линия раскраски в векторе выглядела как фрагмент на рис.7g! Двойной линией. Поэтому заливка была только того пространства между контурами-линиями. А потом уже в растре покрасил обычным способ внутренности. Ещё серьёзнее пример на рис.5,6. Это настоящий самодельный контур в смысле документ с контуром внутри.

   На бамашке (белый фон) рисуем сам контур рис.5. Это лишь половина. Как только всё будет нарисовано, оно автоматически превратится в контур. В палитре слоёв появится слой-фон. В палитре ПУТИ (векторов) появится сам контур как на рис6. Только вся полоска с NW-6 будет затемнена как правая часть (под пальчиком). И стало быть активирован документ. Сохраним всё это как документ фотошопа PSD! А далее начнётся самое интересное... Если Вы захотите увидеть что внутри и откроете его (документ) в смотрелке, то ничего не увидите. Кроме прямоугольника, белого цвета. В папке с документом тоже пусто как на рис.6а. Да, надписи всякие будут и более ничего! Откроем в фотошопе, та же история! Как на рис.5. Чисто белый квадрат без малейшего намёка на содержимое. В палитре ПУТИ всё мутное как неживое... Полоска с иконкой светлая. Рядом с иконкой, — work Path. То есть работающий, действующий контур. Щёлкнем по полоске и она потемнеет, документ станет активном. На белом прямоугольнике появится наша загогулина, контур!

   Ну, хорошо. Загогулина как загогулина?! А нам-то с ней, что делать? Если не считать Ваши эксперименты с масштабированием, то Вам остаётся только два варианта: ЗАЛИВКА и ОБВОДКА контуров. Заливка, это как раскрашивание раскраски: одним цветом, градиентом, векторным узором, растровым узором и просто картинкой... Заливка как Вы уже догадались, растровая... Вот на рис.8b фрагмент заливки зелёным цветом. Видите пилу из пикселов следующей за тонкой линией, контуром. Естественно при сохранении в человеческом формате, в смотрелке линии контура исчезнут! Опалубку, ставшей ненужной уберут...

   На рис.7f фрагмент другого действа, ОБВОДКИ контура красным цветом. Посередине видна тонкая линия контура. Как всё это делается? Как только контур будет нарисован (неважно каким способом), то контур в палитре ПУТИ будет активен. Внизу станут контрастными две пимпочки. При нажатии левой (чёрная стрелка) контур окрасится в основной цвет. В смысле тот, что в данный момент на панели инструментов является основным! Контур окрасится этим цветом (зальётся). Линия контура останется на месте (как на рис.8b).

   А как нам быть с обводкой? Очень просто! Сначала нужно выбрать цвет и инструмент обводки (карандаш, кисть различной мягкости). Затем жмёте на вторую (справа) пимпочку (зелёная стрелка). И всё, Вся линия будет обведена заданным Вами цветом, толщиной... Линия же контура также как и при заливке будет видна. Щёлкните в палитре ПУТИ по пустому месту, активность документа исчезнет и с ней все контура (для нас с Вами!)... При сохранении в графическом формате останется одна растровая составляющая!

   А, можно ли всё сохранить, чтобы потом воспользоваться? Как бы Вам сказать? Во-первых, лучше без всяких раскрасок (чистый контур), сохранять в формате фотошопа, PSD. Во-вторых какой с этого толк??? Вы можете развлекаться только именно с таким размером фигуры контура. Лучше всего сохранить в виде фигуры-шаблона. Как? Мы в дальнейшем, в одной из мини-лекций рассмотрим, а пока достоинство всего этого. После превращения контура в шаблон (оригинал никуда не денется), он окажется в так называемой библиотеке. В каталоге Вы увидите иконку рис.7с. Это наш знакомый контур с рис.5. После того как он там окажется Вы можете вновь созданном документе (бамашке) нарисовать такой вот контур, но? Но теперь своего, Вашего размера. Про все нюансы поговорим позже! Как иллюстрации на рис.7d,e уже сохранённые, в виде растра разных размеров заливки зелёным. Ведь заливки и обводки это конечный результат ради чего мы и морочили себе голову!!!

   И напоследок о классификации этих чёртовых контуров и прочего... На рис.2 так называемая ломанная линия. Внизу рис.8, та самая кривая Бизье (я так думаю?). Наверняка Вам всё и так ясно без моих разглагольствований?! Остаётся уточнить?! СИММЕТРИЧНЫЙ узел, — это когда касательные находятся на одной линии и равны друг-другу по длине. ГЛАДКИЙ узел тоже самое но длины касательных разные. Всё потому-как в симметричном радиусы кривизны слева и справа от узловой точки одинаковые, а в гладком разные. ОСТРЫЙ узел... Ну тут всё ясно и без слов. Не рассчитывайте, что это всё?! В дальнейшем мы будем возвращаться к теме этих узлов-касательных, и не раз и не два...

   И последнее о объектах и составляющих их контуров, которые могут быть как ЗАМКНУТЫЕ так и ОТКРЫТЫЕ. Вот на рис.9а одиночный, а на рис.9b двойной, и оба замкнутые. На рис.9с комбинированный: три ЗАМКНУТЫХ и два ОТКРЫТЫХ. Вообще-то всё, что мы будем изобретать, как и договаривались есть векторные ОБЪЕКТЫ, состоящие из одного или нескольких контуров. Так, что на рис.9 ОБЪЕКТЫ!!!

   Вот пожалуй и всё для столь длительного знакомства с векторной графикой...