векторные редакторы. век. Векторные редакторы online при обучении компьютерной графике в учреждениях спо
 Скачать 67.34 Kb.
|
|
Курсовая на тему: Векторные редакторы online при обучении компьютерной графике в учреждениях СПО Содержание Введение 3 1.Векторная графика. Виды и форматы изображений. 5 2.Обзор проприетарных online редакторов для обучения компьютерной графике 9 3.Обоснование и выбор лучшего online редактора для студентов СПО 17 Заключение 25 Список литературы 26 ВведениеАктуальность данной темы исследования состоит в том, что работа с компьютерной графикой - одно из самых популярных направлений использования персонального компьютера. Без нее не обходится ни одна современная мультимедийная программа. Необходимость широкого использования графических программных средств стала особенно ощутимой в связи с развитием Интернета. В связи с этим современные графические средства разрабатываются с таким расчетом, чтобы не только дать удобные инструменты профессиональным художникам и дизайнерам, но и предоставить возможность для продуктивной работы и тем, кто не имеет необходимых профессиональных навыков и врожденных способностей к художественному творчеству. Векторные графические редакторы позволяют пользователю создавать и редактировать векторные изображения непосредственно на экране компьютера, а также сохранять их в различных векторных форматах, например, CDR, AI, EPS, WMF или SVG. Цель данного исследования – изучение возможностей векторных редакторов online при обучении компьютерной графике в учреждениях СПО. Объект исследования – векторная графика. Предмет исследования – векторные редакторы online при обучении компьютерной графике в учреждениях СПО. Задачи работы: Дать характеристику «векторная графика», описать виды и форматы изображений. Изучить возможности проприетарных online редакторов для обучения компьютерной графике. Выбрать наиболее подходящий online редактор для студентов СПО. При написании работы были использованы монографии отечественных авторов по изучаемому вопросу, а также материалы Интернет ресурсов. Основными методами исследования, применяемыми в данной работе, являлись монографический метод (анализ научной и учебной литературы), логический (формулировка выводов и заключений на основе полученной информации) и другие методы. Представленная работа состоит из титульного листа, введения, трех частей, заключения и списка литературы. Векторная графика. Виды и форматы изображений.Существует два основных типа графических изображений: растровые изображения и векторные изображения. Растровое изображение определяется в терминах строк и столбцов отдельных пикселей, каждый из которых имеет свой собственный цвет, в то время как векторные изображения определяются в терминах линий, как прямых, так и изогнутых. Векторная графика – это способ представления объектов и изображений, основанный на математическом описании элементарных геометрических объектов, обычно называемых примитивам, таких как: точки, линии, сплайны, кривые Безье, круги и окружности, многоугольники. Объекты векторной графики являются графическими изображениями математических объектов. Термин «векторная графика» используется для пояснения различий от растровой графики, в которой изображение представлено в виде графической матрицы. При выводе на матричные устройства отображения (мониторы) векторная графика предварительно преобразуется в растровую графику, преобразование производится программно или аппаратно средствами современных видеокарт. Векторная графика обычно встречается в форматах графических файлов SVG, EPS, PDF или AI и существенно отличается от более распространенных форматов растровых графических файлов, таких как JPEG, PNG, APNG, GIF и MPEG4. EPS (Encapsulated PostScript): формат EPS компании Adobe является наиболее широко используемым векторным графическим форматом. Это стандартный формат обмена для полиграфической промышленности и хорошо поддерживаемый формат экспорта из программного обеспечения векторной графики [1]. AI (Adobe Illustrator Artwork): собственный формат Adobe Illustrator-это AI, который является модифицированной версией формата EPS. Формат AI является довольно распространенным, но менее универсальным, чем формат EPS. SVG (масштабируемая векторная графика): SVG-это стандарт векторной графики W3C. SVG набирает популярность по мере того, как современные браузеры увеличивают свою поддержку формата. SVG становится все более важным, поскольку различные разрешения экрана, которые должны поддерживать веб-сайты, продолжают расширяться. Стандарт World Wide Web Consortium (W3C) для векторной графики – это масштабируемая векторная графика (SVG). Этот стандарт является сложным и развивается относительно медленно, по крайней мере частично, в силу коммерческих интересов. Многие веб-браузеры теперь имеют некоторую поддержку для визуализации данных SVG, но полные реализации стандарта все еще сравнительно редки [8]. В последние годы SVG стал значительным форматом, который полностью не зависит от разрешения устройства визуализации, как правило, принтера или монитора дисплея. SVG-файлы по существу являются печатаемым текстом, который описывает как прямые, так и изогнутые пути, а также другие атрибуты [5]. Рендеринг SVG требует преобразования в растровый формат с разрешением, соответствующим текущей задаче. SVG также является форматом для анимированной графики. Существует также версия SVG для мобильных телефонов. В частности, конкретный формат для мобильных телефонов называется SVGT (SVG Tiny version). Эти изображения могут подсчитывать ссылки, а также использовать сглаживание. Они также могут отображаться в качестве обоев. В какой-то момент векторное изображение преобразуется в растровое графическое изображение, которое отображает биты непосредственно в пространство отображения (и иногда называется растровым изображением). Векторное изображение может быть преобразовано в файл растрового изображения до его отображения, чтобы его можно было переносить между системами. Векторный файл иногда называют геометрическим файлом. Большинство изображений, созданных с помощью таких инструментов, как Adobe Illustrator и CorelDraw, представлены в виде векторных файлов изображений. Файлы векторных изображений легче изменять, чем файлы растровых изображений (которые, однако, иногда могут быть повторно преобразованы в векторные файлы для дальнейшего уточнения). Анимационные изображения также обычно создаются в виде векторных файлов. Например, продукт Shockwave Flash позволяет создавать 2-D и 3-D анимации, которые отправляются пользователю в виде векторного файла, а затем растеризуются онлайн, по мере их поступления. Векторная графика использует математические уравнения для получения двумерного изображения. Векторные изображения имеют много преимуществ по сравнению с традиционной растровой графикой. Масштабируемость и гибкость делают его фаворитом толпы в цифровом мире. Итак, преимущества использования векторной графики заключаются в следующем: Векторная графика легко создается. Векторные рисунки масштабируются. Нет никакой проблемы искажения изображения. Рисунки легче поддаются повторному редактированию. Размеры файлов невелики. Изображения идеально подходят для детальных иллюстраций. Векторная графика хорошо смотрятся в печати. Такие графики обычно более эстетичны. Размер файла основан на сложности, а не на размере его глубины цвета. Рисунки хороши для анимации и презентаций. Векторная графика идеально подходит для детальной иллюстративной работы, разработки логотипов, художественных работ, тем самым поддерживая творческую личность студента. И из-за бесконечной масштабируемости без ущерба для качества, изображения также могут быть использованы для воспроизведения печати любого размера, большого или малого. Основное различие между векторной и растровой графикой заключается в том, что растровая графика состоит из пикселей, а векторная графика состоит из путей. Растровая графика, такая как gif или jpeg, представляет собой массив пикселей различных цветов, которые вместе образуют изображение. Обзор проприетарных online редакторов для обучения компьютерной графикеГрафические редакторы - это программы создания и редактирования цифровых изображений, фотографий. Люди творческих профессий: художники, фотографы, веб-мастера и иллюстраторы не обходятся без использования этих программ в своей повседневной практике. Освоить любительскую обработку графических изображений под силу даже неподготовленному пользователю, далекому от веб-дизайна. Каждый из нас, подобрав удобный графический редактор, может успешно улучшать свои персональные фотоснимки и создавать рисунки. В данный обзор попали как лучшие бесплатные графические редакторы, так и коммерческие редакторы изображений с профессиональным набором функций, инструментов для создания и обработки графических файлов. Графические онлайн-редакторы отлично справятся с такой рутиной, как: устранение эффекта красных глаз, обрезка, добавление фильтров и т. п. Но, если нужно обработать фото «по-крупному», лучше воспользоваться оффлайн-сервисами. Преимущества онлайн-редакторов: Не нужно скачивать программу. Картинку можно изменить с любого ПК при наличии доступа к интернету. Подойдут для обработки изображения «на скорую руку» – что-то подрезать, подправить, добавить рамок и т. п. Если пользователь работает в какой-либо организации, а там запрещено скачивать какой-либо софт, но обработать фото очень нужно, онлайн-редакторы отлично с этим справятся. Растровые графические редакторы являются оптимальными для цифрового редактирования фотографий, поскольку растровая графика способна отображать лучшую глубину цвета. Каждый пиксель может быть любым из 16 миллионов доступных цветов. Но если пользователь не работает с цифровыми фотографиями, векторные графические редакторы будут лучшим выбором для всех других типов редактирования дизайна, особенно из-за того, что векторная графика может быть масштабирована и обработана в любом размере с четкостью. На данный момент имеется множество различных редакторов. Самые популярные из них, это: Vectr, RollApp, iPiccy, Pixlr, Sumopaint, Boxy SVG, DrawSVG, SVG-edit. Самая популярная онлайн программа для редактирования векторной графики в интернете – Vectr (https://vectr.com/). Vectr-это бесплатное графическое программное обеспечение, используемое для быстрого и интуитивно понятного создания векторной графики. Это простой, но мощный кроссплатформенный веб- и настольный инструмент для воплощения любых проектов в реальность [11]. Имеется возможность отправить кому-либо документ Vectr для совместной работы в режиме реального времени без ожидания. Другие пользователи могут наблюдать, как создаются и редактируются проекты в реальном времени, независимо от того, находится пользователь в веб-приложении или настольной версии. В отличие от растровой графики, векторная графика всегда четкая и чистая. В программе можно создавать логотипы без размытия, презентации, открытки, брошюры, макеты веб-сайтов или любую 2D-графику. Сервис автоматически сохраняет и синхронизирует работу в режиме реального времени, на всех платформах. Vectr – хороший выбор для новичков и продвинутых пользователей SVG. Интерфейс аккуратный и не переполнен множеством инструментов, которыми пользователи обычно не пользуются. Редактор хорошо подходит для новичков в векторной иллюстрации. В комплекте идет несколько уроков. Даже если студенты не имеют представления о SVG, у них есть возможность быстро научиться. У рассматриваемой программы есть весь базовый набор для создания обычного изображения: фигуры, текст, слои, тени, рамки, фоны и т.д. Ему не сравниться с полноценным десктопным редактором, но для быстрых дизайнов и правок этого более чем достаточно. Изображение можно создавать с нуля или загрузить существующее [4]. При загрузке сложных иллюстраций в Vectr могут возникать ошибки (карты или детальные диаграммы). Редактор не всегда хорошо обрабатывает сложную графику. Однако для более простого SVG (иконки, логотипы и т.д.) этого редактора будет достаточно. Если в онлайн версии нет нужных студентам функций, можно скачать десктоп версию приложения. Редактор доступен для Windows, Mac, Linux и Chromebook. Самая полезная функция в Vectr – пользователь может делать ссылки и вставлять изображения прямо с сайта Vectr, что делает его эффективным хостингом для SVG. Множество сервисов блокируют загрузку SVG файлов, поэтому это серьезный плюс. Автор проектов может показывать SVG изображения из Vectr на удаленных сайтах типа WP, Medium, Tumblr и т.д., которые блокируют прямую загрузку SVG, но разрешают ее показ в режиме удаленного доступа. Vectr позволяет делиться векторной графикой в панели редактора, чтобы другие пользователи могли изменять созданную автором графику. Такая функция полезна при обучении групп студентов. То есть можно, например, сделать SVG-шаблон логотипа, который обучающиеся уже будут дорабатывать под себя. Все это в онлайн режиме. Следующим рассматриваемым инструментом редактирования векторной графики – является RollApp. В отличие от других инструментов из списка, когда пользователь заходит на домашнюю страницу RollApp, перед ним не открывается редактор. RollApp – это пакет приложений, а SVG-редактор – лишь одно из приложений. Отличный инструмент, это браузерная версия Inkscape. Для работы в RollApp нужен аккаунт. Можно зарегистрировать новый или войти с помощью Google, Facebook, Amazon. Без сомнения, RollApp (https://www.rollapp.com/) – самое богатое на функционал приложение из списка. На вид в этом приложении есть все необходимые функции, такие как слои, объекты, текст, пути, фильтры, эффекты, расширения и т.д. Большие файлы обрабатываются не так быстро, ведь действия выполняются на серверах приложения и через интернет. Вкратце – если нужно редактировать большие и сложные файлы, RollApp не будет идеальным вариантом, но для других задач, не входящими в базовый набор, этот редактор подходит лучше других. Графический редактор iPiccy (https://ipiccy.com/)– это возможность добавлять фотографии для обработки непосредственно через браузер, не скачивая и не устанавливая программу на компьютере (причем бесплатно). Множество простых в использовании инструментов позволяет улучшить качество фотографий. Доступен стандартный набор приемов, позволяющих изменить размер изображения, обрезать его, повернуть или отобразить зеркально, регулировать яркость, резкость, контрастность, экспериментировать с цветом, стирать и восстанавливать части изображения. Есть и более продвинутые функции: виртуальный макияж (ретуширование), помогающий подкорректировать лица на фотографиях, добавление надписей, стикеров или нарисованных от руки картинок, рамок. Вообще функциональность iPiccy такая же, как и у Photoshop Express. Графический редактор Pixlr (https://pixlr.com/) доступен в виде приложения на мобильном устройстве, программы для стационарного компьютера и онлайн сервиса. Pixlr позволяет загружать изображения с компьютера через браузер, с других сайтов, с веб-камеры, а также создавать коллажи разной формы из нескольких картинок и фотографий, от 2 до 25. Каждую картинку можно обработать с помощью стандартного набора инструментов, устранив недостатки, сделать более выразительным с помощью спецэффектов, добавить подложку и/или рамку, красочные стикеры, надписи, выполненные в разных стилях. Визуально графический редактор чем-то напоминает фотошоп. В целом, Pixlr Online Photo Editor – толковый инструмент для профессиональных дизайнеров, вебмастеров с удобным русскоязычным интерфейсом. Графический редактор Sumopaint (https://www.sumopaint.com/) – онлайн-приложение, очень похожее на всем знакомый Paint, с множеством поддерживаемых языков. Здесь можно обрабатывать загруженные с компьютера или из интернета изображения с помощью стандартного набора инструментов или рисовать собственные. Можно использовать виртуальные аналоги кисточки, карандаша, чернил и ластика, готовые шаблоны фигур и заливки, рисовать прямые и кривые линии, добавлять надписи, применять 3D эффекты. Готовое изображение сохраняется на компьютере или в облачном хранилище. Boxy SVG (https://boxy-svg.com/) — это редактор векторной графики начального уровня, наделённый полным набором самых необходимых функций, простым в освоении интерфейсом с поддержкой вкладок и настраиваемых горячих клавиш. С его помощью можно легко создавать баннеры, иконки, кнопки, графики, эскизы интерфейсов и другое [9]. Редактор поддерживает создание и редактирование векторных объектов при помощи нескольких инструментов, оформлять их цветовыми градиентами, дополнять текстовыми элементами. Не забыты функции редактирования мета-данных, реализован менеджер слоёв и объектов, имеется возможность импорта растровых изображений и экспорта файлов в PNG. В арсенале программы имеется довольно богатая библиотека готовых векторных рисунков, по которой возможен текстовый поиск, предусмотрен доступ к коллекции шрифтов Google Fonts. Существует также полноценная версия среды разработки для рабочего стола. В Магазине Windows программа предлагается совершенно бесплатно (рекламы или дополнительных покупок нет), язык интерфейса в текущей версии поддерживается только один — английский. Boxy SVG создан на основе веб-технологий, а потому также доступен пользователям Chrome, mac OS и Linux. Важной особенностью BoxySVG является наличие инспектора кода, что делает его одним из самых актуальных SVG инструментов для начинающих и профессиональных веб-разработчиков. Данный онлайн сервис будет очень полезен для обучающихся по направлениям подготовки «компьютерные и информационные науки», «информатика и вычислительная техника», «изобразительное и прикладные виды искусств». DrawSVG (https://drawsvg.org/). DrawSVG – полностью совместимый SVG-редактор с множеством функций. Этот редактор, в отличие от большинства других, не похож на браузерный порт настольного приложения. Меню сервиса расположено слева, там находятся основные инструменты для рисования, по клику открывается меню второго уровня и т.д. Сверху расположены элементы управления. Основное пространство занимает холст для работы с графикой. Пользователи интернета считают DrawSVG самым удобным онлайн-сервисом, позволяющим вебмастерам максимально просто создавать качественные SVG-элементы для своих сайтов. Редактор содержит внушительную библиотеку фигур, иконок, заливок, градиентов и шрифтов [10]. С помощью DrawSVG можно конструировать векторные объекты любого вида и свойств, изменять их параметры и рендерить в качестве отдельных картинок. Рисовать можно простые фигуры, есть кривые Безье, прямой и изогнутый текст, множество стилей обводок и заливок и т.д. Также SVG можно экспортировать в PNG. Имеется возможность встраивать в SVG сторонние мультимедийные файлы: видео и аудио с компьютера или сетевых источников. SVG-edit (https://jarjad.ru/svg-editor/). SVG-edit – это один из старейших браузерных редакторов svg, первая версия которого вышла в феврале 2009 года. Серверного функционала нет, все работает в браузере. Сохранить работу без добавления своего собственного функционала нельзя. Тем не менее, для редактора, чья жизнь началась с сильно ограниченной и незаметной программы для рисования векторной графики, функционал SVG-edit постоянно улучшался. С помощью SVG-edit можно рисовать простые фигуры (линии, прямоугольники, круги, многоугольники, линии от руки и т.д.), использовать пути, слои, градиенты, можно просматривать и редактировать SVG-исходники, экспортировать в PNG, JPEG, BMP, WEBP и т.д. Положительная отличительная особенность данного редактора состоит в том, что он полностью бесплатный. Домашняя страница проекта svg-edit homepage, там содержится много всевозможного контента, начиная от инструкций, заканчивая техническими деталями каждого релиза и информацией о возможных способах поддержки проекта (деньгами, тестированием, написанием нового кода и т.д.). Лучше понять возможности редакторов помогут видео-уроки и снятые пользователями туториалы. В них демонстрируется, как добавлять текст, вставлять в одно изображение фрагмент другого, конвертировать видеоклипы в анимацию, создавать коллажи, менять отдельные цвета на картинке или фото, экспортировать в Lunapic изображения из файлообменников. В таблице 1 представлены результаты сравнения функционала рассматриваемых редакторов. Таблица 1 – Сравнение функционала online редакторов.
Продолжение таблицы 1
В заключение можно сказать, что все современные онлайн редакторы имеют необходимое количество функций для редактирования и создания простых элементов векторной графики. Студентам по гуманитарным направлениям подготовки для изучения основ векторной графики отлично подойдут такие онлайн сервисы, как: RollApp, iPiccy, Pixlr, Sumopaint. Для специальностей, которые должны изучать векторную графику более углубленно, рекомендуется использовать следующие программы: Boxy SVG, DrawSVG. Такие мощные онлайн редакторы, как SVG-edit и Vectr – универсальны, т.е. они подойдут как для начинающих пользователей, так и для продвинутых разработчиков. В рассматриваемых редакторах доступный и понятный интерфейс, что позволяет использовать их студентам любых направлений. Обоснование и выбор лучшего online редактора для студентов СПООдним из лучших редакторов для обучения компьютерной графике в учреждениях СПО, можно считать SVG-edit. Среда содержит следующие функции [9]: Библиотека примитивов (Shape library). Коллекция сложных Svg контуров для любого дизайна. Добавление дополнительных элементов в библиотеку примитивов администратором. Библиотека составных картинок, хранимая на сервере. Интеграция с IAN Image Library, упрощенная возможность добавлять готовые бесплатные картинки в создаваемые документы. Импорт растровых изображений. Экспорт в форматы: png, jpeg, bmp, webp, pdf. Сохранение svg файлов, открытие готовых svg файлов. Копирование форматирования объектов - инструмент Eye Dropper Tool. Работа с зоной рисования: перетаскивание активной видимой области. Инструмент panning, изменение масштаба, инструмент лупа. Основные элементы рисования: Карандаш – рисование произвольных линий и контуров. Линия - есть два режима: простая линия соединяющая произвольные точки и линия между объектами, перемещающаяся вместе со связанными объектами. Прямоугольник - есть 3 режима: прямоугольник, квадрат, прямоугольник от руки. Последний режим предполагает, что пользователю нужно обвести произвольно пространство, после чего программа вокруг обведенного создаст прямоугольник, в который вписывается обведенное пространство [6]. Эллипс – 3 режима: эллипс, круг, эллипс от руки. Контуры – создает замкнутый или разомкнутый контур, из отрезков прямых линий. Текст. Пятиугольник. Звезда. Настройка стилей элементов: Цвет заливки, линейный и радиальный градиент. Цвет обводки. Толщина обводки. Стиль обводки. Прямая, штриховая, пунктирная и два вида штрихпунктирной. Настройки стилей линий и их стыковки. Угол поворота. Эффект размытия. Прозрачность. Тип маркера на начальной, конечной, и серединной точки линейных элементов. (текст, стрелочки). Относительное положение элементов друг относительно друга: Поддержка слоев. Перемещение одного объекта над другим в пределах одного слоя. Режим скетчей (wireframe). Элементы показаны без стилей, простыми рамками. Выравнивание элементов. Друг относительно друга и относительно рабочей зоны рисования. Действия undo/redo. Просмотр кода получающегося документа. Преобразование фигур в контур (path). Настройки и редактирование узлов контура. Интерфейс и команды SGV-edit. Основные элементы графического интерфейса svg-edit следующие: Зона рисования. Верхнее меню. Выпадающее главное меню (SVG-Edit) и набор инструментов, состав которых может меняться в зависимости от выбранного объекта и контента редактирования. Панель инструментов. Левый «сайдбар», представлены основные кнопки создания элементов диаграммы. Панель управления форматированием. Позволяет менять цвета / стили заливки и окаймления элементов Панель управления слоями. Вид меню зависит от контекста работы. Могут появляться дополнительные элементы управления в зависимости от текущего объекта, который редактируется. К примеру, если выделен прямоугольник, справа от основных появляются кнопки функций, позволяющие операции клонирования, удаления, изменения взаимного положения «по вертикали» относительно других элементов, управления углом поворота, редактирование размытия и т.д. Функция «Создать новое изображение». Выбор данной команды, которую также можно вызвать сочетанием клавиш Команда «Import Image», позволяет импортировать существующий svg файл, не перетирая при этом все что было нарисовано до ее выполнения. Импортированное изображения будет вставлено в верхний левый угол рабочей поверхности, поверх всех элементов текущего активного слоя. Если нужно поработать с отдельными элементами импортированного изображение, то необходимо выполнить команды «break link to reference element (make unique)». И/или команду «ungroup». Обе команды являются дополнительными и появляются в верхнем меню справа. Функция «Сохранить изображение» скачивает содержание текущего документы в виде svg файла. Image Library (Библиотека изображений) показывает список подключенных библиотек. По умолчанию это локальная серверная библиотека, пополнение которой – обязанность администратора, а также бесплатная библиотека разных векторных и растровых документов, для доступа на которую нужно зарегистрироваться и авторизоваться. «Export» позволяет экспортировать готовый документ в один из следующих форматов: png, jpeg, bmp, webp, pdf. Открывает новую закладку, на которой будет прорисовано изображение, которое нужно будет потом скачать средствами браузера. В случае экспорта в pdf, просто скачивает готовый файл. «Свойства документа» позволяет задавать название документа, размеры рабочего холста, а также определять вариант хранения изображений – в виде прямого кода или в виде ссылок на файлы-исходники. «Свойства редактора» дает возможность корректировать глобальные параметры редактора, такие как: Язык интерфейса Размеры значков команд на панелях инструментов Цвет фона рабочего холста либо cссылка на документ с картинкой Настройки линейки Настройки сетки SVG картинка состоит из набора команд, которые поясняют графическому движку последовательность шагов для отрисовки изображения. Для редактирования скрипта изображения и предназначена эта команда. Она может активироваться горячей клавишей U. Функция полезна, когда нужно сделать какое-то действие, которое не поддерживается через графический интерфейс. После внесение изменений в текстовом в формате и сохранения результата, программа проводит проверку на целостность кода и перерисовывает картинку. Еще одно применение – защита от возможных глюков. если по каким-то причинам программа отказывается сохранять изменения, то чтобы не потерять работу, можно сохранить код в текстовый файл и поменять расширение на svg. При нажатии на команду «Каркас» (горячая клавиша F) все слои становятся прозрачными, элементы рисунка представляются в виде каркасов. Например, таким образом можно удалить ненужный мелкий элемент, который попал под крупный и в обычном режиме редактора он не виден. Команда «Отменить» возвращает картинку в состояние до последнего сделанного изменения. SVG - edit поддерживает множественную отмену. «Вернуть» - команда обратна «отменить». Панель инструментов. В левом сайдбаре расположена панель инструментов. В svg-edit v3.0 панель состоит из 14-ти значков: Выделить Карандаш Линия Прямоугольник Эллипс Контуры Библиотека простых клипартов (shape library) Текст Изображение Лупа Полигон Звезда Перемещение (panning) Перенос форматирования Инструмент «Выделить» позволяет выделить один или несколько элементов рисунка. Выделяемыми элементами могут быть простые штрихи или комплексные объекты – группы простых элементов. После выделения объекты помещается в «прямоугольник выделения» который позволяет поворачивать выделенный элемент, а также менять его геометрические размеры. После выделения нескольких объектов, на верхней панели управления появляются дополнительные иконки команд. Команды слева направо после undo: Клонировать элементы (горячая клавиша - D) Удалить элементы (с клавиатуры можно нажать или Delete, или Backspace) Группировать/разгруппировать (горячая клавиша – G) Сделать гиперссылку, после сохранения в готовом SVG документе элемент станет кликабельным. 6 команд выравнивания (по левому краю; центрировать по вертикальной оси; по правому краю; по верхнему краю; центрировать по горизонтальной оси; по нижнему краю) Настройки выравнивания. Например, если будет выбрана настройка «страница», то команда выравнивания «по нижнему краю» переместит выделенные квадраты к низу рабочей области. Особое внимание следует уделить библиотеке простых клипартов. По умолчанию библиотека содержи порядка 300 простых примитивов, которые можно использовать для создания любых svg документов. Разделы такие: Basic: разные простые формы – концентрические окружности, треугольники, прямоугольники, ромбы стрелки и т.д. Objects: мяч, молния, лампочка, облако, катана и т.д. Symbols: самолет, зонт, инь-янь, радиация, глобус, вешалка и т.д. Arrows: фигурные стрелки Flowchart: элементы блок-схем Animals: контуры диких и домашних животных Cards and Chess: карты и шахматы Dialog balloons: облачка с диалогами, как в комиксах Electronics: Элементы схем электрических принципиальных Mathematical: Заначки математических операций Music: ноты, скрипичные ключи Miscellaneous: разные значки, не попадающие в определённые категории, такие как кость, единорог, череп и т.д. Raphaeljs.com set 1: набор дизайнерских значков, предоставленных Raphaeljs Raphaeljs.com set 2: второй набор: набор дизайнерских значков, предоставленных Raphaeljs Формат SVG позволяет интегрировать в документы растровые картинки. Для того чтобы это сделать, достаточно просто перетащить картинку в активное окно браузера где работает обучающийся. Данный способ хорош, если нужная картинка уже сохранена. Кроме того, есть кнопка на панели инструментов - в виде монитора. При нажатии на которую программа предлагает ввести url картинки из интернета с любого ресурса (скопировать можно кнопкой «copy image address») картинка сразу загрузится в активное окно svg-edit, где пользователь сможет продолжить с ней работать. В таком способе не нужно тратить время на сохранение файла на локальный компьютер. Лупа. Горячая клавиша – Z. Выделенный лупой кусок изображения растягивается на всю видимую область, так пользователь сможет усовершенствовать детали. Сред позволяет создавать равносторонние полигоны. Количество сторон обучающийся может отрегулировать дополнительными полями, появляющимися в верхней панели инструментов. Также можно создавать звезды, количество лучей для новой создаваемой звезды задается дополнительными полями, появляющимися в верхней панели инструментов. Важной функцией является «Копирование стиля» Горячая клавиша I. Позволяет переносить стиль оформления с одного объекта на другой. Для того чтобы воспользоваться: Нужно выбрать тот объект, с которого студент хочет перенести стиль. Нажать кнопку этой функции. Выбрать те объекты, на которые планируется перенести форматирование. Слои помогают реализовать динамику (движение) попросту сменяя один слой другим, без необходимости перерисовывать целую картину. Внедрение уровне позволяет упростить работу с документом, поскольку ускоряет выделение объектов в документе в условиях множества пересекающихся форм. Чтобы открыть панель управления слоями, нужно кликнуть на надписи Layers, или потянуть границу налево. На панели управления слоями представлен список созданных слоев, при этом активный слой выделен. Изменение графики возможно только для объектов на активном слое. Пользователь может выбрать другой слой просто кликнув на него в списке. Любой графический элемент можно перемещать между слоями, для этого нужно выбрать нужный элемент и выбрать желаемый слой в выпадающем списке «переместить выделенные». В спецификации svg конур (path) является универсальным элементом, которым можно описать любые примитивы. При этом спецификация содержит возможность описания примитивов другими средствами. Данная кнопка преобразует те, другие примитивы (прямоугольник, звезду, многоугольник, и т.д.) в контур. Когда пользователь добавляет новый объект на холст, например, прямоугольник или эллипс, он ориентирован стандартно - параллельно осям X и Y. SVG-edit предлагает два различных способа для изменения угла наклона. Можно просто выделить, объект установить курсор в зелёный рычажок над прямоугольником и повернуть элемент на нужный угол вручную, или можно установить угол поворота используя поле в верхней панели управления - задать точное значение угла поворота в градусах. После активации функции редактирования контуров система подсвечивает все узлы данного контура голубыми точками с синими каемками. Для каждого узла существуют две контрольные точки, которые определяют характеристики отрезка, находящегося в соответствующей стороне от узла. Контрольные точки могут быть связанными, в этом случае если мы поворачиваем одну контрольную точку, то вторая тоже поворачивается таким образом, что обе контрольные точки находятся на одной линии с узлом и противоположны друг другу (пример на рисунке выше – точка А). Также контрольные точки могут быть не связанными, в данном режиме при повороте одной контрольной точки вторая не двигается (пример на рисунке выше – точка Б). Исходя из вышесказанного можно сделать вывод о том, что рекомендуемая программа отлично подходит для студентов СПО. В ней есть все необходимые функции для создания, редактирования и распространения графической информации. Онлайн среда данного программного решения не перегружена лишними элементами управления, она имеет приятный и интуитивно понятный интерфейс, что позволяет свободно ориентироваться в редакторе любому начинающему разработчику изображений. ЗаключениеОсвоение информационных технологий является неотъемлемой частью обучения как студентов ВУЗов, так и студентов СПО. Для выполнения творческих, графических и промышленных проектов обучающиеся используют компьютерные программы векторной графики. Векторная графика идеально подходит для детальной иллюстративной работы, разработки логотипов, художественных работ, тем самым поддерживая творческую личность студента. Для более удобной работы в группах, целесообразней использовать онлайн редакторы с встроенным облачным хранилищем. Помимо этих рассмотренных SVG-редакторов есть и другие, но мало кто предлагает больший функционал, чем перечисленные в данной работе. Если студенты захотят всерьез заняться SVG, а в этих инструментах нет нужного им функционала, то всегда можно скачать десктоп SVG-редактор типа Illustrator или Inkscape. Однако для легкости, быстроты и гибкости все вышеперечисленные редакторы предлагают полезный набор функций. Для студентов СПО рекомендуется программа SVG-edit. В ней есть все необходимые функции для создания и редактирования векторной графики. В онлайн среде нет лишних элементов управления, она имеет приятный и интуитивно понятный интерфейс. Простота в использовании позволяет свободно ориентироваться в редакторе студенту любой специальности. Этот редактор целиком создан на HTML5, CSS3 и JavaScript и не использует серверы для обработки данных. Код SVG-Edit открыт. Поэтому при желании продвинутые студенты могут скачать его и модифицировать, чтобы создать свою версию редактора. Список литературыВасильев, С.А. Компьютерная графика и геометрическое моделирование в информационных системах : учебное пособие : в 2 ч. / С.А. Васильев ; Министерство образования и науки Российской Федерации, Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «Тамбовский государственный технический университет». – Тамбов : Издательство ФГБОУ ВПО «ТГТУ», 2015. – Ч. 2. – 82 с. : ил. – Режим доступа: по подписке. – URL: http://biblioclub.ru/index.php?page=book&id=445059 (дата обращения: 25.03.2020). – Библиогр. в кн. – ISBN 978-5-8265-1432-0. – Текст : электронный. Гумерова, Г.Х. Основы компьютерной графики : учебное пособие / Г.Х. Гумерова ; Министерство образования и науки России, Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «Казанский национальный исследовательский технологический университет». – Казань : Казанский научно-исследовательский технологический университет, 2013. – 87 с. : ил., табл. – Режим доступа: по подписке. – URL: http://biblioclub.ru/index.php?page=book&id=258794 (дата обращения: 25.03.2020). – Библиогр. в кн. – ISBN 978-5-7882-1459-7. – Текст : электронный. Жук, Ю. А. Информационные технологии: мультимедиа : учебное пособие / Ю. А. Жук. — 2-е изд., стер. — Санкт-Петербург : Лань, 2020. — 208 с. — ISBN 978-5-8114-4939-2. — Текст : электронный // Лань : электронно-библиотечная система. — URL: https://e.lanbook.com/book/129082 (дата обращения: 25.03.2020). — Режим доступа: для авториз. пользователей. Зиновьева, Е. А. Компьютерный дизайн. Векторная графика : учебно-методическое пособие / Е. А. Зиновьева. — Екатеринбург : УрФУ, 2016. — 115 с. — ISBN 978-5-7996-1699-1. — Текст : электронный // Лань : электронно-библиотечная система. — URL: https://e.lanbook.com/book/98281 (дата обращения: 25.03.2020). — Режим доступа: для авториз. пользователей. Инженерная и компьютерная графика : учебное пособие / авт.-сост. Н.Ю. Братченко ; Министерство образования и науки Российской Федерации, Северо-Кавказский федеральный университет. – Ставрополь : СКФУ, 2017. – 286 с. : схем., ил. – Режим доступа: по подписке. – URL: http://biblioclub.ru/index.php?page=book&id=494714 (дата обращения: 25.03.2020). – Библиогр. в кн. – Текст : электронный. Катунин, Г. П. Основы мультимедийных технологий : учебное пособие / Г. П. Катунин. — Санкт-Петербург : Лань, 2018. — 784 с. — ISBN 978-5-8114-2736-9. — Текст : электронный // Лань : электронно-библиотечная система. — URL: https://e.lanbook.com/book/103083 (дата обращения: 25.03.2020). — Режим доступа: для авториз. пользователей. Татаринова, М.С. КОМПЕТЕНТНОСТНЫЙ ПОДХОД В ОБУЧЕНИИ СТУДЕНТОВ-ДИЗАЙНЕРОВ КОМПЬЮТЕРНОЙ ГРАФИКЕ / М.С. Татаринова // Преподаватель ХХI в. — 2018. — № 4(ч.1). — С. 196-205. — ISSN 2073-9613. — Текст : электронный // Лань : электронно-библиотечная система. — URL: https://e.lanbook.com/journal/issue/311425 (дата обращения: 25.03.2020). — Режим доступа: для авториз. пользователей. Шпаков, П.С. Основы компьютерной графики : учебное пособие / П.С. Шпаков, Ю.Л. Юнаков, М.В. Шпакова ; Министерство образования и науки Российской Федерации, Сибирский Федеральный университет. – Красноярск : Сибирский федеральный университет, 2014. – 398 с. : табл., схем. – Режим доступа: по подписке. – URL: http://biblioclub.ru/index.php?page=book&id=364588 (дата обращения: 25.03.2020). – Библиогр. в кн. – ISBN 978-5-7638-2838-2. – Текст : электронный. Boxy SVG. [Электронный ресурс] — Режим доступа: https://boxy-svg.com/ (дата обращения: 16.03.2020). Cloud Platform for Native Applications. [Электронный ресурс] — Режим доступа: https://www.rollapp.com/ (дата обращения: 16.03.2020). Free Vector Graphics Software. [Электронный ресурс] — Режим доступа: https://vectr.com/ (дата обращения: 16.03.2020). |