Ontwerp SVG-graphics in uw browser

Sep 12, 2025

Procedures

De Vecteezy Editor is een gratis vectorbewerkingssuite die recht in uw browser loopt. Deze tutorial heeft betrekking op de basisvorminstrumenten en bewerkingshulpmiddelen die u kunt gebruiken om alle vectoren op de site te bewerken. Op deze manier kunt u badges, knoppen, logo's of iets anders met relatief gemak bouwen.

De GUI voor deze editor voelt zich op vergelijkbaar met Adobe-software, dus als u al Photoshop of Illustrator gebruikt, heeft u een eenvoudiger tijd om de touwen te leren. Maar zelfs complete beginners kunnen hier in duiken en de basisprincipes helemaal opnieuw ophalen.

Ontvang Adobe Creative Cloud

We gaan deze boodschappenpictogrammen uit Vecteezy gebruiken.

Ga gewoon naar de pictogrammen Pagina en klik op 'Bewerken & Amp; Download'-knop. Hiermee wordt de editor in uw browser geopend, zodat u deze afbeeldingen kunt aanpassen en voortbouwen. Voor deze tutorial laten we je zien hoe je een aantal van deze pictogrammen kunt nabsen en omzetten in een grotere vooruitgangsbalk, de perfecte keuze voor elke e-commerce-homepage.

Dus met die winkelpictogrammen die in de Vecteezy-editor openen, kunnen we aan de slag!

01. Kies de pictogrammen

Click into the icon group and select one icon, then click Duplicate at the top — Klik in de pictogramgroep en selecteer één pictogram en klik vervolgens op Dupliceer aan de bovenkant

Dubbelklik op de pictogramgroep om alle pictogrammen te selecteren (mogelijk moet u dubbelklikken om twee keer te klikken). Ik gebruik drie specifieke pictogrammen voor deze tutorial: de boodschappentassen, de creditcard en de geschenkdoos.

Selecteer de boodschappentas en klik op Dupliceren boven de bovenkant van de pagina. Dit zou je een duplicaat van het hele pictogram moeten geven. Verplaats dit naar boven en dupliceer de andere twee.

Opmerking: de geschenkdoos is niet volledig gegroepeerd, dus wanneer u klikt om te dupliceren, selecteert u alleen een stuk van het pictogram. Om dit te verhelpen, sleept u een selectievakje over het gehele geschenkpictogram en vervolgens bovenaan op EDIT- & GT; Group. Nu kunt u het hele huidige pictogram met één klik dupliceren.

Zodra u duplicaten van alle drie de pictogrammen hebt, dubbelklikt u overal op het lege canvas. Dit brengt u buiten de groep pictogrammen, zodat u andere objecten op de pagina kunt selecteren. Als u op een van de oudere pictogrammen klikt, selecteert u de hele groep. Dit is perfect, omdat je ze van het canvas wilt slepen, zodat ze uit het zicht zijn.

02. Wis het afval

Change the background opacity if you want it to be white instead of transparent — Verander de achtergronddekking als je wilt dat het wit is in plaats van transparant

Dubbelklik op elk gedupliceerd pictogram om toegang te krijgen tot de afzonderlijke vormen van binnen. We hebben alleen het hoofdpictogram nodig, dus u moet de kleurrijke cirkelachtergronden selecteren en verwijderen en schaduwen vallen.

Om dit te doen, zoomt u eenvoudig in de buurt en selecteert u de achtergrondcirkel. Druk vervolgens op Delete en het zou moeten verdwijnen.

Als het hele pictogram verdwijnt - niet in paniek. Klik gewoon op Ongedaan maken bij de bovenkant of druk op CTRL / CMD + Z en probeer het opnieuw. Mogelijk moet u dubbelklikken om in de pictogramgroep te komen.

Tegen het einde zou je drie schone pictogrammen klaar voor gebruik moeten hebben. Als u de transparante achtergrond niet leuk vindt, hebt u altijd toegang tot het achtergrondpaneel in het linkermenu (derde knop omlaag) en verhoogt u de dekking tot 100 procent voor een zuivere witte achtergrond.

03. Tekst toevoegen

Add text labels under each icon with the same font settings — Voeg tekstlabels onder elk pictogram toe met dezelfde lettertype-instellingen

Deze voortgangsbalk is ongelooflijk eenvoudig; Alleen drie stadia van een e-commerce-winkel reclame.

Om dit proces te benadrukken, laten we labels onder elk pictogram toevoegen. Zoek in de werkbalk met de linkerhand de teksttool (tweede knop) en klik vervolgens op onder het pictogram van de zak om een tekstblok toe te voegen. Voeg de tekst 'Shop' toe en druk op Enter op je toetsenbord.

Dit selecteert automatisch de tekst zodat u deze kunt verplaatsen en een goede positie kunt vinden. Maar als u de teksttool opnieuw selecteert, kunt u de lettertype, kleur, grootte, letterafstand en andere functies wijzigen.

Ik gebruik Open Sans Semi-Bold Size 30 met A-1,50 Letter-spating. Tekstkleur is # 525252.

Dupliceer deze tekst twee keer en plaats de duplicaten onder de andere pictogrammen. Gebruik de tekst 'Pay' onder het creditcardpictogram en 'Ontvangst' onder de geschenkdoos.

U moet het gereedschap Selecteren voor het herpositioneren van de pictogrammen boven de tekst. Ook, ruimte elk pictogram in de buurt van giftig uit elkaar, indien mogelijk.

04. Graphics aanpassen

Shift+click to select the ribbon shapes and change the background colour — Shift + Klik om de lintvormen te selecteren en de achtergrondkleur te veranderen

Voordat u de voortgangsbalk maakt, kunt u alle kleuren wijzigen die u leuk vindt in de pictogrammen.

Dubbelklik om dit te doen om een pictogramgroep in te voeren en selecteer vervolgens welke vorm u wilt wijzigen. In dit geval bewerken ik het schenkdooslint om de kleur van blauw naar groen te veranderen.

Zodra u in de pictogramgroep bent, houdt u de verschuiving vast terwijl u klikt om meer dan één artikel tegelijk te selecteren. Ik selecteer de horizontale en verticale rechthoeken, plus de boogvorm aan de bovenkant.

Zoek in het paneel Selecteer (eerste pictogram in het menu links) de vulinstellingen. Je ziet de standaardkleur # 2E3192. Klik op dat menu vult om toegang te krijgen tot een vervolgkeuzelijst. Hier kunt u slepen om de gewenste kleur te vinden of een zeskantcode rechtstreeks in te voeren.

Voer # 518531 in en druk op Enter. Dit moet het resultaat opslaan en alle drie de vormen tegelijk bijwerken. Voel je vrij om te spelen met een andere kleurinstellingen die je zou willen veranderen!

05. De voortgangsbalk starten

Click the top-left circle in the Elements panel to add a new circle to the canvas — Klik op de linker-linkercirkel in het deelvenster Elementen om een nieuwe cirkel aan het canvas toe te voegen

Om een voortgangsbalk te maken, hebt u slechts twee vormen nodig: cirkels en rechthoeken. Gelukkig zijn allebei beschikbaar in het deelvenster Elementen onderaan het menu Tools.

Klik op het deelvenster Elementen en selecteer de cirkelvorm, wat het eerste item in de lijst is. Het zal automatisch een donkergrijze cirkel in het midden van uw werkruimte plaatsen.

U kunt de grootte van de cirkel wijzigen door de kleine witte vierkante dozen in de hoek of de selectgrens te slepen. Dit werkt goed, maar het is niet zo nauwkeurig als de directe grootte van het formaat.

Dus ga in plaats daarvan terug naar het geselecteerde gereedschap en zorg ervoor dat uw nieuwe cirkel is geselecteerd. De bovenkant van het deelvenster Selecteer Tool, moet u een selectieformaat zien met een hoogte- en breedtewaarde.

Voer 100 in beide velden in en sleep uw eerste cirkel onder het eerste pictogram.

06. Dupliceren van cirkels

Resize the circle and duplicate twice, then move them under each shopping icon — Geef de grootte van de cirkel en dupliceert twee keer, verplaats ze dan onder elk winkelpictogram

Klik met uw circle-vorm geselecteerd, klikt u op Dupliceren in het bovenste menu. Verplaats nu dit duplicaat zodat het nauw met je originele cirkel afstemt. Probeer het recht op de eerste cirkel te krijgen, zodat ze eruit zien als één vorm.

Nu, als u Shift vasthoudt en klikt, kunt u deze dubbele cirkel in een rechte lijn horizontaal slepen. Hierdoor kun je perfect al je cirkels samen in een rechte lijn (of dicht genoeg bij één) uitlijnen.

Doe dit totdat je drie verschillende cirkelvormen hebt bij 100 x 100, elk geplaatst onder de drie pictogrammen.

07. Voeg wat verbindingsregels toe

Select the rectangle shape and arrange it behind the three circles — Selecteer de vorm van de rechthoek en rangschik het achter de drie cirkels

Ga terug naar het deelvenster Elementen en vind de vierkante vorm. Klik om een vierkant op het canvas toe te voegen.

Met deze vorm is geselecteerd om terug te gaan naar het gereedschap Selecteer en zoek het paneel met de breedte / hoogte. Aangezien deze rechthoek de volledige breedte van de voortgangsbalk moet overspannen, hebben we gewoon een hele lange vorm nodig. Dus verander de hoogte tot 10 en de breedte tot welk nummer dan ook om al uw cirkels samen te sluiten. De mijne is 750 breed.

Nu, met deze rechthoek in positie, kijk dan naar de onderkant van het selecteerpaneel waar het zegt Arm & AMP; Omdraaien. Klik op het tweede pictogram in de bovenste rij, waarmee u een geselecteerde vorm achter de andere vormen kunt verplaatsen.

Opmerking: u moet mogelijk een paar keer op de onderste knop klikken om de rechthoek achter alle drie cirkels te krijgen. Maar nu is de verbindingsrechthoek alleen zichtbaar tussen de cirkelvormen, zodat we later tekst in de cirkels kunnen toevoegen.

08. Recolouring

Recolour all the shapes and include a small stroke on the three circles — Recolour alle vormen en omvatten een kleine slag op de drie cirkels

De huidige voortgangsbalk ziet er een beetje donker uit, dus laten we de kleur een beetje veranderen.

Klik om de lange rechthoek te selecteren en vind de vulinstellingen in het paneel Tools. Verander de kleur naar # C5C5C5 en druk op Enter.

Klik nu overal Off-Canvas om de rechthoek te deselecteren. We willen ook de cirkelkleuren veranderen, en ze moeten lichter zijn, met behulp van de donkere grijs als een randkleur.

Houd Shift vast en klik op elk van de drie cirkels. Pas de vulkleur aan op # F5F5F5, druk op Enter en klik vervolgens op het X-pictogram om het paneel Vulkleur te sluiten. Hieronder vindt u een beroerte-instellingen. Verander de slag vul in op # C5C5C5 en druk op Enter.

Klik op het X-pictogram om dit selectiepaneel te sluiten en vervolgens de slagmaat in op 6. In deze fase raad ik ook aan om alle cirkels en de rechthoek samen te groeperen door een selectiebox te slepen en naar Edit & GT; Group. Nu kunt u de positie van alle vormen tegelijkertijd met gemak aanpassen.

09. Voortgangsstappen toevoegen

Add a text label into the first circle and duplicate the text for all three shapes — Voeg een tekstlabel toe aan de eerste cirkel en dupliceer de tekst voor alle drie de vormen

Laten we een aantal nummers toevoegen aan elke cirkel om het voortgangsbalkontwerp af te ronden.

Klik op het Tekst Tool en voer het nummer 1 in de eerste cirkel in. Ik gebruik open sans extra vet, maat 45 met de kleur # C5C5C5 om de randen te matchen. Sleep deze tekst zodat deze in het midden van de cirkel is geplaatst.

Dupliceer het tekstelement en verplaats het in de tweede cirkel met de tekst '2'. Doe hetzelfde voor de derde cirkel met tekst '3'.

10. Markeer de eerste stap

Recolour the first circle blue so it appears like the active progress step — Recolour de eerste cirkel blauw, zodat het lijkt op de actieve voortgangsstap

Als een finishing touch, laten we de allereerste stap markeren met behulp van een lichtere blauwe omtrek. Selecteer eerst het nummer '1' dat u zojuist hebt gemaakt en verander de vulling tot # 4976A3. Klik vervolgens om de cirkel achter de tekst te selecteren. Zoek de slaginstellingen en verander de slagkleur naar # 4976A3. Dit zou een donkerblauwe rand rond de cirkel moeten toevoegen. Met de cirkel is nog steeds geselecteerd, klik op de instellingen van de vul en verander de kleur naar # E2EBFA.

En dat is het! Nu kunt u dit exporteren als een PNG / JPG met behulp van de downloadfunctie in de rechterbovenhoek. U kunt ook de witte achtergrond verbergen om dit te exporteren als een transparant PNG en de algemene documentgrootte wijzigen met behulp van het achtergrondpaneel (derde knop in het menu aan de linkerkant).

Of als u dit wilt opslaan voor toekomstige wijzigingen, gaat u gewoon naar FILE & GT; opslaan voor later. Je moet een gratis Vecteezy-account maken, maar het is een geweldige manier om je harde werk te houden die is opgeslagen voor toekomstig gebruik.

Dit artikel verscheen oorspronkelijk in netto tijdschrift uitgave 295. Koop het hier

Lees verder:

10 Gouden regels voor responsieve SVGS
Verken de spannende nieuwe functies in SVG 2
Supercharge SVG-animaties met GSAP

Ontwerp SVG-graphics in uw browser

01. Kies de pictogrammen

02. Wis het afval

03. Tekst toevoegen

04. Graphics aanpassen

05. De voortgangsbalk starten

06. Dupliceren van cirkels

07. Voeg wat verbindingsregels toe

08. Recolouring

09. Voortgangsstappen toevoegen

10. Markeer de eerste stap

Procedures - Meest populaire artikelen

Hoe rimpels in Photoshop te verwijderen

Aan de slag met Redux Thunk

Gebruik negatieve ruimte om betere handen te tekenen

Hoe een mahlstick te maken en te gebruiken voor het schilderen

Creëer geïllustreerde portretten van foto's

Een digitale activa maken

Maak aangepaste borstels in clipstudio-verf

Maak een poster van een sjabloon in Photoshop

Categorieën