Design SVG-grafiikka selaimessasi

Sep 11, 2025

Miten tehdään

The Vectedzy toimittaja on ilmainen vektori muokkaussovitus, joka toimii suoraan selaimessasi. Tämä opetusohjelma kattaa perusmuototyökalut ja muokkaustyökalut, joita voit muokata vektoreita sivustolla. Näin voit rakentaa merkkejä, painikkeita, logoja tai muuta suhteellisen helposti.

Tämän editorin GUI tuntuu samanlaisena kuin Adobe-ohjelmisto, joten jos käytät jo Photoshopia tai Illustratoria, sinulla on helpompi aika köysien oppiminen. Mutta jopa täydelliset aloittelijat voivat sukeltaa tähän ja poimia perusasiat tyhjästä.

Hanki Adobe Creative Cloud

Käytämme näitä ostoskuvakkeita Vectedzystä.

Käy vain kuvakkeiden sivulla ja napsauta Muokkaa & amp; Lataa 'painike. Tämä avaa editori suoraan selaimessasi, jotta voit muokata ja rakentaa näitä grafiikoita. Tätä opetusohjelmaa näytämme sinulle, kuinka napata joitakin näistä kuvakkeista ja muuntaa ne suuremmaksi edistymiselle Graafiksi - täydellinen valinta mihin tahansa verkkokauppasi etusivulle.

Joten näillä ostoskuvakkeilla avoinna Vectedzy Editorissa, voimme aloittaa!

01. Valitse kuvakkeet

Click into the icon group and select one icon, then click Duplicate at the top — Napsauta kuvaketta ryhmää ja valitse yksi kuvake ja valitse sitten Kopioi yläosassa

Kaksoisnapsauta kuvaketta, jos haluat valita kaikki kuvakkeet (saatat joutua kaksoisnapsauttamaan kahdesti). Käytän kolmea erityistä kuvaketta tähän opetusohjelmaan: ostoskassit, luottokortti ja lahjapakkaus.

Valitse ostoskassi ja napsauta kaksoiskappale sivun yläosassa. Tämän pitäisi antaa sinulle kaksoiskappale koko kuvakkeesta. Siirrä tämä ylöspäin yläosaan ja kaksinkertaistaa kaksi muuta.

Huomaa: Lahjapakkaus ei ole täysin ryhmitelty, joten kun napsautat kaksoiskappaleita, valitse vain kuvakkeen pala. Jos haluat korjata tämän, vedä vain valintalaatikko koko lahja -kuvakkeella, sitten Yläosassa Muokkaa-ja GT; ryhmä. Nyt voit kopioida koko nykyisen kuvakkeen yhdellä napsautuksella.

Kun sinulla on kaksoiskappaleita kaikista kolmesta kuvakkeesta, kaksoisnapsauta kaikkialla tyhjillä kankaalla. Tämä tuo sinut kuvakkeiden ryhmän ulkopuolelle, jotta voit valita sivun muita esineitä. Jos napsautat jotain vanhemmista kuvakkeista, valitse koko ryhmä. Tämä on täydellinen, koska haluat vetää ne alas kankaalle, joten he ovat poissa näkyvistä.

02. Tyhjennä roskat

Change the background opacity if you want it to be white instead of transparent — Vaihda taustasivuutta, jos haluat sen olevan valkoinen läpinäkyvän sijasta

Kaksoisnapsauta jokaista päällekkäistä kuvaketta päästäksesi yksittäisiin muotoihin sisälle. Tarvitsemme vain pääkuvakkeen, joten sinun pitäisi valita ja poistaa värikäs ympyrän taustat ja pudota varjot.

Voit tehdä tämän yksinkertaisesti zoomata hyvin lähellä ja valitse tausta ympyrä. Paina sitten Poista ja se katoaa.

Jos koko kuvake katoaa - Älä paniikkia. Napsauta vain Undo lähellä yläosaa tai paina Ctrl / CMD + Z ja yritä uudelleen. Saatat joutua kaksoisnapsauttamaan ICON-ryhmän sisällä.

Loppuun mennessä sinulla on oltava kolme puhdasta kuvaketta käyttövalmis. Jos et pidä läpinäkyvästä taustasta, voit aina käyttää vasemmanpuoleisen valikon taustapaneelia (kolmas painike alas) ja lisätä läpikuultavuutta 100 prosenttiin puhtaalle valkoisella taustalla.

03. Tekstin lisääminen

Add text labels under each icon with the same font settings — Lisää tekstin tarroja jokaisen kuvakkeen alla samalla fontti-asetuksella

Tämä edistymispalkki on uskomattoman yksinkertainen; Vain mainostaa kolme ecommerce-myymälän vaiheita.

Korosta tätä prosessia lisätään tarroja jokaisen kuvakkeen alla. Vasemmalla työkalupalkissa Etsi tekstityökalu (toinen painike) napsauttamalla pussin kuvaketta lisätäksesi tekstilohkon. Lisää teksti "Shop" ja paina näppäimistöäsi.

Tämä automaattisesti valitsee tekstin, jotta voit siirtää sen ja löytää hyvä sijainti. Mutta jos valitset tekstityökalun uudelleen, voit muuttaa fonttiperhettä, väriä, kokoa, kirjaimen välilyöntiä ja muita ominaisuuksia.

Käytän avoimia sanoja semi-bold kokoa 30 -1.50 kirjainta. Tekstin väri on # 525252.

Kopioi tämän tekstin kahdesti ja aseta kaksoiskappaleet muiden kuvakkeiden alle. Käytä tekstiä "Pay" luottokortin kuvakkeen alla ja "Vastaanota" lahjapakkauksessa.

Käytä valittua työkalua tekstin yläpuolelle kuvakkeiden uudelleenasentoon. Myös tila jokainen kuvake lähes yhtä kaukana toisistaan, jos mahdollista.

04. Grafiikan säätö

Shift+click to select the ribbon shapes and change the background colour — Shift + Napsauta, jos haluat valita nauhan muodot ja vaihda taustaväri

Ennen edistymispalkin luomista voit muuttaa kuvakkeiden haluamasi värejä.

Voit tehdä tämän kaksoisnapsauttamalla mitä tahansa kuvake ryhmää ja valitse sitten mitä haluat muuttaa. Tällöin Muokkaa lahjapakkauksen nauhaa vaihtaaksesi väriä sinisestä vihreiksi.

Kun olet Icon-ryhmän sisällä, pidä siirtyä, kun napsautat useampaa kuin yhtä kohdetta kerrallaan. Valitsen vaakasuorat ja pystysuorat suorakulmiot sekä yläosassa oleva keula.

Valitse paneelissa (ensimmäinen kuvake vasemmanpuoleisessa valikossa) Etsi täyttöasetukset. Näet oletusvärin on # 2E3192. Napsauta täyttövalikkoa, jos haluat käyttää pudotusvalintaa. Täällä voit joko vetää ympärille haluamasi värin tai kirjoita HEX-koodi suoraan.

Anna # 518531 ja paina Enter. Tämän pitäisi säästää tulos ja päivittää kaikki kolme muotoa kerralla. Voit vapaasti pelata millä tahansa muulla värillä, jonka haluat vaihtaa!

05. Progress-palkin käynnistäminen

Click the top-left circle in the Elements panel to add a new circle to the canvas — Lisää uusi ympyrä kankaalle napsauttamalla Elements-paneelissa vasemmassa yläkulmassa

Voit luoda edistymispalkin tarvitset vain kaksi muotoa: ympyröitä ja suorakulmioita. Onneksi molemmat näistä ovat saatavilla elements-paneelissa, joka sijaitsee työkalut-valikon pohjalla.

Napsauta elementtipaneelia ja valitse ympyrän muoto, joka on luettelon ensimmäinen kohde. Se antaa automaattisesti tumman harmaa ympyrän työtilan keskelle.

Voit muuttaa ympyrän uudelleen vetämällä pieniä valkoisia neliöruutuja kulmassa tai Select Foraarissa. Tämä toimii hyvin, mutta se ei ole yhtä tarkka kuin suora yhteenkuuluvuus.

Joten palaa sitten valintatyökaluun ja varmista, että uusi ympyrä on valittu. Valitse Valitse työkalupaneelin yläosassa valintakoko korkeus ja leveysarvo.

Syötä 100 molemmissa kentillä ja vedä ensimmäinen ympyrä ensimmäisen kuvakkeen alle.

06. Duplicating ympyrät

Resize the circle and duplicate twice, then move them under each shopping icon — Muuta ympyrä ja kaksoiskappale kahdesti, siirrä ne jokaisen ostoskuvakkeen alle

Kun olet valittu ympyrän muoto, valitse päävalikosta Kopioi. Siirrä tämä kaksoiskappale uudelleen siten, että se vastaa tiiviisti alkuperäisen ympyrän kanssa. Yritä saada se oikein ensimmäisen ympyrän päälle, joten ne näyttävät siltä.

Nyt, jos pidät muutosta ja napsauta, voit vetää tämän kaksoiskappalun ympyrän suorassa linjassa vaakasuoraan. Näin voit täydellisesti kohdistaa kaikki ympyrät yhteen suorassa linjassa (tai tarpeeksi lähellä yhtä).

Tee tämä, kunnes sinulla on kolme eri ympyrä muotoa 100 x 100: ssa, joista kukin sijoitetaan kolmen kuvakkeen alle.

07. Lisää liitäntälinjoja

Select the rectangle shape and arrange it behind the three circles — Valitse suorakulmion muoto ja järjestä se kolmen ympyrän takana

Siirry takaisin elementtipaneeliin ja etsi neliön muoto. Klikkaa lisätäksesi yhden neliön kankaalle.

Tämän muodon valittuna Siirrä takaisin Valitse työkalu ja etsi leveys / korkeuskoko-paneeli. Koska tämä suorakulmion pitäisi ulottua edistymispalkin koko leveydestä, tarvitsemme vain yhden pitkä muoto. Muuta niin korkeus 10: een ja leveys mihin tahansa numeroon, sinun on liitettävä kaikki ympyrät yhteen. Kaivos on 750 leveä.

Nyt tällä suorakulmiossa asennossa, katso suunnatun paneelin pohjaa, jossa se sanoo järjestämällä & amp; Voltti. Napsauta ylärivessä olevaa toista kuvaketta, jonka avulla voit siirtää valitun muodon muiden muotojen takana.

Huomaa: Voit joutua napsauttamaan alempaa painiketta muutaman kerran saada suorakulmio kaikki kolme ympyrää. Mutta nyt liitäntä suorakulmio näkyy vain ympyrän muotojen välillä, jotta voimme lisätä tekstin ympyröihin myöhemmin.

08. RECOLOURING

Recolour all the shapes and include a small stroke on the three circles — Recolour kaikki muodot ja sisältää pienen aivohalvauksen kolmessa ympyrässä

Nykyinen edistymispalkki näyttää hieman pimeältä, joten muutetaan väriä hieman.

Valitse pitkä suorakulmio ja etsi täyttöasetukset Työkalut-paneelissa. Vaihda väri # C5C5C5 ja paina Enter.

Napsauta nyt mitä tahansa purkamaan suorakulmion poistamiseksi. Haluamme myös vaihtaa ympyrän värejä, ja heidän pitäisi olla kevyempiä käyttäen tummempaa harmaa kuin raja-väri.

Pidä siirtymä ja napsauta jokaista kolmesta ympyrästä. Säädä täyttöväri # F5F5F5, paina Enter ja sulje täyttövärin valintapaneeli napsauttamalla X-kuvaketta. Alla löydät aivohalvausasetukset. Vaihda aivohalvaus Täytä # C5C5C5 ja paina Enter.

Klikkaa X-kuvaketta sulkeaksesi väriä valintalautakunta, vaihda viivan kokoa 6. Tässä vaiheessa kannattaa myös ryhmittämällä kaikki piireissä ja suorakulmion yhteen vetämällä valintaruutu ja menossa Muokkaa & gt; Group. Nyt voit säätää kaikkien muotojen sijaintia heti helposti.

09. Edistymisvaiheiden lisääminen

Add a text label into the first circle and duplicate the text for all three shapes — Lisää tekstiruutu ensimmäiseen ympyrään ja päällekkäinen teksti kaikkiin kolmeen muotoon

Lisätään joitakin numeroita jokaiseen ympyrään, jotta voit viimeistellä edistymispalkin suunnittelu.

Napsauta tekstityökalua ja kirjoita numero 1 ensimmäiseen ympyrään. Käytän avoimia sanoja erittäin rohkea, koko 45 värillä # C5C5C5 vastaamaan rajoja. Vedä tämä teksti niin, että se on sijoitettu ympyrän keskelle.

Tekstielementti kaksoiskappale ja siirrä se toiseen ympyrään tekstiin '2'. Tee sama kolmas ympyrä, jossa teksti "3".

10. Korosta ensimmäinen askel

Recolour the first circle blue so it appears like the active progress step — Recocour ensimmäinen ympyrä sininen, joten se näyttää aktiivisen edistymisvaiheen

Viimeistelynäppäimellä voit korostaa ensimmäistä vaihetta kevyemmän sinisen ääriviivan avulla. Valitse ensin juuri luotu numero "1" ja vaihda täyttö # 4976a3. Valitse sitten haluamasi ympyrä tekstin takana. Etsi aivohalvausasetukset ja vaihda aivohalvaus Väri # 4976A3. Tämän pitäisi lisätä tummansininen raja ympyrän ympärille. Kun ympyrä on vielä valittu, napsauta Täytä asetuksia ja muuta väriä # e2ebfa.

Ja se on! Nyt voit viedä tämän PNG / JPG: ksi latausominaisella oikeassa yläkulmassa. Voit myös piilottaa valkoisen taustan viedä tämän läpinäkyvänä PNG: ksi ja muuttaa koko asiakirjan kokoa taustapaneelin avulla (kolmas painike vasemmassa valikossa).

Tai jos haluat tallentaa tämän tuleviin muutoksiin, siirry tiedostoon & gt; Tallenna myöhemmin. Sinun täytyy luoda ilmainen Vectezy tili, mutta se on erinomainen tapa pitää kova työ tallennetaan myöhempää käyttöä varten.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti Issue 295. Osta se tässä .

Lue lisää:

10 kultaiset säännöt reagoivista SVG: istä
Tutustu jännittäviin uusiin ominaisuuksiin SVG 2: ssä
SuperCare SVG-animaatiot GSAP: llä

Design SVG-grafiikka selaimessasi

01. Valitse kuvakkeet

02. Tyhjennä roskat

03. Tekstin lisääminen

04. Grafiikan säätö

05. Progress-palkin käynnistäminen

06. Duplicating ympyrät

07. Lisää liitäntälinjoja

08. RECOLOURING

09. Edistymisvaiheiden lisääminen

10. Korosta ensimmäinen askel

Miten tehdään - Suosituimmat artikkelit

Rakenna asiakasportaali WordPressin avulla

Luo dia-out-valikko

Mandelbulbin tekeminen

REMUILD A 2004 Flash -verkkosivusto 2018

4 Helppo vaiheet parantamaan renderisi

Kuvan painopisteen korostaminen

Miten luodaan retro-logo Affinity Designer

Kuinka simuloida räjähdyksiä mayassa

Luokat