Edytor napisów na zdjęciach

Zanim zaczniesz

Dostęp do edytora wymaga konta z aktywnym okresem próbnym lub subskrypcją — szczegóły znajdziesz na stronie Konto, okres próbny i subskrypcja.

Edytor działa w całości w przeglądarce. Zdjęcia, których używasz, nie są wysyłane na serwer — na serwer trafia wyłącznie projekt, który sam zapiszesz na koncie. Wszystko, co robisz, możesz cofnąć przyciskiem Cofnij (do 100 kroków).

Co zobaczysz po pierwszym wejściu

Przy pierwszym otwarciu edytor wczytuje gotowy przykład: kwadrat 1080×1080 px z ciemnym gradientowym tłem, dużym napisem „grafikit” z pomarańczowym kursorem i podpisem „Twój napis na zdjęciu” (słowo „napis” jest pomarańczowe). To tylko ilustracja możliwości — kliknij Nowy, aby zacząć od pustej kartki, albo zmień teksty i tło.

Jeśli wcześniej zezwolisz na cookies Preferencje (zob. Automatyczny szkic), edytor zamiast przykładu przywróci Twój ostatni szkic i pokaże komunikat „Przywrócono ostatni szkic.”.

Jak wygląda ekran edytora

• Pasek narzędzi na górze: pliki, historia, dodawanie elementów, widok.
• Lewa kolumna: sekcje Tło (nieruchome, zawsze wypełnione), Efekty tła (tylko dla zdjęcia), Przekształcenia płótna, Rozmiar płótna oraz lista Warstwy z przyciskami Wyżej, Niżej, Duplikuj, Usuń.
• Środek: płótno (obszar roboczy) w szachownicy. Pod płótnem widać krótką podpowiedź.
• Prawa kolumna: Właściwości zaznaczonej warstwy. Gdy nic nie jest zaznaczone, widzisz tylko podpowiedź „Zaznacz warstwę na płótnie lub na liście, aby zmienić jej właściwości.”

Sekcje w obu kolumnach są rozwijane: kliknij nazwę sekcji, aby ją zwinąć lub rozwinąć. Edytor pamięta, które sekcje miałeś otwarte, także po zaznaczeniu innej warstwy. Domyślnie otwarte są: Tekst, Czcionka i format, Przekształcenia, Tło (nieruchome, zawsze wypełnione) i Rozmiar płótna.

Informacje o błędach i potwierdzeniach (np. „Zapisano na koncie.”) pojawiają się jako krótkie dymki w prawym dolnym rogu ekranu i znikają po około 5 sekundach.

Okna dialogowe (Nowy dokument, Kształty, Pobierz obraz itd.) zamkniesz klawiszem Esc, przyciskiem Zamknij / Anuluj albo kliknięciem w ciemne tło poza oknem. Gdy okno jest otwarte, skróty klawiszowe edytora nie działają.

Pasek narzędzi — każdy przycisk

Grupa „Plik”

Nowy

Otwiera okno Nowy dokument (rozmiar i rodzaj tła). Szczegóły: Okno „Nowy dokument”. Jeśli masz niezapisane zmiany, przeglądarka zapyta: „Rozpocząć nowy projekt? Niezapisane zmiany zostaną utracone.”

Zdjęcie tła

Otwiera systemowe okno wyboru pliku (dowolny obraz). Wybrane zdjęcie staje się tłem, a płótno przyjmuje rozmiar zdjęcia (do 4096 px dłuższego boku; większe zdjęcia są zmniejszane z komunikatem „Obraz jest za duży — zmniejszono do 4096 px.”). Warstwy, które już masz, są przy tym przeskalowane razem z płótnem. To samo zrobisz, przeciągając plik ze zdjęciem z dysku na płótno. Obramowanie przerywane wokół obszaru roboczego oznacza, że możesz upuścić plik.

Wczytaj projekt

Otwiera wybór pliku projektu (.json lub .grafikit) zapisanego wcześniej przyciskiem Zapisz projekt (.json). Po wczytaniu pojawia się komunikat „Projekt wczytany.”. Uwaga: wczytanie zastępuje bieżący dokument bez pytania — zapisz najpierw to, co chcesz zachować. Zły plik daje komunikat „Nieprawidłowy plik projektu.”

Zapisz projekt (.json)

Pobiera na dysk plik projekt-grafikit.json zawierający całe płótno, warstwy, osadzone zdjęcia i użyte własne czcionki. Szczegóły: Zapis do pliku.

Zapisz na koncie

Dla zalogowanego: otwiera okno zapisu na koncie (opis). Dla niezalogowanego przycisk nazywa się Zaloguj, aby zapisać i otwiera okno „Wymagane konto” z przyciskami Zaloguj się, Załóż konto i Zamknij.

Pobierz obraz

Przycisk wyróżniony kolorem. Otwiera okno eksportu: format, jakość, skala i nazwa pliku. Szczegóły: Eksport.

Grupa „Historia”

Cofnij

Cofa ostatnią zmianę (skrót Ctrl+Z). Historia zapamiętuje do 100 kroków. Cofanie obejmuje także dodawanie i usuwanie warstw, zmianę rozmiaru płótna i tła. Pisanie w polu tekstu jest zapisywane w historii z krótkim opóźnieniem (ok. pół sekundy), więc jedno cofnięcie cofa zwykle całą wpisaną frazę, a nie pojedynczą literę.

Ponów

Przywraca cofniętą zmianę (Ctrl+Y lub Ctrl+Shift+Z). Po wykonaniu nowej zmiany po cofnięciu „ponów” przestaje być dostępne.

Grupa „Dodaj”

Tekst

Dodaje nową warstwę tekstową na środku płótna z napisem „Wpisz tekst” (biały, czcionka Ubuntu 700, rozmiar równy 1/10 szerokości płótna). Kursor od razu ustawia się w polu Treść napisu w prawej kolumnie, a cały napis jest zaznaczony — wystarczy zacząć pisać, aby go zastąpić.

Obraz

Wybierasz plik obrazu (PNG, JPEG, WebP itd.; przezroczystość PNG jest zachowana). Obraz pojawia się jako osobna warstwa na środku, pomniejszony tak, aby zajmował najwyżej 60% szerokości i wysokości płótna. Użyj tego do logo, naklejek, zdjęć „na zdjęciu”. Różnica wobec Zdjęcie tła: obraz-warstwę można przesuwać, skalować, obracać i przycinać.

Kształt

Otwiera okno Kształty — opis niżej.

Emoji

Otwiera okno Emoji i naklejki — opis niżej.

Grupa „Widok”

− (Pomniejsz) i + (Powiększ)

Zmieniają powiększenie podglądu o jeden krok (×0,8 i ×1,25) względem środka obszaru roboczego. Liczba między przyciskami pokazuje aktualne powiększenie, np. „65%”. Zakres: od 2% do 1000%. To zmiana widoku, a nie rozmiaru obrazu — eksport zawsze ma rozmiar płótna.

Dopasuj

Dobiera powiększenie tak, aby całe płótno mieściło się na ekranie, i wyśrodkowuje je. Po zmianie rozmiaru okna przeglądarki widok sam się dopasowuje, dopóki nie ruszysz zoomu lub przesunięcia ręcznie.

100%

Ustawia powiększenie 1:1 (jeden piksel płótna = jeden piksel ekranu) — przydatne do oceny ostrości napisu.

Pan

Przełącznik (wciśnięty = pomarańczowy). Gdy jest włączony, przeciąganie myszą lub palcem zawsze przesuwa widok i nie rusza żadnej warstwy, a kursor zmienia się w otwartą dłoń. Wyłączasz go ponownym kliknięciem. To samo robisz tymczasowo, przytrzymując Spacja.

Przyciąganie

Przełącznik, domyślnie włączony. Podczas przesuwania warstwa „przyciąga się” do środka i krawędzi płótna oraz do środków innych widocznych warstw, a różowe linie pomocnicze pokazują, do czego się przykleiła. Wyłącz, gdy potrzebujesz swobodnego ruchu co do piksela.

Siatka

Przełącznik, domyślnie wyłączony. Rysuje na płótnie szarą siatkę (nakładka widoczna tylko w edytorze — nie trafia do eksportu) i dodaje przyciąganie do jej linii. Odstęp siatki zależy od rozmiaru płótna (dla 1080×1080 to 90 px; minimum 10 px). Siatka przyciąga także wtedy, gdy Przyciąganie jest wyłączone.

Okno „Nowy dokument”

Otwierasz je przyciskiem Nowy. Tworzy czysty dokument: usuwa wszystkie warstwy i obrazy, a historia zaczyna się od nowa. Jeśli były niezapisane zmiany, przeglądarka zapyta o potwierdzenie.

1. Kliknij Nowy. Pojawi się okno Nowy dokument.
2. W polu Szablon wybierz gotowy rozmiar. Pola Szerokość (px) i Wysokość (px) wypełnią się same. Dostępne szablony:
   • 1080×1080 — Instagram kwadrat
   • 1080×1350 — Instagram portret
   • 1080×1920 — Story / Reels / TikTok
   • 1280×720 — YouTube miniatura
   • 1200×630 — Facebook / link
   • 1500×500 — Okładka X/Twitter
   • 1920×1080 — Full HD
   • 2480×3508 — A4 300 dpi
   • Własny rozmiar — wybierany automatycznie, gdy sam wpiszesz wymiary.
   Wymiary własne: od 16 do 4096 px na każdy bok.
3. W polu Tło wybierz jedno z trzech:
   • Jednolity kolor — pojawia się pole Kolor (kliknij kwadracik, aby otworzyć selektor koloru) i rząd gotowych kolorów. Domyślnie biały.
   • Zdjęcie — pojawia się pole wyboru pliku (JPEG, PNG lub WebP) i pole Rozmiar dokumentu = rozmiar zdjęcia. Bez zaznaczenia zdjęcie wypełni płótno o wybranym rozmiarze (kadr wyśrodkowany, nadmiar jest ukryty). Z zaznaczeniem płótno przyjmie dokładnie wymiary zdjęcia (do 4096 px).
   • Gradient (z generatora) — patrz niżej.
4. Kliknij Utwórz. Dla tła ze zdjęcia musisz najpierw wskazać plik, inaczej zobaczysz komunikat „Wybierz zdjęcie tła.”. Przycisk Anuluj zamyka okno bez zmian.

Tło „Gradient (z generatora)” — wyjście i powrót

1. W oknie Nowy dokument wybierz rozmiar, w polu Tło wskaż Gradient (z generatora) i kliknij Utwórz. (Jeśli masz niezapisane zmiany, najpierw potwierdź ostrzeżenie.)
2. Przeglądarka przejdzie na stronę generatora gradientów z wpisanym rozmiarem. U góry zobaczysz zielony komunikat „Tworzysz tło dla edytora napisów…”. Ustaw kolory, typ, kąt (instrukcja: Generator gradientów).
3. Kliknij Użyj w edytorze napisów. Wymagane są co najmniej dwa kolory; w przeciwnym razie zobaczysz „Dodaj co najmniej 2 kolory.”
4. Wrócisz do edytora z dokumentem o wybranym rozmiarze i gotowym tłem. Gradient jest przekazywany jako obraz, więc w panelu tła widać go jako rodzaj Gradient.

Gradient możesz też zmienić później w już otwartym projekcie: w lewej kolumnie ustaw Rodzaj na Gradient lub kliknij Edytuj gradient w generatorze…. Edytor zapamięta wtedy bieżący projekt na czas przejścia i po zatwierdzeniu gradientu wróci do niego (tylko tło zostanie wymienione). Jeśli projekt jest zbyt duży, aby go tak zapamiętać, przeglądarka zapyta, czy kontynuować mimo utraty niezapisanych zmian — wtedy lepiej wcześniej zapisać plik .json.

Panel tła i płótna (lewa kolumna)

Tło jest zawsze jedno, nieruchome i zawsze wypełnia całe płótno — nie jest warstwą, więc nie ma go na liście warstw i nie da się go przesunąć ani zaznaczyć. W eksporcie nigdy nie pojawi się pusta przestrzeń.

Rodzaj tła

1. W sekcji Tło (nieruchome, zawsze wypełnione) otwórz pole Rodzaj.
2. Wybierz Jednolity kolor: pojawi się pole Kolor (selektor koloru, w przeglądarkach z obsługą — także pipeta) i rząd 10 gotowych kolorów. Tło zmienia się na bieżąco.
3. Wybierz Zdjęcie: otworzy się okno wyboru pliku (tak jak Zdjęcie tła). Jeśli anulujesz, rodzaj zostanie bez zmian. Po wczytaniu pojawia się przycisk Wczytaj inne zdjęcie… i sekcja Efekty tła.
4. Wybierz Gradient: nastąpi przejście do generatora (patrz wyżej). W panelu widać wtedy przycisk Edytuj gradient w generatorze….

Efekty tła (tylko dla zdjęcia)

Sekcja Efekty tła pojawia się, gdy rodzaj tła to Zdjęcie (nie dotyczy koloru ani gradientu). Efekty dotyczą tylko tła — warstwy nad nim pozostają bez zmian.

Jasność (%)

Suwak 0–200, domyślnie 100.

Kontrast (%)

Suwak 0–200, domyślnie 100.

Nasycenie (%)

Suwak 0–200, domyślnie 100 (0 = czarno-białe).

Rozmycie

Suwak 0–20, domyślnie 0. Wartość jest względna wobec rozmiaru zdjęcia, więc efekt wygląda podobnie niezależnie od rozdzielczości. Rozmyte tło dobrze „uspokaja” zdjęcie pod napisem.

Skala szarości (%)

Suwak 0–100, domyślnie 0.

Resetuj efekty

Przywraca wszystkie pięć suwaków do wartości domyślnych.

Wskazówka: żeby biały napis był czytelny na jasnym zdjęciu, obniż Jasność (%) do ok. 60–70.

Przekształcenia płótna

Sekcja Przekształcenia płótna działa na całość: tło i wszystkie warstwy razem („Obrót i odbicie obejmują także wszystkie warstwy.”). Każdą operację cofniesz przyciskiem Cofnij.

Obróć w prawo 90° / Obróć w lewo 90°

Obraca płótno i zamienia szerokość z wysokością (np. 1080×1350 staje się 1350×1080). Napisy obracają się razem ze zdjęciem.

Odbij poziomo / Odbij pionowo

Odbija tło i pozycje warstw. Uwaga: odbijane są także napisy — będą widoczne jako lustrzane. Jeśli chcesz odbić tylko zdjęcie, zrób to przed dodaniem tekstów, albo odbij z powrotem same warstwy tekstowe przyciskami Odbij poziomo w ich panelu Przekształcenia.

Kadruj…

Otwiera okno Kadrowanie płótna (poniżej).

Dopasuj do kwadratu…

Otwiera okno Dopasuj do kwadratu (poniżej).

Kadrowanie płótna („Kadruj…”)

1. Kliknij Kadruj… w sekcji Przekształcenia płótna.
2. W oknie Kadrowanie płótna przesuń suwaki Lewa (%), Górna (%), Prawa (%), Dolna (%) — każdy od 0 do 45%. Ile procent szerokości lub wysokości chcesz odciąć z danej strony. (Okno nie pokazuje podglądu — efekt zobaczysz po zatwierdzeniu.)
3. Kliknij Przytnij. Płótno się zmniejsza, zdjęcie tła zostaje trwale przycięte, a warstwy są przesunięte tak, by zachowały pozycję względem zdjęcia. Fragmenty warstw, które wyszły poza nowe płótno, nie są eksportowane.
4. Nie podoba się? Cofnij. Anuluj zamyka okno bez zmian.

Dopasuj do kwadratu

1. Kliknij Dopasuj do kwadratu…. Zobaczysz objaśnienie: „Dłuższy bok zostaje, krótszy zostanie dopełniony do kwadratu.”
2. W polu Wypełnienie wybierz Jednolity kolor (pasy po bokach zdjęcia dostaną kolor z pola Kolor) albo Rozmyta kopia zdjęcia (pasy wypełni powiększona, rozmyta wersja tego samego zdjęcia — popularny efekt na Instagramie; pole Kolor jest wtedy ignorowane).
3. Kliknij Zastosuj. Płótno staje się kwadratem o boku równym dłuższemu bokowi, a zdjęcie zostaje pośrodku w całości. Warstwy są przesunięte, aby nie zmieniły położenia względem zdjęcia.

Przy tle jednokolorowym ta operacja po prostu powiększa płótno do kwadratu.

Rozmiar płótna

1. W sekcji Rozmiar płótna w polu Preset wybierz „Gotowe rozmiary…” (ta sama lista ośmiu szablonów co w oknie Nowy dokument) — płótno zmieni rozmiar od razu.
2. Albo wpisz własne wartości w Szerokość (px) i Wysokość (px) (16–4096) i zatwierdź Enter lub kliknięciem poza polem.
3. Pole wyboru Zablokuj proporcje (domyślnie zaznaczone): zmiana jednego wymiaru automatycznie zmienia drugi. Odznacz je, aby ustawić dowolne proporcje.

Zmiana rozmiaru przeskalowuje warstwy razem z płótnem (pozycje proporcjonalnie, rozmiar według mniejszego ze współczynników), więc układ zostaje zachowany. Tło-zdjęcie nie jest rozciągane, tylko ponownie dopasowywane metodą „cover”. Nie ma tu okna z podglądem — zmiana jest natychmiastowa i można ją cofnąć.

Lista warstw

Lista Warstwy (lewa kolumna, pod panelem tła) pokazuje wszystkie teksty, obrazy, kształty i emoji. Najwyższa warstwa jest na górze listy — tak jak jest na wierzchu na płótnie. Gdy lista jest pusta, widać napis „Brak warstw. Dodaj tekst, obraz lub kształt.”. Zaznaczona warstwa ma pomarańczową ramkę.

Elementy wiersza warstwy

Nazwa warstwy (przycisk)

Kliknięcie zaznacza warstwę — jej uchwyty pojawiają się na płótnie, a Właściwości w prawej kolumnie. Domyślna nazwa to pierwszy wiersz tekstu (maks. 24 znaki), „Obraz” albo nazwa kształtu (np. „Gwiazda 5”).

Ikona oka (Pokaż / ukryj)

Ukrywa warstwę (przekreślone oko) lub ją pokazuje. Ukryta warstwa nie jest rysowana ani eksportowana, nie można jej kliknąć na płótnie, ale nadal możesz ją zaznaczyć z listy i zmieniać jej ustawienia.

Ikona kłódki (Zablokuj / odblokuj)

Zablokowana warstwa (zamknięta kłódka) jest widoczna i można ją zaznaczyć, ale nie da się jej przesuwać, skalować ani obracać na płótnie ani strzałkami; jej uchwyty są ukryte, a kursor nad nią zmienia się w znak zakazu. Idealne dla dużych obrazów-ramek, żeby nie przesuwać ich przypadkiem. Panel Właściwości nadal pozwala zmieniać jej parametry liczbowo, a przyciski Wyżej, Niżej, Duplikuj, Usuń także działają.

Zmiana kolejności

• Przyciski: zaznacz warstwę i kliknij Wyżej (bliżej wierzchu) lub Niżej (bliżej tła). Na granicy listy nic się nie dzieje.
• Przeciąganie: chwyć wiersz i upuść go na innym wierszu — przeciągana warstwa zajmie miejsce tej, na którą ją upuściłeś; wiersz-cel podświetla się pomarańczowo. Przeciąganie działa myszką; na ekranach dotykowych użyj przycisków Wyżej / Niżej.

Duplikuj, usuń, nazwa

• Duplikuj (lub Ctrl+D): tworzy kopię tuż nad oryginałem, przesuniętą o 30 px w prawo i w dół; kopia zostaje zaznaczona. Nazwa własna oryginału nie jest kopiowana.
• Usuń (lub Delete / Backspace): usuwa zaznaczoną warstwę bez pytania; Cofnij ją przywróci.
• Nazwa warstwy: zaznacz warstwę → w prawej kolumnie, w sekcji Przekształcenia, wpisz tekst w polu Nazwa („Nazwa warstwy”, maks. 60 znaków). Nazwa pojawi się na liście. Wyczyszczenie pola przywraca nazwę automatyczną.

Praca na płótnie: myszka, klawiatura, dotyk

Zaznaczanie i przesuwanie

1. Kliknij element na płótnie — zaznaczy się wierzchnia widoczna warstwa pod kursorem. Wokół niej pojawi się pomarańczowa ramka z białymi uchwytami (w prawej kolumnie otworzą się jej właściwości, a wiersz na liście zostanie podświetlony).
2. Przeciągnij warstwę, aby ją przesunąć. Gdy brzeg lub środek warstwy zbliży się do krawędzi/środka płótna lub środka innej warstwy (w zasięgu ok. 8 pikseli ekranu), przeskoczy w to miejsce, a po płótnie przebiegnie różowa linia pomocnicza (pionowa dla osi X, pozioma dla osi Y). Linie znikają po puszczeniu przycisku.
3. Kliknięcie w puste miejsce (tło, gdzie nie ma żadnej warstwy) zdejmuje zaznaczenie. Tę samą czynność wykonuje Esc.

Nad warstwą kursor ma kształt krzyżyka ze strzałkami; nad zablokowaną — znak zakazu.

Uchwyty

Cztery białe kwadraty w rogach

Skalowanie proporcjonalne: przeciągnij róg od środka lub do środka. Zmienia się wartość Skala (%) w sekcji Przekształcenia (zakres 2–6000%). Dla tekstu oznacza to powiększenie całego napisu razem z efektami; pole Rozmiar (px) pozostaje bez zmian.

Pomarańczowe kółko nad ramką

Obrót: przeciągnij je wokół warstwy. Kąt „przykleja się” co 45° (0°, 45°, 90° …), gdy jesteś blisko tych wartości; przytrzymaj Alt, aby obracać płynnie. Wartość widzisz w polu Obrót (°) (zakres −180…180). Kursor nad kółkiem ma kształt celownika.

Biały kwadrat po prawej stronie ramki

Dla tekstu — uchwyt szerokości zawijania. Przeciągnij w prawo lub lewo: napis zostanie zawinięty do wybranej szerokości (nowe wiersze powstają na granicach słów), a wartość pojawi się w polu Szerokość zawijania (minimum przy przeciąganiu: 20 px). Lewa krawędź ramki pozostaje na miejscu. Dla kształtu i obrazu ten uchwyt zmienia szerokość (Szerokość) bez zmiany proporcji pozostałych wymiarów — obraz zostanie rozciągnięty.

Biały kwadrat na dole ramki

Tylko dla kształtów (poza liniami) i obrazów: zmienia wysokość (Wysokość). Tekst i linie go nie mają.

Uchwytów nie ma na warstwach zablokowanych. Rozmiar uchwytów jest stały na ekranie niezależnie od powiększenia.

Edycja tekstu z płótna

Napisu nie edytuje się bezpośrednio na płótnie. Kliknij dwukrotnie (dwuklik) na tekście — warstwa zostanie zaznaczona, a kursor trafi do pola Treść napisu w prawej kolumnie z zaznaczonym całym tekstem (pierwszy wpisany znak zastąpi całość; naciśnij strzałkę, aby zachować treść). Dwuklik działa tylko na warstwach tekstowych.

Klawiatura

• ← → ↑ ↓ — przesuwają zaznaczoną warstwę o 1 px; z Shift o 10 px. Nie działa na zablokowanej warstwie ani gdy kursor jest w polu tekstowym.
• Pełna lista skrótów: Skróty klawiszowe.

Przesuwanie i powiększanie widoku

• Pan (przycisk) — przeciągaj, aby przesuwać widok bez ryzyka ruszenia warstw.
• Spacja — przytrzymaj i przeciągaj; po puszczeniu wracasz do poprzedniego narzędzia. Działa, gdy kursor nie jest w polu tekstowym i fokus nie stoi na przycisku.
• Środkowy przycisk myszy — przeciągnij, aby przesunąć widok.
• Przeciągnięcie pustego miejsca (poza warstwami) — także przesuwa widok i zdejmuje zaznaczenie. Uwaga: jeśli pod kursorem jest duża warstwa (nawet zablokowana), kliknięcie zaznaczy ją zamiast przesuwać widok — wtedy użyj Pan lub Spacja.
• Kółko myszy lub gest dwoma palcami na gładziku — przewija widok w pionie (z Shift — w poziomie).
• Ctrl + kółko myszy (na Macu Cmd + kółko) — powiększa lub pomniejsza widok w miejscu wskazanym kursorem (krok ok. 12%).
• Płótno nie „ucieknie” poza ekran: zawsze zostaje widoczny co najmniej 60-pikselowy pasek.

Dotyk

• Jeden palec na warstwie — przesuwa ją; jeden palec na pustym miejscu — przesuwa widok.
• Dwa palce (pinch-to-zoom) — rozsuwanie i zsuwanie powiększa i pomniejsza widok wokół punktu między palcami; przesuwanie obu palców naraz przesuwa widok.
• Uchwyty mają na dotyku większą strefę trafienia, więc łatwiej je chwycić.
• Dwuklik na tekście nie zawsze działa na telefonach — kliknij po prostu zaznaczoną warstwę na liście i wpisz tekst w polu Treść napisu poniżej płótna.

Właściwości tekstu — sekcja po sekcji

Zaznacz warstwę tekstową: prawa kolumna dostaje nagłówek Tekst i sekcje w tej kolejności: Tekst, Czcionka i format, Odstępy i zagięcie, Obrys, Cień, Podświetlenie, Gradient wypełnienia, Tekstura z obrazu, Style tekstu, Przekształcenia. Poniżej opis każdej.

Zasada ogólna dla suwaków: możesz przeciągać suwak, a w polach liczbowych wpisać wartość z klawiatury — wartość poza zakresem zostanie obcięta do granicy. Przy każdym suwaku widać jego aktualną wartość. Zmiany pojawiają się na płótnie na bieżąco.

Sekcja „Tekst”

Treść napisu (pole wielowierszowe)

Wpisz treść; Enter tworzy nowy wiersz. Limit: 5000 znaków. Polskie znaki działają we wszystkich czcionkach z listy. Zmiana treści nie psuje stylów nadanych fragmentom — edytor dopasowuje je do zmienionego tekstu.

Styl zaznaczonego fragmentu

Pod polem tekstu znajduje się ramka Styl zaznaczonego fragmentu. Dzięki niej jedno słowo lub kilka liter mogą mieć inny kolor, czcionkę, rozmiar, obrys i podświetlenie niż reszta napisu.

1. W polu Treść napisu zaznacz fragment: przeciągnij myszą po słowie, kliknij dwukrotnie słowo albo użyj Shift+strzałki. Pod nagłówkiem pojawi się informacja „Zaznaczono znaków: N.” (gdy nic nie zaznaczysz, widzisz „Zaznacz słowo lub litery w polu tekstu, aby nadać im osobny styl.”, a kontrolki są wyszarzone).
2. Użyj jednej z kontrolek poniżej — efekt widać od razu tylko na zaznaczonych znakach:

   Kolor

   selektor koloru (z pipetą, jeśli przeglądarka ją obsługuje). Kolor fragmentu ma pierwszeństwo przed gradientem i teksturą napisu.

   B, I, U, S

   przyciski przełączające: pogrubienie (400↔700), kursywa, podkreślenie, przekreślenie fragmentu. Wciśnięty przycisk jest pomarańczowy. Pogrubienie działa tylko w czcionkach, które mają odmianę 700.

   Czcionka („Czcionka fragmentu”)

   lista rozwijana z całą biblioteką; pozycja „(czcionka warstwy)” usuwa nadpisanie. Własne czcionki z pliku nie są tu dostępne.

   Rozmiar (px)

   pole liczbowe 4–3000; po wpisaniu zatwierdź Enter lub opuść pole. Puste pole = rozmiar warstwy. Wiersz o większych literach robi się wyższy.

   Kolor obrysu

   selektor; wybranie koloru nadaje fragmentowi obrys grubości 6 px, jeśli wcześniej go nie miał.

   Grubość obrysu

   pole liczbowe 0–80; „0 = brak” usuwa obrys fragmentu (nawet jeśli reszta napisu ma obrys).

   Podświetlenie

   selektor koloru tła za literami (jak zakreślacz). Nie ma przycisku „usuń podświetlenie” — użyj Wyczyść style fragmentu.

   Wyczyść style fragmentu

   usuwa wszystkie nadpisania ze zaznaczonych znaków; wracają do stylu warstwy.

3. Gdy klikniesz w inne miejsce panelu, zaznaczenie w polu tekstu nadal obowiązuje — możesz nałożyć kolejne style jeden po drugim.

Sekcja „Czcionka i format”

Wybór czcionki

1. W polu Szukaj czcionki… wpisz fragment nazwy (np. „mont”) — lista zawęzi się do pasujących krojów.
2. Opcjonalnie w polu Kategoria czcionek wybierz: Wszystkie, Bezszeryfowe (25), Szeryfowe (14), Ozdobne (9), Odręczne (11), Stałej szerokości (5) lub Własne (Twoje wczytane z pliku).
3. Przewiń Lista czcionek (okno ok. 190 px wysokości) i kliknij nazwę. Każda nazwa jest wyświetlona własnym krojem (kroje doładowują się, gdy lista je pokazuje); aktualnie wybrana ma pomarańczowe tło. Napis zmieni czcionkę natychmiast.

Biblioteka ma 64 czcionki z polskimi znakami (hostowane na serwerze grafikit.pl, nie u zewnętrznych dostawców). 15 z nich ma tylko jedną grubość (400), pozostałe 49 — 400 i 700. Domyślna czcionka to Ubuntu.

Własna czcionka z pliku

1. Kliknij Wczytaj własną czcionkę (.ttf, .otf, .woff, .woff2).
2. Wskaż plik czcionki. Nazwa kroju powstaje z nazwy pliku (bez rozszerzenia, tylko litery, cyfry, spacje, myślniki i podkreślenia; maks. 40 znaków).
3. Po chwili zobaczysz komunikat „Czcionka „…” gotowa. Zostanie zapisana w pliku projektu.” i napis użyje nowego kroju. Czcionka pojawi się też na liście (do znalezienia także w kategorii Własne).

Czcionka jest przechowywana w pamięci przeglądarki na czas pracy oraz dołączana do projektu zapisanego jako plik .json lub na koncie (czcionki powyżej ok. 2 MB nie są dołączane). W automatycznym szkicu własne czcionki nie są zapamiętywane — po powrocie trzeba je wczytać ponownie. Czcionka z pliku jest dostępna tylko dla warstwy; nie przypiszesz jej fragmentowi tekstu. Używaj tylko czcionek, do których masz licencję.

Grubość i przyciski formatu

Grubość („Grubość pisma”)

Lista dostępnych grubości wybranej czcionki, np. „400 (zwykłe)” i „700 (pogrubione)”. Dla czcionki z jedną grubością lista ma jedną pozycję.

B (Pogrubienie)

Przełącza między grubością 400 a 700. Dla czcionek bez odmiany 700 nic się nie zmieni — wtedy sięgnij po czcionkę z grubością 700 (lub dodaj Obrys w tym samym kolorze, by napis wyglądał na grubszy).

I (Kursywa)

Włącza pochylenie. Przy krojach bez odmiany kursywnej przeglądarka pochyla literę sztucznie.

AB (Wielkie litery)

Wyświetla cały napis wielkimi literami (z uwzględnieniem polskich znaków), nie zmieniając wpisanego tekstu — wyłączenie przywraca oryginał.

U (Podkreślenie), S (Przekreślenie)

Włączają podkreślenie i przekreślenie całego napisu. Wciśnięty przycisk jest pomarańczowy.

Wyrównanie: Do lewej, Do środka, Do prawej

Trzy przyciski z ikonami linii tekstu. Ustawiają wyrównanie wierszy w wielowierszowym napisie (lub w napisie zawiniętym do szerokości). Domyślnie: do środka. Przy pojedynczym wierszu bez zawijania nie widać różnicy.

Rozmiar (px)

Rozmiar czcionki, 4–3000. Domyślnie 1/10 szerokości płótna (np. 108 px na 1080 px). Nie myl z Skala (%), która skaluje całą warstwę.

Kolor

Selektor koloru napisu oraz — jeśli Twoja przeglądarka to obsługuje (Chrome, Edge) — przycisk Pipeta koloru: kliknij go, a następnie kliknij dowolne miejsce na ekranie (także na zdjęciu na płótnie), aby pobrać stamtąd kolor. Esc anuluje pobieranie. Pod spodem znajduje się rząd 10 Gotowe kolory (biały, czarny, pomarańczowy, róż, niebieski, zielony, żółty, fiolet, kremowy, grafitowy) — kliknięcie kwadracika ustawia kolor napisu.

Sekcja „Odstępy i zagięcie”

Interlinia

Suwak 0,6–3 (krok 0,05), domyślnie 1,15. Dotyczy napisów wielowierszowych: odstęp między wierszami jako wielokrotność rozmiaru liter.

Odstęp liter

Suwak −10…60 (px), domyślnie 0. Wartości ujemne zbliżają litery, dodatnie rozsuwają (dobre do dużych nagłówków wielkimi literami).

Zagięcie (łuk)

Suwak −100…100, domyślnie 0 (napis prosty). Wartość dodatnia wygina napis w łuk jak „frowny” — środek wyżej niż brzegi (np. 40 do 60 dla napisu nad logo); ujemna — jak uśmiech, środek niżej. Wartość 100 oznacza łuk obejmujący ok. 290° (prawie pełny okrąg). Przy dłuższym napisie ten sam suwak daje łagodniejszy łuk. Napis wielowierszowy tworzy współśrodkowe łuki. Ograniczenia napisu zagiętego: zob. Ograniczenia (brak podświetlenia całej warstwy, gradient jednokolorowy).

Szerokość zawijania

Pole liczbowe 0–20000 px. 0 = bez zawijania. Wpisz np. 800, aby napis łamał się do kolejnych wierszy co najwyżej tej szerokości; bardzo długie słowa są łamane w środku. Szerokość możesz też zmieniać uchwytem po prawej stronie ramki (patrz Uchwyty).

Efekty: Obrys, Cień, Podświetlenie, Gradient, Tekstura

Każdy z pięciu efektów ma własną sekcję z polem wyboru Włączony na górze. Bez zaznaczenia tego pola ustawienia efektu nie działają — wszystkie efekty są domyślnie wyłączone. Przy wyłączonym efekcie zachowuje on ostatnie ustawienia.

Obrys

Kontur wokół liter, rysowany pod wypełnieniem z zaokrąglonymi narożnikami.

Włączony

Włącza obrys.

Grubość

Suwak 1–80 px, domyślnie 6. Jest to szerokość widocznej części obrysu na zewnątrz litery.

Kolor

Domyślnie czarny; z pipetą.

Cień

Włączony

Włącza cień.

Przesunięcie X, Przesunięcie Y

Suwaki −80…80 px, domyślnie 4 i 4 (cień w prawo i w dół). Przesunięcie jest liczone względem napisu, więc obraca się razem z nim.

Rozmycie

Suwak 0–100, domyślnie 8. 0 = ostry cień.

Kolor

Kolor cienia (domyślnie czarny).

Krycie

Suwak 0–1 (krok 0,05), domyślnie ok. 0,63. Im mniej, tym bardziej przezroczysty cień.

Gdy włączony jest też obrys, cień jest rzucany przez obrys (cały kształt litery razem z konturem).

Podświetlenie

Kolorowy prostokąt za wierszem tekstu (jak marker lub etykieta).

Włączony

Włącza podświetlenie wszystkich wierszy.

Kolor

Domyślnie pomarańczowy #FE9923.

Margines

Suwak 0–80 px, domyślnie 12 — dodatkowy odstęp od początku i końca wiersza po lewej i prawej stronie.

Gradient wypełnienia

Włączony

Wypełnia litery płynnym przejściem dwóch kolorów zamiast jednolitego koloru.

Kolor 1, Kolor 2

Kolory początkowy i końcowy (domyślnie pomarańczowy i różowy).

Kąt

Suwak 0–360°, domyślnie 90 (przejście od lewej do prawej). Gradient rozciąga się na całą ramkę napisu.

Gradient nie działa na fragmenty, którym nadałeś osobny Kolor (te mają pierwszeństwo), ani gdy włączona jest Tekstura z obrazu.

Tekstura z obrazu

1. Rozwiń sekcję Tekstura z obrazu i kliknij Wybierz obraz tekstury.
2. Wskaż plik obrazu. Efekt włącza się automatycznie: litery wypełniają się wzorem z obrazu (powtarzanym jak kafelki). Przycisk zmienia nazwę na Zmień obraz tekstury (po przebudowaniu panelu).
3. Suwakiem Skala (0,1–4, krok 0,05; domyślnie 1) powiększasz lub zmniejszasz wzór. Przy małym rozmiarze obrazu użyj dużej skali, żeby uniknąć powtarzającego się wzoru.
4. Pole Włączony wyłącza teksturę bez usuwania obrazu.

Sekcja „Style tekstu”

Zapis i ponowne użycie wyglądu napisu — opisane osobno w rozdziale Style tekstu.

Sekcja „Przekształcenia”

Wspólna dla wszystkich warstw — opisana w rozdziale Przekształcenia wspólne.

Właściwości kształtu

Dodawanie kształtu

1. Kliknij Kształt na pasku narzędzi. Otworzy się okno Kształty z siatką ikon.
2. Wybierz wariant: Wypełnione (domyślnie) lub Konturowe (kształt bez wypełnienia, tylko kontur o grubości 8 px).
3. Kliknij ikonę kształtu (po najechaniu widać jego nazwę). Okno się zamknie, a kształt pojawi się na środku płótna, zaznaczony. Domyślny rozmiar to ok. 35% krótszego boku płótna; kolor wypełnienia: pomarańczowy #FE9923.

Biblioteka zawiera 57 kształtów w dwóch wariantach (okno liczy je jako 114 pozycji; dwie linie wyglądają w obu wariantach tak samo):

• Podstawowe: Prostokąt, Zaokrąglony prostokąt, Elipsa, Trójkąt, Trójkąt prostokątny, Romb, Pięciokąt, Sześciokąt, Siedmiokąt, Ośmiokąt, Dziesięciokąt, Równoległobok, Trapez, Pierścień, Wycinek koła, Półkole, Ćwiartka, Ramka.
• Gwiazdy: Gwiazda 4, 5, 6, 8, 12, Wybuch, Pieczęć.
• Symbole: Serce, Plus, Krzyżyk, Ptaszek, Flaga, Wstęga, Pinezka, Tarcza, Domek, Zakładka, Cudzysłów, Koło zębate, Odznaka.
• Strzałki: Szewron, Strzałka w prawo / w lewo / w górę / w dół, Strzałka dwustronna, Strzałka z wcięciem, Strzałka zagięta.
• Dymki: Dymek prostokątny, Dymek owalny, Chmura.
• Natura: Księżyc, Błyskawica, Kropla, Liść, Słońce, Kwiat.
• Linie: Linia, Linia ze strzałką.

Panel „Kształt”

Zmień kształt…

Otwiera to samo okno Kształty, ale wybrany kształt zastępuje zaznaczony (zachowując rozmiar, kolor i położenie), zamiast dodawać nowy. Wybór wariantu Konturowe wyłącza wypełnienie.

Szerokość, Wysokość

Pola liczbowe 1–20000 px — wymiary kształtu przed skalowaniem. Linie nie mają pola Wysokość (ich grubość ustawia się osobno).

Wypełnienie

Pole wyboru (nie dla linii): włącza lub wyłącza wypełnienie. Wyłączone wypełnienie + obrys = sam kontur.

Kolor

Kolor wypełnienia (nie dla linii).

Zaokrąglenie

Suwak 0–600 — tylko dla kształtu „Zaokrąglony prostokąt”. Promień zaokrąglenia rogów (nie większy niż połowa krótszego boku).

Obrys (px) / Grubość linii

Suwak 0–100. Dla zwykłych kształtów 0 = bez obrysu; dla linii pole nazywa się Grubość linii (domyślnie 8).

Kolor obrysu

Kolor konturu; dla linii — kolor samej linii.

Sekcja „Gradient kształtu”

Dostępna dla wszystkich kształtów oprócz linii: Włączony, Kolor 1, Kolor 2, Kąt (0–360°). Gradient zastępuje kolor wypełnienia (wymaga zaznaczonego Wypełnienie).

Poniżej znajduje się standardowa sekcja Przekształcenia (przezroczystość, obrót, skala, odbicia, tryb mieszania, wyrównanie, nazwa).

Właściwości obrazu

Obraz-warstwę dodajesz przyciskiem Obraz (opis w pasku narzędzi). Zaznaczony obraz ma w prawej kolumnie nagłówek Obraz i sekcje:

Szerokość, Wysokość

Pola liczbowe 4–20000 px. Przy zaznaczonym polu Zachowaj proporcje (domyślnie tak) zmiana jednego wymiaru zmienia drugi, tak aby obraz się nie zniekształcił.

Sekcja Przycinanie

Cztery suwaki 0–90%: Lewa krawędź (%), Górna krawędź (%), Prawa krawędź (%), Dolna krawędź (%). Odcinają odpowiedni procent obrazu z danej strony (nieniszcząco — możesz zawsze wrócić do 0). Przycięty fragment jest rozciągany do bieżących wymiarów Szerokość × Wysokość, więc po przycięciu popraw proporcje, by uniknąć rozciągnięcia.

Uchwyty na płótnie: rogi skalują proporcjonalnie, uchwyty po prawej i na dole zmieniają szerokość i wysokość niezależnie (mogą zniekształcić obraz; nie zważają na pole Zachowaj proporcje). Dla bezpieczeństwa używaj rogów.

Obrazy większe niż 4096 px na dłuższym boku są przy wczytaniu zmniejszane. Przezroczystość PNG/WebP jest zachowana — świetnie nadaje się do logo i znaków wodnych. Tryb mieszania i przezroczystość znajdziesz w sekcji Przekształcenia.

Emoji i naklejki

1. Kliknij Emoji na pasku narzędzi. Otworzy się okno Emoji i naklejki.
2. Wybierz zakładkę kategorii. Jest ich 8, razem 232 symbole: Buźki (30), Gesty (26), Serca i symbole (30), Zwierzęta (30), Jedzenie (30), Podróże (26), Przedmioty (30), Pogoda i flagi (30).
3. Kliknij emoji. Okno się zamknie, a emoji pojawi się na środku płótna (rozmiar ok. 1/6 szerokości płótna).

Emoji to zwykła warstwa tekstowa, więc ma wszystkie jej możliwości: skalowanie, obrót, cień, obrys, a także duplikowanie. Wygląd emoji zależy od systemu na Twoim urządzeniu (inaczej wyglądają na iPhonie, Windowsie i Androidzie), a pole Kolor nie zmienia kolorowych emoji. Możesz wpisać emoji także w polu Treść napisu w dowolnym tekście (np. za pomocą klawiatury emoji systemu).

Przekształcenia wspólne dla wszystkich warstw

Sekcja Przekształcenia jest na dole prawej kolumny dla każdego typu warstwy (tekst, obraz, kształt, emoji).

Przezroczystość (%)

Suwak 0–100, domyślnie 100 (w pełni widoczna). Obniż do 30–50%, by zrobić znak wodny lub półprzezroczysty pasek.

Obrót (°)

Suwak −180…180. Dokładne wartości wygodniej ustawisz tu niż uchwytem na płótnie.

Skala (%)

Pole liczbowe 2–6000, domyślnie 100. Skaluje całą warstwę wraz z efektami (pole Rozmiar (px) tekstu, szerokość kształtu itp. pozostają bez zmian). To wartość zmieniana narożnymi uchwytami.

Odbij poziomo, Odbij pionowo

Przyciski przełączające — lustrzane odbicie warstwy (napis staje się lustrzany). Wciśnięty = odbicie włączone. Przeciwieństwo przekształcenia płótna, które odbija wszystko.

Tryb mieszania

Lista 16 trybów sposobu nakładania warstwy na to, co pod nią: Normalny (domyślny), Mnożenie, Ekran, Nakładka, Ciemniejsze, Jaśniejsze, Różnica, Łagodne światło, Ostre światło, Rozjaśnianie, Ściemnianie, Wykluczenie, Odcień, Nasycenie, Kolor, Luminancja. Przykłady: Mnożenie — cień lub ciemny napis „wtapia się” w zdjęcie; Ekran — jasne efekty światła; Nakładka — wzmocnienie kontrastu kolorem.

Wyrównanie do płótna

Sześć przycisków: Do lewej, Środek poziomo, Do prawej, Do góry, Środek pionowo, Do dołu. Dosuwają warstwę do krawędzi lub środka płótna (dosunięcie do krawędzi bez marginesu — do odsunięcia użyj strzałek). Zakładają ramkę warstwy bez obrotu, więc dla mocno obróconej warstwy wyrównanie jest przybliżone.

Nazwa

Własna nazwa warstwy na liście (maks. 60 znaków).

Style tekstu

Styl to zapisany wygląd napisu — możesz go jednym kliknięciem zastosować do innego tekstu (np. wszystkie podpisy w jednym stylu). Sekcja Style tekstu jest w panelu Właściwości warstwy tekstowej.

Styl zapamiętuje: czcionkę, grubość, kursywę, podkreślenie, przekreślenie, rozmiar, kolor, wyrównanie, interlinię, odstęp liter, zagięcie, wielkie litery, obrys, cień, podświetlenie, gradient, przezroczystość i tryb mieszania. Nie zapamiętuje treści, położenia, obrotu, tekstury ani stylów fragmentów.

Zapisz styl

1. Zaznacz napis, który wygląda tak, jak chcesz. Wejdź do sekcji Style tekstu.
2. W polu Nazwa stylu (podpowiedź „Nazwa stylu (np. znak wodny)”) wpisz nazwę. Jeśli zostawisz puste, powstanie „Styl 1”, „Styl 2” itd.
3. Kliknij Zapisz styl w przeglądarce. Styl pojawi się na liście pod przyciskiem.

Zastosuj i usuń styl

• Zastosuj: zaznacz docelową warstwę tekstową i kliknij nazwę stylu na liście (podpowiedź „Zastosuj styl do zaznaczonej warstwy”). Wygląd się zmieni, a treść i położenie pozostaną.
• Usuń: kliknij znak × obok nazwy stylu.

Eksport i import JSON

• Eksport JSON — pobiera plik style-grafikit.json ze wszystkimi stylami zapisanymi w przeglądarce (kopia zapasowa albo przeniesienie na inny komputer).
• Import JSON — wybierz taki plik; style zostaną dodane do istniejących (z komunikatem „Zaimportowano style: N.”). Zły plik daje „Nieprawidłowy plik stylów.”

Style na koncie

Zalogowani widzą pod spodem przycisk Zapisz na koncie: zapisuje bieżący styl (nazwa z pola Nazwa stylu albo „Styl” z datą) na koncie, dzięki czemu jest dostępny na każdym urządzeniu. Style konta mają na liście dopisek „(konto)”; klik stosuje styl, a × usuwa go z konta. Zarządzać nimi możesz też w panelu konta w zakładce Style tekstu. Obowiązuje limit liczby stylów na koncie (obecnie 200).

Eksport: pobieranie obrazu

1. Kliknij Pobierz obraz na pasku narzędzi. Otworzy się okno Pobierz obraz.
2. W polu Format wybierz jedną z opcji:
   • PNG (bez strat, przezroczystość) — najlepsza jakość, plik największy; do grafik z tekstem i logo.
   • JPEG (białe tło) — mały plik do zdjęć; zapis na białym tle.
   • WebP — nowoczesny, mały plik dobrej jakości (gdy przeglądarka go nie obsługuje, zobaczysz komunikat „Ta przeglądarka nie obsługuje eksportu do tego formatu.”).
   • PDF (białe tło) — jedna strona o wymiarach obrazu (1 px = 0,75 pt), z obrazem zapisanym jako JPEG.
3. Pole Jakość — suwak 0,5–1 (domyślnie 0,92). Dotyczy JPEG, WebP i obrazu w PDF; dla PNG jest wyszarzone. Wyższa wartość = lepsza jakość i większy plik. Dla WWW zwykle wystarczy 0,8–0,9.
4. Pole Skala — mnożnik rozmiaru: 0,5×, 1× (obok widać wymiary płótna, np. „1× (1080×1080)”), 2×, 3×. Wybierz 2× lub 3×, by dostać ostrzejszy plik (np. do druku). Edytor automatycznie zmniejszy skalę, jeśli wynik miałby ponad 100 mln pikseli lub przekroczył 16000 px na bok.
5. Pole Nazwa pliku — domyślnie „grafikit-RRRR-MM-DD”. Wpisz własną (maks. 80 znaków); niedozwolone znaki są usuwane (polskie litery zostają), rozszerzenie dodawane jest samo.
6. Kliknij Pobierz. Przeglądarka zapisze plik w folderze pobranych plików, a okno się zamknie. Anuluj zamyka okno bez pobierania.

Eksport zawiera tylko to, co widać w obrazie: bez ramek zaznaczenia, uchwytów, linii pomocniczych i siatki. Ukryte warstwy (przekreślone oko) nie trafiają do pliku. Przed zapisem edytor dogrywa wszystkie użyte czcionki, dzięki czemu napis wygląda tak samo jak na ekranie.

Gdy coś pójdzie nie tak, zobaczysz komunikat „Eksport nie powiódł się.”. Zob. też Rozwiązywanie problemów.

Chcesz zmniejszyć gotowy obraz dla WWW? Użyj konwertera WebP; logo na ostry plik wektorowy zamienisz w konwerterze SVG.

Projekty, konto i automatyczny szkic

Projekt to cały stan edytora: rozmiar płótna, tło, wszystkie warstwy, osadzone zdjęcia i użyte własne czcionki. Trzy sposoby zapisu: plik, konto, automatyczny szkic.

Zapis do pliku .json i wczytywanie

1. Kliknij Zapisz projekt (.json). Przeglądarka pobierze plik projekt-grafikit.json (zdjęcia są w nim osadzone, więc plik może być duży).
2. Przenieś go w bezpieczne miejsce. Możesz zmienić nazwę — edytor czyta zawartość, nie nazwę.
3. Aby wrócić do pracy, kliknij Wczytaj projekt i wskaż plik. Edytor odtworzy płótno, warstwy, zdjęcia i własne czcionki, wyzeruje historię (Cofnij zacznie od stanu po wczytaniu) i pokaże „Projekt wczytany.”. Jeśli w projekcie była czcionka, której nie ma w edytorze i której nie było w pliku, zobaczysz „Brak niektórych czcionek własnych — użyto zastępczych.”

Zapis na koncie

1. Zaloguj się (bez logowania przycisk nazywa się Zaloguj, aby zapisać i prowadzi do logowania lub rejestracji).
2. Kliknij Zapisz na koncie. W oknie Zapisz na koncie wpisz Nazwa projektu (do 120 znaków).
3. Jeśli projekt był już zapisany lub otwarty z konta, zobaczysz pole Jako nowy: zaznacz je, aby utworzyć kopię; bez zaznaczenia nadpiszesz istniejący projekt.
4. Kliknij Zapisz. Po chwili pojawi się „Zapisano na koncie.”, a adres strony zmieni się na …/edytor-napisow.php?projekt=NUMER.

Zapisane projekty znajdziesz w panelu konta w zakładce Moje projekty — przycisk Otwórz wczytuje projekt do edytora; tam też można go usunąć. Limity na serwerze (obecnie): 8 MB na jeden projekt, 50 MB łącznie na koncie i 200 projektów. Przy przekroczeniu zobaczysz komunikat z prośbą o zmniejszenie zdjęcia tła lub usunięcie starych projektów. Szczegóły konta: Konto, okres próbny i subskrypcja.

Automatyczny szkic w przeglądarce i zgoda na cookies

Edytor może sam zapamiętywać ostatni stan pracy w przeglądarce: około sekundy po każdej zmianie zapisuje szkic, a przy następnym wejściu na stronę przywraca go z komunikatem „Przywrócono ostatni szkic.”. Szkic działa tylko wtedy, gdy zezwolisz na cookies Preferencje:

1. Na banerze cookies kliknij Akceptuj wszystkie — albo Ustawienia, włącz przełącznik przy kategorii Preferencje i kliknij Zapisz wybór.
2. Baner zniknął i chcesz zmienić decyzję? W stopce strony kliknij Ustawienia cookies.

• Szkic nie zawiera własnych czcionek z pliku i nie jest zapisywany, gdy projekt przekracza ok. 1,5 MB (wtedy poprzedni szkic jest kasowany) — dla dużych zdjęć używaj Zapisz projekt (.json) lub Zapisz na koncie.
• Szkic jest jeden na przeglądarkę — nowa praca nadpisuje poprzednią.
• Wycofanie zgody na Preferencje kasuje szkic oraz style zapisane w przeglądarce.
• Szkic nie zastępuje zapisu projektu: inna przeglądarka lub wyczyszczenie danych witryny go usuną.

Skróty klawiszowe

Skróty działają, gdy kursor nie znajduje się w polu tekstowym, liście lub polu liczbowym i gdy nie jest otwarte okno dialogowe. Na Macu zamiast Ctrl użyj Cmd.

Podczas pisania w polu Treść napisu standardowe skróty przeglądarki (Ctrl+Z, Ctrl+C, Ctrl+V) dotyczą pola tekstowego, a nie warstw. Nie ma skrótów do kopiowania i wklejania warstw ani do zaznaczania wszystkich — do powielania służy Duplikuj.

Typowe scenariusze krok po kroku

Napis na zdjęciu z cieniem

1. Kliknij Zdjęcie tła i wybierz zdjęcie. Płótno przyjmie jego rozmiar.
2. Jeśli zdjęcie jest jasne, w lewej kolumnie w sekcji Efekty tła obniż Jasność (%) do ok. 65.
3. Kliknij Tekst i od razu wpisz swój napis (zastąpi „Wpisz tekst”).
4. W sekcji Czcionka i format wyszukaj np. „Montserrat”, kliknij ją, wybierz Grubość 700 i ustaw Rozmiar (px) tak, by napis był czytelny.
5. Rozwiń Cień, zaznacz Włączony, ustaw Rozmycie ok. 12, Przesunięcie Y ok. 6 i Krycie ok. 0,6.
6. Przeciągnij napis w dobre miejsce (różowe linie podpowiedzą środek). Kliknij Pobierz obraz → Format: JPEG lub PNG → Pobierz.

Napis wypełniony zdjęciem (tekstura)

1. Wybierz tło o spokojnym kolorze i dodaj Tekst; wybierz grubą czcionkę (np. Anton lub Alfa Slab One) i duży rozmiar.
2. Rozwiń Tekstura z obrazu i kliknij Wybierz obraz tekstury → wskaż zdjęcie.
3. Suwakiem Skala dobierz wielkość wzoru. Opcjonalnie włącz Obrys w kontrastowym kolorze, żeby litery lepiej odcinały się od tła.

Znak wodny

1. Wczytaj zdjęcie przez Zdjęcie tła.
2. Dodaj Tekst (np. „© Twoja Marka”) albo logo przyciskiem Obraz. Zmniejsz je do rozsądnego rozmiaru (rogami lub polem Rozmiar (px)).
3. W sekcji Przekształcenia ustaw Przezroczystość (%) na ok. 40.
4. Kliknij Do prawej i Do dołu (wyrównanie do płótna), a następnie odsuń od krawędzi, klikając na płótnie warstwę i naciskając Shift+← i Shift+↑ po kilka razy.
5. Aby użyć tego samego wyglądu napisu w innych projektach, w sekcji Style tekstu wpisz „znak wodny” i kliknij Zapisz styl w przeglądarce (dla tekstu).
6. Jeśli chcesz, by znak nie przesunął się przypadkiem, kliknij ikonę kłódki przy warstwie na liście.

Napis po łuku

1. Dodaj Tekst i wpisz krótką frazę (łuk najlepiej wygląda przy 1 wierszu).
2. Rozwiń Odstępy i zagięcie. Przeciągnij suwak Zagięcie (łuk) w prawo (np. 50) — napis wygnie się w górę (łuk jak tęcza); w lewo — w dół (jak uśmiech).
3. Zwiększ Odstęp liter o kilka pikseli, jeśli litery się dotykają.
4. Dodaj Obrys lub Cień dla efektu logo. Gdy chcesz napis wokół kształtu, dodaj Kształt → Elipsa → Konturowe i wyśrodkuj oba elementy przyciskami Środek poziomo i Środek pionowo.

Jedno słowo w innym kolorze

1. Dodaj Tekst i wpisz zdanie, np. „Letnia wyprzedaż”.
2. W polu Treść napisu kliknij dwukrotnie słowo „wyprzedaż” — zostanie zaznaczone, a pod polem pojawi się „Zaznaczono znaków: 10.”.
3. W ramce Styl zaznaczonego fragmentu kliknij kwadracik Kolor i wybierz np. pomarańczowy. Tylko to słowo zmieni barwę.
4. Opcjonalnie: kliknij B, by je pogrubić, albo ustaw Podświetlenie na żółty, aby wyglądało jak zakreślone markerem.
5. Aby cofnąć, zaznacz słowo ponownie i kliknij Wyczyść style fragmentu.

Post 1080×1350 na Instagram

1. Kliknij Nowy. W polu Szablon wybierz „1080×1350 — Instagram portret”.
2. W polu Tło wybierz Zdjęcie i wskaż plik (zdjęcie zostanie wycentrowane i przycięte do formatu) — albo Jednolity kolor, albo Gradient (z generatora). Kliknij Utwórz.
3. Dodaj nagłówek: Tekst, duża gruba czcionka, Szerokość zawijania np. 900, wyrównanie Do środka. Dodaj drugi, mniejszy Tekst jako podpis.
4. Wyśrodkuj elementy przyciskiem Środek poziomo (Przekształcenia).
5. Kliknij Pobierz obraz → Format: JPEG, Jakość 0,92, Skala 1× → Pobierz. Przesłany plik ma dokładnie 1080×1350 px.

Napis na półprzezroczystym pasku

1. Mając tło ze zdjęciem, kliknij Kształt → Wypełnione → Prostokąt.
2. Rozciągnij go uchwytami (prawym i dolnym) na pasek, a w panelu Kształt ustaw Kolor na czarny.
3. W sekcji Przekształcenia ustaw Przezroczystość (%) na ok. 55 i dosuń pasek przyciskiem Do dołu.
4. Dodaj Tekst — nowy tekst trafi nad pasek (na wierzch listy). Ustaw go na środku paska. Zablokuj pasek kłódką, by go nie ruszać.

Logo na jednolitym tle (przezroczystość niedostępna)

Edytor nie eksportuje przezroczystego tła: tło jest zawsze kolorem, gradientem albo zdjęciem. Logo w pliku PNG z przezroczystością możesz więc umieścić tylko na wybranym tle:

1. Kliknij Nowy, wybierz rozmiar (np. 1080×1080), Tło: Jednolity kolor i wskaż kolor (np. biały lub kolor marki) → Utwórz.
2. Kliknij Obraz i wskaż plik logo. Przezroczyste obszary logo pozostaną przezroczyste i będzie przez nie widać kolor tła.
3. Wyśrodkuj logo przyciskami Środek poziomo i Środek pionowo, ewentualnie dodaj Tekst z nazwą marki.
4. Pobierz PNG przyciskiem Pobierz obraz.

Jeśli potrzebujesz logo na naprawdę przezroczystym tle, przygotuj je w innym narzędziu — lub zamień grafikę na SVG w konwerterze SVG.

Napis na tle z własnym gradientem

1. Kliknij Nowy → wybierz rozmiar → Tło: Gradient (z generatora) → Utwórz.
2. W generatorze ustaw kolory i kąt, a następnie kliknij Użyj w edytorze napisów (instrukcja generatora).
3. Po powrocie dodaj Tekst i dopracuj go jak w pozostałych scenariuszach.

Rozwiązywanie problemów i pytania

Dodałem tekst, ale go nie widzę.

Domyślny napis jest biały. Jeśli tło jest białe, napis się „zlewa”. Zmień Kolor napisu (sekcja Czcionka i format) lub tło. Sprawdź też, czy warstwa nie jest ukryta (przekreślone oko na liście warstw) i czy Przezroczystość (%) nie jest równa 0.

Nie mogę przesunąć warstwy.

Prawdopodobnie jest zablokowana (zamknięta kłódka na liście warstw) — kliknij kłódkę. Jeśli włączony jest Pan, przeciąganie przesuwa widok, nie warstwy — wyłącz go. Sprawdź również, czy nie przytrzymujesz Spacja.

Warstwa „przeskakuje” i nie mogę ustawić jej dokładnie.

To Przyciąganie (lub Siatka). Wyłącz oba przełączniki albo użyj strzałek (po 1 px), albo wpisz wartości w sekcji Przekształcenia.

Kliknięcie w tło przesuwa mi widok zamiast zaznaczyć warstwę.

Tło nie jest warstwą — kliknięcie w puste miejsce zdejmuje zaznaczenie i przeciągnięcie przesuwa widok. Warstwę wybierz z listy lub kliknij bezpośrednio na jej elemencie.

Nie mogę przesunąć zdjęcia tła.

To założenie edytora — tło jest nieruchome i zawsze wypełnia płótno. Użyj Kadruj…, aby wybrać kadr, albo dodaj zdjęcie jako warstwę przyciskiem Obraz, jeśli chcesz je swobodnie przesuwać i skalować.

Zamiast nowej czcionki widzę „zwykłą” (domyślną).

Czcionka jest wczytywana przy pierwszym użyciu, więc na wolnym łączu może pojawić się z krótkim opóźnieniem. W projekcie wczytanym z pliku brakuje czcionki własnej, której plik nie został dołączony — wczytaj ją ponownie przyciskiem Wczytaj własną czcionkę (.ttf, .otf, .woff, .woff2).

Pogrubienie (B) nic nie robi.

Wybrana czcionka ma tylko jedną grubość (15 z 64 czcionek). Wybierz inną z listy albo dodaj Obrys w kolorze napisu.

Efekt (cień, obrys, podświetlenie itd.) nie działa.

Zaznacz pole Włączony w sekcji efektu. Przy zagiętym napisie (Zagięcie (łuk) ≠ 0) podświetlenie całej warstwy jest niedostępne, a Gradient wypełnienia daje jeden kolor (Kolor 1).

Pipety kolorów nie ma.

Pipeta (przycisk obok selektora koloru) wymaga przeglądarki z interfejsem EyeDropper — dostępnej w Chrome i Edge, ale nie w Firefoksie i Safari. W innych przeglądarkach wybierz kolor ręcznie w selektorze koloru.

Eksport do WebP nie działa lub plik się nie pobiera.

Przeglądarka może nie obsługiwać kodowania WebP (komunikat „Ta przeglądarka nie obsługuje eksportu do tego formatu.”) — wybierz PNG lub JPEG. Przy bardzo dużym płótnie ze skalą 3× pamięć przeglądarki może nie wystarczyć („Eksport nie powiódł się.”) — zmniejsz skalę.

Napis na eksportowanym pliku wygląda inaczej niż na ekranie.

Edytor przed eksportem dogrywa czcionki, więc różnice zdarzają się rzadko. Sprawdź, czy ekran nie był przeskalowany (porównuj przy 100%) oraz czy eksport nie jest zmniejszony skalą 0,5×.

Zniknęły moje style tekstu lub szkic.

Style w przeglądarce i szkic są zapamiętywane tylko po zgodzie na cookies Preferencje i zostają usunięte po jej wycofaniu lub wyczyszczeniu danych witryny. Zapisz style na koncie (Zapisz na koncie w sekcji Style tekstu) albo wyeksportuj je do JSON.

Zapis na koncie się nie udaje.

Sprawdź, czy jesteś zalogowany i czy projekt nie przekracza limitu (obecnie 8 MB; zmniejsz zdjęcie tła lub usuń niepotrzebne obrazy) oraz czy nie wyczerpałeś miejsca na koncie. Możesz zawsze zapisać projekt do pliku .json.

Wczytałem projekt i nie mogę go zapisać na koncie jako ten sam.

Wczytanie z pliku tworzy nowy, niezależny projekt — zapis na koncie doda go jako nowy. Aby edytować istniejący projekt z konta, otwórz go z panelu konta przyciskiem Otwórz.

Strona edytora jest wolna przy dużym zdjęciu.

Edytor obsługuje obrazy do 4096 px na bok, ale duże płótno z wieloma efektami obciąża komputer. Użyj mniejszego płótna (np. 1080 px) i wyeksportuj w skali 2×, albo pomniejsz podgląd (Dopasuj).

Czy moje zdjęcia trafiają na serwer?

Nie. Obróbka odbywa się w przeglądarce. Dane przesyłane są wyłącznie wtedy, gdy zapiszesz projekt (lub styl) na koncie.

Ograniczenia edytora

Poniższych rzeczy edytor nie robi. Część z nich jest zaplanowana na kolejne etapy rozwoju.

• Brak gumki i „tekstu za obiektem”. Nie można wymazać fragmentu napisu ani umieścić go za osobą/przedmiotem na zdjęciu. Funkcja jest przewidziana w przyszłości (w projekcie zarezerwowano na nią miejsce).
• Brak tekstu 3D. Efekt trójwymiarowy jest zaplanowany na późniejszy etap.
• Brak przezroczystego tła w eksporcie. Tło to zawsze kolor, gradient lub zdjęcie. Nie da się wyeksportować logo na przezroczystym tle.
• Tło jest nieruchome. Nie przesuwasz ani nie skalujesz zdjęcia tła; kadr zmieniasz opcją Kadruj… lub dodajesz zdjęcie jako warstwę Obraz.
• Brak edycji tekstu bezpośrednio na płótnie. Tekst wpisujesz w polu Treść napisu w prawej kolumnie.
• Brak zaznaczania wielu warstw naraz, grupowania warstw, kopiowania i wklejania warstw (tylko Duplikuj) oraz linijek i własnych prowadnic.
• Zagięcie tekstu: przy włączonym Zagięcie (łuk) nie działa Podświetlenie całej warstwy, a Gradient wypełnienia jest jednokolorowy; maksymalny łuk to ok. 290°.
• Własna czcionka jest dostępna tylko dla całej warstwy (nie dla fragmentów), a w automatycznym szkicu nie jest zapamiętywana. Do projektu dołączane są pliki czcionek do ok. 2 MB.
• Kształty pochodzą z gotowej biblioteki (57); nie ma rysowania odręcznego, edycji punktów ani importu SVG jako kształtu. Linie nie mają wypełnienia ani gradientu.
• Emoji pochodzą z listy 232 symboli i wyglądają zgodnie z czcionką emoji systemu użytkownika. Emoji nie można pokolorować.
• Limity rozmiaru: płótno 16–4096 px na bok; zdjęcia większe niż 4096 px są zmniejszane; tekst do 5000 znaków; w jednym wczytywanym projekcie obsługiwanych jest do 500 warstw; historia cofania — 100 kroków; eksport do 100 mln pikseli i 16000 px na bok. Limity konta: 8 MB na projekt, 50 MB na wszystkie projekty, 200 projektów, 200 stylów.
• Obrazy (warstwy i tło) są w projekcie kodowane stratnie (JPEG lub WebP), więc po zapisie i wczytaniu mogą minimalnie różnić się od oryginału.
• Brak ostrzeżenia o niezapisanych zmianach przy zamknięciu karty oraz przy przycisku Wczytaj projekt.
• Pipeta koloru działa tylko w przeglądarkach z obsługą interfejsu EyeDropper (Chrome, Edge).
• Eksport PDF to jedna strona z obrazem rastrowym (JPEG), a nie dokument wektorowy z tekstem do zaznaczania.

Masz pytania o konto lub subskrypcję? Zajrzyj do Konto, okres próbny i subskrypcja.

Nie znalazłeś odpowiedzi? Napisz do nas przez formularz kontaktowy.