Онлайн вектор программа


бесплатные инструменты для создания векторной графики / Программное обеспечение

Компьютерная графика — очень широкое понятие. Кому-то при упоминании этого термина на ум придут трехмерные шедевры от студий Pixar и Dreamworks, другие подумают про цифровую фотографию, третьи решат, что речь идет об оформлении компьютерных игр. Но также обязательно найдется немало и тех, кто свяжет это словосочетание с векторной графикой. Несмотря на необычайную популярность векторной графики, многие пользователи совершенно незнакомы с особенностью векторных рисунков. Что же кроется за словами «векторная графика» и почему она так востребована?

Обычный растровый рисунок представляет собой некоторый массив точек. Этот массив может визуализироваться с максимальной точностью или приблизительной. В первом случае информация о точечном рисунке передается без потерь, но занимает много памяти. Во втором случае графическое изображение может быть передано с условной точностью. Напрашивается прямая аналогия со звуком, который сжимается «без ощутимых потерь» в формат MP3. Для графики схожий формат — JPG. При умеренной и не очень высокой степени сжатия исходный массив точек вполне угадывается. Алгоритмы визуализации растровой графики могут различаться, но суть их одинакова — картинка имеет жесткую привязку к пиксельной матрице.

Для визуализации векторного изображения используется совершенно иной подход. Каждый векторный рисунок создается при помощи геометрических фигур и кривых. Использование математики при описании рисунка дает огромное преимущество: при масштабировании векторных элементов исходная картинка нисколько не теряет в качестве. Растровый же рисунок при изменении размеров ведет себя иначе — линии объектов на изображении при увеличении обрастают заметной «гребенкой». Эти артефакты присутствуют на изображении изначально, поскольку растровый рисунок априори не может содержать непрерывных элементов — линий, геометрических форм и так далее. Все это в растре выглядит как матрица пикселей, которая тем заметнее, чем сильнее увеличен растровый рисунок.

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

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

Профессиональные дизайнеры используют для создания векторной графики инструменты, проверенные годами, например Adobe Illustrator и CorelDraw. Но любителю, которому нужно быстро создать логотип для печати на футболке или техническую иллюстрацию, незачем прибегать к столь громоздким и дорогостоящим приложениям. Можно обойтись бесплатными, а иногда — даже онлайновыми инструментами. С их помощью можно перевести растровое изображение в векторное, сделать набросок несложного дизайна, сгенерировать узор гильоша и так далее.

⇡#«Рисунки Google» — самый простой векторный редактор, который всегда под рукой

Самый известный, простой и доступный онлайновый векторный редактор — это «Рисунки» в сервисе «Google Диск». Это веб-приложение входит в состав онлайнового офиса от Google и больше ориентировано на совместную работу и добавление графических элементов в офисные документы других типов, чем на создание векторной графики. Однако все же некоторые базовые средства для работы с ней тут имеются.

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

К любому элементу векторного рисунка можно добавлять комментарии, а готовым проектом можно поделиться с избранными пользователями либо сделать его общедоступным для просмотра или даже для редактирования.

⇡#Autotracer — бесплатный конвертер растровых картинок в вектор

Когда речь идет о сложных векторных рисунках, иногда бывает проще не создавать их с нуля, а векторизовать растровое изображение, то есть преобразовать его в векторный формат. Этот процесс также называют трассировкой.

Соответствующие средства есть практически в любом векторном редакторе, но векторизация может быть еще более простой благодаря онлайновым инструментам. Можно найти не один веб-сервис, который предлагает подобные услуги. Например, очень удобен в работе бесплатный ресурс Autotracer. С его помощью можно преобразовать файлы PNG, BMP, JPEG и GIF в векторный формат и сохранить в формат SVG, EPS, PDF, DXF.

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

⇡#Vector Paint — векторный редактор в Chrome, который может работать и без браузера

Vector Paint — это веб-приложение для Google Chrome, созданное на HTML5, однако работать оно может и без браузера. Оно относится к новому поколению приложений, представленных в начале сентября нынешнего года. Запускать такие приложения можно прямо с рабочего стола — открытый браузер, равно как и доступ к Интернету, для их использования не нужны.

Vector Paint содержит достаточно большую коллекцию различных предустановленных форм, которые можно использовать в проектах: тут и часы, и тучки, и стрелочки, и животные, и нотки, и многое другое. Формы можно создавать и вручную, используя прямые и ломаные линии, инструмент для рисования произвольных форм, прямоугольник, эллипс. Для каждого элемента есть возможность выбрать цвет, толщину и тип обводки, а также цвет заливки, сделать его частично прозрачным, добавить один из множества эффектов (искажения, тени, текстуры, псевдо-3D и прочее). Предусмотрены и инструменты для управления элементами в проекте: их можно перемещать на передний план или переносить назад. Для более точной расстановки элементов имеются многочисленные средства для выравнивания, также можно включить отображение линейки.

По умолчанию работа ведется на одном слое, но при необходимости можно добавить возможность работы с несколькими слоями. Эта возможность реализована в виде дополнения. Для его установки не нужно ничего скачивать, достаточно просто выбрать плагин в одноименном меню. Работа со слоями включает возможности объединения выбранных слоев, скрытия некоторых из них, переноса выбранных элементов на отдельный слой.

В Vector Paint предусмотрены и другие дополнения, которые могут быть с легкостью добавлены в приложение. Это расширенные возможности для работы с текстом (дополнительные шрифты, настройки интервалов, отдельных элементов надписей), добавление маркеров, использование изображений для создания повторяющихся рисунков на формах. Из меню Plugins также включаются дополнительные параметры обводки и заливки.

Готовые проекты сохраняются в формате SVG, а также могут быть экспортированы в PNG и JPEG.

⇡#SVG-Edit — онлайновый векторный редактор

SVG-Edit — это векторный редактор, созданный на основе JavaScript, который может работать в любом браузере. Его можно использовать в виде онлайнового сервиса (в этом случае для доступа используется демоадрес), а также как веб-приложение (в этом случае нужно загрузить архив с файлами SVG-Edit, распаковать его и запустить файл приложения в любом браузере).

SVG-Edit полноценно работает с файлами SVG, давая возможность как сохранять проекты в этом формате, так и открывать такие файлы и вносить в них изменения. Кроме этого, файл SVG может быть импортирован в проект как отдельный элемент.

Для создания элементов векторной графики в SVG-Edit могут использоваться ломаные линии, прямоугольники, квадраты, эллипсы, круги, многоугольники, контуры, текст. Есть возможность выполнять заливку элементов цветом, а также использовать градиенты, в том числе и радиальные. Поддерживается работа со слоями, показ сетки и отображение элементов в виде каркаса. Есть средства для изменения расположения элементов (выше, ниже), для быстрого клонирования выделенных векторных форм, для их группировки. Многие команды доступны из контекстного меню (как в обычных редакторах для рабочего стола). Достаточно много внимания уделено инструментам для выравнивания на холсте: можно ровнять элементы по отношению к выделенным объектам, к самому большому или к самому маленькому объекту.

В программе большая библиотека готовых форм (та же самая, которая используется в Vector Paint), но, кроме этого, реализован доступ к огромной бесплатной библиотеке элементов векторной графики IAN Image Library. Для работы с ней потребуется регистрация, но затем можно прямо из редактора просматривать коллекции образцов векторной графики и сразу же добавлять их в текущий или в новый проект.

⇡#Chittram — простой онлайновый редактор

Chittram — это еще один векторный редактор, который может работать как веб-приложение. В отличие от SVG-Edit, он реализован как полноценный онлайновый сервис с возможностью сохранения проектов на сервере. Для просмотра и редактирования созданных ранее проектов используется учетная запись Google.

Возможности Chittram скромнее, чем у SVG-Edit, зато этот редактор наверняка покажется более дружелюбным для начинающих пользователей. В приложении есть возможность использовать растровое изображение как подложку, но выбрать картинку с жесткого диска нельзя — только указать ссылку на файл. Импорта локальных векторных изображений тоже нет, зато можно добавлять в проект файлы из галереи пользователей веб-сервиса и редактировать их. На сайте реализован поиск в галерее по ключевым словам, а также по меткам.

Для создания собственных проектов можно использовать стандартный набор инструментов: прямые линии, кривые, кривые Безье, многоугольники, круги, овалы, прямоугольники и квадраты. Доступно также создание текста. Для каждого элемента есть возможность задать размер обводки, цвет заливки, цвет и направление градиента, процент прозрачности. Для более точного рисования можно использовать сетку, для которой настраивается величина клетки. Также можно управлять размером холста и его ориентацией.

Если в проекте используется несколько форм, удобно отобразить панель, на которой представлен список всех элементов. Она служит для переименования и быстрого выделения объектов. Такая же панель используется для работы со слоями.

⇡#Inkscape — полноценная альтернатива коммерческим пакетам

Векторный редактор Inkscape имеет массу достоинств. Во-первых, он кроссплатформенный (может запускаться в среде Windows, Linux, Mac). Во-вторых, он поддерживает большое число популярных векторных форматов, в числе которых SVG, SVGZ, EMF, DXF, EPS, PostScript, WMF и другие.

В редакторе есть и стандартные для любого векторного редактора средства для создания графики: формы, кривые, текст, заливка, полноценная поддержка слоев. Inkscape дает возможность выполнять различные действия с контурами, делать обводку, а также применять булевы операции (объединять, пересекать элементы, исключать один из другого и так далее). В распоряжении пользователя большая библиотека фильтров и специальный редактор, при помощи которого можно создавать собственные эффекты. В программе реализована поддержка графических планшетов, благодаря чему в ней можно вручную рисовать, управляя наклоном и силой нажатия пера.

Стоит обратить внимание на встроенные средства для векторизации растровых изображений. Чтобы при трассировке фотографий учитывались важные объекты на переднем плане, задействуется алгоритм SIOX (Simple Interactive Object Extraction), помогающий определить такие объекты автоматически.

⇡#ZebraTRACE — бесплатное создание гильошей

Любые денежные банкноты, а также документы государственной важности (дипломы, грамоты, удостоверения и так далее) легко узнать с первого взгляда. Эту «узнаваемость» дизайну документа придают тонкие повторяющиеся узоры, которые проходят по всему основному рисунку. Такие линии называются гильошем.

Гильоши можно рисовать вручную в векторном редакторе, однако без специальных дополнений и навыков создания подобных узоров, этот процесс может затянуться. Бесплатная утилита ZebraTRACE помогает в решении таких задач.

Эта программа трассирует изображения и совмещает их с узором гильоша. ZebraTRACE использует параметрическую генерацию гильоша. Каждый тип узора, который можно создать с помощью приложения, определяется математической формулой. Так что при наличии желания и свободного времени для экспериментов пользователь может получить уникальные рисунки.

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

⇡#Заключение

Бесплатные инструменты для работы с векторной графикой встречаются не так часто, как того хотелось бы, тем не менее они есть. Радует и то, что с развитием стандарта HTML5 и прочих веб-технологий стало возможным использование браузера в качестве редактора векторной графики — раньше о таком можно было только мечтать. Для несложных проектов подобные инструменты экономят массу времени, а если взять на вооружение Inkscape, вообще можно отказаться от приобретения векторного редактора для нужд дизайна.

Если вы заметили ошибку — выделите ее мышью и нажмите CTRL+ENTER.

3dnews.ru

Лучшая программа векторной графики. Трёхмерная векторная графика

Программа векторной графики представляет собой программный продукт, работающий в соответствующей области компьютерных знаний. Как известно, есть два вида графики - растровая и векторная. Последняя знаменита тем, что не теряет памяти при масштабировании. Это объясняется тем, что она работает не с точками, а с векторами - уравнениями координат. Программы растровой и векторной графики работают с разными типами изображений и результат также получается разный.

Современная компьютерная графика

Такая технология во многих областях становится предпочтительней растровой. Высочайшее качество любого размера, какой только захочется - это же мечта. Работа с векторной графикой, конечно, требует большей детализации, если нужно изображение большого формата. Но зато результат потрясает.

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

CorelDraw - один из самых известных представителей векторной графики

Программа векторной графики CorelDraw - очень яркий пример для наглядности. В ней есть достаточное количество инструментов для создания изображений любого размера без потери качества. Ее часто противопоставляют программе Photoshop - знаменитому представителю графики растровой.

Программа векторной графики CorelDraw используется преимущественно для создания логотипов, эмблем, с ее помощью реализуются идеи товарных знаков, она же - бессменный коллега книжной и журнальной верстки.

Основными достоинствами этой программы считается возможность изменять размер и форму изображения.

Adobe Illustrator

Adobe Illustrator - это программа векторной графики, используемая в основном художниками - профессионалами и любителями. В отличие от CorelDraw, в которой обычно создаются всякие лого, нуждающиеся в масштабировании, в Illustrator рисуют полномасштабные детализированные картины. В нем работают многие специалисты по компьютерной графике, ведь этот продукт от компании Adobe предоставляет многие возможностей для воплощения идей как в сфере дизайна (в том числе и веб), так и видеомонтажа и многого другого.

Трехмерные спецэффекты и спецэффекты в режиме реального времени, большое количество инструментов для рисования - все это делает Adobe Illustrator мощнейшей программой векторной графики. Не зря вот уже столько времени он не теряет своей популярности, а только приобретает ее - в силу актуальности.

Бесплатные аналоги

Две предыдущие рассматриваемые программы только подтверждают правило, что за качество нужно платить. И Corel, и Illustrator официально стоят немало денег. Конечно, бесплатно на просторах интернета не так уж и сложно найти пиратские версии, репаки и портативные варианты, но не лицензионный оригинал.

А значит, самое время вспомнить о том, что самые распространенные - не значит единственные.

Inkscape

Inkscape - полноценное профессиональное средство для работы с векторной графикой. Доступна не только программа, но и ее исходный код - все это признаки Linux-программ, Windows-версии которых в последнее время завоевывают рынок. Они отличаются высоким качеством и удобством в использовании.

Inkscape полностью оправдывает ожидания мастеров дизайна, предлагая им выбор из различных инструментов для рисования, мощнейший трейсинг, отменную работу с цветами. Кроме всего прочего, программа поддерживает самые распространенные форматы изображений.

Когда говорят о бесплатных аналогах продуктов работы с вектором, Inkscape вспоминают в первую очередь. И не зря. Его смело можно ставить в один ряд Illustrator, а по стоимости и нагрузке на систему он даже его обойдет на пару пунктов.

Creature House Expression

Это программное средство также не для дилетантов. Им с удовольствием пользуются профессионалы для своей работы.

Creature House Expression делится в своей истории на два периода.

Впервые он заявил о себе как инновационный программный продукт. Дело в том, что один из недостатков векторной графики - это сложность получения "живого" изображения. Растр (в котором, к примеру, редактируются фотографии) справляется с этим гораздо лучше. Именно Creature House Expression попытался (и весьма успешно, надо сказать) исправить это. Набор кистей в этом продукте оказался настолько потрясающим, что в итоге вышло, что вектором можно было рисовать так, как будто это совсем не векторная графика. Изображения получались очень реалистичными.

В 2003 Microsoft купил компанию, выпускающую Expression, стандартизировал его, дал свое имя. Но и оригинальную и, что немаловажно, бесплатную версию этого программного средства все еще можно скачать с официального сайта его нынешнего производителя-владельца.

Microsoft Expression Design

Microsoft Expression Design - это и есть новое название рассматриваемого в предыдущем пункте программного продукта. И да, эта версия также целиком и полностью бесплатна. Правда, только для студентов, и для того чтобы ее получить, необходимо отправить специальный запрос с подтверждением этого статуса. Ответ на него приходит довольно быстро.

Microsoft Expression Design отошел от своих истоков и, как уже говорилось, теперь больше подходит под "стандарты" векторного графического редактора. Но в нем все еще много функций, а весь инструментарий полностью удовлетворяет среднестатистического иллюстратора или веб-дизайнера.

Aviary Raven

Отсутствие необходимости не только в оплате, но и в установке отличает эту программу. Да, все верно, Aviary Raven работает в онлайн-режиме. И это бы понизило ее статус в глазах многих, если бы не одно но - она далеко не примитивна.

Предварительная регистрация позволяет сохранять свои шедевры на своем аккаунте и затем экспортировать их. А для создания этих шедевров Aviary Raven предоставляет множество функций, инструментов и опций. Да, это не полноценный векторный редактор, но очень к нему близок. По крайней мере, если по каким-то причинам устанавливать программу нет времени/возможностей, Aviary Raven быстро придет на помощь. А аккаунт позволит получить доступ к своим работам с любого ПК, как бы далеко от своего рабочего места не был пользователь!

Трехмерная векторная графика

Двумерная графика - графика, грубо говоря, "плоская", она работает (как видно из названия) только с двумя измерениями. За ней следует трехмерная графика, при помощи которой создаются объемные объекты.

Если про двухмерную графику говорят, что ее рисуют, то объекты трехмерной - моделируются. Такое изображение на плоскости включает в себя построение геометрической модели проекции на нее.

3D-графика работает как с растровыми, так и с векторными иллюстрациями.

Corel MotionStudio 3D

Corel MotionStudio 3D - простейшая программа трехмерной графики. Она, тем не менее, наглядно демонстрируют возможности этого вида. Прежде всего, как уже было указано в предыдущем пункте, в нее можно импортировать файлы как растровых изображений, так и векторных, а также создавать в ней что-то свое, с нуля. У Corel MotionStudio 3D в наличии множество различных эффектов и пресетов, однако многие считают ее несерьезной. В то же время, если требуется сделать анимированную картинку быстро, не разбираясь в лишних тонкостях и нюансах, она - то, что необходимо.

fb.ru

векторный редактор онлайн StockInspector

Здравствуйте, коллеги!

Полноценные векторные редакторы — инструменты для крутых дизайнеров или художников. Которые рисованием зарабатывают. Что же делать, если вы не профессионал, а нужно быстро нарисовать пару кнопок или иконок? Не покупать же для такой мелкой, разовой задачи огромный и тяжёлый Иллюстратор или Corel Draw! Во-первых, они достаточно сложные, чтобы быстро с ними разобраться и на достаточном уровне освоить. Во-вторых, стоят немалых денег и вряд вы захотите их купить официально, а советовать устанавливать пиратские копии я не стану. В-третьих, теперь и купить-то их стало непросто, потому что, например, многие продукты компании Adobe продаются только с их сайта, и придётся вникать в лицензионную политику, разбираться с тарифными планами, с тем, как делать регулярные платежи, и так далее.

Тут и выручает векторный редактор онлайн. Да, знаю, кто-то скажет — можно сделать заказ фрилансеру. Но с этим связываться не все захотят — не все знают, как работать с фрилансерами, да и платить тоже особо не хочется.

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

Method Draw – удобный векторный графический редактор

В сети доступно несколько разных редакторов векторных изображений, которые отличаются функционалом, удобством и интерфейсом. Редактор векторной графики онлайн Method Draw (ссылка откроется в новом окне) среди аналогов отличает отсутствие рекламы, то есть все окно браузера полностью доступно для работы, удобством настройки свойств объекта и достаточно богатый функционал, которого хватит даже для создания относительно сложных работ.

Впрочем, чтобы понять это достаточно взглянуть на внешний вид Method Draw.

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

Итак, давайте разберемся с основными возможностями и режимами работы Method Draw.

Верхнее меню Method Draw

Верхнее меню редактора состоит всего из четырех пунктов, в каждом из которых вы найдете соответствующие ему команды.Пункт меню File позволит вам:

  • Создать новый документ.
  • Открыть сохраненный на диске документ в векторном формате.
  • Импортировать растровое изображения с компьютера.
  • Сохранить созданное изображение на компьютер. Этим пунктом стоит пользоваться почаще, чтобы не потерять результат своей работы при обрыве связи или зависании окна браузера.
  • Экспортировать готовую картинку в растровый формат PNG.

Пункт меню Edit:

Здесь все стандартно и вы сможете с помощью этого подменю отменить и вернуть последнее действие, вырезать, скопировать, вставить выделенный объект, продублировать его или удалить.

Пункт меню Object даст вам возможность:

  • Переместить объект выше всех, на слой вперед и назад, расположить ниже всех.
  • Сгрупировать несколько выделенных элементов в один объекти и разгрупировать их.
  • Конвертировать фигуру из набора в кривые с возможностью последующего измения по узлам и выполнить обратное преобразования из кривой в объект.

Пункт меню Viev позволит:

  • Включать и выключать линейку.
  • Включать просмотр объектов с примененными свойствами и без них.
  • Включать показ координатной сетки.
  • Включить привязку объектов к узлам координатной сетки.
  • Просмотреть исходный код описания вашего рисунка и при необходимости внести в него изменения.

Левое меню редактора Method Draw

Редактор векторной графики Method Draw имеет достаточно инструментов, чтобы создавать сложные векторные рисунки. Все эти инструменты собраны в левом меню, о котором следует рассказать подробно.По крайней мере, на дату написания этой статьи всё было именно так.

Кнопка режима выбора объектов. В этом режиме можно выбрать несколько объектов, например, для их группировки, обведя область, включающую их, либо удерживая клавишу Ctrl и кликая по нужным объектам мышью.

Свободное рисование карандашом. Проведенная вами линия преобразуется в кривую, которую вы можете изменить, редактируя ее узлы.

Рисование прямых линий.

Рисование прямоугольников.

Рисование эллипсов

Рисование пути для построения объекта из кривых Безье и их редактирование.

Вставка готового графического векторного изображения из набора элементов, сгруппированных по тематике.

Вот как это выглядит:Эти наборы очень удобны для быстрого рисования всяких несложных логотипов.

Вставка текстовой надписи.

Масштабирование области документа. Обраща. ваше внимание, что увеличивать и уменьшать масштаб в этом редакторе гораздо удобнее, вращая колесико мыши с зажатой клавишей Alt.

Выбор активного цвета из уже расположенных на рисунке объектов.

Инструмент выбора цвета заливки объекта и его контура.

Поддерживает несколько режимов заливки как контура, так и объекта, настройка которой вызывается щелчком по соответствующей иконке. Этот векторный графический редактор поддерживает режимы сплошной заливки, градиентной векторной заливки и градиентной радиальной заливки. На рисунке показано окно настройки линейной градиентной заливки. Выбор начального и конечного цвета производится из палитры. Сама палитра вызывается по двойному щелчку на образце цвета в виде капельки под образцом заливки. Также можно настраивать уровень прозрачности цветовой заливки.

Управление дополнительными свойствами графических элементов в правом меню Method Draw

Редактор позволяет задать дополнительные свойства каждому векторному элементу рисунка и получить оригинальные эффекты. Эта настройка производится в правом графическом меню, пункты которого зависят от выбранного объекта и их набор изменяется в зависимости от его типа.Вот, например, как будет выглядеть это правое меню, если на рисунке выбран элемент «Прямоугольник»:

Здесь стандартные элементы управления элементом:

  • X и Y — положение элемента на рисунке по горизонтали и вертикали;
  • Width и Height — горизонтальные и вертикальные размеры;
  • Rotation — угол вращения элемента;
  • Opacity — прозрачность элемента;
  • Blur — размытие на краях;
  • Roundness — радиус закругления углов

Если переключаться между элементами, то набор этих инструментов будет меняться.

Кроме того, здесь же есть инструменты для различных выравниваний элементов и для изменения их границ:

Здесь тоже всё должно быть понятно для каждого, кто работал с подобными кнопками в Фотошопе, Лайтруме, или Иллюстраторе.

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

Даже бегло ознакомившись с назначением всех кнопок, пунктов меню и элементов настройки графических объектов, можно понять, что онлайн редактор векторной графики Method Draw может по праву считаться достойной альтернативой громоздким и дорогим графическим пакетам. Каких-то сложных работ вы нём не нарисуете, но он и не предназначен для них. Про его назначение я писал в самом начале — быстро состряпать простой логотип, кнопку или иконку.

К тому же, он всегда будет у вас в распоряжении, для этого нужно только иметь возможность подключиться к сети Интернет.

stockinspector.ru

6 бесплатных онлайн SVG-редакторов: сравнение

От автора: SVG-изображения не так распространены, как наши любимые растровые форматы PNG и JPG, однако преимущества векторной графики привлекают все больше дизайнеров. Дизайнеры все чаще используют векторную графику в своих проектах. Раньше нам нужно было скачивать десктопные приложения типа Adobe Illustrator и Inkscape, но в 2017 проектировать векторную графику можно, не выходя из браузера. Если вы искали бесплатный SVG-редактор, то можете начать с этих шести бесплатный инструментов.

Vectr

Vectr – хороший выбор для новичков и продвинутых пользователей SVG. Интерфейс аккуратный и не переполнен множеством инструментов, которыми вы не будете пользоваться. Редактор хорошо подходит для новичков в векторной иллюстрации. Пользователь не должен теряться среди инструментов, которые непонятно для чего используются. В комплекте идет несколько уроков. Даже если вы полный ноль с SVG, у вас есть возможность быстро научиться.

Однако все вышеперечисленное не означает, что в Vectr скудный функционал. В нем есть весь базовый набор для создания обычного изображения: фигуры, текст, слои, тени, рамки, фоны и т.д. Ему не сравниться с полноценным десктопным редактором, но для быстрых дизайнов и правок этого более чем достаточно. Изображение можно создавать с нуля или загрузить существующее.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Если в онлайн версии нет нужных вам функций, можно скачать десктоп версию приложения. Редактор доступен для Windows, Mac, Linux и Chromebook.

Возможно, самая крутая функция в Vectr – вы можете делать ссылки и вставлять изображения прямо с сайта Vectr, что делает его эффективным хостингом для SVG. Множество сервисов блокируют загрузку SVG файлов, поэтому это серьезный плюс. Вы можете показывать SVG изображения из Vectr на удаленных сайтах типа WP, Medium, Tumblr и т.д., которые блокируют прямую загрузку SVG, но разрешают ее показ по удаленке.

Vectr позволяет делиться векторной графикой в панели редактора, чтобы другие пользователи могли изменять созданную вами графику. То есть можно, например, сделать SVG-шаблон логотипа, который пользователи уже будут дорабатывать под себя. Все это в браузере.

С этой целью Vectr недавно выпустили версию редактора в виде плагина для WP.

RollApp

В отличие от других инструментов из списка, когда вы заходите на домашнюю страницу RollApp, перед вами не открывается редактор. RollApp – это пакет приложений, а SVG-редактор – лишь одно из приложений. Отличный инструмент, это браузерная версия Inkscape.

Для работы в RollApp нужен аккаунт. Можно зарегистрировать новый или войти с помощью Google, Facebook, Amazon. Очень удобно, я ненавижу создавать тысячи новых аккаунтов лишь для того, чтобы увидеть приложение.

После авторизации откроется следующая страница:

Inkscape во всей красе! Без сомнения, RollApp – самое богатое на функционал приложение из списка. Вы буквально используете Inkscape в браузере! Я не сравнивал все до мелочей, но на вид в этом приложении есть ВСЕ фукнции Incscape, такие как слои, объекты, текст, пути, фильтры, эффекты, расширения и т.д.

Большие файлы обрабатываются не так быстро, ведь действия выполняются на серверах приложения и через интернет. Вкратце – если нужно редактировать большие и сложные файлы, RollApp не будет идеальным вариантом, но для других задач, не входящими в базовый набор, этот редактор подходит лучше других.

BoxySVG

Если вы давно читаете SitePoint, вам должен быть знаком редактор BoxySVG, потому что за последние 12 месяцев мы уже рассказывали про него. Не буду делать детальный обзор, так как это уже сделано в этой статье.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Что важно, со времен обзора от Alex в BoxySVG добавили инспектор кода, что делает его одним из самых актуальных SVG инструментов для веб-разработчиков.

Janvas

Пару лет назад Janvas был очень популярным SVG-редактором. К сожалению, последнее время данный редактор не разрабатывается, но даже так он до сих пор работает. Веб движется вперед, а Janvas стоит на месте, поэтому интерес к нему угас. Alex с сайта SitePoint работал с этим инструментом немного в 2013-14 (в том числе с платной версией) и даже отвечал на вопросы некоторое время на странице Google+. Janvas был довольно мощным инструментом.

Главная проблема Janvas – он немного устарел. Браузеры развиваются, а приложения, которые не следуют за браузерами, с каждым днем становятся все менее стабильными. В Janvas множество функций: фигуры, текст, инструменты рисования, пути, маски и слои. Однако пользователи на форумах говорят, что множество этих функций не приносят желаемого результата.

Есть хорошая новость – выйдет новая версия в виде Chrome-приложения. Надеемся, они пофиксят проблемы.

DrawSVG

Возможно, вы уже выбрали себе бесплатный онлайн SVG редактор. Если же нет, то идем дальше. DrawSVG – полностью совместимый SVG-редактор с множеством функций. Мне очень нравится, что у этого приложения дизайн реально заточен под веб и не похож на порт десктопного приложения под браузер. Меню расположено слева, по клику открывается меню второго уровня и т.д.

С помощью DrawSVG можно рисовать, изменять и рендерить объекты. Рисовать можно простые фигуры, есть кривые Безье, прямой и изогнутый текст, множество стилей обводок и заливок и т.д. Также SVG можно экспортировать в PNG.

SVG-edit

SVG-edit – дедушка онлайн редакторов векторной графики, появился в середине 2000-х. Серверного функционала нет, все работает в браузере. Сохранить свою работу без добавления своего собственного функционала нельзя.

Тем не менее, для редактора, чья жизнь началась с сильно ограниченной и незаметной программы для рисования векторной графики, функционал SVG-edit постоянно улучшался.

С помощью SVG-edit можно рисовать простые фигуры (линии, прямоугольники, круги, многоугольники, линии от руки и т.д.), использовать пути, слои, градиенты, можно просматривать и редактировать SVG-исходники, экспортировать в PNG, JPEG, BMP, WEBP и т.д.

Заключение

Помимо этих 6 SVG-редакторов есть и другие, но мало кто предлагает больший функционал, чем пятерка показанных выше.

Если вы хотите всерьез заняться SVG, а в этих инструментах нет нужного вам функционала, вы всегда можете скачать десктоп SVG-редактор типа Illustrator или Inkscape. Однако для легкости, быстроты и гибкости все вышеперечисленные редакторы предлагают полезный набор функций.

PS: также можно попробовать Figma. Это больше инструмент для создания UI, а не SVG-редактор. Тем не менее, он имеет отличный набор инструментов и генерирует хорошо оптимизированный код SVG.

Автор: Ada Ivanoff

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Узнать подробнее

webformyself.com


Смотрите также