Jak rysować kształty i eksportować grafikę wektorową (SVG)
Krótka odpowiedź
Naciśnij U, aby wybrać narzędzie Kształt, wybierz kształt na pasku opcji i przeciągnij po obszarze roboczym; przytrzymaj Shift lub ⇧, aby uzyskać idealne koło lub kwadrat. Każdy kształt jest osobną warstwą, która pozostaje edytowalna: w każdej chwili zmienisz jego rozmiar, narożniki, wypełnienie i kontur w panelu Właściwości. Aby uzyskać plik wektorowy, wybierz

- Czas
- 6 minut
- Poziom
- Początkujący
- Potrzebujesz
- Nic: zaczynasz od nowego, pustego dokumentu
- Obsługiwane formaty
- Eksport do SVG, PDF, PNG, WebP i innych formatów obrazów; w projektach Lil Cactus kształty pozostają w pełni edytowalne
Za darmo, bez rejestracji. Twoja praca zostaje na Twoim komputerze.
Warstwa kształtu przechowuje kształt jako opis, na przykład „koło o średnicy 600 px w punkcie 100, 100, wypełnione zielenią”, a nie jako piksele. Możesz zmienić jej rozmiar, zaokrąglić narożniki lub zmienić kolor bez utraty ostrości, a eksport do SVG zachowuje ją jako wektor, który pozostaje ostry w każdym rozmiarze, od favicony po plakat.
W tym poradniku zbudujesz prostą odznakę z dwóch kształtów, zielonego koła z białym pierścieniem (jego konturem) i białej gwiazdy, i wyeksportujesz ją do SVG.
Narysuj kształty i wyeksportuj SVG w siedmiu krokach
Utwórz nowy dokument
Wejdź na lilcactus.app i wybierz W polach Szerokość i Wysokość wpisz 800, kliknij próbkę w szachownicę pod napisem Tło, aby tło było przezroczyste, i kliknij Utwórz.

800 × 800 px z przezroczystym tłem. Narysuj koło
Naciśnij U, aby wybrać narzędzie Kształt. Na pasku opcji (pasku pod menu) wybierz Elipsa z listy Kształt; w polu Tryb powinno być Kształt. Przytrzymaj Shift lub ⇧ i przeciągnij przez większą część obszaru roboczego: na nowej warstwie o nazwie Kształt pojawi się czarne koło. Nowe kształty są wypełniane kolorem pierwszego planu.

Kształt: Elipsa. Ustaw dokładny rozmiar, położenie i kolor
Gdy koło jest zaznaczone, panel Właściwości pokazuje jego bieżące ustawienia. W polach X i Y wpisz 100, a w polach Sz. (szerokość) i Wys. (wysokość) 600, naciskając Tab po każdej wartości: koło jest teraz wyśrodkowane, z marginesem 100 px.
Niżej, w sekcji Wypełnienie, kliknij próbkę koloru, wpisz 2E7D5B w polu koloru szesnastkowego i kliknij OK. Koło zmieni kolor na zielony.

Dokładne położenie i rozmiar. 
Kolor wypełnienia: #2E7D5B. Narysuj białą gwiazdę o zaokrąglonych ramionach
Naciśnij D, a potem X, aby kolorem pierwszego planu był biały. Z listy Kształt na pasku opcji wybierz Gwiazda i ustaw Punkty na 5, Promień wewnętrzny na 50, a Promień zaokrąglenia na 24. Przytrzymaj Shift lub ⇧ i przeciągnij od około jednej czwartej do trzech czwartych koła: na osobnej warstwie pojawi się biała gwiazda o miękkich ramionach. Aby umieścić ją dokładnie, w panelu Właściwości wpisz 250 w polach X i Y oraz 300 w polach Sz. i Wys..

Punkty 5, Promień wewnętrzny 50%, Promień zaokrąglenia 24 px. 
Gwiazda na kole. Zmień gwiazdę później
Kształty pozostają edytowalne. Przy zaznaczonej warstwie gwiazdy wpisz 6 w polu Punkty w panelu Właściwości i naciśnij Tab: gwiazda zostanie narysowana na nowo z sześcioma ramionami, w tym samym rozmiarze i z tymi samymi zaokrąglonymi narożnikami. Pola Sz. i Promień (promień zaokrąglenia) działają tak samo.

Punkty: 6. Dodaj biały pierścień
W panelu Warstwy kliknij warstwę koła (Kształt). W panelu Właściwości, w sekcji Obrys, ustaw Maluj na Kolor, kliknij próbkę i wybierz biel (FFFFFF). W sekcji Geometria obrysu wpisz 16 w polu Szerokość (px) i ustaw Położenie na Wewnątrz, aby pierścień mieścił się w kole o średnicy 600 px.

Biały obrys 16 px, wewnątrz krawędzi. 
Gotowa odznaka. Wyeksportuj do SVG i zapisz projekt
Wybierz i kliknij Eksportuj. SVG zachowuje każdy kształt jako ścieżkę wektorową, więc pozostaje ostry w każdym rozmiarze na stronie internetowej czy w innej aplikacji graficznej, a tło pozostaje przezroczyste. Pusta warstwa Tło jest pomijana w pliku, więc nie musisz jej ukrywać.
Aby kształty pozostały edytowalne w Lil Cactus, wybierz także (Ctrl+Shift+S lub ⇧⌘S); później polecenie aktualizuje ten plik. zachowuje je jako wektorowe warstwy kształtu, ale po ponownym otwarciu pliku PSD są to edytowalne ścieżki bez bieżących ustawień narożników i ramion.

Kształty i ich opcje
- Prostokąt: Promień zaokrąglenia na pasku opcji zaokrągla narożniki, na przykład dla przycisków i kart.
- Linia: przeciągnij od końca do końca, a potem ustaw w panelu Właściwości kolor i grubość obrysu oraz Zakończenia linii (płaskie, zaokrąglone lub kwadratowe). Nowa linia jest obrysowana kolorem pierwszego planu; jeśli jej nie widać, ten kolor jest taki sam jak dokument: wybierz tam inny kolor obrysu.
- Wielokąt i Gwiazda: Boki lub Punkty, a dla gwiazdy Promień wewnętrzny, który określa, jak głęboko sięgają wcięcia między ramionami.
Pole Tryb na pasku opcji decyduje, co powstaje po przeciągnięciu: warstwa kształtu (Kształt), ścieżka, którą możesz zamienić w zaznaczenie lub obrys (Ścieżka), albo farba na bieżącej warstwie (Piksele), której nie można już edytować jako kształtu.
Łączenie i przekształcanie kształtów
Aby wyciąć jeden kształt z drugiego, zaznacz warstwę kształtu i przed rysowaniem ustaw na pasku opcji Operacja na Odejmowanie: nowy kształt stanie się otworem w zaznaczonym, na tej samej warstwie. Połączenie dodaje do niego nowy kształt, Przecięcie zostawia tylko część wspólną, a Wyklucz wszystko oprócz części wspólnej. Aby rysować osobne kształty, ustaw Operacja z powrotem na Nowa warstwa.
Aby przeciągać pojedyncze punkty, kliknij prawym przyciskiem myszy przycisk pióra na pasku narzędzi, wybierz Zaznaczanie bezpośrednie i przeciągnij punkt zaznaczonego kształtu. Połączony lub przekształcony kształt staje się swobodną ścieżką: lista Kształt w panelu Właściwości pokazuje Edytowalna ścieżka, a kształt nie ma już bieżących ustawień narożników ani ramion. Zobacz, jak używać narzędzia Pióro.
Co zachowuje eksport do SVG
Aby uzyskać plik wyłącznie wektorowy, użyj warstw kształtów i zwykłego tekstu w trybie Zwykły. Zdjęcia i niektóre efekty są przedstawiane jako piksele. Przed zapisaniem sprawdź uwagi eksportu i zachowaj projekt Lil Cactus do późniejszych zmian.
Typowe problemy i ich rozwiązania
Kształt wyszedł czarny
Kolorem pierwszego planu był czarny. Zmień wypełnienie w panelu Właściwości albo ustaw kolor pierwszego planu przed rysowaniem.
Nowy kształt wyciął otwór w starym
Pole Operacja na pasku opcji jest ustawione na Odejmowanie. Cofnij to poleceniem (Ctrl+Z lub ⌘Z), ustaw je na Nowa warstwa i narysuj kształt ponownie.
Koło wyszło owalne
Wpisz tę samą wartość w polach Sz. i Wys. w panelu Właściwości.
Jeśli znasz inny edytor
- Photoshop
- Narzędzia kształtów (U) i bieżące ustawienia kształtu w panelu Właściwości.
Kształty i grafika wektorowa: pytania i odpowiedzi
Czym różni się warstwa kształtu od warstwy pikseli?
Warstwa kształtu przechowuje kształt jako opis, więc w Lil Cactus w każdej chwili możesz zmienić jego rozmiar, zaokrąglić narożniki lub zmienić kolor bez utraty ostrości. Warstwa pikseli przechowuje kolorowe punkty, które po powiększeniu się rozmywają.
Jak zrobić zaokrąglony prostokąt?
W Lil Cactus wybierz narzędzie Kształt (U), na pasku opcji wybierz „Prostokąt”, w polu „Promień zaokrąglenia” wpisz wartość, na przykład 20 px, i przeciągnij. Promień możesz później zmienić w panelu Właściwości.
Jak wyeksportować logo z przezroczystym tłem?
W Lil Cactus zacznij od „Plik › Nowy…” z próbką przezroczystego tła (albo ukryj wypełnioną warstwę Tło), a potem wybierz „Plik › Eksportuj › SVG…”, aby uzyskać plik wektorowy, lub „PNG…”, aby uzyskać obraz.
Czy plik SVG otworzę w innych aplikacjach?
Tak. Plik SVG z Lil Cactus można otworzyć w przeglądarkach i aplikacjach projektowych. Sprawdź wyeksportowany projekt w aplikacji, w której chcesz go użyć.
Jak wyśrodkować kształt w obszarze roboczym?
W Lil Cactus ustaw X i Y w panelu Właściwości na połowę rozmiaru obszaru roboczego minus połowę rozmiaru kształtu; dla koła 600 px w obszarze 800 px będzie to 100 i 100.
Czy moja praca jest wysyłana na serwer, gdy rysuję kształty w Lil Cactus?
Nie. Wszystko działa w przeglądarce, na Twoim urządzeniu. Zobacz politykę prywatności.


