Design SVG grafika ve vašem prohlížeči

Jan 30, 2026

jak

. \ T Veceezy editor Je volný vektor úpravy suite, která běží přímo ve vašem prohlížeči. Tento tutoriál pokrývá základní nástroje a nástroje pro úpravy tvaru, které můžete použít k úpravě libovolných vektorů na webu. Tímto způsobem můžete vybudovat odznaky, tlačítka, loga nebo cokoliv jiného s relativní lehkostí.

GUI pro tento editor se cítí podobný softwaru Adobe, takže pokud již používáte Photoshop nebo Illustrator, budete mít snadnější čas učení lan. Ale dokonce i úplné začátečníci se do toho mohou ponořit a vyzvednout základy od nuly.

Získejte Adobe Creative Cloud

Používáme tyto nákupní ikony z vecteezy.

Stačí navštivte stránky ikony a klikněte na 'Edit & AMP; Stáhnout tlačítko. Otevře se editor přímo ve vašem prohlížeči, abyste mohli přizpůsobit a vybudovat na těchto grafikách. Pro tento tutoriál vám ukážeme, jak nabít některé z těchto ikon a převést je do větší grafické grafiky pokroku - ideální volbou pro všechny domovské stránky eCommerce.

Takže s těmi nákupními ikonami otevřeny v Editoru vectezy, můžeme začít!

01. Vyberte ikony

Click into the icon group and select one icon, then click Duplicate at the top — Klikněte do skupiny ikon a vyberte jednu ikonu a klepněte na tlačítko Duplikovat nahoře

Poklepejte na skupinu ikon vyberte všechny ikony (možná budete muset dvakrát kliknout dvakrát). Budu používat tři specifické ikony pro tento návod: nákupní tašky, kreditní kartu a dárková krabička.

Vyberte nákupní tašku a klepněte na tlačítko Duplikovat v horní části stránky. To by vám mělo dát duplikát celé ikony. Posuňte to nahoru směrem nahoru a duplikujte další dva.

Poznámka: Dárková krabička není plně seskupena, takže když klepnete na tlačítko Duplikovat, vyberte pouze kus ikony. Chcete-li to opravit, přetáhněte výběr výběru po celé ikoně dárek, pak nahoře klepněte na tlačítko Edit- & gt; skupina. Nyní můžete duplikovat celou ikonu současné ikony s jedním kliknutím.

Jakmile budete mít duplikáty všech tří ikon, poklepejte na kdekoli na prázdné plátno. To vám přináší mimo skupinu ikon, takže můžete vybrat jiné objekty na stránce. Pokud klepnete na některý ze starších ikon, vyberete celou skupinu. To je dokonalé, protože budete chtít přetáhnout z plátna, takže jsou mimo dohled.

02. Vymažte odpad

Change the background opacity if you want it to be white instead of transparent — Změňte opacitou pozadí, pokud chcete, aby byl bílý místo průhledného

Poklepejte na každou duplikovanou ikonu pro přístup k jednotlivým tvarům uvnitř. Potřebujeme pouze hlavní ikonu, takže byste měli vybrat a odstranit pozadí barevného kruhu a pokles stínu.

Chcete-li to provést, jednoduše přiblížit velmi blízko a vyberte kruh pozadí. Poté stiskněte Smazat a mělo by zmizet.

Pokud celá ikona zmizí - ne panika. Stačí kliknout na tlačítko Undo v blízkosti horní nebo stisknout CTRL / CMD + Z a zkuste to znovu. Možná budete muset poklepat, abyste se dostali do skupiny ikon.

Do konce, měli byste mít tři čisté ikony připravené k použití. Pokud se vám nelíbí transparentní pozadí, můžete vždy přistupovat k panelu pozadí v levém menu (třetí tlačítko dolů) a zvýšit opacity na 100% pro čisté bílé pozadí.

03. Přidání textu

Add text labels under each icon with the same font settings — Přidat textové štítky pod každou ikonou se stejnými nastaveními písma

Tento pruh pokroku bude neuvěřitelně jednoduchý; Stačí reklamu tři fáze obchodu s elektronický obchod.

Chcete-li tento proces zdůraznit, přidejte štítky pod každou ikonu. V levém panelu nástrojů naleznete textový nástroj (druhé tlačítko) a klepněte na položku Pod ikonou sáček přidat textový blok. Přidejte text 'shop' a stiskněte klávesu Enter na klávesnici.

Toto auto-vybere text, takže jej můžete přesunout a najít dobrou pozici. Pokud ale znovu vyberete textový nástroj, můžete změnit rodinu písma, barvu, velikost, vzdálené vzdálenosti a další funkce.

Používám otevřené sans polo-tučné velikosti 30 s odstupem s -1,50 písmeno. Barva textu je # 525252.

Duplikovat tento text dvakrát a umístit duplikáty pod ostatní ikony. Použijte text 'Pay' pod ikonou kreditní karty a "Přijmout" pod dárkovým boxem.

Měli byste použít nástroj Select pro přemístění ikon nad textem. Také prostor každá ikona v blízkosti ekvidistentu, pokud je to možné.

04. Nastavení grafiky

Shift+click to select the ribbon shapes and change the background colour — Shift + Klepnutím vyberte tvary pásky a změňte barvu pozadí

Před vytvořením baru Progress můžete změnit všechny barvy, které se vám líbí v ikonách.

Chcete-li to provést, poklepejte na ikonu Group a vyberte libovolný tvar, který chcete změnit. V tomto případě upravím dárková krabička stuha pro změnu barvy z modré až zelené.

Jakmile budete uvnitř skupiny ikon, podržte klávesu Shift při klepání vyberte více než jednu položku najednou. Vyberu horizontální a vertikální obdélníky, plus tvar luku nahoře.

V panelu Vybrat (první ikona v levém menu) vyhledejte nastavení výplně. Zobrazí se výchozí barva # 2E3192. Kliknutím na tuto nabídku vyplnění otevřete do rozevíracího barevného kola. Zde můžete přetáhnout, abyste našli požadovanou barvu, nebo zadejte hex kódu přímo.

Zadejte # 518531 a stiskněte klávesu Enter. To by mělo uložit výsledek a aktualizovat všechny tři tvary najednou. Neváhejte hrát s jinými nastaveními barev, které chcete změnit!

05. Spuštění pruhu pokroku

Click the top-left circle in the Elements panel to add a new circle to the canvas — Klepněte na horní levý kruh v panelu Prvky přidat nový kruh na plátno

Chcete-li vytvořit pruh průběhu, potřebujete pouze dva tvary: kruhy a obdélníky. Naštěstí jsou obě z nich k dispozici v panelu prvků umístěných ve samotném dolní části nabídky nástrojů.

Klepnutím na panel prvků a vyberte tvar kruhu, což je první položka v seznamu. Bude automaticky umístit tmavě šedý kruh ve středu pracovního prostoru.

Můžete změnit velikost kruhu přetažením malých bílých čtverečních boxů v rohu nebo na výběru hranice. To funguje dobře, ale není to tak přesné jako funkce přímé změny velikosti.

Takže místo toho se vrátíte do nástroje Select a ujistěte se, že je vybrán nový kruh. V horní části panelu Select Tool byste měli vidět velikost výběru s hodnotou výšky a šířky.

Zadejte 100 v obou polích a přetáhněte první kruh pod první ikonou.

06. Duplikující kruhy

Resize the circle and duplicate twice, then move them under each shopping icon — Změňte velikost kruhu a duplikujte dvakrát, pak je přesuňte pod každou nákupní ikonu

S vybraným tvarem kruhu klepněte v horní nabídce tlačítko Duplikovat. Nyní přemístěte toto duplikát, aby se úzce zarovná s původním kruhem. Snažte se dostat přímo na vrcholu prvního kruhu, takže vypadají jako jeden tvar.

Nyní, pokud držíte směnu a kliknete, můžete tento duplicitní kruh přetáhnout v přímém řádku vodorovně. To vám umožní dokonale sladit všechny své kruhy společně v přímce (nebo dostatečně blízko k jednomu).

Udělejte to, dokud nebudete mít tři různé kruhové tvary na 100 x 100, z nichž každý je umístěn pod třemi ikonami.

07. Přidejte některé spojovací čáry

Select the rectangle shape and arrange it behind the three circles — Vyberte tvar obdélníku a uspořádejte ji za tři kruhy

Přejít zpět na panel prvků a najít čtvercový tvar. Klikněte pro přidání jednoho čtverce na plátno.

S tímto tvarem je zvolen zpět Zpět na nástroj Vybrat a vyhledejte panel Velikost šířky / výšky. Vzhledem k tomu, že tento obdélník by měl překlenout celou šířku baru, potřebujeme jen jeden opravdu dlouhý tvar. Změňte tedy výšku na 10 a šířku na jakékoli číslo, které musíte připojit všechny kruhy dohromady. Důl je 750 široký.

Nyní, s tímto obdélníkem v poloze, podívejte se směrem ke spodní části panelu Select, kde říká Uspořádat a Amp; Flip. Klepněte na druhou ikonu v horním řádku, která vám umožní přesunout vybraný tvar za ostatními tvary.

Poznámka: Budete muset kliknout na dolní tlačítko několikrát, abyste se obdélník dostali za všemi třemi kruhy. Ale nyní spojovací obdélník je viditelný pouze mezi tvary kruhu, takže můžeme přidat text do kruhů později.

08. Recolouring.

Recolour all the shapes and include a small stroke on the three circles — Recolour všechny tvary a zahrnout malý zdvih na tři kruhy

Současný pruh pokroku vypadá trochu tmavé, takže se trochu změní barvu.

Klepnutím vyberte dlouhý obdélník a vyhledejte nastavení výplně v panelu Nástroje. Změňte barvu na # C5C5C5 a stiskněte klávesu Enter.

Nyní klikněte kdekoli off-canvas, abyste zrušili obdélník. Chceme také změnit barvy kruhu a měly by být lehčí, používat tmavší šedou jako hraniční barvu.

Držte směnu a klikněte na každou ze tří kruhů. Upravte barvu výplně na # F5F5F5, stiskněte klávesu Enter a klepněte na ikonu X a zavřete panel Vybrat barevný výběr výplně. Níže naleznete nastavení tahu. Změňte výplň tahu na # C5C5C5 a stiskněte Enter.

Klepnutím na ikonu X zavřete tento panel barevného výběru, poté změňte velikost zdvihu na 6. V této fázi také doporučuji seskupení všech kruhů a obdélník dohromady přetažením pole výběru a jít na Edit & GT; Skupina. Nyní můžete nastavit polohu všech tvarů najednou s lehkostí.

09. Přidání kroků pokroku

Add a text label into the first circle and duplicate the text for all three shapes — Přidejte textový štítek do prvního kruhu a duplikujte text pro všechny tři tvary

Přidejte několik čísel do každého kruhu, abyste dokončili návrh baru.

Klepněte na textový nástroj a zadejte číslo 1 do prvního kruhu. Používám otevřené sans Extra-Bold, velikost 45 s barvou # C5C5C5, který odpovídá hraniči. Přetáhněte tento text, takže je umístěn ve středu kruhu.

Duplikovat textový prvek a přesuňte jej do druhého kruhu s textem "2". Udělejte to samé pro třetí kruh s textem "3".

10. Zvýrazněte první krok

Recolour the first circle blue so it appears like the active progress step — Recolour první kruh modrá, takže se jeví jako aktivní krok pokroku

Jako dokončovací dotek se upozorní na první krok pomocí světlejšího modrého obrysu. Nejprve vyberte číslo, 1 ', který jste právě vytvořili, a změňte výplň na # 4976A3. Poté klepnutím vyberte kruh za textem. Najděte nastavení tahu a změňte barvu zdvihu na # 4976A3. To by mělo přidat tmavě modré okraj kolem kruhu. S ještě vybráním kruhu klepněte na nastavení výplně a změňte barvu na # E2EBFA.

A to je vše! Nyní můžete exportovat jako PNG / JPG pomocí funkce stahování v pravém horním rohu. Můžete také skrýt bílé pozadí exportovat jako transparentní PNG a změnit celkový velikost dokumentu pomocí panelu pozadí (třetí tlačítko v levém menu).

Nebo chcete-li to ušetřit pro budoucí změny, stačí jít do souboru & gt; Uložit pro později. Budete muset vytvořit bezplatný účet vectezy, ale je to skvělý způsob, jak udržet vaši tvrdou práci uloženou pro budoucí použití.

Tento článek se původně objevil Čistý časopis Vydání 295. Koupit tady .

Přečtěte si více:

10 Zlatá pravidla pro reagující SVGS
Prozkoumejte vzrušující nové funkce v SVG 2
Superge SVG animace s GSAP

Design SVG grafika ve vašem prohlížeči

01. Vyberte ikony

02. Vymažte odpad

03. Přidání textu

04. Nastavení grafiky

05. Spuštění pruhu pokroku

06. Duplikující kruhy

07. Přidejte některé spojovací čáry

08. Recolouring.

09. Přidání kroků pokroku

10. Zvýrazněte první krok

jak - Nejoblíbenější články

Proveďte volné a rychlé testy uživatelů s uživatelem

Vytvořte 3D krajinu v 6 jednoduchých krocích

Vytvořit animovaný textový textový efekt

Pochopení vlastnosti zobrazení CSS

Zlepšit tahy štětce v oleji

Barva portrét jako staré mistři

Vytvořit smíšené inkousty s InDesign

Zrychlení pracovního postupu textury

Kategorie