Treballem amb gràfics vectorials en línia


El concepte d’imatges vectorials a l’abundant nombre d’usuaris d’ordinador no diu res. Els dissenyadors, al seu torn, estan cada vegada més inclinats a utilitzar aquest tipus de gràfics per als seus projectes.

En el passat, per treballar amb imatges SVG, sens dubte haureu d’instal·lar una de les solucions d’escriptori especialitzades com Adobe Illustrator o Inkscape al vostre ordinador. Ara hi ha disponibles eines similars en línia, sense necessitat de descarregar-les.

Vegeu també: Aprendre a dibuixar a Adobe Illustrator

Com treballar amb SVG en línia

En completar la sol·licitud adequada a Google, podeu conèixer una gran quantitat de diversos editors en línia de vectors. Però la immensa majoria d'aquestes solucions ofereixen oportunitats bastant escasses i sovint no permeten treballar amb projectes seriosos. Considerarem els millors serveis per crear i editar imatges SVG al navegador.

Per descomptat, les eines en línia no poden substituir completament les aplicacions d’escriptori corresponents, però la majoria dels usuaris del conjunt de funcions proposat seran més que suficients.

Mètode 1: Vectr

Editor de vectors sofisticat dels creadors de molts serveis familiars Pixlr. Aquesta eina serà útil tant per a principiants com per a usuaris avançats en treballar amb SVG.

Malgrat l'abundància de funcions, el fet de perdre's a la interfície de Vectr serà bastant difícil. Per a principiants, es proporcionen lliçons detallades i llargues instruccions per a cadascun dels components del servei. Entre les eines de l’editor hi ha tot per crear imatges SVG: formes, icones, marcs, ombres, raspalls, suport per treballar amb capes, etc. Podeu dibuixar una imatge de zero o carregar-la.

Servei en línia Vectr

  1. Abans de començar a utilitzar el recurs, és recomanable iniciar sessió amb una de les xarxes socials disponibles o crear un compte al lloc des de zero.

    Això no només us permet descarregar els resultats del vostre treball a l’ordinador, sinó que en qualsevol moment podeu estalviar els canvis al "núvol".
  2. La interfície del servei és tan senzilla i clara com sigui possible: les eines disponibles es troben a l'esquerra del llenç i les propietats canviants de cadascun d'ells es troben a la dreta.

    Admet la creació d'una pluralitat de pàgines per a les quals hi ha plantilles dimensionals per a tots els gustos: des de portades gràfiques a xarxes socials fins a formats de fulls estàndard.
  3. Podeu exportar la imatge acabada fent clic al botó de fletxa de la barra de menú de la dreta.
  4. A la finestra que s'obre, definiu els paràmetres de baixada i feu clic a Descarregar.

Les capacitats d'exportació també inclouen una de les característiques més distintives de Vectr: el suport per als enllaços directes a un projecte SVG a l'editor. Molts recursos no permeten descarregar imatges vectorials directament a si mateixes, però no obstant això permeten la seva visualització remota. En aquest cas, Vectra es pot utilitzar com un autèntic allotjament SVG, que altres serveis no permeten.

Cal assenyalar que l’editor no sempre gestiona correctament els gràfics complexos. Per aquest motiu, alguns projectes poden obrir-se a Vectr amb errors o artefactes visuals.

Mètode 2: Sketchpad

Un editor web senzill i convenient per crear imatges SVG basades en la plataforma HTML5. Tenint en compte el ventall d’eines disponibles, es pot argumentar que el servei està destinat únicament al dibuix. Amb Sketchpad, podeu crear imatges boniques, cuidadosament elaborades, però no més.

L’eina té una àmplia gamma de raspalls personalitzats de diverses formes i tipus, un conjunt de formes, fonts i adhesius per a la superposició. L’editor us permet manipular completament les capes: per controlar les modalitats d’ubicació i fusió. Bé, com a avantatge, l’aplicació està totalment traduïda al rus, de manera que no hauria de tenir cap dificultat amb el seu desenvolupament.

Servei en línia de Sketchpad

  1. Tot el que necessiteu per treballar amb l’editor: el navegador i l’accés a la xarxa. No s’ofereix el mecanisme d’autorització al lloc.
  2. Per baixar la imatge acabada a l’ordinador, feu clic a la icona del disquet a la barra de menú de l’esquerra i, a continuació, seleccioneu el format desitjat a la finestra emergent.

Si cal, podeu desar el dibuix sense acabar com a projecte de Sketchpad i, a continuació, acabar d'editar-lo.

Mètode 3: Dibuix del mètode

Aquesta aplicació web està dissenyada per a operacions bàsiques amb fitxers vectorials. A l’exterior, l’eina s’assembla a l’escriptori Adobe Illustrator, però en termes de funcionalitat aquí tot és molt més senzill. No obstant això, hi ha algunes funcions especials al mètode Draw.

A més de treballar amb imatges SVG, l'editor us permet importar imatges raster i crear imatges vectorials basades en elles. Això es pot fer a partir de contorns manuals amb la ploma. L’aplicació conté totes les eines necessàries per al disseny de dibuixos vectorials. Hi ha una biblioteca extensa de figures, una paleta de colors i suport per a dreceres de teclat.

Mètode Draw Online Service

  1. El recurs no requereix registre de l’usuari. Simplement aneu al lloc i treballeu amb el fitxer vectorial existent o creeu-ne un de nou.
  2. A més de crear fragments SVG en un entorn gràfic, també podeu editar la imatge directament al nivell de codi.

    Per fer-ho, aneu a "Visualitza" - "Font ..." o utilitzeu la drecera de teclat "Ctrl + U".
  3. Un cop hagueu acabat de treballar a la imatge, podeu desar-lo immediatament al vostre ordinador.

  4. Per exportar una imatge, obriu l’element del menú "Fitxer" i feu clic a "Desa la imatge ...". O utilitzeu una drecera "Ctrl + S".

Method Draw definitivament no és adequat per crear projectes de vector seriosos - la raó és la manca de funcions pertinents. Però a causa de l’absència d’elements innecessaris i d’un espai de treball ben organitzat, el servei pot ser excel·lent per editar ràpidament o millorar les imatges simples SVG.

Mètode 4: Gravit Designer

Editor de gràfics vectorials gratuïts per a usuaris avançats. Molts dissenyadors posen a Gravit a l’igual que les solucions d’escriptori completes, com ara Adobe Illustrator. El fet és que aquesta eina és multiplataforma, és a dir, està totalment disponible a tots els sistemes operatius de l’ordinador i també com a aplicació web.

Gravit Designer està en desenvolupament actiu i rep regularment noves funcions que ja són suficients per construir projectes complexos.

Servei en línia de Gravit Designer

L’editor us ofereix tot tipus d’eines per dibuixar contorns, formes, trajectes, superposició de text, farcits, així com diversos efectes personalitzats. Hi ha una extensa biblioteca de figures, imatges temàtiques i icones. Cada element de l’espai Gravit té una llista de propietats que es poden canviar.

Tota aquesta varietat està "empaquetada" en una interfície elegant i intuïtiva, de manera que qualsevol eina estigui disponible en tan sols uns quants clics.

  1. Per començar amb l’editor, no necessiteu crear un compte al servei.

    Però si voleu utilitzar plantilles ja preparades, haureu de crear un compte gratuït de Gravit Cloud.
  2. Per crear un projecte nou des de zero a la finestra de benvinguda, aneu a la pestanya "Nou disseny" i seleccioneu la mida del llenç desitjat.

    En conseqüència, per treballar amb la plantilla, obriu la secció "Nou de plantilla" i seleccioneu la peça de treball desitjada.
  3. Gravit pot desar automàticament tots els canvis quan realitzeu accions en un projecte.

    Per activar aquesta funció, utilitzeu la tecla de drecera. "Ctrl + S" i a la finestra que apareix, nomeneu la imatge i feu clic al botó "Desa".
  4. Podeu exportar la imatge resultant en format vectorial SVG i JPEG o PNG de trama.

  5. A més, hi ha l'opció de desar el projecte com a document amb l’extensió PDF.

Tenint en compte que el servei està dissenyat per a un treball complet amb gràfics vectorials, es pot recomanar amb seguretat fins i tot per a dissenyadors professionals. Amb Gravit, podeu editar imatges SVG, independentment de la plataforma en què ho feu. Fins ara, aquesta declaració només és aplicable al sistema operatiu d’escriptori, però aviat aquest editor apareixerà als dispositius mòbils.

Mètode 5: Janvas

Una eina popular per als desenvolupadors web per crear gràfics vectorials. El servei conté diverses eines de dibuix amb propietats personalitzables. La característica principal de Janvas és la possibilitat de crear imatges interactives SVG animades amb CSS. I, juntament amb JavaScript, el servei us permet crear aplicacions web completes.

En mans hàbils, aquest editor és realment una eina poderosa, mentre que un principiant probablement a causa de l’abundància de diverses funcions simplement no entendrà què és el que.

Servei en línia de Janvas

  1. Per iniciar l’aplicació web al vostre navegador, feu clic a l’enllaç anterior i feu clic al botó. "Comença a crear".
  2. A la nova finestra, l’espai de treball de l’editor s’obre amb el llenç al centre i les barres d’eines al seu voltant.
  3. Podeu exportar la imatge acabada només a l’emmagatzematge al núvol de la vostra elecció i només si heu adquirit una subscripció al servei.

Sí, lamentablement l’eina no és gratuïta. Però aquesta és una solució professional, que no és útil per a tothom.

Mètode 6: DrawSVG

El servei en línia més convenient que permet als administradors web crear fàcilment elements SVG d'alta qualitat per als seus llocs. L’editor conté una impressionant biblioteca de formes, icones, farcits, degradats i tipus de lletra.

Amb l’ajuda de DrawSVG, podeu construir objectes vectorials de qualsevol tipus i propietats, canviar els seus paràmetres i representar-los com a imatges separades. És possible inserir fitxers multimèdia de tercers a SVG: vídeo i àudio des d’un ordinador o fonts de xarxa.

Servei en línia de DrawSVG

Aquest editor, a diferència de la majoria d’altres, no sembla al port del navegador d’una aplicació d’escriptori. A l'esquerra hi ha les eines de dibuix principals i, a la part superior, els controls. L’espai principal és el llenç per treballar amb gràfics.

Un cop hagueu acabat de treballar amb una imatge, podeu desar el resultat com a SVG o com a imatge de mapa de bits.

  1. Per fer-ho, cerqueu la icona a la barra d'eines "Desa".
  2. En fer clic en aquesta icona s'obrirà una finestra emergent amb un formulari per carregar el document SVG.

    Introduïu el nom de fitxer desitjat i feu clic a "Desa com a fitxer".
  3. Es pot anomenar DrawSVG la versió lleugera de Janvas. L’editor suporta el treball amb atributs CSS, però a diferència de l’eina anterior, no permet animar elements.

Vegeu també: Obre fitxers de gràfics vectorials SVG

Els serveis que apareixen a l'article no són tots els editors de vectors disponibles al web. No obstant això, aquí hem recopilat en la seva major part solucions en línia gratuïtes i provades per treballar amb fitxers SVG. No obstant això, alguns d’ells són capaços de competir amb eines d’escriptori. Bé, el que ha d'utilitzar depèn només de les vostres necessitats i preferències.