Lavorare con la grafica vettoriale online

Contenuto

La nozione di immagini vettoriali non dice assolutamente nulla alla stragrande maggioranza degli utenti ordinari di PC. I designer, d’altra parte, sono sempre più inclini a utilizzare questo tipo di grafica per i loro progetti.

In passato, per lavorare con le immagini SVG, dovevi avere una delle soluzioni desktop specializzate come Adobe Illustrator o Inkscape installate sul tuo computer. Ora strumenti simili sono disponibili online, senza bisogno di scaricarli.

Leggi anche: Imparare a disegnare con Adobe Illustrator

Come lavorare con SVG online

Se fate una ricerca su Google potete conoscere un numero enorme di editor vettoriali. Ma la stragrande maggioranza di queste soluzioni offre possibilità piuttosto scarse e spesso non permette di lavorare con progetti seri. Ma considereremo i migliori servizi per creare e modificare immagini SVG direttamente nel vostro browser.

Naturalmente, gli strumenti online non possono sostituire completamente le corrispondenti applicazioni desktop, ma per la maggior parte degli utenti l’insieme delle caratteristiche proposte sarà più che sufficiente.

Metodo 1: Canva

Un servizio multipiattaforma disponibile su PC, dispositivi mobili e qualsiasi browser web che fornisce ampie opportunità per la creazione di progetti creativi di qualsiasi complessità, che si tratti di foto e video, disegni vari, pubblicazioni per le reti sociali, presentazioni o documentazione. Un editor integrato permette di lavorare con la grafica e di esportarla in formato SVG.

Vai al servizio online di Canva

  1. Aprire la home page collegata sopra e cliccare su “Login” o “Register“.

    Inserisci il tuo nome utente e la password del tuo account, se ne hai uno, o passa attraverso il processo di registrazione – questo può essere fatto via e-mail o attraverso un account Apple, Facebook o Google.

    Confermate la vostra scelta, se necessario.

  2. Una volta effettuato l’accesso a Canva, usa il pulsante “Create Design” in alto,

    Selezionate l’opzione “Custom Size”

    e specificate l’altezza e la larghezza desiderate.

    Potete anche cambiare le unità di misura

    .

    Dopo aver inserito i valori, clicca su “Create design”.

  3. Aprite il menu “File”, date al vostro futuro disegno un nome preferito come necessario e cambiate le sue opzioni di visualizzazione come righello, guide, margini e graduazione. Questo sarà utile per capire le dimensioni degli elementi sulla tela di lavoro, l’allineamento, la simmetria, ecc. Puoi annullare e rifare qualsiasi azione usando i pulsanti a forma di freccia circolare sul pannello superiore. I tasti di scelta rapida “Ctrl+Z” e “Ctrl+Y” sono supportati, rispettivamente.

    Per una facile interazione con l’immagine sul pannello inferiore, è possibile ingrandire e ridurre la visualizzazione a schermo intero, in modo da poter facilmente valutare le modifiche apportate in qualsiasi fase. La barra laterale viene ridotta a icona cliccando la freccia sul suo bordo destro.

  4. Una caratteristica chiave della piattaforma Canva sono i modelli modificabili, che sono abbondanti nella libreria. Praticamente qualsiasi disegno o pubblicazione può essere creato con loro.

    Se questo è ciò che avete in mente, selezionate la soluzione appropriata dalla scheda Modelli. Puoi usare la ricerca e i filtri avanzati per renderlo più facile.

  5. Nella scheda Elements, troverete tutti i tipi di forme e linee,

    adesivi, foto, file audio e video, e cornici.

    Per capire il principio di base del lavoro con la grafica nel servizio, descriviamo come abbiamo sovrapposto un’immagine su uno sfondo di modello preso dalla sezione “Foto” della scheda “Elementi”. Un’immagine del genere si trova anche nei modelli

    .

    Se la dimensione iniziale non corrisponde a quella scelta, può essere cambiata spostando gli elementi speciali sulla cornice

    Nota: la maggior parte dei modelli nella libreria di Canva sono documenti a strati con più oggetti (didascalie, cornici, loghi, ecc.), ognuno dei quali può essere modificato a tuo piacimento. Abbiamo esaminato diversi possibili esempi in articoli separati.

    Leggi tutto: Come creare un foglio di calcolo / presentazione / annuncio / invito / certificato di encomio nel servizio online di Canva

    La seconda immagine l’abbiamo presa dalla sezione “Graphics” della scheda “Elements”

    .

    Può essere spostato in qualsiasi posizione sulla tela e ridimensionato facendo scorrere i marcatori negli angoli della cornice

    .

    È possibile cambiare i colori primari per la maggior parte dei modelli, e se state lavorando con la vostra immagine o con qualsiasi modello, il servizio rileverà automaticamente i suoi colori primari e vi permetterà di utilizzarli nei vostri disegni.

    Cliccando sul pulsante “Modifica”

    sulla barra superiore si aprirà una selezione di effetti e filtri disponibili in Canva,

    Ognuno di questi può essere applicato alla parte selezionata del tuo progetto

    ,

    Se necessario, regolate altri parametri e applicateli

    .

    Gli

    effetti e i filtri presentati nella sezione “Consigliato

    “,

    dovrà essere collegato in anticipo.

    Il pulsante con i tre punti apre un menu con azioni aggiuntive. Qui puoi ritagliare e ruotare l’immagine, cambiare la sua posizione sulla tela (in relazione alla sua stessa cornice selezionata e ad altri oggetti), e regolare la trasparenza.

    Per una migliore comprensione di come funziona l’editor di immagini integrato di Canva, raccomandiamo di leggere i seguenti articoli sul nostro sito web.

    Leggi tutto: Come cambiare colore / tagliare la faccia / scurire / migliorare o degradare la qualità delle foto con il servizio online Canva

  6. La scheda Downloads ti permette di aggiungere i tuoi file multimediali – immagini, audio e video – alla libreria del servizio. Puoi anche registrarti usando la webcam integrata o collegata al PC.

    Per le immagini caricate sono disponibili gli stessi strumenti di modifica dei modelli e degli elementi grafici, compreso il cambio di posizione, dimensione, colore, ecc.

  7. La scheda Text fornisce varie didascalie – sia caselle di testo vuote che una specie di adesivo, il cui contenuto del modello può essere modificato a proprio piacimento.

    Il

    testo può essere modificato usando quasi lo stesso algoritmo della grafica più le opzioni che sono caratteristiche di questo tipo di contenuto: cambiare il tipo, la dimensione, lo stile del carattere, l’allineamento

    ecc.

    Leggi anche: Come datare una foto nel servizio online di Canva

  8. Se oltre alla grafica usi anche scritte diverse nel tuo progetto e le soluzioni discusse nel passo precedente non sono sufficienti, ti consigliamo di usare le opzioni dei modelli nella scheda Stili.

    Qui puoi trovare combinazioni di caratteri e colori che possono essere usati come un insieme

    ,

    o indipendentemente l’uno dall’altro.

    C’è anche l’opzione “Crea il tuo stile”.

  9. La scheda Sfondi, come suggerisce il nome, contiene le immagini di sfondo.

    Come tutti i layout della libreria di servizi, possono essere modificati.

  10. L’ultima sezione disponibile nell’editor , More, contiene integrazioni con varie applicazioni e servizi web. Anche qui, ci sono modelli che possono essere utilizzati nei progetti. Una grande parte è dedicata alla visualizzazione e all’esportazione su diverse piattaforme, ma anche all’aggiunta di contenuti da esse (ad esempio, sorrisi e animazioni da GIPHY, adesivi da Pixton, foto stock da Pexels, ecc.)

    Si consiglia di prestare particolare attenzione al blocco “Altre applicazioni in Canva”, in quanto può essere utilizzato per espandere la già ricca funzionalità e libreria del servizio. Da qui puoi aggiungere sezioni come “Foto ” “Audio”, “Video” e “Grafici”

    alla barra laterale.

    Ognuno di essi contiene modelli modificabili del tipo appropriato, che potete anche utilizzare nei vostri progetti. Per esempio, se si sovrappone un’immagine traslucida di carta su una foto, si può farla sembrare vaporosa o creare un effetto antico.

    Leggi tutto:
    Come cambiare lo sfondo delle foto con il servizio online Canva
    Come invecchiare le foto con il servizio online Canva

  11. Una volta che sei soddisfatto della grafica, valuta il risultato finale nascondendo la barra laterale e zoomando per comodità.
  12. Se sei soddisfatto, clicca sul pulsante Download, espandi l’elenco a discesa File Type e seleziona SVG.

    Purtroppo non puoi ottenere il file in questo formato così facilmente, dovrai abbonarti a Canva Pro. Fortunatamente c’è un periodo gratuito di 30 giorni.

    Inserisci i dati necessari per iscriverti al servizio, conferma la tua intenzione

    ,

    Dopodiché sarai in grado di “Scaricare”

    l’immagine vettoriale che hai creato tu stesso (opzionalmente l’opzione di preservare la trasparenza dello sfondo sarà disponibile, se rilevante)

    e dopo una breve procedura di esportazione

    mettetelo sul vostro disco rigido.

    Quando l’esportazione è completa, ti verrà richiesto di “Copiare”

    il link pubblico al progetto.

    Puoi anche “Condividerlo”

    con altri utenti del servizio (se lavori in un team) e renderlo aperto alla modifica,

    convertirlo in una presentazione, condividerlo sui social network e altri servizi

    .

    Puoi cancellare il tuo

    abbonamento di prova a Canva Pro in qualsiasi momento

    ,

    Basta usare l’opzione appropriata nel vostro armadio clienti personale.

  13. Mentre la grafica vettoriale non è una caratteristica primaria del servizio online di Canva, permette agli utenti di creare la propria immagine ed esportarla in formato SVG. E grazie a un’impressionante libreria di modelli e vari elementi, i progetti creativi di qualsiasi complessità possono essere significativamente trasformati e migliorati.

Metodo 2: Vectr

Un elaborato editor vettoriale dai creatori del familiare servizio Pixlr. Questo strumento sarà utile sia ai principianti che agli utenti esperti di SVG.

Nonostante l’abbondanza di funzioni, sarà abbastanza difficile perdersi nell’interfaccia di Vectr. Per i principianti, vengono forniti tutorial dettagliati e istruzioni complete su ogni parte del servizio. Tra gli strumenti dell’editor c’è tutto il necessario per creare un’immagine SVG: forme, icone, cornici, ombre, pennelli, supporto per lavorare con i livelli, ecc. Puoi disegnare da zero o caricare la tua immagine.

Servizio online di Vectr

  1. Prima di iniziare a utilizzare la risorsa, è consigliabile accedere con uno dei social network disponibili o creare un account sul sito da zero.

    Questo vi permetterà non solo di scaricare i risultati del vostro lavoro sul vostro computer, ma anche di salvare le vostre modifiche nel cloud in qualsiasi momento.
  2. L’interfaccia del servizio è la più semplice e diretta possibile, con gli strumenti disponibili a sinistra della tela e le proprietà modificabili di ogni strumento a destra.

    La creazione di pagine multiple è supportata, con modelli disponibili per tutti i gusti – dalle copertine grafiche per i siti di social network, ai formati di fogli standard.
  3. L’immagine finita può essere esportata cliccando sul pulsante con la freccia nella barra dei menu a destra.
  4. Nella finestra che si apre, definisci le opzioni di download e clicca su ‘Download‘.

Le opzioni di esportazione includono anche una delle caratteristiche più distintive di Vectr – il supporto per il collegamento diretto a un progetto SVG nell’editor. Molte risorse non permettono di caricare immagini vettoriali direttamente su di loro, ma permettono comunque di visualizzarle in remoto. In questo caso, Vector può essere usato come un vero servizio di hosting SVG, cosa che altri servizi non permettono.

Va notato che l’editor non sempre gestisce correttamente la grafica complessa. Per questo motivo, alcuni progetti possono aprirsi con errori o artefatti visivi in Vectr.

Metodo 3: Sketchpad

Un editor web semplice e facile da usare per creare immagini SVG, basato sulla piattaforma HTML5. Data la gamma di strumenti disponibili, si potrebbe sostenere che il servizio è puramente per il disegno. Con Sketchpad si possono creare immagini belle ed elaborate, ma niente di più.

Lo strumento ha una vasta gamma di pennelli personalizzabili di varie forme e tipi, una selezione di forme, font e adesivi di sovrapposizione. L’editor ti dà anche il pieno controllo sul posizionamento dei livelli e sulle modalità di fusione. E come bonus, l’applicazione è completamente tradotta in russo, quindi non dovreste avere difficoltà con il suo sviluppo.

Servizio online Sketchpad

  1. Tutto ciò di cui avete bisogno per lavorare con l’editor è un browser web e l’accesso a Internet. Non c’è un meccanismo di autorizzazione sul sito web.
  2. Per scaricare l’immagine finita sul tuo computer, clicca sull’icona del floppy disk nella barra dei menu a sinistra e poi seleziona il formato desiderato nella finestra pop-up.

Puoi salvare il tuo disegno non finito come un progetto Sketchpad se vuoi, e poi finire di modificarlo in qualsiasi momento.

Metodo 4: Metodo Draw

Questa applicazione web è progettata per le operazioni di base con i file vettoriali. Lo strumento esternamente assomiglia alla versione desktop di Adobe Illustrator, ma la sua funzionalità è molto più semplice. Tuttavia, ci sono alcune caratteristiche in Method Draw.

Oltre a lavorare con le immagini SVG, l’editor permette di importare immagini bitmap e creare immagini vettoriali. Questo può essere fatto tracciando manualmente i contorni con lo stilo. L’applicazione include tutti gli strumenti necessari per fare i vostri disegni vettoriali. C’è una libreria di forme estesa, una palette di colori completa e il supporto per le scorciatoie da tastiera.

Servizio di disegno del metodo online

  1. La risorsa non richiede la registrazione dell’utente. Basta andare sul sito web e lavorare con un file vettoriale esistente o crearne uno nuovo.
  2. Oltre a creare fette SVG in un ambiente grafico, è anche possibile modificare l’immagine direttamente a livello di codice.

    Per farlo vai su “View– “Source…” o usa la scorciatoia “Ctrl + U”.
  3. Quando hai finito con un’immagine puoi salvarla direttamente sul tuo computer.

  4. Per esportare l’immagine, aprire il menu “File” e premere “Salva immagine…”. In alternativa, usa la scorciatoia “Ctrl+S”.

Method Draw non è sicuramente adatto per creare progetti vettoriali seri, perché manca delle caratteristiche necessarie. Ma grazie all’assenza di elementi inutili e all’area di lavoro ben organizzata, il servizio può servire perfettamente per una rapida modifica o messa a punto di semplici immagini SVG.

Metodo 5: Gravit Designer

Un editor web gratuito di grafica vettoriale per utenti avanzati. Molti designer mettono Gravit alla pari con le soluzioni desktop complete, come Adobe Illustrator. Il fatto è che questo strumento è multipiattaforma, cioè completamente disponibile su tutti i sistemi operativi dei computer, così come un’applicazione web.

Gravit Designer è in fase di sviluppo attivo e riceve regolarmente nuove funzionalità, che sono già sufficienti per il layout di progetti complessi.

Servizio online di Gravit Designer

L’editor offre tutti i tipi di strumenti per disegnare contorni, forme, percorsi, sovrapposizione di testo, riempimenti e vari effetti personalizzabili. È disponibile una vasta libreria di forme, immagini a tema e icone. Ogni elemento dello spazio Gravit ha una lista di proprietà che possono essere modificate.

Tutta questa varietà è racchiusa in un’interfaccia elegante e intuitiva, in modo che ogni strumento sia disponibile in pochi clic.

  1. Non è necessario creare un account con l’editor per iniziare.

    Ma se vuoi usare dei modelli già pronti, dovrai creare un account gratuito di Gravit Cloud.
  2. Per creare un nuovo progetto da zero, clicca sulla scheda “New Design” nella schermata di benvenuto e seleziona la dimensione della tela desiderata.

    Di conseguenza, per lavorare con un modello, aprite la sezione “New from Template” e selezionate il modello desiderato.
  3. Gravit può salvare automaticamente tutte le modifiche mentre si procede con il progetto.

    Per attivare questa funzione, usate “Ctrl+S” e nella finestra che appare date un nome al disegno, e poi cliccate “Save“.
  4. Potete esportare l’immagine risultante come immagine vettoriale SVG, immagine bitmap JPEG o immagine bitmap PNG.

  5. . Puoi anche salvare il progetto come documento PDF.

Considerando il fatto che il servizio è progettato per un lavoro completo con la grafica vettoriale, può essere raccomandato anche ai designer professionisti. Con Gravit, puoi modificare i disegni SVG, indipendentemente dalla piattaforma su cui lo fai. Per ora, la dichiarazione si applica solo ai sistemi operativi desktop, ma l’editor sarà presto disponibile sui dispositivi mobili.

Metodo 6: Janvas

Uno strumento di grafica vettoriale popolare tra gli sviluppatori web. Il servizio include una serie di strumenti di disegno con proprietà altamente personalizzabili. La caratteristica principale di Janvas è la capacità di creare immagini interattive SVG animate con CSS. Combinato con JavaScript, è in grado di costruire intere applicazioni web.

In mani abili, questo editor è uno strumento davvero potente, mentre un utente inesperto, a causa della sua abbondanza di varie funzioni, difficilmente capirebbe cosa sta succedendo.

Servizio online Janvas

  1. Per lanciare l’applicazione web nel tuo browser, segui il link qui sopra e clicca sul pulsante “Inizia a creare”.
  2. Un nuovo spazio di lavoro dell’editor si aprirà in una nuova finestra, con una tela al centro e le barre degli strumenti intorno.
  3. Puoi esportare la tua immagine finita nel cloud storage di tua scelta solo se hai acquistato un abbonamento al servizio.

Sì, lo strumento purtroppo non è gratuito. Ma è una soluzione professionale che non si adatta a tutti.

Metodo 7: DrawSVG.

Comodo servizio online che permette ai webmaster di creare facilmente elementi SVG di alta qualità per i loro siti. L’editor contiene una libreria impressionante di forme, icone, riempimenti, gradienti e font.

Utilizzando DrawSVG potete costruire oggetti vettoriali di qualsiasi tipo e proprietà, modificare i loro parametri e renderli come immagini separate. È anche possibile incorporare file multimediali di terze parti, come video e audio da un computer o una fonte di rete, in SVG.

Servizio online di DrawSVG

Questo editor, a differenza della maggior parte degli altri, non sembra una porta basata su browser di un’applicazione desktop. A sinistra ci sono gli strumenti di disegno di base e in alto i controlli. Lo spazio principale è occupato dalla tela grafica.

Quando hai finito con un’immagine, puoi salvare il risultato come SVG o come bitmap.

  1. Per farlo, trova l’icona ‘Salva‘ nella barra degli strumenti.
  2. Cliccando su questa icona si aprirà una finestra popup con un modulo per caricare un documento SVG.

    Inserisci il nome del file desiderato e clicca su “Salva come file”.
  3. DrawSVG può essere definito una versione leggera di Janvas. L’editor supporta il lavoro con gli attributi CSS, ma a differenza dello strumento precedente, non permette l’animazione degli elementi.

Leggi anche: Aprire file SVG di grafica vettoriale

I servizi elencati in questo articolo non sono affatto tutti gli editor vettoriali disponibili sul web. Tuttavia, qui abbiamo raccolto la maggior parte delle soluzioni online gratuite e testate per lavorare con i file SVG. Allo stesso tempo, alcuni di loro sono abbastanza capaci di competere con gli strumenti desktop. Quale usi dipende dai tuoi bisogni e dalle tue preferenze.