Kompozycja 3D
Zbuduj wizualizację z gotowego modelu.
- Ustaw kamerę, skalę kadru, oświetlenie, cienie oraz tło.
- Wygeneruj obraz bazowy i warstwy potrzebne do pokazywania kolejnych nadruków.
Generatory mockupów - prezentacja i sprzedaż produktów
Błyskawiczne generowanie mockupów produktów
Przygotuj sposób prezentacji produktu raz, a potem pokazuj w nim kolejne nadruki i warianty kolorystyczne. Generator mockupów przechowuje ujęcie, tło i sposób nakładania grafiki na produkt. Gotowy mockup powstaje z połączenia tych ustawień z aktualnym projektem klienta lub Twoim projektem w Designerze.
Możesz korzystać z generatorów dostępnych dla wybranego modelu albo przygotować własne w trybie Mockup w Product Generatorze. Poniżej znajdziesz przykłady zastosowania, ustawienia sceny 3D i własnej fotografii, testowanie mapowania oraz pobieranie wizualizacji i ich użycie we wtyczce WordPress + WooCommerce.
Zrzuty przedstawiają rzeczywiste narzędzia Alter Product, część z interfejsem angielskim. Każdy zrzut możesz otworzyć w pełnym rozmiarze.
Przygotuj własny generator mockupówUstaw ujęcia produktu, dopracuj kompozycję i mapowanie, a następnie zapisz generator z modelem.Przejdź do opisuUżyj gotowych ujęć w projekcie i sklepieGeneruj wizualizacje aktualnego nadruku, pobieraj obrazy i pokazuj personalizację w koszyku.Przejdź do opisu
Najpierw potrzebujesz własnego modelu 3D?Przejdź do przewodnika Product Generatora: wykroje, Easy Creator, rozmiary, symulacja, materiały i eksport.Model, generator i gotowy mockup
Generator zapisuje sposób prezentacji produktu. Gotowy mockup jest obrazem konkretnego projektu, który powstaje z użyciem tego generatora.
Zacznij od gotowego modelu lub dostępnych generatorów
Jeśli wybrany model ma już generatory mockupów, możesz od razu korzystać z nich w Product Designerze. W oknie Mockup wybierasz ujęcie, a podgląd pokazuje grafikę i kolory aktualnego projektu.
Aby opracować własne generatory, otwórz projekt modelu w Product Generatorze i przejdź do trybu Mockup. Potrzebujesz przygotowanego modelu oraz powierzchni, na których będzie pokazywana grafika. Własny krój, symulację i materiały modelu opisuje osobny przewodnik tworzenia modeli 3D.
Jeden generator, wiele gotowych wizualizacji
Przykład: przygotowujesz front koszulki na jasnym tle. Przy kolejnym nadruku nie ustawiasz ponownie kamery, oświetlenia ani obrysu kołnierza. Otwierasz Mockup w Designerze, a zapisany generator pokazuje aktualny projekt w tym samym kadrze.
| Element | Za co odpowiada |
|---|---|
| Model 3D | Kształt produktu i powierzchnie, na których umieszczasz projekt. Ten sam model może mieć kilka generatorów, np. przód, boki i tył. |
| Generator mockupu | Kadr, tło, oświetlenie oraz mapowanie części i warstwy. Edytujesz go wtedy, gdy chcesz zmienić sposób prezentacji produktu. |
| Projekt w Designerze lub Customizerze | Grafika, napisy i wybrane kolory produktu. Zmiana projektu pozwala uzyskać nowy mockup przy użyciu przygotowanego generatora. |
| Pobrany mockup PNG | Gotowy obraz konkretnego projektu i ujęcia. Możesz użyć go w ofercie, katalogu lub materiałach promocyjnych. |
Trzy obszary pracy nad mockupem
Wybierz etap odpowiadający temu, co chcesz dopracować. Kompozycja 3D i dopasowanie do zdjęcia dają dwa sposoby przygotowania obrazu bazowego.
Dopasowanie na obrazie
Użyj własnej fotografii produktu jako podstawy prezentacji.
- Dopasuj model do zdjęcia przez pozycję, obrót, skalę i dostępne narzędzia deformacji.
- Wygeneruj warstwy z przygotowanego dopasowania.
Mapowanie
Dopracuj obrysy części i zachowanie nadruku na obrazie.
- Edytuj punkty i uchwyty wektorowe, maski, cienie oraz światła.
- Ten etap wymaga przygotowanego obrazu bazowego i ścieżek wektorowych.
Od przygotowanego kadru do kolejnych projektów
Kompozycję opracowujesz raz, a generator wykorzystujesz ponownie przy zmianach grafiki i kolorów.
- Wybierz model i dodaj ujęcia w trybie Mockup.
- Przygotuj kompozycję 3D albo dopasowanie do zdjęcia, a następnie wygeneruj warstwy.
- Sprawdź mapowanie nadruku na wszystkich częściach oraz zapisz projekt z generatorami.
- Użyj zapisanych ujęć w Designerze lub udostępnij produkt klientom w Customizerze.
Przykłady: od katalogu do personalizacji klienta
Dobierz sposób przygotowania generatora do miejsca, w którym pokażesz produkt. Poniższe scenariusze możesz zrealizować w tych samych narzędziach, zmieniając kompozycję i projekt nadruku.
Jaką prezentację produktu chcesz przygotować?
Zacznij od celu: porównywalne zdjęcia wariantów, rozpoznawalny styl marki albo wizualizacja na własnej fotografii.
Spójny katalog produktów
Koszulka na jasnym tle, w stałej skali i z delikatnym cieniem. Każdy nowy nadruk trafia do tego samego ujęcia.
- Użyj Kompozycji 3D i przygotuj front, boki oraz tył.
- Dopracuj kadry, zanim zaczniesz pobierać kolejne projekty.
- Efekt: klient łatwiej porównuje wzory i kolory w ofercie.
Kompozycja w stylu Twojej marki
Ustaw tło w kolorze kolekcji, gradient lub własny obraz. Dopasuj światło i cień tak, aby produkt pasował do przygotowanej scenerii.
- Zapisz ustawienia jako ujęcie modelu.
- Po zmianie tła wygeneruj aktualny obraz bazowy.
- Efekt: kolejne projekty zachowują tę samą oprawę wizualną.
Własna fotografia produktu
Masz zdjęcie koszulki w wybranej aranżacji? Użyj Dopasowania na obrazie, aby dopasować model do fotografii i przygotować nakładanie kolejnych nadruków.
- Dopasuj sylwetkę, rękawy i kamerę do zdjęcia.
- Sprawdź mapowanie testowym nadrukiem i skoryguj obrysy.
- Efekt: własna fotografia staje się podstawą powtarzalnych mockupów.
Projekt klienta w koszyku
Klient zmienia grafikę, tekst lub kolor w Customizerze. Dostępne dla modelu generatory służą do przygotowania wizualizacji tego konkretnego projektu.
- Połącz projekt z produktem we wtyczce WordPress + WooCommerce.
- Obrazy powstają podczas dodawania personalizacji do koszyka.
- Efekt: miniatura przy pozycji koszyka i zamówienia przedstawia projekt klienta.
Ten sam nadruk na białej i zielonej koszulce
Na poniższych kadrach z aplikacji widać ten sam projekt z motywem owoców w dwóch kolorach produktu. Ujęcie pozostaje spójne, a mockup pokazuje połączenie nadruku z wybranym kolorem koszulki.
- Przygotuj nadruk w Designerze i wybierz kolor produktu.
- Otwórz Mockup i wybierz ujęcie przodu.
- Zmień kolor produktu, a następnie ponownie otwórz to samo ujęcie.
- Pobierz pojedyncze PNG albo paczkę wariantów, jeśli dla projektu są dostępne pasujące presety kolorów.
Przygotuj generator mockupów produktu
Mając gotowy model w Inspectorze, przejdź do trybu Mockup. Tutaj przygotowujesz wspólną kompozycję dla kolejnych grafik i wariantów produktu.
Przód, boki i tył jednym poleceniem
W panelu Mockupy projektu wybierz Utwórz automatycznie, aby przygotować cztery ujęcia: Przód, Lewy bok, Prawy bok i Tył. Możesz również dodać własne ujęcie przez Dodaj nowy, zmienić jego nazwę i kolejność. Każdy generator zachowuje własny kadr oraz ustawienia.
Kamera, tło i oświetlenie
W Kompozycji 3D ustawiasz produkt jako bazę obrazu. Dobierz kadr i warunki oświetlenia do stylu katalogu lub marki.
Dla katalogu zacznij od prostego tła i czytelnej sylwetki produktu. Kamerę ortograficzną wykorzystaj, gdy zależy Ci na spokojnej prezentacji bez perspektywicznego skrótu. Perspektywa pozwala mocniej pokazać przestrzenny kształt. Zostaw w kadrze margines na rękawy, dół produktu i cień.
Cień na podłożu pomaga osadzić produkt w kompozycji, a cień przy ścianie buduje wrażenie głębi. Ich położenie, rozmiar, krycie i miękkość dopasujesz niezależnie. Ekspozycją i krzywymi dla świateł, półtonów oraz cieni odzyskasz czytelność szczegółów. W zdjęciu katalogowym zachowaj ostrość nadruku; Bloom i głębię ostrości dobierz do bardziej wizerunkowego ujęcia.
- Dokument i model: nadaj nazwę i ustaw szerokość oraz wysokość obrazu master w zakresie 64-2048 px na krawędź.
- Kamera: wybierz perspektywę albo widok ortograficzny. Dopasuj obrót, punkt docelowy, odległość i pole widzenia lub skalę kadru.
- Oświetlenie: wybierz środowisko z biblioteki i ustaw jego obrót, intensywność oraz punkt czerni. Osobno kontroluj cień na podłożu i przy ścianie, w tym miękkość i krycie.
- Tło: użyj koloru, gradientu, tła ze środowiska lub własnego obrazu. Dopasuj sposób wypełnienia kadru, transformację i przezroczystość. To miejsce na scenerię zgodną z brandingiem produktu.
- Post-processing: tonemapping i ekspozycja, krzywe kolorów, ambient occlusion, Bloom, głębia ostrości, wyostrzenie, winieta i ziarno. Wygładzanie MSAA/FXAA pomaga dopracować krawędzie.
Dopasuj model do własnego zdjęcia
Tryb Dopasowanie na obrazie pozwala użyć własnego JPG, PNG lub WebP. Dopasuj kamerę i skalę nałożonego modelu, reguluj jego krycie oraz położenie. Dla odzieży dostępne są narzędzia kości, presety położenia rękawów i miękka deformacja z promieniem oraz siłą działania. Przygotowane dopasowanie wykorzystujesz do generowania warstw mockupu.
Dla obsługiwanej odzieży możesz przygotować automatyczny rig i dopasować kości przez przesunięcie, obrót oraz zmianę długości. Lustrzane ustawienie pomaga zachować symetrię, a presety rękawów pozwalają zacząć od pozycji źródłowej, lekko opuszczonej lub wzdłuż ciała. Miękka deformacja i miękki obrót działają lokalnie: wybierasz promień, siłę i sposób wygaszania wpływu - gładki, liniowy, sferyczny lub ostry. Podgląd siatki ułatwia ocenę kształtu.
- Wczytaj fotografię JPG, PNG lub WebP i ustaw ją jako podstawę dopasowania.
- Dopasuj kamerę, położenie, obrót i skalę modelu. Krycie nakładki pomaga porównać jego sylwetkę z produktem na zdjęciu.
- Dla odzieży skorzystaj z dostępnego rigu, ustawienia rękawów i miękkiej deformacji. Pracuj od ogólnego kształtu do lokalnych poprawek.
- Wybierz Generuj z dopasowania, a następnie przejdź do Mapowania i sprawdź krawędzie oraz nadruk testowy.
Dopracuj mapowanie i warstwy mockupu
Obraz bazowy, maska nadruku, cienie i światła współpracują ze sobą, aby grafika zachowała wygląd i kształt produktu. Ich poprawne przygotowanie pozwala ponownie używać tej samej wizualizacji.
Generowanie i kontrola warstw
W Kompozycji 3D wybierz Generuj komplet warstw, a przy dopasowaniu do zdjęcia Generuj z dopasowania. Następnie obejrzyj poszczególne warstwy i efekt na produkcie.
| Warstwa | Co kontrolujesz |
|---|---|
| Obraz bazowy | Kadr produktu, tło i wygląd sceny. Po zmianie kompozycji odśwież go przez generowanie. |
| Maska nadruku | Widoczny obszar grafiki, próg, miękkość i przesunięcie krawędzi oraz jej wygładzenie. |
| Cienie | Siłę, gamma i punkt bieli, aby nadruk zachował cieniowanie produktu. |
| Światła | Próg, siłę i gamma jasnych miejsc kompozycji. |
Sprawdź generator nadrukiem testowym
Zanim przejdziesz do docelowego projektu, otwórz narzędzie testowych nadruków. Możesz przypisać wzór osobno do dostępnych części, a przy dostępnej zmianie koloru sprawdzić również barwę całego produktu lub jego poszczególnych elementów.
Szachownica UV
Kolorowa siatka pomaga zauważyć rozciągnięcie, zmianę kierunku i nieciągłość grafiki. Przyjrzyj się zwłaszcza kołnierzowi, rękawom i bocznym krawędziom.
Placeholder „Your design here”
Znaczniki i centralna grafika ułatwiają ocenę, gdzie trafia nadruk oraz czy nie zostaje ucięty przez obrys lub maskę.
Powtarzany napis
Wzór z napisem Alter Product pomaga ocenić czytelność liter, ich proporcje i kierunek na danej części.
Kolory produktu i części
Porównaj jasny i ciemny wariant. Łatwiej wtedy zauważyć zbyt mocne cienie, przepalone światła albo jasną obwódkę przy nadruku.
Obrysy części i korekta detali
Przejdź do Mapowania, wybierz część produktu i dopasuj punkty oraz uchwyty Béziera jej obrysu. Możesz precyzyjnie skorygować kołnierz, rękaw i krawędzie, a następnie przeliczyć warstwy. Menu generowania pozwala też odtworzyć obrysy lub odświeżyć sam obraz bazowy, zachowując istniejące wektory.
Najpierw popraw geometrię obrysu, jeśli nadruk wychodzi na tło lub nie dochodzi do krawędzi. Następnie dopracuj maskę i jej miękkość. Cienie i światła reguluj na końcu, porównując rezultat na jasnym i ciemnym kolorze produktu.
Co wygenerować ponownie po zmianie?
Wybierz zakres aktualizacji, aby zachować ręczne poprawki tam, gdzie nadal są potrzebne.
| Zakres | Kiedy go użyć |
|---|---|
| Komplet warstw | Po przygotowaniu sceny lub większej zmianie kompozycji, gdy trzeba zaktualizować obraz bazowy i warstwy mockupu. |
| Warstwy z zapisanych wektorów | Po ręcznej korekcie obrysu, gdy chcesz przeliczyć efekt, zachowując dopracowane ścieżki. |
| Odtworzenie obrysów | Gdy chcesz ponownie wyznaczyć obrysy z modelu. To odtworzenie geometrii, więc wcześniej wykonane ręczne korekty mogą zostać zastąpione. |
| Sam obraz bazowy | Gdy potrzebujesz odświeżyć obraz bez nadpisywania istniejących wektorów. Po zmianach wpływających na cienie lub maskę sprawdź także odpowiednie warstwy. |
Zapisz generatory razem z projektem modelu
Po dopracowaniu ujęć zapisz projekt Product Generatora. Kolekcja generatorów należy do modelu i jego rewizji, z której korzysta Designer. W aplikacji projekt zapisujesz na serwerze, a we wtyczce WordPress jest on przechowywany lokalnie.
Po zmianie kamery, tła, światła lub dopasowania odśwież odpowiednie warstwy i sprawdź efekt przed zapisem. Pobranie PNG z Designera tworzy obraz aktualnego projektu; dalszą edycję generatora zachowuje zapis projektu modelu.
Korzystaj z mockupów w Designerze i WooCommerce
Przygotowany generator staje się częścią pracy z modelem. Podczas projektowania korzystasz z gotowych ujęć i aktualnej personalizacji.
Gotowa grafika w powtarzalnym kadrze
W Product Designerze otwórz Mockup. W oknie Generator mockupów wybierz miniaturę przodu, boku lub tyłu. Podgląd wykorzysta grafikę i kolory z bieżącego projektu. Kamerę, światło i tło przygotowujesz wcześniej w trybie Mockup generatora modeli.
Pobierz PNG lub warianty kolorystyczne
Wybierz ujęcie i Rozmiar obrazu: Thumb 256, Mały 512, Średni 1024 lub Duży 2048 px. Wartość określa dłuższą krawędź; proporcje wynikają z generatora. Pobierz obrazy zapisuje PNG aktualnie wybranego ujęcia.
- Przy co najmniej dwóch pasujących presetach opcja Generuj obrazy dla wszystkich presetów kolorów tworzy ZIP z tym samym ujęciem w wariantach kolorystycznych. Przy mniejszej liczbie pobierasz pojedynczy PNG.
- Zestaw presetów zależy od aktualnie wybranego materiału, techniki nadruku i rozmiaru. Własne kolory spoza presetów nie wchodzą do tej paczki.
- Jeśli potrzebujesz innych stron produktu, wybierz kolejne miniatury i pobierz ich obrazy.
Personalizacja widoczna w koszyku i zamówieniu
We wtyczce WordPress + WooCommerce korzystasz z lokalnego projektu i przypiętej do niego rewizji modelu. Dla produktu z dostępnymi generatorami mockupów aplikacja tworzy obrazy personalizacji podczas dodawania projektu do koszyka. Po zapisaniu plików wtyczka pokazuje je przy pozycji koszyka i zamówienia.
- Nie musisz ręcznie otwierać okna Mockup dla każdego zamówienia klienta.
- Wyniki uwzględniają projekt oraz wybrane kolory produktu. Generatory i zasoby muszą być dostępne dla używanej rewizji modelu.
- Miniatury obsługiwane są w klasycznym koszyku oraz blokach Cart/Checkout WooCommerce. Jeżeli zapisany mockup nie jest dostępny, pozostaje standardowa miniatura produktu.
- Przygotuj i zapisz generatory przy modelu używanym w projekcie.
- Udostępnij projekt w produkcie obsługiwanym przez wtyczkę WordPress + WooCommerce.
- Klient personalizuje produkt w Customizerze i dodaje projekt do koszyka.
- Aplikacja przygotowuje mockupy dostępnych ujęć dla wybranego projektu i kolorów. Po zapisaniu obrazów wtyczka używa personalizowanej miniatury przy pozycji koszyka i zamówienia.
Wizualizacja do sklepu i plik do produkcji
Mockup prezentuje wygląd produktu: gotową grafikę, jego kształt, cienie i tło. Używaj go w ofercie, katalogu albo do pokazania klientowi personalizacji.
Do produkcji przygotuj pliki obszarów nadruku w Managerze druku. Dotyczy to także projektów AOP, w których grafika pokrywa różne części produktu. Ustawienia i pobieranie plików produkcyjnych opisuje przewodnik Pliki gotowe do druku.
Sprawdź gotowy generator przed użyciem w sklepie
Sprawdź kilka różnych nadruków i kolorów produktu. Generator przygotowany na jednym prostym motywie powinien poprawnie pokazać także drobny tekst, grafikę przy krawędzi i większy nadruk AOP.
Krótki test od edycji do koszyka
Przejdź tę samą ścieżkę, z której później skorzystasz Ty lub Twój klient.
- Obejrzyj wszystkie zapisane ujęcia. Sprawdź kadrowanie produktu, cień i marginesy.
- Włącz szachownicę lub tekst testowy na częściach, które będą zadrukowane. Skontroluj obrysy, maskę i ułożenie grafiki.
- Porównaj jasny i ciemny kolor oraz docelowy nadruk w Designerze. Pobierz PNG i obejrzyj go w docelowym rozmiarze.
- Po zmianach zapisz projekt modelu. We wtyczce sprawdź projekt korzystający z właściwej rewizji modelu i wykonaj test dodania personalizacji do koszyka.
Co poprawić, gdy rezultat nie wygląda tak, jak oczekujesz?
Zacznij od etapu, który odpowiada za dany problem. Nie każda korekta wymaga ponownego ustawiania całej sceny.
| Co widzisz | Co sprawdzić |
|---|---|
| Nadruk wychodzi poza produkt albo znika przy kołnierzu | Obrys części w Mapowaniu, uchwyty Béziera i ustawienia maski nadruku. Po korekcie przelicz potrzebne warstwy. |
| Siatka lub litery są nadmiernie rozciągnięte | Dopasowanie modelu do fotografii oraz mapowanie danej części. Popraw kształt, zanim zamaskujesz problem zbyt miękką krawędzią. |
| Grafika jest za ciemna lub za mocno rozjaśniona | Ustawienia warstw cieni i świateł. Dla kompozycji 3D sprawdź również ekspozycję i oświetlenie sceny. |
| Po zmianie tła nadal widzisz stary obraz | Zaktualizuj obraz bazowy odpowiednim poleceniem generowania i zapisz projekt. Sam wybór tła zmienia scenę, ale nie zastępuje wcześniejszego wygenerowanego obrazu. |
| W paczce ZIP nie ma boków ani tyłu | Paczka wariantów dotyczy wybranego ujęcia. Wybierz następną miniaturę i pobierz obrazy dla tej strony produktu. |
| Nie ma opcji paczki wszystkich kolorów lub pobiera się jedno PNG | Sprawdź liczbę pasujących presetów dla materiału, techniki nadruku i rozmiaru. Potrzebne są co najmniej dwa. |
| Koszyk pokazuje standardowe zdjęcie produktu | Sprawdź dostępność zapisanych generatorów i ich zasobów dla rewizji modelu używanej w projekcie oraz powodzenie zapisu mockupów. |