Design SVG grafika a böngészőben

Sep 12, 2025

kézikönyv

A Vecteezy szerkesztő egy szabad vektorszerkesztő csomag, amely közvetlenül a böngészőben fut. Ez a bemutató lefedi az alapvető alakú eszközöket és szerkesztési eszközöket, amelyeket bármely vektoros vektorok szerkesztéséhez használhat. Így építeni jelvényeket, gombokat, logókat vagy bármi mást relatív könnyedséggel.

A szerkesztő GUI hasonlít az Adobe Software-hez, így ha már használja a Photoshopot vagy az Illustrator, akkor könnyebb időt tanul a kötelek. De még a teljes kezdők is beléphetnek, és felveszi a karcolás alapjait.

Get Adobe Creative Cloud

Ezeket a bevásárlási ikonokat Vecteezy-t fogjuk használni.

Csak látogasson el az ikonok oldalára, és kattintson a "Szerkesztés & amp; Letöltés 'gomb. Ez megnyitja a szerkesztőt a böngészőjében, így testreszabhatja és felépítheti ezeket a grafikákat. Ehhez a bemutatóhoz megmutatjuk, hogyan lehet néhány ilyen ikonokat, és átalakítja őket egy nagyobb előrehaladási sáv grafikus - tökéletes választás bármely e-kereskedelmi honlapján.

Tehát azokkal a bevásárló ikonok nyitva vannak a Vecteezy szerkesztőben, elkezdhetünk!

01. Válassza ki az ikonokat

Click into the icon group and select one icon, then click Duplicate at the top — Kattintson az ikoncsoportra, és válasszon ki egy ikont, majd kattintson a Duplikálás gombra a tetején

Kattintson duplán az ikoncsoportra az összes ikon kiválasztásához (lehet, hogy kétszer kattintson duplán kétszer). Három konkrét ikonot használok ehhez a bemutatóhoz: a bevásárló táskák, a hitelkártya és az ajándék doboz.

Válassza ki a bevásárló táskát, és kattintson az oldal tetejére. Ennek meg kell adnia az egész ikon ismétlődését. Mozgassa ezt a tetejére, és másoljon kettőt.

Megjegyzés: A díszdobozban nem teljesen csoportosítva, így ha rákattint másolni akkor csak válasszon ki egy darabot az ikonra. A javításhoz csak húzza a kiválasztási mezőt az egész ajándék ikon fölé, majd a felső sarkában kattintson a Szerkesztés- & GT csoportra. Most megismételheti az egész jelen-ot egy kattintással.

Miután megismételte az összes három ikonra, kattintson duplán bárhol az üres vászonra. Ez az ikonok csoportjára kerül, így kiválaszthatja az egyéb objektumokat az oldalon. Ha a régebbi ikonok bármelyikére kattint, kiválaszthatja az egész csoportot. Ez tökéletes, mert le akarja húzni őket a vászonról, így nem láthatók.

02. Törölje a szemetet

Change the background opacity if you want it to be white instead of transparent — Módosítsa a háttér opacitást, ha azt szeretné, hogy az átlátszó helyett fehér legyen

Kattintson duplán az egyes duplikált ikonra, hogy hozzáférjen az egyes formák belsejében. Csak a fő ikonra van szükségünk, így kiválaszthatja és törölje a színes kör háttereket és az árnyékok dobását.

Ehhez egyszerűen kicsi, és válassza ki a háttérköret. Ezután nyomja meg a Törlés gombot, és eltűnik.

Ha az egész ikon eltűnik - ne pánik. Csak kattintson a Undo közelében a tetejére, vagy nyomja meg a Ctrl / Cmd + Z gombot, és próbálja újra. Előfordulhat, hogy duplán kattintson duplán az ikoncsoportba.

Végre három tiszta ikonra van szüksége a használatra. Ha nem tetszik az átlátszó háttér, akkor mindig hozzáférhet a háttérpanelt a bal oldali menüben (harmadik gomb lefelé), és növelje az opacitást 100 százalékra egy tiszta fehér háttérre.

03. Szöveg hozzáadása

Add text labels under each icon with the same font settings — Szöveges címkék hozzáadása az egyes ikonok alatt ugyanazokkal a betűtípus beállításokkal

Ez az előrehaladási sáv hihetetlenül egyszerű lesz; csak az e-kereskedelmi bolt három szakaszának reklámozása.

A folyamat hangsúlyozása érdekében adjunk hozzá címkéket az egyes ikonok alatt. A bal oldali eszköztáron keresse meg a szöveges eszközt (második gomb), majd kattintson a táska ikonra, hogy hozzáadjon egy szövegblokkot. Adja hozzá a "Shop" szöveget, és nyomja meg az Enter billentyűt.

Ez az automatikus kiválasztás a szöveget, így mozgathatja, és megtalálhatja a jó pozíciót. De ha újra kiválasztja a szöveges eszközt, megváltoztathatja a betűtípus-családot, a színt, a méretet, a betűválasztást és más funkciókat.

Nyitott Sans félkövér méretű 30-as méretű, -1,50 betűválasztással. Szöveg színe # 525252.

Duplikálja ezt a szöveget kétszer, és helyezze a másolatokat a többi ikonra. Használja a "Pay" szöveget a hitelkártya ikon alatt és a "Fogadás" alatt az Ajándék dobozban.

A kiválasztott eszközt a szöveg feletti ikonok áthelyezéséhez használhatja. Szintén, a tér mindegyik ikonra közel van, ha lehetséges.

04. A grafika beállítása

Shift+click to select the ribbon shapes and change the background colour — Shift + Kattintson a ribaformák kiválasztásához és a háttérszín megváltoztatásához

Mielőtt létrehozná az előrehaladási sávot, megváltoztathatja az ikonokban tetsző színeket.

Ehhez kattintson duplán az ikoncsoportba való belépéshez, majd válassza ki a módosítani kívánt formát. Ebben az esetben szerkesztem az ajándékdoboz szalagot, hogy megváltoztassa a színt kékről zöld színre.

Miután belép az ikoncsoportban, tartsa lenyomva a Shift gombot, miközben egy időpontban több elemet szeretne kiválasztani. Kiválasztom a vízszintes és függőleges téglalapokat, valamint az íj alakot a tetején.

A kiválasztott panelen (első ikon a bal oldali menüben) Keresse meg a kitöltési beállításokat. Láthatja az alapértelmezett szín # 2E3192. Kattintson a Töltés menüre a legördülőbb színkerék eléréséhez. Itt lehet húzni, hogy megtalálja a kívánt színt, vagy közvetlenül egy HEX kódot adjon meg.

Írja be a # 518531-et, és nyomja meg az Enter billentyűt. Ennek meg kell mentenie az eredményt, és egyszerre frissíti mind a három formát. Ne habozzon játszani bármilyen más színbeállítással, amit módosítani szeretne!

05. Az előrehaladási sáv elindítása

Click the top-left circle in the Elements panel to add a new circle to the canvas — Kattintson a bal felső sarkában az elemek panelen, hogy új köret adjon hozzá a vászonhoz

Egy előrehaladási sáv létrehozásához csak két alakra van szükség: körök és téglalapok. Szerencsére mindkettő mindegyike elérhető az Eszközök menü alján található elemek panelen.

Kattintson az elemek panelen, és válassza ki a kör alakját, amely a lista első eleme. Ez automatikusan elhelyez egy sötétszürke kör a munkaterület közepén.

A kör átméretezheti a sarkon lévő kis fehér négyzetdobozokat, vagy a SELECT határvonalat. Ez jól működik, de ez nem olyan pontos, mint a közvetlen átméretező funkció.

Tehát menjen vissza a Select eszközre, és győződjön meg róla, hogy az új kör van kiválasztva. A SELECT TOOL PAN panel tetején található egy kiválasztási méret a magasság és a szélesség értékével.

Írja be a 100-at mindkét mezőben, és húzza az első körét az első ikon alatt.

06. Duplikációs körök

Resize the circle and duplicate twice, then move them under each shopping icon — Átméretezze a kört és kétszer másoljon, majd mozgassa őket minden egyes vásárlási ikon alatt

A kiválasztott körformával kattintson a Felsőmenü gombra. Most helyezze át ezt az ismétlődőt, így szorosan illeszkedik az eredeti körével. Próbáld meg az első kör tetején, hogy úgy nézzenek ki, mint egy forma.

Most, ha a műszak és a kattintás, akkor húzhatja meg ezt a másolatot egyenes vonalban vízszintesen. Ez lehetővé teszi, hogy tökéletesen illessze az összes körét egyenes vonalban (vagy elég közel egyre).

Tegye ezt, amíg három különböző kör alakú 100 x 100-ban van, mindegyik a három ikon alatt helyezkedik el.

07. Adjon hozzá néhány összekötő vonalat

Select the rectangle shape and arrange it behind the three circles — Válassza ki a téglalap alakú alakot, és rendezze el a három kör mögött

Menjen vissza az elemek panelen, és keresse meg a négyzet alakú. Kattintson egy négyzet hozzáadásához a vászonra.

Ezzel az alakkal a kiválasztott formátumban tér vissza a Select eszközre, és keresse meg a szélesség / magasság méretét. Mivel ez a téglalapnak az előrehaladási sáv teljes szélességére kell kiterjednie, csak egy nagyon hosszú alakra van szükségünk. Tehát változtassa meg a magasságot 10-re és a szélességre bármilyen számra, amelyre össze kell kapcsolnod az összes körét együtt. Az enyém 750 széles.

Most, ezzel a téglalap helyzetben, nézze meg a kiválasztott panel alján, ahol azt mondja, hogy rendezi a & amp; Flip. Kattintson a második ikonra a felső sorban, amely lehetővé teszi, hogy bármilyen kiválasztott alakot mozgassa a többi forma mögött.

Megjegyzés: Előfordulhat, hogy néhányszor kattintson az alsó gombra, hogy a téglalapot mindhárom kör mögött kapja. De most az összekötő téglalap csak a körformák között látható, így később hozzáadhatunk szöveget a körökbe.

08. Recolouring

Recolour all the shapes and include a small stroke on the three circles — Recolour minden formát, és tartalmaz egy kis löketet a három körön

Az aktuális haladási sáv kicsit sötétnek tűnik, ezért változtassuk meg a színt egy kicsit.

Kattintson a hosszú téglalap kiválasztásához, és keresse meg a kitöltési beállításokat az Eszközök panelen. Módosítsa a színt a # C5C5C5-re és nyomja meg az Enter billentyűt.

Most kattintson bárhová a vászonra, hogy megszüntesse a téglalapot. Azt is szeretnénk megváltoztatni a kör színeket, és könnyebbnek kell lenniük, a sötétebb szürke színt használva.

Tartsa lenyomva a Shift, és kattintson a három kör mindegyikére. Állítsa be a kitöltési színt a # F5F5F5-hez, nyomja meg az Enter billentyűt, majd kattintson az X ikonra a kitöltés színének kiválasztásához. Az alábbiakban megtalálja a stroke beállításait. Változtassa meg a stroke kitöltése # C5C5C5 és nyomja meg az Enter gombot.

Kattintson az X ikonra, hogy lezárja ezt a színt zsűri, majd változtassa meg a stroke-méretet 6. Ebben a szakaszban azt is javasoljuk, csoportosítása a köröket, és a téglalap együtt húzásával válogatott doboz és megy szerkesztése & gt; nevében. Most könnyedén beállíthatja az összes forma helyzetét.

09. Haladás lépések hozzáadása

Add a text label into the first circle and duplicate the text for all three shapes — Adjon hozzá egy szöveges címkét az első körbe, és adja meg a szöveget mindhárom formájú szöveghez

Adjunk hozzá néhány számot minden körbe, hogy véglegesítsük az előrehaladási sáv kialakítását.

Kattintson a Szöveges eszközre, és írja be az 1. számot az első körbe. Használok nyitott sans extra-bold, 45 méretét a színes # C5C5C5-vel, hogy megfeleljen a határoknak. Húzza ezt a szöveget, így a kör közepén helyezkedik el.

Ismertesse a szöveges elemet, és mozgassa a második körbe a "2" szöveggel. Tegye ugyanezt a harmadik kör esetében a "3" szöveggel.

10. Jelölje ki az első lépést

Recolour the first circle blue so it appears like the active progress step — Recolour az első körkék, így úgy tűnik, mint az aktív haladás lépés

A befejező érintésként jelöljük ki az első lépést egy könnyebb kék vázlat segítségével. Először válassza ki a "1" számot, amit most hoztál létre, és megváltoztathatja a kitöltést a # 4976a3-ra. Ezután kattintson a szöveg mögötti kör kiválasztásához. Keresse meg a löket beállításait, és változtassa meg a stroke színét a # 4976A3-ra. Ez hozzá kell adnia egy sötétkék határt a kör körül. A kiválasztott körrel kattintson a kitöltési beállításokra, és módosítsa a színt a # E2EBFA-ra.

És ez az! Most exportálhatja ezt PNG / JPG-ként a jobb felső sarokban lévő letöltési funkció használatával. Azt is elrejtheti a fehér háttér, hogy exportálja ezt átlátszó PNG-ként, és módosíthatja a teljes dokumentumméretet a háttér panel segítségével (a bal oldali menü harmadik gombja).

Vagy ha szeretné megmenteni ezt a jövőbeli változásokhoz, csak menjen a Fájl & gt; Mentés később. Meg kell teremtenie egy ingyenes Vecteezy-fiókot, de ez egy nagyszerű módja annak, hogy a kemény munkáját megmentse a jövőbeni referenciaként.

Ez a cikk eredetileg megjelent net magazin 295. kiadja itt .

Olvass tovább:

10 arany szabályok az SVG-kre
Fedezze fel az SVG 2 izgalmas új funkcióit
SuperCed SVG animációk GSAP-val

Design SVG grafika a böngészőben

01. Válassza ki az ikonokat

02. Törölje a szemetet

03. Szöveg hozzáadása

04. A grafika beállítása

05. Az előrehaladási sáv elindítása

06. Duplikációs körök

07. Adjon hozzá néhány összekötő vonalat

08. Recolouring

09. Haladás lépések hozzáadása

10. Jelölje ki az első lépést

kézikönyv - Most Popular Articles

A referencia-képek használata: 13 lényeges tipp a művészek számára

A gravitációs vázlat használata

Hozzon létre egy régi iskola anaglyph hatást

Hogyan rajzoljon reálisabb számokat

Hogyan kell meggyőzni a zbrush-t

Hozzon létre egy tökéletesen geometriai logót illusztrátor

Hogyan lehet tökéletes haj a portrékban

15 tipp a kereszt-eszközoptimalizáláshoz

Kategóriák