Tło szablonu: kolor, gradient i obraz

Opublikowano lipca 20, 2026 · Zaktualizowano lipca 20, 2026

Najpierw: Jak utworzyć szablon zdjęcia?

JAK TO ZROBIĆSzablony · Tło

W edytorze szablonów (Template Editor) istnieją trzy odrębne metody ustawiania tła szablonu i nie należy ich ze sobą mylić. (1) Kolor Tło obszaru roboczego: to podłoże znajdujące się na samym dole obszaru roboczego, którego nie można usunąć ani przesunąć; może być wyłącznie jednolitym kolorem lub gradientem, nie można na nim umieścić obrazu i występuje tylko jedno. (2) Warstwa Color (Kolor): to rzeczywisty blok wypełniony jednolitym kolorem lub gradientem, który można przesuwać, skalować i usuwać. (3) Warstwa Image (Obraz): to rzeczywista warstwa wyświetlająca plik obrazu; zamieniasz ją w tło obrazowe, ustawiając Dopasuj na „Wypełnij”, powiększając ją tak, aby zakryła obszar roboczy, i przesuwając na sam dół za pomocą „Przesuń w dół”. Metoda 1 to podłoże; metody 2 i 3 to warstwy. Selektor koloru (jednolity/gradient) jest taki sam zarówno dla metody 1, jak i dla metody 2.


i
Zanim zaczniesz
  1. Szablon musi być utworzony lub istniejący szablon otwarty do edycji (edytor szablonów / Template Editor canvas musi być widoczny na ekranie)
  2. Po lewej stronie musi być widoczny panel Warstwy (z elementem Obszar roboczy na samej górze), po prawej panel Właściwości, a u góry przycisk Dodaj warstwę
  3. Dla warstwy obrazu na urządzeniu musi być gotowy plik obrazu (jpg/png), który zostanie użyty

Krok po kroku

Krok 1 · Poznaj panele edytora

Edytor szablonów (Template Editor canvas)

Otwórz edytor szablonów. Przejrzyj układ ekranu: po lewej panel Warstwy (na samej górze element Obszar roboczy), po prawej panel Właściwości, a na górnym pasku fioletowy przycisk Dodaj warstwę oraz przyciski cofnij/ponów. Wszystkie operacje na tle wykonuje się za pomocą tych dwóch paneli.

🔎 Elementy na ekranie: Po lewej: panel Warstwy + element Obszar roboczy; Po prawej: panel Właściwości; U góry: przycisk Dodaj warstwę; dolny pływający pasek narzędzi (narzędzia/powiększenie).

Ogólny widok edytora szablonów: po lewej panel Warstwy z elementem Obszar roboczy , po prawej panel Właściwości, u góry…
Ogólny widok edytora szablonów: po lewej panel Warstwy z elementem Obszar roboczy, po prawej panel Właściwości, u góry zaznaczony przycisk Dodaj warstwę.

Krok 2 · Metoda 1 — Otwórz właściwości obszaru roboczego (podłoże, którego nie można usunąć)

Edytor szablonów — panel Właściwości (wybrany Obszar roboczy)

Kliknij element Obszar roboczy na samej górze lewego panelu Warstwy (lub kliknij puste miejsce na obszarze roboczym, aby usunąć zaznaczenie wszystkich warstw). Prawy panel Właściwości przełącza się na nagłówek Obszar roboczy; widoczne są tu ustawienia Rozmiar, Tło i Druk.

🔎 Elementy na ekranie: element Obszar roboczy w panelu Warstwy; nagłówek Obszar roboczy w prawym panelu, grupa Tło.

Krok 3 · Metoda 1 — Otwórz selektor koloru tła

Edytor szablonów — panel Właściwości (wybrany Obszar roboczy)

W grupie Tło w prawym panelu kliknij pole koloru (mały kwadratowy wzornik/swatch) obok etykiety Kolor. Otworzy się selektor koloru. To podłoże pokrywa cały obszar roboczy, za wszystkimi warstwami; nie jest osobną warstwą, nie można go usunąć ani przesunąć.

🔎 Elementy na ekranie: grupa Tło, etykieta Kolor, klikalne pole koloru (color-result-swatch); otwierany ColorSettingPicker.

W prawym panelu grupa Tło i pole koloru obok Kolor ; po kliknięciu pola otwiera się wyskakujący selektor koloru.
W prawym panelu grupa Tło i pole koloru obok Kolor; po kliknięciu pola otwiera się wyskakujący selektor koloru.

Krok 4 · Metoda 1 — Wybierz jednolity kolor podłoża

Edytor szablonów — selektor koloru (Tło)

W otwartym selektorze koloru upewnij się, że wybrana jest górna karta Jednolity. Wybierz kolor z koła kolorów lub wpisz #RRGGBB w pole hex. Wybrany kolor natychmiast staje się podłożem obszaru roboczego. Jeśli chcesz gradient, przejdź do następnego kroku.

🔎 Elementy na ekranie: karty Jednolity / Gradient w selektorze koloru; w trybie Jednolity koło kolorów + pole wpisywania hex.

Krok 5 · Ustawienie gradientu (wspólne dla tła i warstwy koloru)

Edytor szablonów — selektor koloru (tryb Gradient)

W selektorze koloru przejdź do karty Gradient. Wybierz typ Liniowy lub Radialny. Ustaw dwa punkty koloru oznaczone „1” i „2” (za pomocą koła kolorów lub hex). Jeśli typem jest Liniowy, wybierz kierunek z menu Kąt (8 opcji: ↑ 0°, ↗ 45°, → 90°, ↘ 135°, ↓ 180°, ↙ 225°, ← 270°, ↖ 315°). Pasek podglądu na samym dole pokazuje wynik na żywo. Ten selektor jest identyczny zarówno dla „Tła” z metody 1, jak i dla warstwy Color z metody 2.

🔎 Elementy na ekranie: karta Gradient; podkarty Liniowy / Radialny; punkty koloru „1” i „2”; menu „Kąt” tylko przy typie Liniowy; dolny pasek podglądu gradientu.

Tryb gradientu w selektorze koloru: wybór „Liniowy/Radialny”, punkty koloru „1” i „2”, menu Kąt (kierunek) oraz pasek…
Tryb gradientu w selektorze koloru: wybór „Liniowy/Radialny”, punkty koloru „1” i „2”, menu Kąt (kierunek) oraz pasek podglądu gradientu na dole.

Krok 6 · Metoda 2 — Dodaj warstwę Color (Kolor)

Edytor szablonów — menu Dodaj warstwę

Kliknij przycisk Dodaj warstwę na górnym pasku; z otwartego menu wybierz element Color (Kolor). Na obszar roboczy zostanie dodany blok koloru o rozmiarze 200×200, wypełniony jednolitą szarością (#CCCCCC). To rzeczywista warstwa, którą można przesuwać, skalować, obracać i usuwać — nie jest to podłoże.

🔎 Elementy na ekranie: przycisk Dodaj warstwę u góry; element Color w otwartym menu typów warstw (nazwa w menu wyświetla się po angielsku).

Menu typów warstw otwierane po kliknięciu przycisku Dodaj warstwę ; zaznaczone opcje Color i Image .
Menu typów warstw otwierane po kliknięciu przycisku Dodaj warstwę; zaznaczone opcje Color i Image.

Krok 7 · Metoda 2 — Ustaw wypełnienie warstwy koloru

Edytor szablonów — panel Właściwości (wybrana warstwa Kolor)

Gdy warstwa koloru jest zaznaczona, znajdź w prawym panelu Właściwości grupę Kolor; kliknij pole koloru obok etykiety Wypełnij. Otworzy się ten sam selektor koloru co w metodzie 1 — możesz wybrać jednolity kolor lub gradient (jak w kroku 5).

🔎 Elementy na ekranie: grupa Kolor w prawym panelu, etykieta Wypełnij i pole koloru; otwierany ColorSettingPicker (jednolity/gradient).

Krok 8 · Metoda 2 — Rozmieść blok koloru (opcjonalnie użyj jako podłoża)

Edytor szablonów — Obszar roboczy + panel Właściwości

Przesuń warstwę koloru, przeciągając ją, zmień jej rozmiar za pomocą uchwytów narożnych lub wpisz wartości X/Y/W/H z grupy Pozycja & Rozmiar oraz Przezroczystość. Jeśli chcesz użyć bloku koloru jako pełnego tła, powiększ go tak, aby zakrył obszar roboczy, i przesuń na sam dół za pomocą Przesuń w dół (różnica względem metody 1: ten blok można przesuwać i usuwać).

🔎 Elementy na ekranie: ramka zaznaczenia + uchwyty narożne; grupa Pozycja & Rozmiar (X/Y/W/H), Przezroczystość; przycisk Przesuń w dół w panelu Warstwy.

Krok 9 · Metoda 3 — Dodaj warstwę Image (Obraz)

Edytor szablonów — menu Dodaj warstwę

Kliknij przycisk Dodaj warstwę u góry; z menu wybierz element Image (Obraz). Zostanie dodana pusta warstwa obrazu (domyślne Dopasuj = Rozciągnij/fill). To również rzeczywista warstwa, którą można przesuwać, skalować i usuwać.

🔎 Elementy na ekranie: element Image w menu Dodaj warstwę (nazwa w menu wyświetla się po angielsku).

Krok 10 · Metoda 3 — Wybierz plik obrazu

Edytor szablonów — panel Właściwości (wybrana warstwa Obraz)

Gdy warstwa obrazu jest zaznaczona, użyj selektora plików w grupie Obraz w prawym panelu Właściwości; z otwartego natywnego okna wyboru plików wybierz obraz, którego chcesz użyć. Obraz stanie się widoczny wewnątrz warstwy.

🔎 Elementy na ekranie: grupa Obraz w prawym panelu; komponent FilePicker (wybór plików).

Krok 11 · Metoda 3 — Rozciągnij obraz na obszar roboczy (Dopasuj → Wypełnij)

Edytor szablonów — panel Właściwości (wybrana warstwa Obraz)

W grupie Obraz ustaw menu Dopasuj na Wypełnij (Cover) — dzięki temu obraz wypełni ramkę warstwy bez pozostawiania pustych miejsc. Następnie za pomocą uchwytów narożnych lub wartości W/H z grupy Pozycja & Rozmiar powiększ warstwę obrazu do rozmiaru pokrywającego cały obszar roboczy. Z menu Wyrównanie ustaw położenie obrazu wewnątrz ramki. (W razie potrzeby możesz zastosować zaokrąglenie narożników za pomocą Promień oraz klucz chromatyczny/green-screen za pomocą Wyczyść tło.)

🔎 Elementy na ekranie: grupa Obraz: menu Dopasuj (Zawieraj / Wypełnij / Rozciągnij), menu Wyrównanie, Promień, Wyczyść tło + Kolor klucza chromatycznego; uchwyty narożne ramki zaznaczenia.

W grupie Obraz menu Dopasuj ustawione na Wypełnij , a warstwa obrazu w pełni pokrywa obszar roboczy; widoczne pola…
W grupie Obraz menu Dopasuj ustawione na Wypełnij, a warstwa obrazu w pełni pokrywa obszar roboczy; widoczne pola Wyrównanie i Promień.

Krok 12 · Metoda 3 — Wyślij obraz na sam dół (Przesuń w dół)

Edytor szablonów — panel Warstwy (Operacje)

Gdy warstwa obrazu jest zaznaczona, w sekcji „Operacje” w lewym panelu Warstwy naciskaj kolejno przycisk Przesuń w dół (lub ⌘[), aż obraz znajdzie się na samym dole wszystkich warstw. Dzięki temu obraz staje się tłem; sloty na zdjęcia, tekst i pozostałe warstwy wyświetlają się przed nim. (Nie ma funkcji „wyślij na sam spód” w jednym kroku; każde kliknięcie przesuwa o jeden poziom w dół.)

🔎 Elementy na ekranie: grupa „Operacje” widoczna, gdy w panelu Warstwy zaznaczona jest jedna warstwa: przyciski ikon Duplikuj, Przesuń w górę, Przesuń w dół, Usuń (skrót ⌘[ / ⌘]).

Wiersz „Operacje” w panelu Warstwy; zaznaczony przycisk Przesuń w dół (strzałka w dół), a warstwa obrazu na samym dole…
Wiersz „Operacje” w panelu Warstwy; zaznaczony przycisk Przesuń w dół (strzałka w dół), a warstwa obrazu na samym dole listy.
i
Wskazówki

Istota trzech metod: Metoda 1 (Obszar roboczy Tło) = jedyne podłoże, którego nie można usunąć ani przesunąć, wyłącznie kolor/gradient. Metoda 2 (warstwa Color) = przesuwalny/usuwalny blok koloru-gradientu. Metoda 3 (warstwa Image) = obraz; aby zrobić z niego tło: Wypełnij + powiększ + Przesuń w dół.

Ten sam selektor koloru jest używany zarówno w podłożu Tło, jak i w warstwie Color; ustawienie jednolity/gradient jest w obu identyczne.

W gradiencie edytuje się tylko 2 punkty koloru („1” i „2”). Kąt (kierunek) występuje tylko w gradiencie liniowym; w radialnym kąta nie ma.

Zmiany koloru/hex są stosowane z opóźnieniem ~0,5 s (debounce) — jeśli nie zmieni się od razu, zaczekaj chwilę.

Aby zrobić z obrazu pełne tło, koniecznie ustaw Dopasuj na Wypełnij i powiększ warstwę do rozmiaru obszaru roboczego; jeśli zostawisz tylko Zawieraj, obraz pozostanie mały pośrodku.

Nazwy elementów w menu Dodaj warstwę wyświetlają się po angielsku (Color, Image, Text ...); jednak nagłówki w prawym panelu Właściwości są w języku polskim (Kolor, Obraz).

Jeśli powiększysz blok koloru (metoda 2) tak, aby zakrył obszar roboczy, i przesuniesz go na sam dół, będzie zachowywał się jak podłoże, ale — w przeciwieństwie do metody 1 — można go przesuwać i usuwać.

!
Częste błędy

Szukanie opcji obrazu/zdjęcia w grupie Tło obszaru roboczego: podłoże może być wyłącznie kolorem lub gradientem; do obrazu trzeba koniecznie dodać warstwę Image (Obraz) (metoda 3).

Dodanie warstwy obrazu i zapomnienie o wysłaniu jej na sam dół za pomocą Przesuń w dół: obraz zasłania sloty na zdjęcia i tekst.

Pozostawienie menu Dopasuj na Zawieraj (Contain) i narzekanie, że obraz nie wypełnia obszaru roboczego: do tła potrzebne jest Wypełnij (Cover), a warstwę trzeba powiększyć do rozmiaru obszaru roboczego.

Uważanie warstwy Color (Kolor) za stałe podłoże: to przesuwalny/usuwalny blok. W przypadku stałego, nieusuwalnego podłoża użyj metody 1 (Obszar roboczy „Tło”).

Szukanie 3. koloru w gradiencie: w selektorze można edytować tylko dwa punkty („1” i „2”).

Szukanie Kąt w gradiencie radialnym: kąt jest widoczny tylko w gradiencie liniowym.

Powiązane tematy

sablon-olusturma sablon-duzenleme

Czy ten artykuł był pomocny?

Nie wiesz, od czego zacząć? Pomożemy Ci.

Powiedz nam, czego potrzebujesz, a prawdziwa osoba odpowie w ciągu kilku godzin.

Wysyłając formularz, akceptujesz nasz Regulamin oraz Politykę prywatności.