Працуем з вектарнай графікай онлайн


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

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

Чытайце таксама: Вучымся маляваць у Adobe Illustrator

Як працаваць з SVG онлайн

Выканаўшы адпаведны запыт у Google, вы зможаце азнаёміцца ​​з велізарнай колькасцю разнастайных вектарных онлайн-рэдактараў. Але пераважная большасць такіх рашэнняў прапаноўваюць даволі бедныя магчымасці і часцей за ўсё не дазваляюць працаваць з сур'ёзнымі праектамі. Мы ж разгледзім лепшыя сэрвісы для стварэння і рэдагавання SVG-малюнкаў прама ў браўзэры.

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

Спосаб 1: Vectr

Прадуманы вектарны рэдактар ​​ад стваральнікаў знаёмага многім сэрвісу Pixlr. Гэты інструмент будзе карысны як пачаткоўцам, так і дасведчаным карыстачам ў працы з SVG.

Нягледзячы на ​​багацце функцый, згубіцца ў інтэрфейсе Vectr будзе дастаткова складана. Для пачаткоўцаў прадугледжаны падрабязныя ўрокі і аб'ёмныя інструкцыі па кожнай з складнікаў сэрвісу. Сярод інструментаў рэдактара маецца ўсё для стварэння SVG-карцінкі: постаці, абразкі, рамкі, цені, пэндзля, падтрымка працы з пластамі і да т.п. Намаляваць малюнак можна з нуля альбо ж загрузіць ўласнае.

Анлайн-сэрвіс Vectr

  1. Перад пачаткам карыстання рэсурсам пажадана аўтарызавацца ў ім пры дапамозе адной з даступных соцсетей або стварыць уліковы запіс на сайце з нуля.

    Гэта не толькі дазволіць загружаць вынікі вашай работы на кампутар, але і ў любы момант захоўваць змены ў «воблаку».
  2. Інтэрфейс сэрвісу максімальна просты і зразумелы: злева ад палатна размешчаны даступныя інструменты, а справа - змяняецца ўласцівасці кожнага з іх.

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

Да магчымасцяў экспарту ставіцца таксама адна з найбольш адметных магчымасцяў Vectr - падтрымка прамых спасылак на SVG-праект у рэдактары. Многія рэсурсы не дазваляюць загружаць вектарныя малюнкі да сябе наўпрост, але тым не менш дазваляюць іх выдаленае адлюстраванне. У гэтым выпадку Вектра можна выкарыстоўваць як самы сапраўдны хостынг SVG, чаго іншыя сэрвісы рабіць не дазваляюць.

Варта адзначыць, што рэдактар ​​не заўсёды карэктна апрацоўвае складаную графіку. Па гэтай прычыне некаторыя праекты могуць адчыняцца ў Vectr з памылкамі або візуальнымі артэфактамі.

Спосаб 2: Sketchpad

Просты і зручны вэб-рэдактар ​​для стварэння SVG-малюнкаў, заснаваны на платформе HTML5. Улічваючы набор даступных інструментаў, можна сцвярджаць, што сэрвіс прызначаны выключна для малявання. З дапамогай Sketchpad вы можаце ствараць прыгожыя, старанна прапрацаваныя карцінкі, але не больш.

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

Анлайн-сэрвіс Sketchpad

  1. Усё, што трэба для працы з рэдактарам - браўзэр і доступ у сетку. Механізм аўтарызацыі на сайце не прадугледжаны.
  2. Каб спампаваць гатовы малюначак на кампутар, націсніце на значок дыскеты ў панэлі меню злева, а затым выберыце патрэбны фармат ва ўсплываючым акне.

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

Спосаб 3: 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-малюнкаў.

Спосаб 4: 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-малюнкі па-за залежнасці ад платформы, на якой гэта робіце. Пакуль што дадзенае сцвярджэнне дастасавальна толькі для настольных АС, але неўзабаве гэты рэдактар ​​з'явіцца і на мабільных прыладах.

Спосаб 5: Janvas

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

Ва ўмелых руках гэты рэдактар ​​з'яўляецца сапраўды магутным інструментам, тады як пачатковец з-за багацці разнастайных функцый хутчэй за ўсё проста не зразумее, што да чаго.

Анлайн-сэрвіс Janvas

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

Так, інструмент, нажаль не бясплатны. Але гэта прафесійнае рашэнне, якое і спатрэбіцца далёка не кожнаму.

Спосаб 6: DrawSVG

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

З дапамогай DrawSVG можна канструяваць вектарныя аб'екты любога віду і уласцівасцяў, змяняць іх параметры і рэндэрыць ў якасці асобных малюнкаў. Маецца магчымасць убудоўваць у SVG іншыя мультымедыйныя файлы: відэа і аўдыё з кампутара або сеткавых крыніц.

Анлайн-сэрвіс DrawSVG

Гэты рэдактар, у адрозненне ад большасці іншых, не падобны на браузерный порт настольнага прыкладання. Злева размешчаны асноўныя прылады для малявання, а зверху - элементы кіравання. Асноўнае прастору займае палатно для працы з графікай.

Скончыўшы працу з малюначкам, вы можаце захаваць вынік як SVG або ў якасці растравага малюнка.

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

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

Чытайце таксама: Адчыняны файлы вектарнай графікі SVG

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