Онлайн редактор вектор: Векторные онлайн-редакторы: 6 рабочих вариантов


05.07.1978 Facebook Twitter LinkedIn Google+ Разное


Содержание

Векторные онлайн-редакторы: 6 рабочих вариантов


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

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

Читайте также: Учимся рисовать в Adobe Illustrator

Как работать с SVG онлайн

Выполнив соответствующий запрос в Google, вы сможете ознакомиться с огромным количеством всевозможных векторных онлайн-редакторов. Но подавляющее большинство таких решений предлагают довольно скудные возможности и чаще всего не позволяют работать с серьезными проектами. Мы же рассмотрим лучшие сервисы для создания и редактирования SVG-изображений прямо в браузере.

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

Способ 1: Canva

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

Перейти к онлайн-сервису Canva

  1. Откройте главную страницу сайта, ссылка на который дана выше, и нажмите «Войти» или «Зарегистрироваться».

    Укажите логин и пароль от учетной записи в сервисе, если она у вас есть, либо пройдите процедуру регистрации – это можно сделать по электронной почте либо или через аккаунт в Apple, Facebook или Google.

    По необходимости подтвердите выбор.

  2. Авторизовавшись в Canva, воспользуйтесь расположенной вверху кнопкой «Создать дизайн»,

    выберите пункт «Настраиваемый размер» и укажите желаемые значения высоты и ширины.

    Также можете изменить единицы измерения.

    После ввода нажмите «Создать дизайн».

  3. Откройте меню «Файл», по необходимости задайте предпочтительное имя будущему проекту и измените такие параметры его отображения, как линейка, направляющие, поля и выпуск. Это будет полезно для понимания размера элементов на рабочем холсте, их выравнивания, соблюдения симметрии и т. д. Отменить и повторить любое действие можно с помощью расположенных на верхней панели кнопок, выполненных в виде круговых стрелок. Поддерживаются и горячие клавиши
    «Ctrl+Z»
    и «Ctrl+Y» соответственно.

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

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

    Если это то, что входит в вашу задумку, выберите подходящее решение во вкладке «Шаблоны». Для удобства можете задействовать поиск и дополнительные фильтры.

  5. Во вкладке «Элементы» вы найдете всевозможные фигуры и линии,

    стикеры, фотографии, аудио и видеофайлы, а также рамки.

    Для понимания основного принципа работы с графикой в сервисе опишем, как мы наложили рисунок поверх шаблонного фона, взятого из раздела «Фото» вкладки «Элементы». Подобное изображение вполне можно найти и среди «Шаблонов».

    Если изначальный размер не соответствует выбранному, его можно изменить путем перемещения специальных элементов на рамке

    Примечание: Большинство шаблонов в библиотеке Canva – это многослойные документы, состоящие из нескольких объектов (надписи, рамки, логотипы и т. д.), каждый из которых можно менять на свое усмотрение. Несколько возможных примеров нами было рассмотрено в отдельных статьях.

    Подробнее: Как создать турнирную таблицу / презентацию / объявление / приглашение / грамоту в онлайн-сервисе Canva

    Вторую картинку мы взяли в разделе «Графика» вкладки «Элементы».

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

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

    Нажатие на кнопку «Редактировать» на верхней панели откроет набор доступных в Canva эффектов и фильтров,

    каждый из которых можно применить к выделенной части проекта,

    по необходимости отрегулировав дополнительные параметры и применив их.

    Эффекты и фильтры, представленные в разделе «Рекомендуемые»,

    предварительно потребуется подключить.

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

    Для большего понимания того, как работает встроенный в Canva графический редактор, рекомендуем ознакомиться со следующими статьями на нашем сайте.

    Подробнее: Как заменить цвет / вырезать лицо / затемнить / улучшить или ухудшить качество фото с помощью онлайн-сервиса Canva

  6. Во вкладке «Загрузки» доступна возможность добавления в библиотеку сервиса собственных мультимедийных файлов – изображений, аудио и видео. Также можно записать себя с помощью встроенной или подключенной к ПК веб-камеры.

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

    д.

  7. Во вкладке «Текст» представлены различные надписи – как пустые текстовые поля, так и некое подобие стикеров, шаблонное содержимое которых можно менять на свое усмотрение.

    Текст редактируется практически по тому же алгоритму, что и графика, плюс доступны характерные для такого типа контента параметры: изменение типа, размера, начертания, выравнивания и т. д.

    Читайте также: Как поставить дату на фото в онлайн-сервисе Canva

  8. Если помимо графики в вашем проекте используются и различные надписи, а рассмотренных на предыдущем шаге решений недостаточно, рекомендуем воспользоваться шаблонными вариантами во вкладке «Стили».

    Здесь представлены сочетания шрифтов и цветов, которые можно использовать как комплексно,

    так и независимо друг от друга.

    Помимо этого, имеется возможность «Создать свой стиль».

  9. Во вкладке «Фоны», как можно понять из названия, содержаться фоновые изображения.

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

  10. Последний из доступных в рамках редактора раздел «Еще» содержит в себе интеграции с различными веб-приложениями и сервисами. Здесь тоже есть шаблоны, которые можно использовать в проектах. Большая часть отведена под возможности просмотра и экспорта на различных платформах, но также доступно и добавление контента из них (например, смайлов и анимации из GIPHY, стикеров из Pixton, стоковых фотографий из Pexels и т. д.).

    Особое внимание рекомендуем обратить на блок «Другие приложения в Canva», так как с его помощью можно несколько расширить и без того богатую функциональность и библиотеку сервиса. Отсюда вы можете добавить на боковую панель такие разделы, как

    «Фото» «Аудио», «Видео» и «Диаграммы».

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

    Подробнее:
    Как заменить фон на фото в онлайн-сервисе Canva
    Как состарить фото в онлайн-сервисе Canva

  11. Когда работа с графикой будет завершена, оцените итоговый результат, скрыв для удобства боковую панель и увеличив масштаб отображения.
  12. Если вас все устраивает, нажмите по кнопке «Скачать», разверните выпадающий список «Тип файла» и выберите в нем SVG.

    К сожалению, так просто получить файл в данном формате не получится – потребуется оформить подписку Canva Pro. Благо здесь предусмотрен 30-дневный бесплатный период.

    Укажите необходимые сведения для подключения услуги, подтвердите свое намерение,

    после чего вы сможете «Скачать» самостоятельно созданное векторное изображение (дополнительно будет доступна возможность сохранения прозрачности фона, если это актуально)

    и после непродолжительной процедуры экспорта

    поместить его в удобное место на диске ПК.

    По завершении экспорта появится предложение «Копировать» публичную ссылку на проект.

    Помимо этого, вы можете «Поделиться» им с другими пользователями сервиса (если работаете в команде) и сделать открытым для редактирования,

    преобразовать в презентацию, поделиться в социальных сетях и других сервисах.

    Отменить пробную подписку Canva Pro можно в любой момент,

    для чего достаточно воспользоваться соответствующей опцией в личном кабинете.

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

Способ 2: Vectr

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

Несмотря на обилие функций, потеряться в интерфейсе Vectr будет достаточно сложно. Для начинающих предусмотрены подробные уроки и объемные инструкции по каждой из составляющих сервиса. Среди инструментов редактора имеется все для создания SVG-картинки: фигуры, иконки, рамки, тени, кисти, поддержка работы со слоями и т.п. Нарисовать изображение можно с нуля либо же загрузить собственное.

Онлайн-сервис Vectr

  1. Перед началом пользования ресурсом желательно авторизоваться в нем при помощи одной из доступных соцсетей или создать учетную запись на сайте с нуля.

    Это не только позволит загружать результаты вашей работы на компьютер, но и в любой момент сохранять изменения в «облаке».
  2. Интерфейс сервиса максимально прост и понятен: слева от холста расположены доступные инструменты, а справа — изменяемые свойства каждого из них.

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

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

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

Способ 3: Sketchpad

Простой и удобный веб-редактор для создания SVG-изображений, основанный на платформе HTML5. Учитывая набор доступных инструментов, можно утверждать, что сервис предназначен исключительно для рисования. С помощью Sketchpad вы можете создавать красивые, тщательно проработанные картинки, но не более.

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

Онлайн-сервис Sketchpad

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

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

Способ 4: Method Draw

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

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

Онлайн-сервис Method Draw

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

    Для этого перейдите в «View»«Source…» или воспользуйтесь сочетанием клавиш «Ctrl + U».
  3. Закончив работу над картинкой, ее можно сразу сохранить на компьютер.

  4. Чтобы экспортировать изображение, откройте пункт меню «File» и нажмите «Save Image…». Либо же используйте шорткат «Ctrl+S».

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

Способ 5: Gravit Designer

Бесплатный веб-редактор векторной графики для продвинутых пользователей. Многие дизайнеры ставят Gravit в один ряд с полноценными настольными решениями, как тот же Adobe Illustrator. Дело в том, что этот инструмент является кроссплатформенным, то есть в полном объеме доступен на всех компьютерных ОС, а также в качестве веб-приложения.

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

Онлайн-сервис Gravit Designer

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

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

  1. Чтобы приступить к работе с редактором, вам не обязательно создавать аккаунт в сервисе.

    Но если вы желаете использовать готовые шаблоны, придется завести бесплатную «учетку» Gravit Cloud.
  2. Для создания нового проекта с нуля в приветственном окне перейдите на вкладку «New Design» и выберите требуемый размер холста.

    Соответственно, для работы с шаблоном откройте раздел «New from Template» и выберите нужную заготовку.
  3. Gravit умеет автоматически сохранять все изменения при выполнении вами действий над проектом.

    Чтобы активировать эту возможность, воспользуйтесь сочетанием клавиш «Ctrl+S» и в появившемся окне дайте название рисунку, после чего щелкните по кнопке «Save».
  4. Итоговое изображение вы можете экспортировать как в векторном формате SVG, так и в растровых JPEG или PNG.

  5. Кроме того, есть вариант сохранения проекта как документ с расширением PDF.

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

Способ 6: Janvas

Популярный среди веб-разработчиков инструмент для создания векторной графики. Сервис содержит ряд инструментов для рисования с детально настраиваемыми свойствами. Главная особенность Janvas — возможность создания интерактивных SVG-картинок, анимированных с помощью CSS. А в связке с JavaScript сервис и вовсе позволяет строить целые веб-приложения.

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

Онлайн-сервис Janvas

  1. Для запуска веб-приложения в своем браузере перейдите по ссылке выше и щелкните по кнопке «Start to create».
  2. В новом окне откроется рабочая область редактора с холстом в центре и панелями инструментов вокруг него.
  3. Экспортировать готовое изображение можно лишь в выбранное вами облачное хранилище, и лишь в том случае, если вы приобрели подписку на сервис.

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

Способ 7: DrawSVG

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

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

Онлайн-сервис DrawSVG

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

Окончив работу с картинкой, вы можете сохранить результат как SVG или в качестве растрового изображения.

  1. Для этого найдите в панели инструментов иконку «Save».
  2. По щелчку на этот значок откроется всплывающее окно с формой для загрузки SVG-документа.

    Введите желаемое название файла и нажмите «Save as file».
  3. DrawSVG можно назвать облегченной версией Janvas. Редактор поддерживает работу с атрибутами CSS, но в отличие от предыдущего инструмента, не позволяет анимировать элементы.

Читайте также: Открываем файлы векторной графики SVG

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

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТ

Векторный редактор онлайн: 8 лучших бесплатных браузерных альтернатив Adobe Illustrator

Adobe Illustrator – стандартный выбор всех, кто нуждается в высококачественном графическом программном обеспечении. Однако подписка Adobe стоит довольно много, а Illustrator доступен только в виде приложения для Windows и Mac.

♥ ПО ТЕМЕ: Как создавать блок-схемы алгоритмов и диаграммы бесплатно и без установки приложений: 7 лучших онлайн-сервисов.

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

 

Gravit Designer – быстрый, мощный и красивый векторный редактор. Помимо работы во всех основных браузерах, пользователь может загрузить версию для Mac, Windows, Linux и Chrome OS. Во всех случаях включена полноценная интеграция через облачный сервис.

В программе есть все основные функции Illustrator, включая версию инструмента «Перо» (под названием «Paths») и опцию для рисования, которая сглаживает линии по мере нанесения.

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

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

♥ ПО ТЕМЕ: Фоторедактор онлайн бесплатно: 5 сервисов для быстрого редактирования фото online.

 

Vectr – простой инструмент для быстрого создания векторных проектов с поддержкой всех основных браузеров, а также загружаемых версий для Windows, Linux и Chrome OS.

Его функционал не так обширен, как у Gravit, однако он лучше подходит для определенных типов задач.

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

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

♥ ПО ТЕМЕ: Как скачивать видео с Вконтакте, Ютуб, Facebook, Инстаграм, Одноклассников на компьютер: лучшие бесплатные сервисы.

 

Boxy SVG – редактор SVG, который работает в браузерах на базе Chromium, таких как Chrome или Opera. Он также имеет загружаемую версию для Windows, Mac и Chrome OS.

Boxy работает с SVG-файлами, поэтому пользователю не нужно экспортировать свои изображения. Проекты можно легко открыть в других приложениях для редактирования изображений. Пользователь также может выводить HTML-код для своих изображений, который затем можно вставлять прямо в web-страницу. В сервисе можно создавать обычные файлы изображений в форматах JPEG, PNG, WebP и GIF.

В сервисе есть множество инструментов для рисования фигур, в том числе «Перо» и различные инструменты для рисования кривых линий. В сервисе доступна интеграция с Google Fonts. Поддержка масок позволяет создавать более сложные работы.

Интерфейс Boxy может быть немного сложным для освоения, однако это быстрая и очень мощная альтернатива Illustrator.

♥ ПО ТЕМЕ: Вирус проверка онлайн, или как проверить компьютер без установки привычного антивируса.

 

Canva – очень популярный и простой в использовании браузерный инструмент для создания изображений. Он предлагает более 50 000 шаблонов для любых целей. Его можно использовать для создания логотипов, обложек электронных книг, плакатов, рекламы и многого другого.

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

Сервис позволяет без каких-либо дизайнерских навыков создавать красивые, сложные и очень профессионально выглядящие проекты.

Веб-приложение Canva доступно на русском языке.

♥ ПО ТЕМЕ: ПДФ онлайн: лучшие бесплатные сервисы для работы с PDF-документами в интернете.

 

Сервис предназначен для профессиональных пользователей, которые уже освоили Illustrator. В нем есть собственная подписка наподобие Adobe, однако Figma позволяет создать три проекта бесплатно и работать в команде с двумя участниками.

Figma в основном предназначен для дизайна интерфейса и полностью поддерживает файлы, созданные в Sketch — еще одном популярном инструменте для дизайна. Figma также предлагается в виде мобильных приложений для iOS и Android, которые можно использовать для предварительного просмотра проектов.

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

По окончании работы можно экспортировать проект в виде файлов PNG, JPEG или SVG или просто скопировать стили как CSS-код.

♥ ПО ТЕМЕ: Открыть RAR или ZIP онлайн: как распаковывать архивы без установки приложений — 6 лучших сервисов.

 

Inkscape уже давно зарекомендовала себя как одна из лучших бесплатных альтернатив Illustrator. Это десктопная программа, однако ее можно использовать и в браузере через сервис RollApp.

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

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

Программа немного медленная. Использование Inkscape с RollApp идеально подходит в случае, когда нужно отредактировать изображение на ходу, однако лучше все же установить полноценную версию программного обеспечения для компьютера.

Веб-приложение Inkscape доступно на русском языке.

♥ ПО ТЕМЕ: HTML редактор онлайн: Топ-5 лучших бесплатных визуальных онлайн редакторов «ХТМЛ».

 

Janvas обладает большим набором функций, включая поддержку масок и множества инструментов, а также опций для работы с текстом.

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

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

♥ ПО ТЕМЕ: ПДФ → Ворд (текст), МП3 → Вав (аудио) конвертер онлайн: семь лучших бесплатных онлайн-сервисов.

 

Vecteezy – хороший выбор для тех, у кого есть файл SVG, нуждающийся в редактировании. Данное приложение лучше всего подходит для редактирования файлов или создания очень простых значков и логотипов.

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

Сохранение файлов происходит довольно просто. Проекты можно сохранять в форматах SVG и PNG.

 

Adobe Illustrator – не единственный вариант!

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

Видео по теме:


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

18 лучших графических редакторов, которые не стоят ни копейки

Самые продвинутые графические редакторы вроде инструментов компании Adobe стоят немалых денег. Но есть бесплатные и вполне достойные альтернативы, возможностей которых хватит большинству пользователей. Вот приложения для работы с векторной, растровой и 3D‑графикой на все случаи жизни.

Бесплатные векторные редакторы

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

1. Gravit Designer

  • Платформы: веб, Windows, macOS, Linux.

Gravit Designer, ранее известный как Gravit, — это полнофункциональный векторный редактор. Он подходит для любых задач — от дизайна интерфейсов и иконок до работы с презентациями, иллюстрациями и анимацией.

Аккуратный интуитивный интерфейс Gravit Designer можно настраивать под себя. Графический редактор содержит массу инструментов для создания прекрасных детализированных векторных изображений. Среди них — неразрушающие (их действие можно отменять) функции для булевых операций, инструменты «Нож» и «Граф путей», множество режимов заливки и смешивания, а также мощный текстовый движок.

Если вам понадобится получить доступ к работе на ходу, облачный сервис Gravit Cloud позволит вернуться к проекту на любом устройстве.

Gravit Designer →

2. Vectr

  • Платформы: веб, Windows, macOS, Linux.

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

Vectr →

3. SVG‑Edit

  • Платформа: веб.

Если вам нужно быстро создать или отредактировать простой SVG‑файл, есть несколько онлайн‑редакторов, которые подойдут для этой задачи не хуже Adobe Illustrator. Лучших из них — SVG‑Edit.

Этот графический редактор целиком создан на HTML5, CSS3 и JavaScript и не использует серверы для обработки данных. Код SVG‑Edit открыт. Поэтому при желании вы можете скачать его и модифицировать, чтобы создать свою версию программы.

SVG‑Edit располагает всеми базовыми инструментами векторного редактора. Но поддерживает только формат SVG.

SVG‑Edit →

4. Inkscape

  • Платформы: Windows, macOS, Linux.

Этот мощный графический редактор предлагает множество инструментов и функций, которые часто недоступны в других аналогичных программах. Среди них — альфа‑смешивание, клонирование объектов и маркеры.

Полная поддержка различных цветовых моделей делает Inkscape достойной альтернативой Adobe Illustrator как для веб‑дизайна, так и в сфере полиграфии. При всей простоте интерфейса в этой программе можно создавать и комплексные работы.

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

Inkscape →

5. BoxySVG

  • Платформа: веб.

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

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

BoxySVG →

Бесплатные растровые редакторы

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

1. GIMP

  • Платформы: Windows, macOS, Linux.

Бесплатный графический редактор с открытым исходным кодом. GIMP укомплектован богатым набором функций для рисования, цветокоррекции, клонирования, выделения, улучшения и других действий. Интерфейсом GIMP отличается от популярнейшего Photoshop, но долго искать нужные инструменты вам не придётся.

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

GIMP →

2. Photo Pos Pro

  • Платформа: Windows.

Если вы работаете на Windows и не нуждаетесь в таком количестве инструментов, как у GIMP, вашим идеальным редактором может стать Photo Pos Pro. Последний создан с прицелом на операции с изображениями и отлично справляется с типичными задачами вроде регулировки контрастности, освещения и насыщенности. Но Photo Pos Pro подходит и для более сложных манипуляций.

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

Photo Pos Pro →

3. Krita

  • Платформы: Windows, macOS, Linux.

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

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

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

Krita →

4. Paint.NET

  • Платформа: Windows.

Paint.NET является альтернативой программе Paint, встроенной во все версии Windows. Но пусть схожесть названий не сбивает вас с толку: это гораздо более продвинутый и полезный редактор.

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

Благодаря поддержке слоёв, широкому выбору инструментов для выделения и настроек вроде яркости, контрастности и кривых, Paint.NET можно рассматривать как достойную замену Photoshop.

Paint.NET →

Бесплатные фоторедакторы

Предназначены для обработки, ретуши, а также добавления эффектов на любые фото.

1. Pixlr

  • Платформы: веб, iOS, Android.

Pixlr предлагает более 600 эффектов, наложений и рамок. В этом сервисе можно делать всё, чего стоит ждать от фоторедактора: изменять размер изображений, обрезать их, удалять эффект красных глаз, отбеливать зубы и многое другое. Если вы знакомы с Photoshop, то очень быстро освоите веб‑версию Pixlr. Интерфейсы этих редакторов очень похожи.

Pixlr →

2. Canva

  • Платформы: веб, iOS, Android.

Canva — популярный онлайн‑редактор с огромным набором функций, который поможет подготовить любые изображения всего в несколько кликов. Прямо в браузере можно создавать коллажи, постеры, инфографики, контент для соцсетей, видео и много другое.

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

Canva →

3. RawTherapee

  • Платформы: Windows, macOS, Linux.

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

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

RawTherapee →

Бесплатные редакторы 3D‑графики

Предназначены для работы с 3D‑моделями, эффектами и анимациями.

1. SketchUp Free

  • Платформа: веб.

SketchUp Free можно назвать идеальной точкой входа в мир 3D‑графики. Этот редактор дружелюбно вводит новичка в курс дела и прощает ему все допущенные ошибки. Вы можете начать с простого рисования линий и форм, а потом преобразить их в 3D‑объекты.

Если вам понадобится вдохновение, можете бесплатно скачать модели различных объектов из библиотеки 3D Warehouse через форму поиска на сайте SketchUp.

SketchUp Free →

2. Daz Studio

  • Платформы: Windows, macOS.

С помощью Daz Studio можно кастомизировать, перемещать в пространстве и анимировать различные 3D‑объекты вроде людей, животных, предметов.

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

Daz Studio →

3. Hexagon

  • Платформы: Windows, macOS.

Hexagon — бесплатный инструмент для 3D‑моделирования. В нём есть всё необходимое для создания детализированных моделей, готовых к финальному рендерингу.

Среди инструментов и функций программы вы найдёте возможность быстрого импорта из Daz Studio, заготовки для различных объектов, кисти для ручного моделирования, UV‑развёртку (нанесение плоских текстур на трёхмерный объект), продвинутые инструменты рисования и мгновенное затенение (instant ambient occlusion).

Программы Daz Studio и Hexagon созданы одним разработчиком и дополняют друг друга. Вместе они составляют полный бесплатный комплект для работы с 3D‑графикой.

Hexagon →

4. Blender

  • Платформы: Windows, macOS, Linux.

Blender — это продвинутый бесплатный редактор 3D‑графики с открытым исходным кодом, доступный для всех основных платформ.

Разработчики постоянно развивают Blender. Он поддерживает все возможные операции с 3D‑графикой: позволяет моделировать, текстурировать, анимировать, рендерить и компоновать объекты.

Blender →

5. ZBrushCoreMini

  • Платформы: Windows, macOS.

Если вам интересно искусство цифровой скульптуры, попробуйте программу Sculptris от разработчика Pixologic. Она подходит одинаково хорошо для любого уровня подготовки. Новички получают понятный стартовый инструмент, а опытные цифровые художники — платформу для быстрой и удобной реализации идей.

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

ZBrushCoreMini →

6. Houdini Apprentice

  • Платформы: Windows, macOS, Linux.

Houdini — инструмент для работы с 3D‑анимацией и визуальными эффектами, который часто используют при создании фильмов, телепередач и другого медиаконтента.

Стоимость редактора начинается с 2 000 долларов. Но разработчики программы — Side Effects Software — разрешают использовать версию Houdini Apprentice бесплатно. Благодаря ей вы можете получить доступ ко всем функциям полной версии и оттачивать мастерство на личных проектах. Только Houdini Apprentice предназначена исключительно для некоммерческих и образовательных целей.

Houdini Apprentice →

Текст обновлён 4 февраля 2021 года.

Читайте также 🎨⚙️💻

Добавление векторной графики в веб-документ — Изучение веб-разработки

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

Примечание: Данная статья не научит вас векторной графике, а даст понимание что это и как её использовать в веб-документах.

В веб-разработке вы будете сталкиваться с двумя типами изображений — растровым и векторным:

  • Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
  • Векторное изображение  определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер  может вычислить как должно выглядеть изображение, когда выводится на экран.SVG формат позволяет нам создавать векторную графику для использования в веб-документах.

Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как vector-versus-raster.html — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое — SVG.

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

Примечание: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: vector-versus-raster.html !

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

SVG это язык на базе XML для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  вы можете использовать элементы для создания простых фигур, таких как <circle>(круг) и <rect>(прямоугольник). Более сложные SVG элементы включают <feColorMatrix> (en-US) (разложение цвета с использованием матрицы), <animate> (анимация частей вашего векторного изображения) и <mask> (en-US) (применение маски к изображению. )

В качестве простого примера, следующий код создаёт круг и прямоугольник:

<svg version="1.1"
     baseProfile="full"
    
     xmlns="http://www.w3.org/2000/svg">
  <rect fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

В результате получается следующее:

Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)

Дополнительные преимущества SVG:

  • Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает SEO).
  • SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.

Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:

  • SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.
  • SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.
  • не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.

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

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

Быстрый путь:

<img>

Чтобы встроить SVG используя элемент <img>, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите Изображения в HTML.

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
   
    />
Плюсы
  • Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте alt
  • Вы можете легко превратить изображение в гиперссылку, поместив <image> в элемент <a>.
Минусы
  • Вы не можете изменять изображение с помощью JavaScript.
  • Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)
  • Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например :focus).

Устранение неполадок и кросс-браузерная поддержка

Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в src атрибуте и использовать srcset атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами — старые же браузеры будут загружать PNG:

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:

background: url("fallback. png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

Подобно методу <img>, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.

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

Как включить SVG в ваш HTML код

Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:

<svg>
    <rect fill="green" />
</svg>
Плюсы
  • Вставка вашего SVG путём SVG inline позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.
  • Вы можете присваивать class-ы и id элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой атрибут представления SVG как свойство CSS.
  • SVG inline единственный метод, который позволяет вам использовать CSS-взаимодействия (как :focus) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).
  • Вы можете разметить SVG как гиперссылку, обернув в элемент <a>.
Минусы
  • Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.
  • Дополнительный SVG код увеличивает размер вашего HTML файла.
  • Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.
  • Вы можете добавить альтернативный вариант в элементе <foreignObject>, но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).

Как встраивать SVG при помощи

<iframe> (en-US)

Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью <iframe> выполняется как мы изучали ранее в главе От <object> к <iframe> — другие технологии внедрения.

Вот краткий обзор:

<iframe src="triangle.svg" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

Это — определённо не самый лучший метод для выбора:

Минусы
  • Как вы можете видеть, у iframe-ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают iframe-ы.
  • Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый origin, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.

В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.

Если Вы где-то застряли и ваш код не работает, вы всегда можете начать сначала, нажав кнопку Reset.

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

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

Глава 7 – Редактор векторной графики Draw¶

Что такое Draw?

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

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

Векторная графика позволяет облегчить хранение и масштабирование изображения.

Draw полностью интегрирован в пакет LibreOffice и это упрощает обмен рисунками между любыми компонентами пакета. Например, если создать изображение в Draw, то повторное использование его в документе Writer будет таким же простым, как копирование и вставка изображения. Также можно работать с такой графикой непосредственно в Writer или в Impress, используя подмножество функций и инструментов из Draw.

Функциональность LibreOffice Draw обширна и, хотя он не был предназначен для конкуренции с лучшими графическими редакторами, он обладает более обширной функциональностью, чем инструменты рисования, интегрированные в большинство иных офисных пакетов.

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

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

Главное окно Draw

Основные компоненты главного окна Draw показаны на рисунке Окно программы LibreOffice Draw и перечислены ниже:

  • Строка меню
  • Стандартная панель инструментов
  • Панель инструментов Линии и Заливки
  • Панель страниц
  • Рабочая область
  • Строка состояния
  • Панель инструментов Рисование
  • Боковая панель

Рабочая область

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

Окно программы LibreOffice Draw

Панель страниц

Рисунки в Draw можно разделить на несколько страниц. Многостраничные рисунки используются в основном для презентаций. На панели страниц показываются все страницы, которые были созданы в текущем документе Draw. Если панель страниц не отображается, выберите пункт меню . Чтобы внести изменения в порядок страниц, просто перетащите одну или несколько страниц на новое место.

Боковая панель

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

  • Свойства – cодержит подразделы для свойств объекта, которые можно изменить в соответствии с требованиями пользователя. Это подразделы Символы, Абзац, Область, Линия и Положение и размер.
  • Стили и форматирование – здесь можно редактировать и применять стили изображения к объектам в рисунке. При изменении стиля, они (изменения) автоматически применятся ко всем элементам, отформатированным с этим стилем, в рисунке.
  • Галерея – открывает Галерею Draw, откуда можно вставить объект в рисунок в виде копии или в виде связи. Копия объекта в рисунке не зависит от исходного объекта в Галерее. Изменения в исходном объекте в Галерее не имеют никакого влияния на их копии. Объект, вставленный в рисунок, как связь, остается зависимым от исходного объекта в Галерее. Изменения в оригинале отражаются во вставленном, как связь, объекте.
  • Навигатор – открывает Навигатор Draw, в котором можно быстро перемещаться между страницами в документе Draw или выбрать объект на рисунке. Рекомендуется давать страницам и объектам в документе осмысленные имена, что позволит легко идентифицировать их при использовании Навигатора.

Линейки

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

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

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

Для изменения единиц измерения линейки, которые можно задать самостоятельно, щелкните правой кнопкой мыши на линейке и выберите единицы измерения из выпадающего списка, как показано на рисунке Единицы измерения линейки.

На линейках отмечен размер выделенного объекта

Единицы измерения линейки

Строка состояния

Строка состояния расположена в нижней части экрана Draw, как и во всех компонентах LibreOffice; она включает в себя некоторые специфичные для Draw поля. Для уточнения деталей по содержимому и использованию этих полей, смотрите Глава 1 – Введение в LibreOffice в этом руководстве и Главу 1. Введение в Draw в полном Руководстве по Draw.

Строка состояния Draw

Примечание

Размеры объекта даны в текущих единицах измерения, их не следует путать с единицами измерения на линейках. Единицы измерения в строке состояния определяются в меню , где также можно изменить масштаб страницы.

Панели инструментов

Чтобы показать или скрыть различные панели инструментов Draw, выберите их в меню . В появившемся меню выберите, какие панели нужно отображать. Для получения более подробной информации о работе с панелями инструментов обратитесь к Глава 1 – Введение в LibreOffice в этом руководстве.

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

Стандартная панель инструментов

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

Стандартная панель инструментов

Панель инструментов Рисование

Панель инструментов Рисование является наиболее важным инструментом в Draw. Она содержит все необходимые функции для рисования различных геометрических и произвольных форм и для размещения их на странице.

Панель инструментов Рисование

Панель инструментов Линии и заливка

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

Панель инструментов Линия и заливка

Панель инструментов Форматирование текста

Если выбранным объектом является текст, то панель Линия и заливка заменяется панелью инструментов Форматирование текста, которая аналогична такой же панели в Writer. Для получения более подробной информации смотрите Глава 4 – Текстовый процессор Writer в этом руководстве.

Панель инструментов Форматирование текста

Панель инструментов Параметры

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

Панель инструментов Параметры

Выбор и определение цвета

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

Диалог Цвета

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

Диалог Область. Вкладка Цвета

Чтобы загрузить другие палитры нажмите на значок Загрузить список цветов. В диалоге выбора файла будет предложено выбрать одну из стандартных палитр LibreOffice (файлы с расширением .soc). Например, файл цветовой палитры web.soc, которая предназначена для создания рисунков для размещения на веб-страницах.

Окно выбора цвета также позволяет изменять любой цвет, изменяя числовые значения в соответствующих полях справа от цветовой палитры. Использовать можно известные цветовые схемы CMYK (Cyan, Magenta, Yellow, Black) или RGB (Red, Green, Blue).

Нажмите на кнопку Правка, чтобы открыть диалог Выбор цвета, где можно настроить свой индивидуальный цвет. Смотрите раздел Настройки цвета в Глава 2 – Общие параметры LibreOffice данного руководства.

Более детальное описание цветовых палитр и их настроек содержится в полном Руководстве по Draw, в Главе 10, Дополнительные возможности Draw.


Рисование основных фигур

В Draw представлен широкий выбор фигур, расположенных в палитрах, доступных из панели инструментов Рисование (рисунок Панель инструментов Рисование).

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

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

Примечание

При рисовании формы или выборе объекта для редактирования, поле информация на левой стороне в строке состояния отражает текущее действие: например, Линия создана, Текстовый объект XXYY выбран и так далее.

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

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

Зажмите клавишу Shift во время рисования линии, чтобы задать угол рисования линии кратный 45 градусам (то есть 0, 45, 90, 135 и так далее).

Примечание

Такое поведение при нажатой клавише Shift задано по умолчанию. Однако, если опция При создании или перемещении объектов в разделе Применять привязку в меню будет активна, то поведение клавиши Shift изменится на противоположное и линия будет автоматически рисоваться с углом кратным 45˚ при не нажатой клавише Shift.

Держите клавишу Ctrl нажатой, рисуя линию, для того, чтобы конец линии привязать к ближайшей точке сетки.

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

Примечание

Такое поведение при нажатой клавише Ctrl задано по умолчанию. Однако, если опция Привязка к сетке в меню активна, то нажатие клавиши Ctrl временно отключает привязку к сетке.

Удерживайте клавишу Alt во время рисования линии, чтобы начать рисовать её симметрично в обе стороны от начальной точки. Это позволяет рисовать линии, начиная с середины.

Линия рисуется с атрибутами (такими, как: толщина, стиль и цвет) по умолчанию. Чтобы изменить атрибуты уже нарисованной линии выберите её щелчком мыши, затем нажмите правую кнопку мыши и выберите пункт Линия из контекстного меню или выберите пункт меню , чтобы открыть одноименный диалог. Также можно выбрать раздел Свойства на боковой панели и открыть подраздел Линия. Стиль, толщину и цвет линии также можно выбрать, используя панель инструментов Линия и заливка.

Диалог Линия

Рисование стрелок

Стрелки рисуются так же, как и линии. Draw классифицирует стрелки, как подвид линий: линии со стрелкой на конце. Информационное поле в строке состояния показывает стрелки только, как линии. Нажмите на значок Линия со стрелкой на конце в панели инструментов Рисование, чтобы нарисовать стрелку. Стрелка появится в конечной точке линии после окончания рисования.

Изменение типа окончания линии (стрелки, кружки, квадратики и прочее)

В Draw доступны несколько типов окончаний линий (стрелки, кружки, квадратики и другие). Нажмите на маленький треугольник справа от значка Линии и стрелки в панели инструментов Рисование, чтобы открыть палитру, содержащую инструменты для рисования стрелок и линий. Также можно использовать пункт меню , чтобы открыть панель Стрелки в виде плавающей панели.

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

Панель инструментов Стрелки и доступные инструменты

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

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

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

Примечание

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

Чтобы нарисовать прямоугольник или квадрат из его центра, установите курсор на чертеже, нажмите кнопку мыши и, удерживайте нажатой клавишу Alt при перетаскивании курсора. Прямоугольник или квадрат используют в качестве центра начальную точку (ту, где впервые нажата кнопка мыши).

Рисование эллипсов и кругов

Чтобы нарисовать эллипс, нажмите на значок Эллипс на панели инструментов Рисование. Круг – это эллипс, у которого все оси равны по длине. Чтобы нарисовать круг, нажмите на значок Эллипс и, удерживая нажатой клавишу Shift, нажмите клавишу мыши в нужном месте листа и тяните курсор. Чтобы нарисовать эллипс или круг, начиная из центра, поместите курсор на нужное место на листе, нажмите на клавишу мыши и удерживая нажатой клавишу Alt, тащите курсор. Эллипс или круг используют в качестве центра начальную точку (ту, где вы впервые нажали кнопку мыши).

Примечание

Если удерживать нажатой клавишу Ctrl, и нажать на один из значков на панели Рисование: Линия, Прямоугольник, Эллипс или Текст, то на листе будет создан объект стандартного вида: размер, форма и цвет объекта будут иметь стандартное значение. Эти атрибуты могут быть изменены позже, если это потребуется. Смотрите Руководство по Draw для получения более подробной информации.

Рисование кривых и многоугольников

Чтобы нарисовать кривую или многоугольник нажмите на значок Кривая на панели инструментов Рисование. Нажмите на треугольник справа от значка, чтобы открыть палитру доступных инструментов (рисунок ниже). Значок принимает вид последнего использованного инструмента, что упрощает его повторное использование.

Если поместить курсор мыши на один из значков, появится всплывающая подсказка с описанием функции.

Панель Кривые (Линии) и доступные инструменты

Примечание

Если удерживать нажатой клавишу Shift при рисовании линий (кривой или многоугольника), то инструменты будут ограничены углами рисования в 45 или 90 градусов.

Кривые

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

Кривая с заполнением автоматически соединяет последнюю точку с первой точкой при завершении рисования и производит заливку получившейся фигуры стандартным цветом. Кривая без заполнения не замыкается в фигуру при окончании рисования.

Многоугольники

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

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

Многоугольники 45°

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

Полилинии

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

Если выбран инструмент Полилиния с заполнением, то конечная точка автоматически соединяется с начальной точкой и получившийся объект заполняется соответствующим цветом.

Добавление текста

Чтобы включить инструмент добавления горизонтального текста, нажмите на значок Текст или для вертикального текста – значок Вертикальный текст . Если значок Вертикальный текст не виден, активируйте опцию Азиатские в меню . После нажатия на значок Текст станет доступна панель инструментов Форматирование текста. На этой панели инструментов можно выбрать вид шрифта, его размер и другие свойства шрифтов перед началом ввода текста.

Примечание

Значок Вертикальный текст доступен только на панели инструментов Рисование.

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

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

Информация о тексте в строке состояния

Можно вставить разрыв строки, используя комбинацию клавиш Shift+Enter, или начать новый абзац, нажав клавишу Enter. Вставка разрывов строк или новых абзацев не прекращает редактирование текста и не удаляет текстовую врезку. После окончания набора текста щелкните мышью за пределами текстовой врезки, чтобы завершить добавление или редактирование текста.

Для редактирования существующего текста, щелкните дважды мышью по тексту, чтобы открыть панель Форматирование текста и приступить к редактированию.

Атрибуты текста (вид, размер, цвет и тому подобное) могут быть изменены прямо во время ввода текста. Новые атрибуты вступят в силу для текста, введенного после изменений. Чтобы изменить атрибуты для всего текста в текстовой врезке, нужно сначала выделить весь текст во врезке.

Можно создавать стили, которые будут использоваться для других текстовых врезок. Выберите пункт меню или нажмите клавишу F11, чтобы открыть диалог Стили и форматирование. Стиль влияет на весь текст в текстовой врезке. Для форматирования только части текста используйте прямое форматирование с помощью панели Форматирование текста или подразделов Символы и Абзацы в боковой панели.

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

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

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

Для получения более подробной информации по работе с текстом смотрите Руководство по Draw. Глава 2. Рисование основных фигур и Глава 9. Добавление и форматирование текста там же.


Точки соединений и соединительные линии

Точки соединений

Все объекты Draw имеют точки соединений, которые в нормальном состоянии не отображаются. Они становятся видимыми только, если нажат значок Соединительные линии на панели инструментов Рисование. Большинство объектов имеет четыре соединительных точки. Можете добавлять свои точки соединений или изменять существующие, используя панель инструментов Точки соединений. Используйте пункт меню , чтобы открыть эту панель.

Точки соединений

Точки соединений – это не то же самое, что точки, появляющиеся при выборе объекта. Те точки используются для перемещения или изменения формы объекта (и называются маркеры выделения). Точки соединений используются, чтобы прикрепить соединительную линию к графическому объекту таким образом, чтобы, при перемещении объекта соединительная линия осталась «приклеенной» к объекту и перемещалась вместе с ним. Для получения более подробных инструкций по использованию точек соединения прочитайте в Руководстве по Draw Главу 3. Работа с объектами и точками объекта, а также Главу 8. Соединения, блок-схемы и организационные диаграммы.

Панель инструментов Точки соединений и доступные инструменты

Соединительные линии

Соединительные линии – это линии или стрелки, концы которых автоматически присоединяются к точке соединения объекта. Соединительные линии особенно полезны при разработке организационных диаграмм и блок-схем. Когда объекты передвигаются относительно друг друга, то соединительные линии остаются прикрепленными к точке соединения. На рисунке ниже показаны для примера два объекта и соединительная линия между ними.

Соединительная линия между двух объектов

Draw предлагает широкий выбор различных соединительных линий и их вариантов. На панели инструментов Рисование щелкните треугольник справа от значка Соединительные линии, чтобы открыть палитру доступных инструментов типа Соединительная линия (рисунок ниже). Для получения более подробных инструкций по использованию соединительных линий смотрите в Руководстве по Draw Главу 8. Соединительные линии, блок-схемы и организационные диаграммы.

Панель инструментов Соединительные линии и доступные варианты линий

Рисование геометрических фигур

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

Совет

Использование данных инструментов для рисования геометрических фигур похоже на инструменты, используемые для рисования прямоугольников и квадратов. Для получения более подробной информации смотрите раздел Рисование основных фигур в данной главе и Руководство по Draw. Глава 2. Рисование основных фигур.

Основные фигуры

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

Панель инструментов Основные фигуры

Фигуры-символы

Щелкните на треугольнике справа от значка Фигуры-символы , чтобы открыть одноименную палитру инструментов.

Панель инструментов Фигуры-символы

Блочные стрелки

Щелкните на треугольнике справа от значка Блочные стрелки , чтобы открыть одноименную палитру инструментов.

Панель инструментов Блочные стрелки

Блок-схемы

Щелкните на треугольнике справа от значка Блок-схемы , чтобы открыть одноименную палитру инструментов. Создание блок-схем, организационных диаграмм, и аналогичные инструменты планирования описаны в Руководстве по Draw. Глава 8. Соединения, блок-схемы и организационные диаграммы.

Панель инструментов Блок-схемы

Выноски

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

Панель инструментов Выноски

Звезды и свитки

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

Панель инструментов Звезды и свитки

Примечание

Добавлять текст можно ко всем этим геометрическим фигурам. Для более подробного описания обратитесь к Руководству по Draw. Глава 2. Рисование основных фигур и Глава 10. Дополнительные возможности Draw.


Выделение объектов

Прямое выделение

Самый простой способ выделить объект, это щелкнуть мышкой прямо на нём. Для выделения объектов без заливки цветом, щелкните по контуру такого объекта. Один щелчок служит для выделения, повторный – для отмены выделения. Чтобы выделить или снять выделение более, чем одного объекта, нажмите и удерживайте кнопку Shift при щелчке мышью.

Выделение рамкой

Можно выбрать сразу несколько объектов, передвигая курсор с зажатой левой клавишей мыши. Во время движения курсора будет отображаться рамка вокруг объектов. Выделены будут только объекты, полностью расположенные внутри рамки.

Для множественного выделения объектов значок Выделение на панели инструментов Рисование должен быть нажатым.

Выделение скрытых объектов

Даже если объекты расположены за другим объектом и не видны, они всё равно могут быть выделены. Удерживая нажатой клавишу Alt, щелкните мышкой по объекту на переднем плане, под которым находится скрытый объект, а затем щелкните снова, чтобы выбрать скрытый объект. Если есть несколько скрытых объектов друг под другом, то удерживайте нажатой клавишу Alt и щелкайте по ним, пока не дойдете до объекта, который вам нужен. Для перемещения по объектам в обратном порядке, удерживайте нажатыми клавиши Alt + Shift и щелкайте мышкой по объектам.

При щелчке на выбранном объекте его контур на короткое время проявится через объекты, его скрывающие.

Примечание

Использование клавиши Alt работает на компьютерах с ОС Windows или Mac. На компьютерах под управлением Linux нужно использовать метод с клавишей Tab, описанный ниже.

Чтобы выделить объект, который скрыт другим объектом, с помощью клавиатуры, используйте клавишу Tab для перемещения по объектам, остановившись на объекте, который вам необходим. Для перемещения по объектам в обратном порядке, нажимайте сочетание клавиш Shift + Tab. Это очень быстрый способ достичь поставленной цели, но он может быть не очень удобным, если на рисунке большое количество объектов.

Расположение объектов

В сложных рисунках несколько объектов могут быть наложены друг на друга. Чтобы изменить порядок размещения объектов (передний/задний план), выделите объект, выберите пункт главного меню и выберите вариант Переместить вперед или Переместить назад. Также можно щелкнуть правой кнопкой мыши на объекте и выбрать пункт Расположить из контекстного меню, а затем вариант Переместить вперед или Переместить назад.

Настройки расположения также доступны при щелчке на треугольнике справа от значка Расположить на панели инструментов Линия и заливка. Откроется панель инструментов Положение, предоставляющая доступ к различным варианам расположения объектов (рисунок ниже).

Панель инструментов Положение и доступные инструменты

Перемещение и изменение размера объекта

При перемещении объекта или изменении его размера посмотрите на левую часть строки состояния в нижней части окна Draw (рисунок ниже). Область слева в строке состояния показывает, слева направо: какой объект выбран, его положение на рисунке в виде координат Х и Y, и размеры объекта. Единицы измерения выбираются в меню .

Левый край строки состояния при перемещении или настройке размеров объекта

Для получения более подробной информации о перемещении и о изменении размеров объектов обратитесь к Руководству по Draw. Глава 3. Работа с объектами и точками объектов.

Перемещение объекта

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

Перемещение объекта

Изменение размера объекта

Чтобы изменить размер выделенного объекта (или группы объектов), переместите курсор к одному из маркеров выделения по краям объекта. Курсор мыши изменит свою форму, указывая направление движения для этого маркера. Нажмите левой кнопкой мыши на одном из маркеров и, не отпускаяя её, тащите курсор в указанном направлении. При изменении размера объекта появится прозрачный контур будущего объекта (рисунок ниже). После достижения желаемого размера объекта отпустите кнопку мыши.

Изменение размера объекта

Результаты зависят от выбора используемого маркера выделения. Чтобы изменять размер объекта вдоль одной оси, используйте маркер на одной из сторон. Чтобы изменять размер по обеим осям, используйте угловой маркер.

Примечание

Если при изменении размера объекта нажать клавишу Shift, то изменение размера будет осуществляться симметрично по двум осям, так что соотношение длин сторон объекта остается таким же. Это поведение клавиши Shift работает для всех точек.

Это поведение по умолчанию клавиши Shift. Однако, если опция При создании и перемещении объектов в меню активна, то нажатие на клавишу Shift будет иметь обратное действие: соотношение сторон будет сохранено, если не нажата клавиша Shift.


Вращение и наклон объекта

Для получения более подробной информации о вращении и наклоне объектов, обратитесь к Руководству по Draw. Глава 3. Работа с объектами и точками объектов.

Вращение объекта

Чтобы вращать объект (или группу объектов), выделите объект, затем перейдите в режим вращения одним из следующих способов:

  • Нажмите на треугольник справа от значка Эффекты на панели инструментов Линия и заливка и в палитре инструментов нажмите на значок Повернуть .
  • Выберите пункт меню и нажмите значок Повернуть .

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

Вращение объекта

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

Примечание

Для 3D объектов вращение работает по-другому, потому что оно происходит в нескольких осях, а не в одной. Смотрите Руководство по Draw. Глава 7. 3D объекты для получения дополнительной информации .

Точка вращения, как правило, расположена в центре объекта. Чтобы изменить положение точки вращения, зажмите на объекте левую клавишу мыши и перетаскивайте объект, пока точка вращения не будет находится в нужном положении. Точка вращения может быть даже за пределами объекта.

Примечание

Если нажать клавишу Shift при вращении объекта, вращение будет производится дискретно с шагом в 15°.

Это поведение по умолчанию клавиши Shift. Однако, если опция При создании и перемещении объектов в меню активна, то нажатие на клавишу Shift будет иметь обратное действие: вращение всегда будет происходить с градацией по 15°, пока клавиша Shift не нажата.

Наклон объекта

Чтобы наклонить объект, используйте красные круглые маркеры (см.выше раздел Вращение объекта), расположенные по середине верхней, нижней и боковых сторон выделенного объекта. При наведении на любой из таких маркеров курсор мыши изменит вид на на две параллельные разнонаправленные стрелки. Ось, используемая, как основание, для наклона объекта, расположена прямо напротив маркера посередине одной из сторон. Эта ось остается неподвижной, в то время как другие стороны объекта будут наклоняться по отношению к ней на столько, насколько будет перемещён курсор мыши.

Нажмите на красную точку по середине любой из сторон объекта и, удерживая левую кнопку мыши, перетяните курсор для наклона объекта. Появится фантомное изображение наклонённого объекта (рисунок ниже), а текущий угол наклона будет показан в строке состояния.

Наклон объекта

Примечание

Если нажать клавишу Shift во время наклона объекта, то наклон будет осуществляться дискретно на величину 15°. Это поведение клавиши Shift по умолчанию. Однако, если опция При создании и перемещении объектов в меню активна, то нажатие на клавишу Shift будет иметь обратное действие: наклон всегда будет происходить дискретно по 15°, пока клавиша Shift не нажата.

Изменение объекта

Чтобы изменить объект или изменить его атрибуты, такие как цвет или толщина линии обрамления, и так далее, могут быть использованы: инструменты панели Линия и заливка, панель Форматирование текста, раздел боковой панели Свойства, либо контекстное меню. Более подробная информация по изменению объектов и изменению атрибутов объекта изложена в Руководстве по Draw. Глава 4. Изменение атрибутов объекта.

Панель инструментов

Линия и заливка

По умолчанию панель инструментов Линия и заливка расположена в верхней части окна Draw. Однако, если панель Линия и заливка не отображается, необходимо выбрать пункт меню , чтобы отобразить панель (рисунок ниже). Используя эту панель, можно редактировать наиболее распространённые атрибуты объекта.

Панель инструментов Линия и заливка

Панель инструментов Форматирование текста

Если в Draw выделить текст, то панель Линия и заливка автоматически заменится на панель Форматирование текста (рисунок ниже). Также можно в любой момент открыть эту панель, выбрав пункт меню . Инструменты на этой панели будут неактивными, пока не будет выделен текст.

Панель инструментов Форматирование текста

Боковая панель. Раздел Свойства

Когда выделен объект на листе, в боковой панели становятся доступны подразделы раздела Свойства. Они позволяют изменять свойства или параметры объекта без необходимости открывать диалоговые окна или использовать любые из доступных инструментов на различных панелях инструментов, доступных в Draw. Чтобы развернуть подраздел, нажмите плюс (+) рядом с подзаголовком раздела.

Боковая панель. Раздел Свойства

Контекстное меню

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

Пример контекстного меню

Форматирование линий и обрамлений

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

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

Общие свойства линий (стиль, цвет, толщина)

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

Стрелки, наконечники стрелок и концы линий

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

Меню Стили стрелок

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

Форматирование области заливки

Термин область заливки относится к внутренней части объекта, которая может быть однородного цвета, градиентом, заполнена текстурой или растровым изображением. Область заливки может быть частично или полностью прозрачной. В большинстве случаев можно выбрать один из стандартных параметров заполнения, которые имеются на панели Линия и заливка или в подразделе Область в разделе боковой панели Свойства. Можно также определить свои собственные области заливки. Для получения дополнительной информации о форматировании заливки обратитесь к Руководству по Draw. Глава 4. Изменение атрибутов объекта.

Различные типы заливки области

Использование стилей

Предположим, что нужно применить одну и ту же заливку, толщину линии и тип обрамления к нескольким объектам. Этот повторяющийся процесс может быть значительно упрощен за счет использования стилей. Стили позволяют задать шаблон форматирования (собственно стиль), а затем применить этот стиль к нескольким объектам. Для получения дополнительной информации о стилях, смотрите Главу 3. Использование стилей и шаблонов в данном руководстве, полное Руководство по Writer. Глава 6. Введение в стили и полное Руководство по Draw. Глава 4. Изменение атрибутов объектов.

Позиционирование объектов

Привязка

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

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

Для получения более подробной информации по функции привязки, смотрите полное Руководство по Draw. Глава 3. Работа с объектами и точками объектов и Глава 10. Дополнительные возможности Draw.

Привязка к сетке

Привязка к сетке позволяет позиционировать объект относительно точек сетки. Выберите пункт меню или щелкните по значку Привязка к сетке на панели инструментов Параметры, чтобы включить или отключить функцию привязки к сетке. Если панель инструментов Параметры не отображается, выберите пункт меню .

Позиционирование с использованием привязки к сетке

Отображение сетки

Чтобы отображать (или отключить отображение) сетку на листе Draw, выберите пункт меню или нажмите на значок Показать сетку на панели инструментов Параметры.

Конфигурация сетки

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

Конфигурация сетки

  • Вертикальный и горизонтальный промежуток между точками в сетке. Также можно изменить используемые единицы измерения в общих параметрах Draw, перейдя в меню .
  • Разрешение – это размер квадратов или прямоугольников в сетке. Если разрешение составляет 1 см по горизонтали и 2 см по вертикали, то сетка состоит из прямоугольников высотой 2 см и шириной 1 см .
  • Дополнительные узлы – это дополнительные точки, которые появляются вдоль сторон каждого прямоугольника или квадрата сетки. Объекты можно привязать к дополнительным узлам, а также к углам сетки .
  • Количество пикселей в поле Область привязки определяет, насколько близко вы должны приблизить объект к точке или линии привязки, прежде, чем он будет привязываться к ним.

Цвет сетки по умолчанию светло-серый. Чтобы изменить цвет сетки, откройте меню , в списке справа найдите пункт Сетка и задайте ему новый цвет.

Вспомогательные линии

В Draw есть вспомогательные линии, которые легко позволяют позиционировать объект с помощью линеек в верхней и левой части рабочей области. Для включения или выключения вспомогательных линий, откройте диалог из меню и выберите опцию Направляющие при перемещении.

Применение специальных эффектов

Используя Draw, можно применить множество специальных эффектов к объектам и группам объектов. Этот раздел – введение в некоторые из этих эффектов. Для получения более подробной информации о специальных эффектах обратитесь к полному Руководству по Draw. Глава 4. Изменение атрибутов объектов.

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

Панель Операции и доступные инструменты

Зеркальное отражение объектов

Самые простые и быстрые способы, чтобы перевернуть объект по горизонтали или по вертикали следующие:

  1. Щелкните по графическому объекту, появятся маркеры выделения.
  2. Щелкните по объекту правой кнопкой мыши и выберите в контекстном меню пункт (или По горизонтали), или выберите пункт меню (или По горизонтали)и выбранный объект будет отражен.

Тем не менее, инструмент Отразить на панели инструментов Операции может быть использован для большего контроля над процессом отражения. Использование инструмента Отразить позволит изменять положение и угол, под которым объект зеркально отразится. Как именно это делается, описано в полном Руководстве по Draw, в Главе 4. Изменение атрибутов объекта.

Зеркальная копия

В настоящий момент такой команды в Draw нет. Однако, зеркальное отображение объекта можно эмулировать с помощью инструмента Отразить так, как это описано в полном Руководстве по Draw. Глава 4. Изменение атрибутов объекта.

Искажение объекта

Три инструмента на панели инструментов Операции позволяют перетаскивать углы и края объекта, для искажения изображения.

  • Искажение – искажает объект в перспективе.
  • По кругу (под наклоном) — создает псевдо трехмерный эффект.
  • По кругу (в перспективе) — создает псевдо трехмерный эффект.

Во всех трех случаях Draw вначале спросит о преобразовании объекта в кривую. Этот первый шаг необходим, поэтому нажмите Да. Затем нужно перемещать маркеры объекта для получения желаемого эффекта. Смотрите полное Руководство по Draw. Глава 4. Изменение атрибутов объекта для получения дополнительной информации о том, как искажать объект.

Динамическая прозрачность градиентов

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

Инструменты Прозрачность и Градиент на панели инструментов Операции динамически управляют прозрачностью и цветом градиентов. Смотрите полное Руководство по Draw. Глава 4. Изменение атрибутов объекта для получения дополнительной информации о том, как создаватьть прозрачные и градиентные заливки в объекте.

Дублирование

Дублирование создает копии объекта с применением набора изменений, таких как цвет или вращение, к дубликатам, которые создаются.

Диалог Дублирование

  1. Выделите объект или группу объектов и выберите пункт меню или используйте сочетание клавиш Shift+F3, чтобы открыть одноименный диалог.
  2. Выберите необходимые параметры из доступных вариантов. Например, когда параметры в диалоговом окне на рисунке 44, применяются к прямоугольнику, они приводят к результату, показанному на рисунке 45.

Результат дублирования

Морфинг

Морфинг преобразует объект одной формы к объекту другой формы и работает только тогда, когда выбраны два объекта:

  1. Выделите два объекта разной формы.
  2. Выберите пункт меню .
  3. Задайте количество шагов, чтобы определить количество форм между двумя объектами.
  4. Выберите опцию Атрибуты морфинга, чтобы применить постепенное изменение свойств линий и заливок между двумя объектами (если таковые разные).
  5. Выберите опцию Такая же ориентация, чтобы плавно перейти между двумя объектами.

Диалог Морфинг

  1. Нажмите на кнопку OK и в результате будет создан новый объект, начиная с первого объекта, выбранного в качестве начального, и заканчивая вторым объектом, выбранным в качестве конечного. Например, когда параметры в диалоговом окне применяются к прямоугольнику и треугольнику с активной опцией Такая же ориентация, получается результат, показанный на рисунке ниже.

Результат морфинга


Объединение нескольких объектов

Используя Draw, можно группировать объекты вместе, что позволит рассматривать несколько объектов, как один, или объединять объекты, чтобы сформировать новую фигуру. Для получения дополнительной информации смотрите полное Руководство по Draw. Глава 5. Объединение нескольких объектов.

Группировка объектов аналогична вставке объектов в контейнер. Можно перемещать объекты, как единую группу, и применять глобальные изменения ко всем объектам внутри группы одновременно. Группировка всегда может быть отменена и объектами, которые составляют группу, после отмены можно будет манипулировать по отдельности. Также объекты внутри группы сохраняют свои индивидуальные свойства.

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

Группировка

Временная группировка

Временная группировка происходит, когда несколько объектов выбираются с помощью значка Выделить на панели инструментов Рисование или с помощью рамки выделения. Любые изменения к параметров объекта будут применяться ко всем объектам внутри временной группы. Например, можно повернуть временную группу объектов в полном составе.

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

Постоянная группировка

Постоянная группировка объектов создается после выбора всех необходимых объектов и выбора пункта меню , или после щелчка правой кнопкой мыши по выделенным объектам и выбора пункт Сгруппировать из контекстного меню, или после выделения объектов можно нажать комбинацию клавиш Ctrl + Shift + G. После снятия выделения с объектов, они всё равно останутся сгруппированными.

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

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

После окончания изменения отдельного элемента группы выберите пункт меню , или щелкните правой кнопкой мыши и выберите пункт контекстного меню Выйти из группы, или используйте сочетание клавиш Shift+F3.

Разгруппировка

Чтобы разгруппировать группу объектов, выделите группу, затем выберите пункт меню или щелкните правой кнопкой мыши и выберите пункт Разгруппировать из контекстного меню, или используйте комбинацию клавиш Ctrl + Alt + Shift + G.

Объединение объектов

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

Выберите несколько объектов, а затем выберите пункт меню или щелкните правой кнопкой мыши на объекте и выберите пункт Объединить из контекстного меню, или используйте сочетание клавиш Ctrl + Shift + K.

После выбора объектов станут доступны функции Сложить, Вычесть и Пересечь, с помощью которых можно создать новый объект из выбранных объектов. Смотрите полное Руководство по Draw. Глава 5. Объединение нескольких объектов для получения более подробной информации об этих функциях.

Упорядочивание, выравнивание и распределение объектов

В Draw можно упорядочить, выравнять и распределить выбранные объекты по отношению друг к другу:

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

Смотрите полное Руководство по Draw. Глава 5. Объединение нескольких объектов для получения более подробной информации по упорядочиванию и выравниванию объектов по отношению друг к другу.

Вставка и редактирование изображений

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

Draw включает в себя широкий спектр графических фильтров, так что он может читать и отображать несколько форматов графических файлов. Он также включает в себя несколько инструментов для работы с растровой графикой, но в нём отсутствует такая обширная функциональность, как в специализированных графических программах, таких, как Gimp или Adobe Photoshop. Смотрите полное Руководство по Draw. Глава 6. Редактирование изображений для получения дополнительной информации.

Добавлять изображения можно из нескольких источников:

  • Напрямую со сканера (меню )
  • Изображение, созданное в другой программе, включая фотографии с цифровой камеры (меню )
  • Из галереи Draw. Смотрите Главу 11. Графика, Галерея и текстовые эффекты в этом руководстве для получения более подробной информации.

Работа с 3D объектами

Хотя Draw и не соответствует по функционалу ведущим программам редактирования графики или изображений, он способен создавать и редактировать неплохие 3D рисунки.

Draw предлагает два типа 3D-объектов: 3D-тела и 3D-фигуры. В зависимости от того, какой тип выбран, существуют различные методы редактирования 3D-объекта (вращение, освещение, перспектива и так далее). 3D-фигуры проще в настройке и редактировании, чем 3D-тела. Тем не менее, 3D-тела в настоящее время имеют больше настроек.

Смотрите полное Руководство по Draw. Глава 7. Работа с 3D объектами для получения дополнительной информации.

Экспорт рисунков Draw

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

Также можно экспортировать файлы Draw в форматы HTML, XHTML, PDF или Flash. Экспорт в PDF для всех компонентов LibreOffice описан в Главе 10. Печать, экспорт и почтовая рассылка в этом руководстве.

При экспорте в HTML используется мастер преобразования, который создает столько веб-страниц, сколько страниц в текущем документе Draw. При желании можно выбрать страницы для отображения в навигаторе и настроить страницу index.html. Для получения более подробной информации обратитесь к Главе 12. Создание веб-страниц в данном руководстве.

Вставка примечаний в документ Draw

Вставить примечания в рисунок можно аналогично тому, как это делается в Writer и Calc:

Вставка примечаний

  1. Выберите пункт меню . Небольшое поле, содержащее инициалы текущего пользователя, появится в верхнем левом углу рисунка с большим текстовым полем рядом с ним. Draw автоматически добавит имя пользователя и дату в нижней части текстового поля.
  2. Введите или вставьте примечания в текстовое поле. Можно применять базовое форматирование к частям текста, выделив его, нажав правую кнопку мыши и выбрав нужные пункты контекстного меню. Из этого меню также можно удалить текущее примечание, все примечания одного автора или все примечания в документе.
  3. Также можно перемещать небольшие маркеры примечаний в любое место на листе. Обычно их помещают на объекте или вблизи объекта, к которому относится примечание.
  4. Чтобы отобразить или скрыть примечания используйте пункт меню Вид > Примечания.
  5. Используйте меню , чтобы ввести имя, которое будет отображаться в примечании в поле «Автор».
  6. Если более, чем один человек редактирует документ, то каждый автор автоматически выделяется другим цветом фона примечаний.

Примечание

Смотрите также статьи:

векторный редактор онлайн 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 может по праву считаться достойной альтернативой громоздким и дорогим графическим пакетам. Каких-то сложных работ вы нём не нарисуете, но он и не предназначен для них. Про его назначение я писал в самом начале – быстро состряпать простой логотип, кнопку или иконку.

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

‘; blockSettingArray[2][«minSymbols»] = 0;blockSettingArray[2][«minHeaders»] = 0;blockSettingArray[3] = []; blockSettingArray[3][«setting_type»] = 5; blockSettingArray[3][«text»] = ‘

‘; blockSettingArray[3][«minSymbols»] = 0; blockSettingArray[3][«minHeaders»] = 0; var jsInputerLaunch = 15;

7 бесплатных векторных графических редакторов

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

Проще говоря, в основу положены векторы, соединяющие начальную и конечную точки, а также другие точки, кривые и углы. Поэтому такие изображения можно масштабировать без потери качества. Данный формат широко используется в полиграфии, трехмерной графике, САПР. В этой статье перечислены популярные бесплатные векторные редакторы (с упоминанием платного Adobe Illustrator) — выбирайте!

Synfig Studio

Synfig — мощная программа с открытым исходным кодом для векторной 2D-анимации с поддержкой HDRI. Анимация создается в интерфейсе программы, а затем рендерится на сервере.

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

В программе имеется векторный твининг — это мощный инструмент для полного контроля над результатом. Промежуточные изображения будут строиться автоматически. Доступно более 50 слоев для статичных изображений и анимации.

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

YouiDraw

YouiDraw — векторный open source-редактор с большим количеством настраиваемых кистей. В наличии современные инструменты, например – карандаш для выполнения простых линий и контуров, а также различные средства работы с цветами.

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

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

Основная аудитория YouiDraw – стартапы, агентства, предприятия, малый и средний бизнес. Создана программа на HTML5 Canvas, данные хранятся на Google Диске. Работать в ней можно откуда угодно. Это мощный веб-инструмент для дизайна векторной графики. Интегрируется программа практически с любым веб-приложением.

Inkscape

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

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

Есть возможность импорта и экспорта файлов различных форматов, в том числе SVG, AI, PDF, PS, PNG и EPS. Экспорт и преобразование можно выполнять в том числе через командную строку.

Vectr

Если нужна программа с возможностью совместной работы, то попробуйте Vectr. Он прост в освоении и использовании — обучение не занимание много времени. Программа кросс-платформенная, поэтому можно использовать десктопную или веб-версию. Файлы проекта автоматически сохраняются и синхронизируется в режиме реального времени.

Совместная работа позволяет сотрудничать в режиме реального времени и синхронизировать работу. Доступны онлайн- и офлайн-версии для любой платформы. Есть возможность импорта и редактирования файлов формата SVG и растровых изображений, которые можно использовать в качестве фона. А также программа работает с форматами AI, EPS, PNG и JPEG.

Gravit Designer

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

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

Программа способна импортировать и редактировать файлы форматов PDF, EPS, Adobe Illustrator, Sketch, а также экспортировать многостраничные PDF-документы.

Skencil

Skencil — гибкое и мощное бесплатное интерактивное приложение для векторной графики. Для рисования используются прямоугольники, эллипсы и кривые, которые можно заливать и обводить. Отменить можно неограниченное количество действий.

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

Программа может экспортировать и импортировать различные форматы файлов. Имеются настройки для собственного формата и файлов Adobe Illustrator, PDF и SVG.

LibreOffice Draw

LibreOffice Draw — векторный графический редактор с открытым исходным кодом, в котором можно делать всё, что угодно, от эскиза на скорую руку до сложного плана. Но в основном предназначен для работы с графиками и диаграммами. Максимальный размер страницы для технических чертежей и обычных плакатов составляет 300×300 см.

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

В LibreOffice Draw есть инструмент для создания простых 3D-объектов: куба, сферы и цилиндра. С его помощью можно также изменить источник света. Есть коллекция изображений, звуков и анимаций, которые можно использовать в своих работах.

Между объектами можно провести специальные соединительные линии, чтобы показать связь. Объекты на рисунке можно выравнивать (в этом помогут визуальные подсказки) и привязывать к направляющим и линиям сетки.

Adobe Illustrator

Adobe Illustrator — это отраслевой стандарт для работы с векторной графикой, но она платная (единственная из всего списка). Позволяет создавать логотипы, иконки, типографику, рисунки, а также макеты для печати, интерфейсов сайтов или мобильных устройств, видео.

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

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

Обновления продукта Gravit Designer — журнал изменений

Версия 2019-1

29 января 2019 г.

В этом выпуске мы сосредоточились на интернационализации и некоторых давно назревших дополнениях и оптимизации в этом отношении. Во-первых, это поддержка языков с написанием справа налево (и сверху вниз), что, наконец, позволяет использовать в Gravit Designer такие сценарии, как арабский, иврит и персидский. Кроме того, мы также включили множество других наборов нелатинских символов, включая японский, китайский, бенгальский или грузинский, и это лишь некоторые из них.
Но мы не остановились на достигнутом: диалоговое окно «Облако» подверглось серьезной переработке с некоторыми новыми функциями, и у нас есть несколько новых элементов управления текстовыми слоями в Инспекторе, включая некоторые дополнительные параметры, такие как индекс, дроби и интервал между абзацами.
Ознакомьтесь со всеми изменениями или ознакомьтесь со статьей о выпуске в нашем блоге Medium.

Новые функции
  • Языковая поддержка RTL (справа налево) и TTB (сверху вниз) для текстовых слоев, доступная в этом новом раскрывающемся списке в Инспекторе.
  • Новый выбор «сценария» в Инспекторе для выбора между различными наборами символов, содержащимися в шрифте. Попробуйте Noto Sans , например.
  • Новые функции и улучшения текста:
    • Новые элементы управления жирным шрифтом, курсивом, подчеркиванием и зачеркиванием прямо в Инспекторе.
    • Новые расширенные настройки текста (доступны по этому значку): нижний индекс, верхний индекс, лигатуры и дроби; преобразование прописных, заглавных, строчных и строчных букв; отступ абзаца и интервал.Подробнее читайте в соответствующей статье.
    • Ctrl/Cmd + B и Ctrl/Cmd + I теперь работают со всеми текстовыми слоями, а не только с их частями.
    • При наличии нескольких начертаний шрифта в одном и том же текстовом слое теперь отображается Mixed  в поле Weight  .
    • Нажатие Shift + Enter  теперь создает плавный разрыв, на который не влияет расстояние между абзацами.
  • Возможность установить остановку масштабирования двойным щелчком по значку масштабирования на панели инструментов.Посмотрите это видео.
  • Если вы пропустили это, у нас есть полное руководство пользователя, доступное сейчас, которое должно охватывать все вопросы о Gravit Designer.
Улучшения
  • Улучшенное диалоговое окно в облаке ( Файл → Открыть из облака…  и  Файл → Сохранить в облаке… ) с обновленным внешним видом и некоторыми новыми функциями:
    • Возможность развернуть диалоговое окно, чтобы заполнить все окно .
    • Функция поиска.
    • Переключение между представлением карты (по умолчанию) и представлением списка для лучшего обзора и большей ясности.
    • Теперь файлы можно скачать прямо отсюда.
    • Операции с файлами теперь доступны только при выборе файлов. Кроме того, вы также можете использовать контекстное меню. Посмотрите это видео.
  • Значительно улучшена поддержка нелатинских наборов символов, включая арабский и иврит, кириллицу, китайский, индийский, японский, греческий, грузинский, вьетнамский, персидский, бирманский и другие.
    • Вставленный текст автоматически определяется и переключается на правильный шрифт.
    • Веб-шрифты теперь включают новые семейства шрифтов Noto Sans, что позволяет сразу же использовать эти наборы символов.
    • Включены правильные разрывы строк для азиатских символов.
  • Переименован Настройки в Настройки учетной записи в диалоговом окне пользователя для большей ясности.
  • Реорганизованы параметры в меню Справка на панели инструментов.
  • Обновлены веб-шрифты, чтобы включить все новые блестящие шрифты Google.
  • Добавлены правильные галочки для всех параметров на панели инструментов в приложении MacOS.
  • Продолжение улучшения поддержки SVG.
  • Приложены дополнительные усилия для повышения производительности Gravit Designer.
Исправления
  • Входы через социальные сети (Facebook, Google) теперь имеют правильную кнопку закрытия.
  • Работа над уменьшением артефактов рендеринга.
  • Исправлены различные ошибки для светлой темы.
  • Если открыть контекстное меню (щелчок правой кнопкой мыши) и нажать Esc , режим Edit больше не выходит, а только закрывается контекстное меню.
  • Фигуры, обрезанные до текстовых слоев, теперь корректно экспортируются в SVG.
  • Гарантировано, что Показать историю версий (из меню Файл  ) работает надежно и не теряет прогресс.
  • Сообщение, отображаемое при входе в Полноэкранный режим  (из  Вид → Переключить в полноэкранный режим… ) теперь отображается правильно в светлой теме.
  • При попытке доступа к функции PRO в бесплатном режиме теперь снова отображается правильное диалоговое окно.
  • Вход в систему теперь работает правильно в Chrome OS и в расширении Chrome.
  • Решена проблема, из-за которой холст искажался и делался непригодным для использования.
  • Иконки из библиотек теперь можно снова правильно вставлять.
  • Исправлены различные проблемы с угловыми градиентами в Firefox.

 

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

Векторный дизайн сенсорного экрана — Gravit Designer

Общие сведения о сенсорных технологиях в дизайне

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

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

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

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

Дизайн с поддержкой сенсорного экрана Gravit Designer  

В последней версии вы можете испытать Gravit Designer PRO, полностью адаптированную для сенсорных устройств, а также легко перемещаться и проектировать с мобильных устройств или планшетов с сенсорным экраном, ноутбука или настольного компьютера. Оживляйте иллюстрации прямо с помощью стилуса или собственного пальца, преобразовывая их непосредственно в цифровые векторные рисунки.  Для дизайна на ходу теперь можно использовать встроенные сенсорные функции на планшете или мобильном устройстве. Завершите векторный графический дизайн на Microsoft Surface, iPad, планшете Samsung Galaxy и других устройствах! Интерфейс Touch также совместим со стилусом и перьевыми устройствами, такими как Apple Pencil.

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

В этой версии , главное меню расположено в левом верхнем углу «гамбургер-меню».Там вы можете найти все параметры для File, Edit, Modify, View и Help ,   с соответствующими подменю.   Изображение профиля пользователя и все параметры учетной записи также находятся здесь:

Упрощенная панель инструментов с наиболее важными инструментами и их подменю, а некоторые параметры, такие как «Отразить» и «Повернуть», доступны в меню  Изменить  .

Такие параметры, как «Группировать», «Разгруппировать» и «Упорядочить», были перемещены на панель помощников, расположенную в нижней части холста.Там вы также можете найти клавиши-модификаторы Shift, Ctrl и Alt, а также другие функции, такие как копирование/вставка, удаление, преобразование в путь, полноэкранный режим и элементы управления смещением. «?» значок показывает экраны справки, если вам это нужно: 

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

Левая и правая панели по умолчанию закрыты, а их значки все расположено прямо под панелью инструментов. Вам просто нужно одно касание, чтобы открыть или закрыть их.Как и в веб-версии Gravit Designer, разные панели отображаются независимо от того, выбран ли элемент на холсте или нет: если ничего не выбрано, вы увидите значки для открытия панели «Документ» или «Комментарии». Если элемент выбран, будут показаны все остальные параметры панели: 

На этом видео вы можете проверить, как работает открытие панелей.

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

Для дизайна на ходу теперь можно использовать встроенные сенсорные функции на планшете или мобильном устройстве.Векторный графический дизайн на Microsoft Surface, iPad, планшете Samsung Galaxy и других устройствах! Приходите и посмотрите трейлер новой функции на нашем канале YouTube.

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

Версия Touch — это функция, доступная исключительно для пользователей Gravit Designer PRO.

10 Бесплатный онлайн-редактор векторов и офлайн-редактор векторов в 2021 году

Онлайн-редактор векторов сочетает в себе удобство установки и мощность облачных вычислений. Все, что вам нужно, это подключенный к Интернету компьютер с браузером, чтобы использовать его. Однако некоторые люди предпочитают устанавливаемое программное обеспечение из-за опасений относительно их конфиденциальности и так далее. По сути, это ваш выбор, но знаете ли вы, является ли ваш векторный редактор лучшим или хотя бы одним из 10 лучших офлайн или онлайн векторных редакторов 2021 года? Мы составили для вас список лучших приложений для векторной графики — в облаке и для настольных компьютеров, включая Wondershare Mockitt (самый простой векторный онлайн-редактор).

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

Готовы? Поехали!

Топ 5 векторных онлайн-редакторов

#1:WondershareMockitt3>

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

Основные характеристики
  • Комплексные библиотеки активов, содержащие тысячи компонентов из реальных интерфейсов пользовательского интерфейса на основе iOS, Material Design и т. д.
  • Шаблоны, которые помогут вам начать работу и придадут вашим проектам профессиональный вид.
  • Инструменты векторного рисования и редактирования.
  • Инструмент блок-схемы, который поможет вам создать рабочий процесс или нарисовать логику ваших прототипов.
  • Быстрое прототипирование с перетаскиванием ссылок с компонента на страницу или состояние страницы.
  • Привлекательный и полезный набор жестов, переходов, эффектов и анимации для демонстрации взаимодействий.
  • Широкий набор инструментов для совместной работы — совместное использование, просмотр, комментирование, загрузка, проверка кода и т. д.
  • Импорт файлов эскизов и фрагментов для дальнейшего проектирования.
Плюсы
  • Более доступный, чем любой другой дизайнерский инструмент премиум-класса
  • Бесплатная версия доступна для небольших проектов и личного использования
  • Наглядный макет с удобным интерфейсом и простой навигацией
  • Мощный инструмент для создания сложной векторной графики
Минусы
  • В бесплатной версии можно создать только 3 проекта.

#2:Вектор

Vectris — это, по сути, бесплатный векторный онлайн-редактор, но вы также можете установить настольный клиент. Онлайн-версия немного тяжеловата, а это означает, что она довольно сильно загружает память браузера, особенно при работе над сложными проектами. Кроме того, вам необходимо зарегистрироваться, если вы хотите включить функцию автоматического сохранения. Лучшее в Vectris то, что вам не нужно ничего платить. Все, что вам нужно сделать, чтобы получить полный доступ, это зарегистрировать учетную запись онлайн. Вы также можете использовать их фоторедактор и создатель дизайна изображений под названием Pixlr, инструмент премиум-класса с бесплатным пробным периодом.Это отличная установка для дизайнеров, которые также работают с фотографиями.

Основные характеристики
  • Базовый набор векторных инструментов для рисования и редактирования векторов
  • Создать несколько страниц и изменить их порядок
  • Загрузка изображений — импорт из других источников
  • Функция общего доступа
  • Доступно руководство пользователя и учебные пособия
Плюсы
  • Простой интерфейс — легко разобраться
  • Легкий доступ ко всем инструментам — интуитивно понятное расположение
  • Может работать в автономном режиме с устанавливаемыми версиями для Mac и Windows
Минусы
  • Необходимо запускать в актуальном браузере, иначе лагает
  • Незарегистрированные пользователи могут потерять работу, если интернет-соединение прервется
  • Нет расширенных функций векторного рисования и редактирования

#3: Редактор Boxy SVG

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

Основные характеристики
  • Базовые и расширенные инструменты векторного рисования — Безье, Дуга, от руки, фигуры, текст и т. д.
  • Дополнительные ресурсы — библиотека иконок, фотографий и т. д., генераторы форм, цветовая палитра и т. д.
  • История изменений — для отмены или повтора конкретных действий
  • Работает онлайн и офлайн (Mac, Linux)
  • 15-дневная бесплатная пробная версия для веб-версии и версии для Mac
Плюсы
  • Идеальный инструмент для графических дизайнеров всех уровней, от новичков до профессионалов
  • Удобная компоновка с легким доступом ко всем инструментам и панелям
  • Верхнее меню помогает перейти к определенным функциям
  • Несколько вариантов формата экспорта
Минусы
  • Для экспорта дизайнов необходимо зарегистрироваться
  • Нет бесплатной версии, кроме пользователей Linux (настольная версия)
  • Не полностью устанавливаемое приложение — установлено как PWA (прогрессивное веб-приложение), которое может работать в автономном режиме

#4:Фигма

Большинство людей знают Figma как популярный инструмент для создания прототипов, но он также имеет инструменты векторной графики, такие как Pen Tool и Vector Networks. Последнее является уникальной функцией, которую, в отличие от традиционных векторных инструментов, можно использовать для создания независимых векторных линий, которые могут быть либо объединены, либо оставаться отдельными. Figma также является отличным инструментом для совместного проектирования, как и WondershareMockitt, позволяя пользователям оставить отзыв и т. д.

Основные характеристики
  • Pen Tool и Vector Networks Tool для создания и редактирования векторных изображений
  • Плагины для других инструментов дизайна — импорт экранов и монтажных областей
  • Импорт изображений, включая файлы Sketch
  • Инструменты прототипирования для создания интерактивных дизайнов пользовательского интерфейса
  • Варианты стилей дизайна для создания систем дизайна и руководств по стилю
  • Большая библиотека компонентов, а также сторонние ресурсы
  • Режим наблюдения для презентации прототипов
Плюсы
  • Привлекательный пользовательский интерфейс с множеством функций
  • Обширная экосистема пользователей для совместной работы и идей с
  • Обширные ресурсы для компонентов дизайна, систем дизайна, наборов пользовательского интерфейса и т. д.
  • Интуитивно понятный пользовательский интерфейс
Минусы
  • Доступно не так много учебных ресурсов, несмотря на широкое использование
  • Поддержка в основном с форума пользователей
  • Дорогой инструмент для индивидуальных пользователей и небольших команд

#5:Vecteezy

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

Основные характеристики
  • Функции векторного редактирования для сложных и сложных конструкций
  • Очень близко к редактированию в стиле Illustrator или Photoshop
  • Бесплатная векторная библиотека и иллюстрации, стоковые фото и стоковые видео коллекции
  • Быстрое создание простых векторных рисунков
Плюсы
  • Бесплатное использование, если вы не хотите иметь доступ к премиальной коллекции произведений искусства
  • Отличный инструмент для редактирования дизайнов, созданных на других платформах
  • Простота в использовании, даже если у вас нет опыта проектирования
Минусы
  • Векторный редактор все еще находится на стадии бета-тестирования
  • Очень простые инструменты векторного рисования
  • Ограниченный набор инструментов для векторных рисунков

5 лучших векторных редакторов для настольных компьютеров

#1: Adobe Illustrator

Adobe Illustrator, несомненно, является лидером в области программного обеспечения для векторного дизайна для настольных сред Windows и macOS. Это образцовый векторный редактор для создания потрясающих визуальных эффектов, масштабируемых для больших форматов печати.Недавно представленный для iPadOS, Illustrator дает вам гибкость для создания рисунков, типографики, значков, логотипов и множества других компонентов дизайна. Программное обеспечение, безусловно, находится в дорогой части ценового диапазона, и если вам нужны облачные возможности, вам нужно будет взять весь пакет Creative Cloud со всеми приложениями, что обойдется примерно в 600 долларов в год. Большое значение, но из бюджета для многих частных лиц и небольших компаний, только начинающих.

Основные характеристики
  • Расширенные инструменты векторного рисования и редактирования
  • Простой в использовании интерфейс
  • Большое сообщество пользователей для поддержки
  • Инструмент на базе ИИ (Adobe Sensei AI) для использования цветовых схем из фотографий в ваших проектах
  • Интеграция с другими приложениями Creative Cloud, такими как Photoshop и Adobe XD
Плюсы
  • Масштабирование изображений до любого необходимого размера
  • Текстурные заливки выглядят и работают очень хорошо
  • Размеры монтажных областей можно изменять в соответствии с содержимым
  • Обширные инструменты кисти + создание собственных кистей
  • Возможность бесплатной пробной версии Adobe Stock при покупке
Минусы
  • Тяжелое приложение, требующее больших ресурсов
  • Инструмент трассировки нуждается в значительной доработке
  • Продукт стоит 31 доллар США. 49 для месячного плана

№2: CorelDRAW

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

Основные характеристики
  • Полный набор инструментов с универсальными инструментами для рисования и формовки
  • Создание макетов страниц и многостраничных брошюр и т. д.с линейками и сетками, чтобы ваш дизайн не выходил за рамки
  • Широкий набор инструментов для улучшения текста
  • Предустановки и инструменты веб-графики
  • Простое управление объектами
  • Профессионально созданные шаблоны
  • Расширенный инструмент векторной трассировки для преобразования растровых изображений в векторные
Плюсы
  • Усовершенствованный инструмент, очень зрелый и сложный
  • Самый старый графический дизайнер Windows на рынке
  • Одно приложение превратилось в полноценную экосистему инструментов проектирования и редактирования
Минусы
  • Дорогой продукт, подходящий только для больших проектных групп и некоторых профессионалов
  • Слишком много конкурирующих продуктов с одинаково привлекательными характеристиками

#3: Эскиз

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

Основные характеристики
  • Впечатляющий набор векторных инструментов для создания значков, логотипов, изображений
  • Наслоение и ограничения для создания сложных композиционных эффектов
  • Основные фигуры, логические операции и маскирование
  • Создание символов для повторного использования в проектах
  • Простая совместная работа с использованием рабочих областей и проектов (Sketch 71 и выше + требуется подписка)
Плюсы
  • Множество учебных ресурсов, таких как учебные пособия, видеоролики и т. д.
  • Все инструменты, необходимые для создания сложных векторных изображений
  • Надежное программное обеспечение для векторного проектирования с возможностями совместной работы
Минусы
  • Нет версии Windows
  • Нужны дополнительные инструменты для создания прототипов
  • Веб-приложение отделено от основной настольной утилиты, хотя и интегрировано в определенной степени

#4: Affinity Designer

Это кроссплатформенное приложение для Windows, macOS и iPadOS идеально подходит для творческих дизайнерских проектов, таких как концепт-арт, макеты дизайна, печатный контент, дизайн игр и т. д.Он получил несколько наград от таких компаний, как Apple, за свои возможности профессионального уровня. Affinity Designer обрабатывает как векторные, так и растровые изображения, что обеспечивает большую гибкость и больше вариантов. Вы также можете иметь разветвления в своем дизайне, используя функцию альтернативного сохранения истории будущего, и этот редактор векторной графики поддерживает широкий спектр типов файлов.

Основные характеристики
  • Полнофункциональный инструмент векторного проектирования и редактирования для опытных пользователей
  • Панорамирование и масштабирование с высокой частотой кадров
  • Коррекция, градиенты и эффекты в реальном времени
  • Предварительный просмотр всех трансформаций и правок кривых в реальном времени
  • Создан для работы с тяжелой проектной документацией — без задержек
Плюсы
  • Идеально подходит для опытных дизайнеров, которые не хотят ограничиваться своей дизайнерской платформой
  • Подходит для очень сложных и сложных конструкций
  • Преобразование в растр для редактирования на уровне пикселей, добавления зернистости и т. д.для реалистичного дизайна
  • Удобная функция выбора похожих объектов и элементов с похожими атрибутами
  • Неограниченное количество артбордов любого размера
  • 1 000 000% масштабирование
  • Удивительно недорогой
Минусы
  • Документация по новым функциям не всегда понятна
  • Нет трассировки растрового изображения
  • Нет плагинов или интеграций

#5: DrawPad

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

Основные характеристики
  • Инструменты «Кисть» и «Карандаш» для рисования или рисования изображений
  • Сенсорная опора для мобильных устройств
  • Эффекты, слои и другие функции
  • Поддерживает растровое и векторное редактирование
  • Поддержка формата рекламы для рекламных платформ, таких как Bing и Google
  • Чувствительность к давлению для сенсорной панели
Плюсы
  • Отлично подходит для создания значков и символов, фирменных бланков, печатных рисунков и других креативных материалов для офлайн- и онлайн-маркетинга
  • Поддерживает ряд файлов изображений (входные и выходные)
  • Шаблоны для быстрого начала работы
  • Инструмент «Изогнутый текст» — аналогичен функции пути к тексту, но с ограничениями
Минусы
  • Достаточно простой инструмент для векторного дизайна
  • Неразрушающее редактирование достигается только путем наслоения
  • Нечастые обновления

Как выбрать лучший векторный редактор

Теперь, когда мы увидели лучшее программное обеспечение для редактирования векторной графики в Интернете и на рабочем столе, как выбрать подходящее для вашего бизнеса или личного использования? Есть несколько критериев, которые мы рекомендуем вам учитывать:

Удобство использования : Интуитивно понятные пользовательские интерфейсы, визуально привлекательные макеты, удобный интерфейс — все это очень важно, поскольку эти элементы могут повысить вашу производительность. Mockit — прекрасный пример универсальности и гибкости, что делает его идеальным для дизайнеров, которые только начинают знакомиться с векторным дизайном.

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

Доступность функций : Illustrator и Sketch находятся довольно высоко в списке загружаемого программного обеспечения, а Figma и Mockittare — в верхней части списка онлайн-софта. Преимущество бесплатного программного обеспечения для редактирования векторов, такого как Mockit, заключается в том, что вы не платите, если только вы не работаете над несколькими проектами и вам не нужно увеличивать свои лимиты. Базовая версия бесплатна навсегда, а новые инструменты внедряются быстрыми темпами.

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


Настольный ПК и онлайн-программное обеспечение для редактирования векторов

Что лучше? Спор продолжается, но у каждой из этих моделей есть явные преимущества:

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

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

Подключение к Интернету : Программное обеспечение для настольных ПК также идеально подходит, когда ваше подключение к Интернету нестабильное, медленное или нестабильное. Большинство онлайн-инструментов решили эту проблему за счет автоматического сохранения вашей работы по мере внесения изменений, как в случае с Mockitt, но некоторые люди по-прежнему предпочитают автономные инструменты.

Обновления : приложения SaaS, такие как Mockitt и Figma, можно обновлять в облаке, и все, что нужно сделать пользователю, — это войти в новый сеанс, чтобы увидеть изменения. Напротив, обновления программного обеспечения для настольных компьютеров могут серьезно помешать вашей работе, что делает это огромным недостатком.

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

Векторная краска — Редактор SVG

Эффект
Наполнять
Шаблон

Ширина Высота

Инсульт
_______________. ………………………..- — — — — — — — — — — — — — — . — . — — . — . — — . — . — .. — .. — .. — .. — .. — ..

Линейное соединение МитраКруглыйСкос Ограничение линии ПопкиКруглыйПлощадь Смещение тире Внутренность ZeroEven

Непрозрачность

Эффект
Предупреждение: может быть медленным Нет эффекта

Обрезать путь
Обрезать путь
Маска
Маска

Текст
Цвет
Размер Б я
Семейство шрифтов ДжорджияПалатино LinotypeTimes New RomanArialArial BlackComic Sans MSIimpact, CharcoalLucida Sans UnicodeTahomaTrebuchet MSVerdanaCursiveFantasyCourier NewLucida ConsoleGeorgiaPalatino LinotypeTimes New RomanArialArial BlackComic Sans MSIimpact, CharcoalLucida Sans UnicodeTahomaTrebuchet MSVerdanaКурсивныйФэнтезиCourier NewLucida Console

Межбуквенное расстояние
Расстояние между словами
Высота линии

Путь
Переориентировать Редактировать Открыто закрыто Продолжить путь ПрямойИзогнутый Стартовый маркер Нет маркера Средний маркер Нет маркера Конечный маркер Нет маркера

Полилиния
Гладкий путь

Прямоугольник
Округлость
Преобразовать в путь

Эллипс/Линия
Преобразовать в путь

Эллипс
Радиус

Круг
Радиус

Фон
Прозрачный

Использовать

Изображение
Изменить изображение Строка штрих-кода Кодирование КОД128 (Б) EAN (13) СКП-А

Создавайте графику, логотипы и многое другое без обучения Adobe

Цена предложения и доступность могут быть изменены после публикации.

TL;DR: Пожизненная подписка на онлайн-редактор векторной графики Drawtify на 91 % меньше, чем ее стоимость в 899 долларов США. Получите ее с 25 февраля всего за 79,99 долларов США.


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

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

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

Хотите создать что-то с нуля? Drawtify имеет пять основных функций графического дизайна: инструменты векторного рисования, редактор анимированной графики, редактор фотографий, функцию компоновки и инструменты типографики.

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

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

Подобно Photoshop, Illustrator и InDesign, объединенным в один интуитивно понятный пакет, Drawtify создан для начинающих графических дизайнеров.Получите его на всю жизнь всего за 79,99 долларов.

Цены могут быть изменены.

1 кредит

онлайн-графический редактор svg

Janvas — онлайн-графический редактор svg {«unitKey»:»PIXEL»,»unitValue»:1,»drawingScale»:1,»findAllElementAtPoint»:1,»optimizeZoom»:false,»mantainAspectRatio» : true, «interactionLabelVisibility»: true, «svgAlignmentPreserveAspectRatio»: «xMidYMin slice», «snap»: {«distance»: 10, «offsetDistance»: 50, «snapToPoints»: true, «snapToContour»: true, «snapToPerpendicular» : true, «snapToTangent»: true, «snapToIntersection»: true, «snapToCenter»: true, «snapToGrid»: true, «snapToOffset»: true, «snapToAngles»: true, «snapAngleList»: [30,45],» useSmartPoints»: true, «useSmartGuides»: true}, «fixedDecimals»: 0, «rulersVisibility»: false, «gridVisibility»: false, «elementOriginVisibility»: false, «gridStep»: 1, «origin»: {«x» :0,»y»:0},»selectMainNodes»:true,»scaleStrokeAndEffects»:true,»scaleText»:true,»moveStep»:1,»rotateStep»:45}{«unitKey»:»PIXEL»,» unitValue»: 1, «drawingScale»: 1, «findAllElementAtPoint»: 1, «optimizeZoom»: false, «mantainAspectRatio»: true, «interactionLabelVisibility»: true, «svgAlignmentPreser veAspectRatio»:»xMidYMin slice»,»snap»:{«distance»:10,»offsetDistance»:50,»snapToPoints»:true,»snapToContour»:true,»snapToPerpendicular»:true,»snapToTangent»:true,» snapToIntersection»: true, «snapToCenter»: true, «snapToGrid»: true, «snapToOffset»: true, «snapToAngles»: true, «snapAngleList»: [30,45], «useSmartPoints»: true, «useSmartGuides»: true },»fixedDecimals»:0,»rulersVisibility»:false,»gridVisibility»:false,»elementOriginVisibility»:false,»gridStep»:1,»origin»:{«x»:0,»y»:0}, «selectMainNodes»:true,»scaleStrokeAndEffects»:true,»scaleText»:true,»moveStep»:1,»rotateStep»:45}Janvas — это онлайн-редактор векторной графики для дизайнеров, иллюстраторов и разработчиков. Janvas — графический онлайн-редактор svg{«unitKey»:»PIXEL»,»unitValue»:1,»drawingScale»:1,»findAllElementAtPoint»:1,»optimizeZoom»:false,»mantainAspectRatio»:true,»interactionLabelVisibility»: true, «svgAlignmentPreserveAspectRatio»: «xMidYMin slice», «snap»: {«distance»: 10, «offsetDistance»: 50, «snapToPoints»: true, «snapToContour»: true, «snapToPerpendicular»: true, «snapToTangent»: true, «snapToIntersection»: true, «snapToCenter»: true, «snapToGrid»: true, «snapToOffset»: true, «snapToAngles»: true, «snapAngleList»: [30,45], «useSmartPoints»: true, «useSmartGuides» «:true},»fixedDecimals»:0,»rulersVisibility»:false,»gridVisibility»:false,»elementOriginVisibility»:false,»gridStep»:1,»origin»:{«x»:0,»y»: 0},»selectMainNodes»:true,»scaleStrokeAndEffects»:true,»scaleText»:true,»moveStep»:1,»rotateStep»:45}

Лучшее программное обеспечение для графического дизайна на 2022 год

Вы можете доверять нашим обзорам

С 1982 года PCMag протестировала и оценила тысячи продуктов, чтобы помочь вам принимать более обоснованные решения о покупке. (Читайте нашу редакционную миссию.)

Как для профессионалов, так и для любителей персональные компьютеры и графическое программное обеспечение навсегда изменили способ работы дизайнеров и художников. В этом обзоре лучшего программного обеспечения для графического дизайна мы оцениваем несколько приложений, которые были в кольце с самого начала, а также некоторые новые поступления. Adobe представила Illustrator в 1987 году и Photoshop в 1989 году — в том же году, когда Corel представила CorelDraw. В то время как десятки подражателей приходили и уходили, эти программы все еще существуют.Мы углубляемся в то, как они сравниваются с новыми и как они сами превратились в современные удобные и мощные приложения для дизайнеров.

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


Сколько стоит программное обеспечение для проектирования?

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

Например, для продуктов Adobe, включенных в этот список, требуется подписка с различными ценами в зависимости от того, какие приложения вам нужны. Полный пакет Creative Cloud, включающий более 20 приложений, стоит 52,99 доллара в месяц. Creative Cloud Express предлагает модель freemium: многие функции можно использовать бесплатно, но полный набор функций стоит 9,99 долларов в месяц.

Вы можете получить продукты Affinity и Corel за единовременную плату в размере 54 долларов США.99 и 299 долларов соответственно. Inkscape полностью бесплатен и имеет открытый исходный код, но он заставляет вас обходиться без некоторых основных удобств, таких как простая установка на macOS.


Куда бы вы ни посмотрели, вы увидите графику всех видов. Названия должностей людей, которые их создают, также обширны: визуальный дизайнер, дизайнер пользовательского опыта (UX), дизайнер пользовательского интерфейса (UI), информационный архитектор, веб-дизайнер, иллюстратор, дизайнер взаимодействия, дизайнер приложений, ретушер фотографий, аниматор, поверхностный и дизайнер шаблонов, дизайнер шрифтов и так далее.Даже не дизайнеры могут работать с продуктами на основе шаблонов, такими как новые Adobe Creative Cloud Express и Canva.

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

Adobe постоянно добавляет новые возможности в стандартное для отрасли программное обеспечение Illustrator.

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

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


Как мы обходились без них?

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

До использования программного обеспечения, после того как клиент утвердил дизайн (представленный в виде отдельных эскизов и плотных композиций), мы воссоздали его, начертив структуру макета на доске для иллюстраций с помощью параллельной линейки, Т-образного квадрата, нерепродукции синий карандаш , и треугольник.Затем мы должны были отправить нашу утвержденную копию и письменные спецификации шрифта для набора через курьера наборщику, у которого был фототипограф. К нам вернулась полоска фотобумаги, которую мы обрезали, свернули обратную сторону липким горячим воском и разместили на досках в столбцах, которые мы начертили. Для любого штрихового рисунка, созданного постоянно засоряющимся техническим пером, чернилами и Pro-White, нам приходилось посылать за фотостатом, который возвращался на той же бумаге, что и камбуз.

Если вы хотели, чтобы арт был окрашен, вы должны были указать значение строки экрана для оператора stat. Мы назначали разные плашечные цвета, наклеивая физическое искусство на разные слои ацетатных листов, которые мы приклеивали к верхней части доски в идеальном совмещении. Кроме того, нам нужно было приклеить красную пленку, называемую рубилитом, к ацетату и вырезать формы, требующие маскировки. Затем мы отправили фотопленки цветному отделителю, который доставил четыре куска полутоновых пленочных негативов (CMYK). Конечно, пленку нужно было снимать для всех слоев, составленных на доске. После того, как мы аннотировали наши инструкции офсетному литографу, мы отнесли механические платы и большие листы пленки к съемнику в типографии, который обрезал и интегрировал пленку для передачи производителю печатных форм.

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

Рекомендовано нашими редакторами


Празднование выбора

Подобно набору приложений Adobe Creative Cloud, CorelDraw Suite состоит из восьми компонентов.Хотя наш обзор относится к самому приложению CorelDraw, приятно иметь доступ к группе интегрированных инструментов, между которыми вы можете наслаждаться продуктивностью беспрепятственного обмена ресурсами и совместимостью. Похожая история и с Affinity Designer. Adobe Creative Cloud по-прежнему является отраслевым стандартом, но экспортировать файлы Affinity Designer или CorelDraw в форматы Illustrator (или Photoshop) совсем несложно, и так же просто открыть файл Illustrator в этих приложениях.

Affinity Designer позволяет комбинировать растровые текстуры с векторными рисунками.

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


Куда мы идем?

В нашей все более цифровой экосистеме графические дизайнеры могут повысить ценность своей работы, если они разнообразят свои навыки и расширят свои таланты. На рынке труда доминируют дизайн интерфейсов и интерфейсов, а с ростом популярности умных динамиков и цифровых помощников, таких как Alexa от Amazon, Cortana от Microsoft, Assistant от Google и Siri от Apple, мы должны увидеть сдвиг в сторону проектирования голосового управления.

Хорошо, что каждое из этих приложений предлагает инструменты для проектирования для разных размеров экрана. CorelDraw позволяет загружать файлы непосредственно в WordPress, а многоуровневые файлы Photoshop являются наиболее востребованными разработчиками. Sketch и Adobe XD специально предназначены для разработки и прототипирования интерактивных интерфейсов для мобильных и веб-приложений. Даже Adobe Illustrator имеет оптимизированное рабочее пространство для веб-дизайна и мобильного дизайна с режимом предварительного просмотра пикселей. Он также может похвастаться рабочим процессом «Экспорт для экранов», который генерирует ваши ресурсы в разных размерах и форматах за одно действие.


Чего здесь нет — пока

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

Comments