Projektowanie grafiki SVG w przeglądarce

Sep 11, 2025

Jak

The. Edytor Vecterzy jest bezpłatnym pakietem edycji wektorowej, która działa bezpośrednio w przeglądarce. Ten samouczek obejmuje podstawowe narzędzia kształtu i narzędzia do edycji Możesz użyć do edycji wszystkich wektorów na stronie. W ten sposób możesz budować odznaki, przyciski, logo lub cokolwiek innego z względną łatwością.

GUI dla tego edytora jest podobny do programu Adobe Software, więc jeśli już korzystasz z Photoshopa lub Illustrator, będziesz łatwiejszy na nauce lin. Ale nawet kompletni początkujący mogą nurkować w tym i odebrać podstawy od podstaw.

Zdobądź Adobe Creative Cloud

Użyjemy tych ikon zakupów z Vecteyzy.

Wystarczy odwiedzić stronę i kliknij "Edytuj i AMP; Przycisk pobierania ". Spowoduje to otwarcie edytora w przeglądarce, dzięki czemu możesz dostosować i zbudować na tej grafice. W tym samouczku pokażemy Ci, jak NaB niektóre z tych ikon i przekształcimy je w większą grafikę paska postępu - idealny wybór dla każdej strony głównej ECommerce.

Więc z tymi ikonami zakupowymi otwartymi w edytorze Vectezy, możemy zacząć!

01. Wybierz ikony

Click into the icon group and select one icon, then click Duplicate at the top — Kliknij do grupy ikon i wybierz jedną ikonę, a następnie kliknij Duplikat na górze

Kliknij dwukrotnie grupę ikon, aby wybrać wszystkie ikony (może być konieczne dwukrotne kliknięcie dwukrotnie). Użyję trzech konkretnych ikon dla tego samouczka: torby na zakupy, karta kredytowa i pudełko.

Wybierz torbę na zakupy i kliknij Duplikat na samym początku strony. Powinno to dać duplikat całej ikony. Przenieś to w kierunku góry i powielić dwa pozostałe.

Uwaga: Pudełko na prezenty nie jest w pełni pogrupowane, więc po kliknięciu, aby duplikować, wybierzesz tylko kawałek ikony. Aby to naprawić, po prostu przeciągnij pole wyboru na całej ikony prezentów, a następnie w górnej Kliknij przycisk Edytuj- GT; Teraz możesz zduplikować całą obecną ikonę jednym kliknięciem.

Gdy masz duplikaty wszystkich trzech ikon, kliknij dwukrotnie w dowolnym miejscu na pustym płótnie. Przynosi to poza grupę ikon, dzięki czemu można wybrać inne obiekty na stronie. Jeśli klikniesz dowolną starszą ikonę, wybierzesz całą grupę. Jest to idealne, ponieważ chcesz przeciągnąć je z płótna, więc są poza zasięgiem wzroku.

02. Wyczyść śmieci

Change the background opacity if you want it to be white instead of transparent — Zmień krycie tła, jeśli chcesz, aby był biały zamiast przezroczysty

Kliknij dwukrotnie każdą zduplikowaną ikonę, aby uzyskać dostęp do poszczególnych kształtów wewnątrz. Potrzebujemy tylko głównej ikony, więc powinieneś wybrać i usunąć kolorowe tła koła i spadek cieni.

Aby to zrobić, po prostu powiększ bardzo blisko i wybierz okrąg tła. Następnie naciśnij Usuń i powinien zniknąć.

Jeśli cała ikona znika - nie panika. Wystarczy kliknąć Cofnij w pobliżu góry lub naciśnij Ctrl / Cmd + Z i spróbuj ponownie. Może być konieczne dwukrotnie kliknąć, aby dostać się do grupy ikon.

Do końca powinieneś mieć trzy czyste ikony gotowe do użycia. Jeśli nie podoba Ci się przezroczyste tło, zawsze możesz uzyskać dostęp do panelu tła w lewym menu (trzeci przycisk) i zwiększyć krycie do 100 procent dla czystego białego tła.

03. Dodawanie tekstu.

Add text labels under each icon with the same font settings — Dodaj etykiety tekstowe pod każdą ikoną z tymi samymi ustawieniami czcionek

Ten pasek postępu będzie niezwykle prosty; Wystarczy reklamować trzy etapy sklepu e-commerce.

Aby podkreślić ten proces, dodajmy etykiety pod każdym ikoną. Na pasku narzędzi z lewej strony znajdź narzędzie tekstowe (drugi przycisk), a następnie kliknij pod ikoną torby, aby dodać blok tekstu. Dodaj tekst "Sklep" i naciśnij Enter na klawiaturze.

To automatyczny wybiera tekst, dzięki czemu można go poruszać i znaleźć dobrą pozycję. Ale jeśli ponownie wybierzesz narzędzie tekstowe, możesz zmienić rodzinę czcionki, kolor, rozmiar, odstępy listowe i inne funkcje.

Używam otwartych sansa półtonów o rozmiarze 30 z odstępem litery -1.50. Kolor tekstu jest # 525252.

Duplikuj ten tekst dwa dwa razy i umieść duplikaty pod innymi ikonami. Użyj tekstu "Zapłać" na ikonie karty kredytowej i "Odbierz" w pudełku.

Należy użyć narzędzia Wybierz do zmiany pozycji powyżej tekstu. Ponadto, kosmiczna każda ikona w pobliżu równomiernego od siebie, jeśli to możliwe.

04. Regulacja grafiki.

Shift+click to select the ribbon shapes and change the background colour — Shift + kliknij, aby wybrać kształty wstążki i zmień kolor tła

Przed utworzeniem paska postępu można zmienić dowolne kolory, które lubisz w ikonach.

Aby to zrobić, kliknij dwukrotnie, aby wejść do dowolnej grupy ikon, a następnie wybierz dowolny kształt, który chcesz zmienić. W takim przypadku edytuję wstążkę na prezent, aby zmienić kolor z niebieskiego na zielony.

Po wejściu do grupy ikon przytrzymaj zmianę podczas klikania, aby wybrać więcej niż jeden przedmiot na raz. Wybieram prostokąty poziome i pionowe, a także kokardka na górze.

W panelu Wybierz (pierwsza ikona w lewym menu) Znajdź ustawienia wypełnienia. Zobaczysz domyślny kolor jest # 2E3192. Kliknij ten wypełnienie menu, aby uzyskać dostęp do obniżonych koła kolorów. Tutaj możesz przeciągnąć wokół, aby znaleźć żądany kolor lub wprowadź kod sześciokątny bezpośrednio.

Wpisz # 518531 i naciśnij Enter. Powinno to zapisać wynik i zaktualizować wszystkie trzy kształty na raz. Zapraszamy do gry z innymi ustawieniami kolorów, które chcesz zmienić!

05. Uruchamianie paska postępu

Click the top-left circle in the Elements panel to add a new circle to the canvas — Kliknij górne koło w panelu Elements, aby dodać nowe koło do płótna

Aby utworzyć pasek postępu, potrzebujesz tylko dwóch kształtów: koła i prostokątów. Na szczęście oba z nich są dostępne w panelu elementów znajdujących się na samym dole menu Narzędzia.

Kliknij, aby zobaczyć panel i wybierz kształt okręgu, który jest pierwszym elementem na liście. Automatycznie umieścił ciemnoszary krąg w centrum obszaru roboczego.

Możesz zmienić rozmiar okręgu, przeciągając małe białe pola kwadratowe w rogu lub wyboru granicy. Działa to dobrze, ale nie jest tak precyzyjne, jak funkcja zmiany rozmiaru bezpośredniego.

Więc zamiast tego wróć do narzędzia Wybierz i upewnij się, że zostanie wybrany nowe koło. Na samym szczycie panelu Wybierz narzędzie, należy zobaczyć rozmiar wyboru o wartości wysokości i szerokości.

Wprowadź 100 w obu polach i przeciągnij pierwszy krąg pod pierwszą ikoną.

06. Powielanie kręgów.

Resize the circle and duplicate twice, then move them under each shopping icon — Zmień rozmiar okręgu i dwukrotnie, przesuń je pod każdą ikonę zakupów

Z wybranym kształtem okręgu kliknij Duplikat w menu górnym. Teraz ustawienie tego duplikatu, więc ściśle wyrównuje się do oryginalnego koła. Spróbuj zdobyć go na pierwszym kręgu, aby wyglądały jak jeden kształt.

Teraz, jeśli przytrzymasz zmianę i kliknąć, możesz przeciągnąć ten duplikat koła w linii prostej poziomo. Pozwala to idealnie dopasować wszystkie kręgi razem w linii prostej (lub wystarczająco blisko).

Zrób to, aż masz trzy różne kształty koła w 100 x 100, każdy umieszczony pod trzema ikonami.

07. Dodaj kilka linii łączących

Select the rectangle shape and arrange it behind the three circles — Wybierz kształt prostokąta i zorganizuj go za trzy kółko

Wróć do panelu elementów i znajdź kwadratowy kształt. Kliknij, aby dodać jeden kwadrat na płótnie.

Dzięki temu wybranym kształcie wrócił do narzędzia Wybierz i znajdź panel wielkości szerokości / wysokości. Ponieważ ten prostokąt powinien obejmować całą szerokość paska postępu, po prostu potrzebujemy jednego naprawdę długiego kształtu. Zmień więc wysokość do 10 i szerokość do dowolnej liczby, którą trzeba podłączyć wszystkie swoje kręgi razem. Mój jest 750 szerokości.

Teraz, z tym prostokąta, patrz w kierunku dołu panelu SELECT, gdzie mówi się, a AMP; Trzepnięcie. Kliknij drugą ikonę w górnym wierszu, który pozwala przenieść dowolny wybrany kształt za inne kształty.

Uwaga: Kilka razy możesz kliknąć dolny przycisk, aby uzyskać prostokąt za wszystkie trzy kręgi. Ale teraz prostokąt łączący jest widoczny między kształtami koła, dzięki czemu możemy później dodać tekst do kręgów później.

08. Recolouring.

Recolour all the shapes and include a small stroke on the three circles — Uzupełnij wszystkie kształty i zawierać mały skok na trzy kręgi

Obecny pasek postępu wygląda trochę ciemno, więc zmieńmy trochę koloru.

Kliknij, aby wybrać długi prostokąt i znajdź ustawienia wypełnienia w panelu Narzędzia. Zmień kolor na # C5C5C5 i naciśnij Enter.

Teraz kliknij gdziekolwiek off-Canvas, aby odznaczyć prostokąt. Chcemy również zmienić kolory koła i powinny być lżejsze, używając ciemniejszego szarości jako kolor granicy.

Przytrzymaj zmianę i kliknij każdy z trzech kół. Dostosuj kolor wypełnienia na # f5f5f5, naciśnij Enter, a następnie kliknij ikonę X, aby zamknąć panel Wybór koloru wypełnienia. Poniżej znajdziesz ustawienia skoku. Zmień skok wypełnienie do # C5C5C5 i naciśnij Enter.

Kliknij ikonę X, aby zamknąć ten panel wyboru kolorów, a następnie zmień rozmiar skoku na 6. Na tym etapie zalecam grupowanie wszystkich kół i prostokąt razem, przeciągając pole wyboru i udać się do Edycji i GT; Grupa. Teraz możesz natychmiast dostosować położenie wszystkich kształtów.

09. Dodawanie kroków postępów

Add a text label into the first circle and duplicate the text for all three shapes — Dodaj etykietę tekstową do pierwszego kręgu i powielić tekst dla wszystkich trzech kształtów

Dodajmy pewne liczby w każdym kręgu, aby sfinalizować projekt baru postępu.

Kliknij narzędzie tekstowe i wprowadź numer 1 do pierwszego kręgu. Używam otwartych Sansa o wyjątkowo pogrubionym, rozmiarze 45 z kolorem # C5C5C5, aby dopasować go do granic. Przeciągnij ten tekst, więc jest umieszczony w środku okręgu.

Zduplikuj element tekstowy i przesuń go do drugiego kręgu z tekstem "2". Zrób to samo dla trzeciego kręgu z tekstem "3".

10. Podświetl pierwszy krok

Recolour the first circle blue so it appears like the active progress step — UCOLOUR First Circle Blue, więc wydaje się, że aktywny krok postępu

Jako wykończenie, zaznaczmy najpierw pierwszy krok za pomocą lżejszego niebieskiego konturu. Najpierw wybierz numer "1" właśnie utworzony i zmień wypełnienie do # 4976a3. Następnie kliknij, aby wybrać okrąg za tekstem. Znajdź ustawienia skoku i zmień kolor skoku na # 4976a3. Powinno to dodać ciemnoniebieską granicę wokół okręgu. W jeszcze wybranym okręgu kliknij ustawienia wypełnienia i zmień kolor na # E2EBFA.

I to wszystko! Teraz możesz wyeksportować to jako PNG / JPG za pomocą funkcji pobierania w prawym górnym rogu. Możesz także ukryć białe tło, aby wyeksportować to jako przezroczyste PNG i zmienić ogólny rozmiar dokumentu za pomocą panelu tła (trzeci przycisk w menu po lewej stronie).

Lub jeśli chcesz zaoszczędzić na przyszłe zmiany, po prostu przejdź do pliku & gt; oszczędzaj na później. Będziesz musiał stworzyć bezpłatne konto Vectezy, ale jest to świetny sposób, aby utrzymać ciężką pracę zapisaną na przyszłość.

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 295. Kup to tutaj .

Czytaj więcej:

10 Złote zasady dotyczące reagowania SVG
Przeglądaj ekscytujące nowe funkcje w SVG 2
Supercharte animacje SVG z GSAP

Projektowanie grafiki SVG w przeglądarce

01. Wybierz ikony

02. Wyczyść śmieci

03. Dodawanie tekstu.

04. Regulacja grafiki.

05. Uruchamianie paska postępu

06. Powielanie kręgów.

07. Dodaj kilka linii łączących

08. Recolouring.

09. Dodawanie kroków postępów

10. Podświetl pierwszy krok

Jak - Najpopularniejsze artykuły

Jak używać obrazów referencyjnych: 13 podstawowych wskazówek dla artystów

Jak kompresować obrazy: podręcznik projektanta internetowego

Jak utworzyć aplikację z VUE.JS

Jak utworzyć cyfrowy obraz olejny za pomocą Artrage

Jak prototypować aplikację mobilną z Adobe XD

Zbuduj skalowalne elastyczne elementy

Stitch i kompozyt 360 materiału

Jak budować światy do kina

Kategorie