Что такое растровая и векторная графика?
Каждый уважающий себя веб-дизайнер должен обязательно разбираться в этих терминах. Изображения в растровой графике состоит из пикселей — неделимых единиц, которые создают своеобразную мозаику. Пиксели очень маленькие, поэтому глаз воспринимает мозаику как единое изображение.
Векторная графика распространена в полиграфическом дизайне и создании макетов сайтов. Этот тип графики не может передать тона и полутона, однако, является более предпочтительным, если речь идет о создании текстов, простых форм, контурных фигур.
Чтобы понять, к какому типу графики относится то или иное изображение, обратите внимание на его расширение:
- растровая графика — JPEG, BMP, PICT, GIF, TIFF, PSD, JPG, PNG, PCX;
- векторная графика — EPS, CMX, CDR, SVG.
Выбор графического редактора
Растровые редакторы (Adobe Photoshop, Corel-Paint, Irfan View, GIMP, Krita и др.) представляют графику в пикселах, количество которых по ширине и высоте задается при создании изображения. Увеличение размеров уже созданных растровых изображений нежелательно — это может привести к искажениям и неровностям графики;
Векторные редакторы (Xara, Corel DRAW, Adobe Illustrator, Sketch и др.) предусматривают создание линий и фигур по определенным математическим алгоритмам, благодаря чему векторные изображения можно сколько угодно масштабировать без потери качества и идеальной четкости контуров. Векторные программы для веб-дизайна рекомендуется применять для создания логотипов, эмблем и т. п.
Ближе к делу.
Sketch — специализированный векторный редактор
Вам стоит работать в Sketch, если вы:
- работаете на Mac (версии под PC пока не предвидится),
- занимаетесь в основном интерфейсами (не иллюстрациями, графическим дизайном, фотоманипуляциями и т. п.)
- понимаете, как программисты будут работать с вашими исходными файлами (формат «.sketch»), либо вы сами будете экспортировать всю графику для верстальщиков или программистов.
С остальной информацией (она может отличаться по дате, но поверьте, это достоверная информация и по сей день), вы можете ознакомиться здесь и здесь
Figma — кросс-платформенный сервис для дизайнеров
В Figma есть все основные векторные инструменты (примитивы, кривые, выравнивание, сортировка объектов), поддерживаются эффекты для слоев и фигур (в том числе режимы прозрачности, как в Photoshop), есть достойные настройки обводок и шрифтов (нашлась даже пара шрифтов с кириллицей), а также удобства вроде линеек и сетки. Булевых операций для объектов пока что нет, их частично заменяет возможность превращать фигуры в маски и помещать внутрь них другие объекты.
Adobe Experience Design CC (Adobe XD)
Adobe XD облегчает задачи макетирования, создания визуального дизайна, взаимодействий, прототипирования, тестирования и обмена, предоставляя все, что нужно для проектирования интерфейсов, в едином решении. Они начали с базового набора инструмента в каждой из этих областей, а получаемые отзывы помогали определить приоритетный функционал, который необходим нам.
Всего понемногу.
В данной статье лишь краткое описание каждого из инструментов, стоит заметить, здесь указаны векторные графические редакторы. Для детального обзора нужна мотивация в виде аудитории 🙂
Векторный графический редактор
Рисунки и картинки в ЭВМ можно представлять в векторном формате. Для работы с векторной графикой предназначены специальные программы, позволяющие работать с графическими примитивами, из которых строиться изображение. Кратко о графическом редакторе векторной графики и технологии работы в нем можно прочитать в данной статье.
Векторный графический редактор
Векторный графический редактор представляет собой приложение, позволяющее конструировать иллюстрации из различных геометрических объектов, которые называются графическими примитивами. Каждый редактор предлагает свой набор графических примитивов. Основной состав этих объектов включает в себя:
- линии;
- плоские фигуры;
- фигуры-символы;
- текстовые поля.
Графические примитивы векторного редактора
Все элементы для рисования сгруппированы, на единой панели рисования. Как правило, панели инструментов графических редакторов могут добавляться и скрываться через меню, расположенное над рабочей область приложения.
Рис. 1. Панель инструментов для рисования векторного редактора.
Линии
Линии, как графические примитивы, могут быть разными. По своему назначению они бывают:
- простые;
- соединительные.
По внешнему виду:
- прямые линии;
- кривые линии.
Также на концах линий можно поставить стрелки, многообразие видов стрелок зависит от конкретного графического редактора.
Фигуры
Библиотека геометрических фигур достаточно разнообразна в любом векторном графическом приложении. Самые основные фигуры:
- прямоугольники – размером и видом прямоугольника можно управлять, если сделать стороны прямоугольник одинаковыми, то можно получить квадрат;
- эллипсы – предназначены для рисования фигур эллиптической формы, управляя объектом мыши, можно нарисовать окружность;
- основные фигуры – разнообразные геометрические фигуры – треугольники, параллелограммы, трапеции, сектора, кольца и другие;
- фигуры-символы – большой набор фигур с определенной смысловой нагрузкой – смайлики, сердечки, широкие стрелки, фигурные скобки, элементы блок-схем, звездочки, выноски.
Текстовые поля
Существуют специальные инструменты для создания текстовых надписей. Надписи рассматриваются как геометрические объекты, и технология работы с ними не отличается от других рисованных примитивов. Дополнительно можно настраивать для текстовых полей гарнитуру, кегель и начертание шрифта, а также использовать дополнительные настройки по выравниванию надписи, изменения величины интервала.
Кривая Безье
Некоторые векторные редакторы имеют отдельный инструмент – кривую Безье. С помощью кривых Безье рисуют фигуры сложной формы, контур которых представляет собой гладкую линию. На этих линиях расположены узлы, которыми можно управлять, перемещая их. При этом будет изменяться вид нарисованной криволинейной фигуры.
Активное использование векторных редакторов для создания дизайна интернет-ресурсов привело к популяризации плоского дизайна. Особенностью такого дизайна является использование плоских прямоугольных объектов, прямых углов. В нем не делают теней, не используют текстур и объемных изображений.
Рис. 2. Пример сайта с плоским дизайном.
Основные приемы работы в векторном графическом редакторе
Все графические редакторы имеют похожие приемы работы:
- Настройка контура примитива – заключается в задании толщины, цвета и типа линии.
- Заливка фигуры – все замкнуты фигуры можно закрашивать цветом или особой градиентной заливкой, а можно оставлять прозрачными.
- Выделение объектов – для выделения объектов используется специальный инструмент, он, как правило, представлен на панели инструментов в виде стрелки.
- Перемещение, вращение, изменение размеров объектов – выполняется с помощью нажатия левой кнопки мыши по специальным пометкам, обозначающим границы нарисованного примитива.
- Многослойность – для сложных иллюстраций, состоящих из нескольких примитивов, каждый графический объект размещают на отдельном уровне, называемом слоем. Графические элементы можно помещать на передний или на задний план, или на один слой вперед или назад.
- Группировка – рисунки, состоящие из нескольких примитивов, группируют для того, чтобы рассматривать их как единые объекты и применять средства форматирования ко всем элементам одновременно.
Особенность векторных редакторов состоит в том, что они пригодны, преимущественно, для создания иллюстраций, а не для редактирования фотореалистичных изображений. Эти программные продукты используются для создания логотипов, технических иллюстраций, объектов типографики, контурных рисунков.
Рис. 3. Многослойный векторный рисунок.
Векторные редакторы
Рынок программных решений для создания векторной графики предлагает как бесплатные программные продукты, например, OpenPffice Draw, Inkscape, так и коммерческие (платные) программы CorelDraw, Adobe Illustrator, Xara Designer.
Для работы следует выбирать только лицензионные программные продукты или бесплатные программы.
Файлы с векторными рисунками имеют следующие расширения: CDR, AL, EPS, WMF, SVG .
Что мы узнали?
Векторные изображения состоят из отдельных графических объектов – примитивов, которые представляют собой линии, различные геометрические фигуры, фигуры-символы, фрагменты текста. Графические редакторы позволяют форматировать контур, заливку фигуры, перемещать и масштабировать объекты, группировать и размещать на разных слоях. Рынок векторных программных средств предлагает как платные, так и бесплатные редакторы. Векторные файлы имеют расширения CDR, AL, EPS, WMF, SVG.
Основные редакторы векторной графики
Как и в случае растровой графики, для работы с векторной графикой есть несколько программных средств. К основным относятся программы: AdobeIllustrator(версия 7.0),MacromediaFreehand(версия 8.0) иCorelDraw(используются версии от 5.0 до 8.0). Все эти редакторы работают с одними и теми же объектами векторной графики, основаны на одних и тех же принципах, имеют схожие инструменты, и, соответственно, приемы создания векторных изображений в этих редакторах удивительно похожи.
Векторный редактор Adobe Illustrator 7.0. Эта программа является общепризнанным мировым лидером среди средств векторной графики. Большинство профессионалов работают именно с этой программой. Ее особое достоинство состоит в том, что вместе с программамиAdobePhotoshopиPageMakerона образует законченное трио приложений, достаточных для выполнения компьютерной верстки полиграфических изданий и разработки сложных документов. Дополнительным преимуществомAdobeIllustrator7.0 является тот факт, что этот векторный редактор имеет версию на русском языке.
Векторный редактор Macromedia Freehand 8.0. Этот чрезвычайно удобный векторный редактор, дружественный и интуитивно понятный, является самым удачным выбором для начинающих. Программа отличается простотой системы управления и высоким быстродействием. Несмотря на простоту системы управления, инструментальные средстваMacromediaFreehandдостаточны для разработки весьма сложных документов. ПрограммуMacromediaFreehandудобно использовать при работе с любыми системами компьютерной верстки, но специально адаптирована она для системыQuarkXPress.
Векторный редактор CorelDraw (версии от 5.0 до 8.0). Редакторы векторной графикиAdobeIllustratorиMacromediaFreehandдовольно долго (до 1995 г.) оставались средствами для работы на компьютерахMacintosh. Их развитие на платформеIBMPCотставало от необходимых требований, поэтому на этой платформе исторически сложилось преимущество редактораCorelDraw, особенно в России, где в отличие от прочих стран развитие платформыIBMPCзначительно опережает платформуMacintosh. В настоящее время положение выравнивается. ИAdobeIllustrator, иMacromediaFreehandимеют мощные и надежные версии дляIBMPC, и популярностьCorelDrawпостепенно снижается.
К преимуществам этого редактора относят развитую систему управления и богатство средств настройки инструментов. Наиболее сложные композиции, близкие к художественным произведениям, получают средствами именно этого редактора, хотя за богатство возможностей приходится расплачиваться. В CorelDrawсистема управления сложнее, чем в других векторных редакторах, и интерфейс не столь интуитивен. ИзучениеCorelDrawпредставляет более сложную задачу, чем изучениеAdobeIllustratorилиMacromediaFreehand.
Основные понятия векторной графики
Независимо от выбора векторного редактора основные понятия, с которыми приходится иметь дело в практической работе, одни и те же.
Основным объектом векторной графики является линия (неважно какая). В некоторых программах вместо понятия кривая используется понятие контур (path).
Каждый контур может иметь две или более опорных точек. В некоторых редакторах их также называют узлами (nodes).
Элемент контура, заключенный между двумя опорными точками, называется сегментом контура. Если контур имеет более двух опорных точек, то он состоит из нескольких сегментов. Форму контура изменяют перемещением опорных точек, изменением их свойств, добавлением новых опорных точек или удалением части опорных точек контура.
Контур может быть открытым или замкнутым. Свойства замкнутых и открытых контуров различаются.
Контур является элементарным графическим объектом. Из контуров можно создавать новые объекты или их группы.
Векторный графический редактор
В программировании, ассемблерной вставкой называют возможность компилятора встраивать низкоуровневый код, написанный на ассемблере, в программу, написанную на языке высокого уровня, например, Си или Ada. Использование ассемблерных вставок может преследовать следующие цели.
О типе данных в БД см. BLOB.Блоб (от англ. binary linked object — объект двоичной компоновки) — объектный файл без публично доступных исходных кодов, загружаемый в ядро операционной системы. Обычно этот термин применяется только по отношению к модулям, загружаемым в ядро свободной или открытой операционной системы; термин редко применяется по отношению к коду, выполняющемуся не в режиме ядра, например, код BIOS, микропрограммный код устройств, программы, выполняющиеся в пользовательском режиме.
Парсер (англ. parser; от parse – анализ, разбор) или синтаксический анализатор — часть программы, преобразующей входные данные (как правило, текст) в структурированный формат. Парсер выполняет синтаксический анализ текста.
Oberon — операционная система, разработанная Никлаусом Виртом и Юргом Гуткнехтом (ETHZ) для однопользовательской рабочей станции Ceres в рамках «Проекта Оберон». Как писали авторы, главной целью проекта было «спроектировать и реализовать всю систему с нуля, и структурировать её таким образом, чтобы её можно было описать, объяснить и понять целиком». В самом деле, книга объёмом 550 страниц содержит полное описание системы вместе с исходными текстами.
Стиль о́тступов (индентация) — правила форматирования исходного кода, в соответствии с которыми отступы программных блоков проставляются в удобочитаемой манере.
Многопользовательское, мультерминальное или терминальное решение позволяет организовать на базе одного компьютера несколько независимых мест — терминалов — с возможностью одновременной работы.
В Unix-подобных операционных системах пользователи идентифицируются идентификаторами пользователя (англ. User identifier, UID).