Design Svg Graphics nel tuo browser

Sep 13, 2025

Come si fa

Il Vecheezy Editor. È una suite di editing vettoriale gratuita che funziona proprio nel tuo browser. Questo tutorial copre gli strumenti di base strumentali e gli strumenti di modifica che è possibile utilizzare per modificare eventuali vettori sul sito. In questo modo è possibile costruire distintivi, pulsanti, loghi o qualsiasi altra cosa con relativa facilità.

La GUI per questo editor si sente simile al software Adobe, quindi se usi già Photoshop o Illustrator, avrai un tempo più facile imparare le corde. Ma anche i principianti completi possono immergerti in questo e raccogliere le basi da zero.

Get Adobe Creative Cloud

Useremo queste icone dello shopping da vectézy.

Basta visitare la pagina delle icone e fai clic su "Modifica e amp; DOWNLOAD 'Pulsante. Questo apre l'editor proprio nel tuo browser in modo da poter personalizzare e costruire su queste grafiche. Per questo tutorial, ti mostreremo come prendere alcune di queste icone e convertirle in una grafica a barre di progresso più ampia - la scelta perfetta per qualsiasi homepage di eCommerce.

Quindi con quelle icone dello shopping aperte nell'editor vecreezy, possiamo iniziare!

01. Scegli le icone

Click into the icon group and select one icon, then click Duplicate at the top — Fare clic sul gruppo Icona e selezionare un'icona, quindi fare clic su Duplicate in alto

Fare doppio clic sul gruppo di icone per selezionare tutte le icone (potrebbe essere necessario fare doppio clic due volte). Userò tre icone specifiche per questo tutorial: i sacchetti della spesa, la carta di credito e la confezione regalo.

Seleziona la shopping bag e fai clic su Duplicate in cima alla pagina. Questo dovrebbe darti un duplicato dell'intera icona. Sposta questo verso la parte superiore e duplicati gli altri due.

Nota: la confezione regalo non è completamente raggruppata, quindi quando fai clic per duplicare, selezioni solo un pezzo dell'icona. Per risolvere questo problema, basta trascinare una casella di selezione sull'intera icona del regalo, quindi in alto Fai clic su Modifica- & GT; GROUP. Ora puoi duplicare l'intera icona presente con un clic.

Una volta che hai duplicati di tutte e tre icone, fai doppio clic in qualsiasi punto della tela vuota. Questo ti porta fuori dal gruppo di icone in modo da poter selezionare altri oggetti sulla pagina. Se fai clic su una delle icone più antiche, selezioni l'intero gruppo. Questo è perfetto, perché vorresti trascinarli giù dalla tela, quindi sono fuori dalla vista.

02. Cancella la spazzatura

Change the background opacity if you want it to be white instead of transparent — Cambia l'opacità dello sfondo se vuoi che sia bianco invece di trasparente

Fare doppio clic su ciascuna icona duplicata per accedere alle singole forme all'interno. Abbiamo solo bisogno dell'icona principale, quindi dovresti selezionare ed eliminare gli sfondi colorati cerchi e le ombre.

Per fare questo, semplicemente ingrandire molto vicino e selezionare il cerchio di sfondo. Quindi premere Elimina, e dovrebbe scomparire.

Se l'intera icona scompare - non prendere dal panico. Basta fare clic su Annulla vicino in alto o premere Ctrl / Cmd + Z e riprova. Potrebbe essere necessario fare doppio clic per entrare nel gruppo di icone.

Alla fine, dovresti avere tre icone pulite pronte all'uso. Se non ti piace lo sfondo trasparente è possibile accedere sempre al pannello di sfondo nel menu a sinistra (terzo pulsante giù) e aumentare l'opacità al 100% per uno sfondo bianco puro.

03. Aggiunta di testo.

Add text labels under each icon with the same font settings — Aggiungi etichette di testo sotto ogni icona con le stesse impostazioni dei font

Questa barra di progresso sarà incredibilmente semplice; Pubblicità di tre fasi di un negozio di e-commerce.

Per sottolineare questo processo, aggiungiamo etichette sotto ogni icona. Nella barra degli strumenti a sinistra, trova lo strumento di testo (secondo pulsante), quindi fare clic su Sotto l'icona della borsa per aggiungere un blocco di testo. Aggiungi il testo 'Shop' e premi Invio sulla tastiera.

Questo automatico seleziona il testo in modo da poterlo spostarlo e trovare una buona posizione. Ma se si seleziona nuovamente lo strumento di testo, è possibile modificare la famiglia, il colore, la dimensione, la spaziatura delle lettere e altre caratteristiche.

Sto usando Open sans Semi-Bold Size 30 con una spaziatura della lettera -1.50. Il colore del testo è # 525252.

Duplica questo testo due volte e posizionare i duplicati sotto le altre icone. Usa il testo 'Pay' sotto l'icona della carta di credito e "ricevere" sotto la confezione regalo.

Dovresti usare lo strumento Seleziona per riposizionare le icone sopra il testo. Inoltre, spazio ogni icona vicino a equidistante a parte se possibile.

04. Regolazione della grafica

Shift+click to select the ribbon shapes and change the background colour — Shift + Fare clic per selezionare le forme del nastro e modificare il colore di sfondo

Prima di creare la barra di avanzamento, è possibile modificare i colori che ti piacciono nelle icone.

Per fare ciò, fare doppio clic per inserire qualsiasi gruppo di icone, quindi selezionare qualsiasi forma che si desidera modificare. In questo caso, modificherò il nastro regalo per cambiare il colore dal blu al verde.

Una volta che sei all'interno del gruppo di icone, tenere premuto il turno mentre fai clic per selezionare più di un elemento alla volta. Selezionerò i rettangoli orizzontali e verticali, oltre alla forma di prua in cima.

Nel pannello Seleziona (prima icona nel menu a sinistra) Trova le impostazioni di riempimento. Vedrai il colore predefinito è # 2E3192. Fare clic sul menu di riempimento per accedere a una ruota dei colori a discesa. Qui puoi trascinare intorno per trovare il colore desiderato o inserire direttamente un codice esagonale.

Inserisci # 518531 e premi Invio. Questo dovrebbe salvare il risultato e aggiornare tutte e tre le forme contemporaneamente. Sentiti libero di giocare con qualsiasi altra impostazioni del colore che vorresti cambiare!

05. Avvio della barra di avanzamento

Click the top-left circle in the Elements panel to add a new circle to the canvas — Fai clic sul cerchio in alto a sinistra nel pannello Elementi per aggiungere un nuovo cerchio alla tela

Per creare una barra di avanzamento, hai solo bisogno di due forme: cerchi e rettangoli. Per fortuna, entrambi sono disponibili nel pannello elementi situati nella parte inferiore del menu Strumenti.

Fare clic per eseguire il pannello Elements e selezionare la forma del cerchio, che è il primo elemento nell'elenco. Posizionerà automaticamente un cerchio grigio scuro al centro del tuo spazio di lavoro.

È possibile ridimensionare il cerchio trascinando le scatole quadrate bianche nell'angolo o il limite Select. Funziona bene, ma non è così preciso come la funzione di ridimensionamento diretto.

Quindi invece tornare allo strumento Seleziona e assicurati che il nuovo cerchio sia selezionato. Nella parte superiore del pannello Select Tool, è necessario visualizzare una dimensione di selezione con un valore di altezza e larghezza.

Inserisci 100 in entrambi i campi e trascina il primo cerchio sotto la prima icona.

06. Duplicazione dei circoli

Resize the circle and duplicate twice, then move them under each shopping icon — Ridimensiona il cerchio e duplicati due volte, quindi spostali sotto ogni icona dello shopping

Con la forma del cerchio selezionata, fai clic su Duplica nel menu in alto. Ora, riposizionare questo duplicato in modo che si allinea a stretto contatto con il tuo cerchio originale. Prova a farlo proprio sopra il primo cerchio in modo da sembrare una forma.

Ora, se si tiene a spostamento e fai clic, puoi trascinare questo cerchio duplicato in linea retta orizzontalmente. Questo ti consente di allineare perfettamente tutti i tuoi cerchi insieme in una linea retta (o abbastanza vicina a uno).

Fallo finché non hai tre diverse forme del cerchio a 100 x 100, ognuna collocata sotto le tre icone.

07. Aggiungi alcune linee di connessione

Select the rectangle shape and arrange it behind the three circles — Seleziona la forma del rettangolo e lo disporre dietro i tre cerchi

Tornare al pannello degli elementi e trova la forma quadrata. Clicca per aggiungere un quadrato sulla tela.

Con questa forma selezionata, tornare indietro nello strumento Seleziona e trova il pannello della dimensione della larghezza / altezza. Poiché questo rettangolo dovrebbe coprire l'intera larghezza della barra di avanzamento, abbiamo solo bisogno di una forma davvero lunga. Quindi cambia l'altezza su 10 e la larghezza a qualsiasi numero è necessario collegare tutti i tuoi cerchi insieme. Il mio è largo 750.

Ora, con questo rettangolo in posizione, guarda verso il fondo del pannello Select dove dice organizzare & amp; Flip. Fare clic sulla seconda icona nella riga superiore, che consente di spostare qualsiasi forma selezionata dietro le altre forme.

Nota: potrebbe essere necessario fare clic sul pulsante inferiore alcune volte per ottenere il rettangolo dietro a tutti e tre i cerchi. Ma ora il rettangolo di collegamento è visibile solo tra le forme del cerchio, quindi possiamo aggiungere testo nei circoli più tardi.

08. Recolouring.

Recolour all the shapes and include a small stroke on the three circles — Ricolora tutte le forme e includi un piccolo colpo sui tre cerchi

La barra di avanzamento attuale sembra un po 'scuro, quindi alteramoci un po' il colore.

Fare clic per selezionare il rettangolo lungo e trovare le impostazioni di riempimento nel pannello Strumenti. Cambia il colore in # C5C5C5 e premi Invio.

Ora, fai clic ovunque off-tela per deselezionare il rettangolo. Vogliamo anche cambiare i colori del cerchio, e dovrebbero essere più leggeri, usando il grigio più scuro come un colore del bordo.

Tieni premuto il turno e fai clic su ciascuno dei tre cerchi. Regolare il colore di riempimento in # F5F5F5, premi ENTER ENTER e quindi fare clic sull'icona X per chiudere il pannello Selezione del colore di riempimento. Di seguito, troverai le impostazioni del tratto. Modificare la corsa Riempi su # C5C5C5 e premi Invio.

Fare clic sull'icona X per chiudere questo pannello di selezione del colore, quindi modificare la dimensione del tratto su 6. In questa fase raccomando anche il raggruppamento di tutti i cerchi e il rettangolo insieme trascinando una casella di selezione e andando a modificare & GT; GROUP. Ora, è possibile regolare la posizione di tutte le forme contemporaneamente con facilità.

09. Aggiunta di passaggi di avanzamento

Add a text label into the first circle and duplicate the text for all three shapes — Aggiungi un'etichetta di testo nel primo cerchio e duplica il testo per tutte e tre le forme

Aggiungiamo alcuni numeri in ogni cerchio per finalizzare il design del bar di avanzamento.

Fare clic sullo strumento Testo e inserisci il numero 1 nel primo cerchio. Sto usando aperti sans extra-grassetto, taglia 45 con il colore # c5c5c5 per abbinare i bordi. Trascina questo testo in modo che sia posizionato nel centro del cerchio.

Duplica l'elemento del testo e spostalo nel secondo cerchio con il testo '2'. Fai lo stesso per il terzo cerchio con il testo "3".

10. Evidenzia il primo passo

Recolour the first circle blue so it appears like the active progress step — Recolour Il primo cerchio blu quindi sembra che la fase di avanzamento attivo

Come tocco finale, evidenziamo il primo passo usando un contorno blu più leggero. Prima seleziona il numero '1' che hai appena creato e cambia il riempimento su # 4976A3. Quindi fare clic per selezionare il cerchio dietro il testo. Trova le impostazioni del tratto e cambia il colore della corsa su # 4976A3. Questo dovrebbe aggiungere un bordo blu scuro attorno al cerchio. Con il cerchio ancora selezionato, fai clic sulle impostazioni di riempimento e modificare il colore in # E2EBFA.

E questo è tutto! Ora puoi esportarti come PNG / JPG utilizzando la funzione di download nell'angolo in alto a destra. È inoltre possibile nascondere lo sfondo bianco per esportare questo come PNG trasparente e modificare le dimensioni complessive del documento utilizzando il pannello di sfondo (terzo pulsante nel menu sul lato sinistro).

O se desideri salvare questo per i cambiamenti futuri, vai su File & GT, salva per dopo. Dovrai creare un account vecreezy gratuito ma è un ottimo modo per mantenere il duro lavoro salvato per riferimento futuro.

Questo articolo è originariamente apparso in Magazine netta Edizione 295. Compralo Qui .

Per saperne di più:

10 regole dorate per SVG reattivi
Esplora le nuove eccitanti caratteristiche in SVG 2
SuperCome SVG Animazioni con GSAP

Design Svg Graphics nel tuo browser

01. Scegli le icone

02. Cancella la spazzatura

03. Aggiunta di testo.

04. Regolazione della grafica

05. Avvio della barra di avanzamento

06. Duplicazione dei circoli

07. Aggiungi alcune linee di connessione

08. Recolouring.

09. Aggiunta di passaggi di avanzamento

10. Evidenzia il primo passo

Come si fa - Articoli più popolari

condurre test utente gratuiti e veloci con UserLook

Crea quantità specifiche stili e layouts

Come rendere la tua Bibbia del tuo personaggio

Aggiorna le tue trame in Prostanze Designer

Come apportare enormi esplosioni con V-Ray

Crea straordinarie trame piastrellabili in Blender

Come creare manga con un torsione selvaggio ovest

Scopri lo stile e la sostanza della tipografia

Categorie