Studio plakatów SVG. Zaprojektuj wydarzenie w trzech stylach

Jak wygląda wasz wieczór?

Wpiszcie nazwę wydarzenia i przełączcie kolejno Orbitę, Siatkę oraz Scenę. Duży napis na ciemnym tle, prostokątny rytm, a może koło z trójkątem i szeryfowe litery? Treść zostaje ta sama, ale każdy układ zapowiada trochę inny wieczór. Do tego dorzucamy trzy palety i przycisk „Inny wariant”, który przestawia kompozycję w wybranym stylu.

To nasze małe studio plakatów. Przykładowa „Noc dobrych dźwięków” jest fikcyjna; możecie podmienić nazwę, datę i miejsce, a gotowy projekt pobrać jako SVG. W edytorze obsługującym ten format dalej poprawicie tekst i figury. Koła, linie i prostokąty rysuje tutaj kod. Samo klikanie wariantów nie wywołuje modelu generującego obrazy — AI możecie za to zlecić budowę podobnego narzędzia z promptem poniżej.

Trzy kompozycje, trzy punkty zaczepienia

W Orbicie pod dużym tytułem mamy dysk przecięty elipsą i ciemne tło. Siatka jest jasna, z wyraźnymi podziałami i prostokątnymi modułami przypominającymi rytm dźwięku. Scena łączy koło, trójkąt i pionowe kreski, a w nagłówku używa kroju szeryfowego. W każdej inaczej rozłożyliśmy akcenty, więc przełączenie stylu zmienia więcej niż kolor.

Porównujcie je z tym samym tytułem. Zobaczcie, jakie wrażenie robi ciężkie pismo bezszeryfowe, a jakie kursywa. Dopiero potem zmieńcie paletę: fiolet z limonką, kobalt z koralem albo wino z różem. Przy jednej zmianie naraz łatwiej wychwycić, co pasuje do waszego wydarzenia.

Co wpisujemy w zleceniu dla AI

„Zrób generator plakatów” to mało informacji o projekcie, który chcecie dostać. Dlatego w naszym poleceniu są proporcje, trzy kierunki graficzne, edytowalne pola i sposób pobierania. Po otwarciu wyniku możecie od razu ocenić, czy kompozycje różnią się od siebie i czy eksport zachowuje to, co widzicie.

Obszar naszego plakatu ma 480 × 600. Nazwa wydarzenia może liczyć do 42 znaków, data do 32, a miejsce do 48. Długi tytuł dzielimy na najwyżej trzy wiersze, a tekst niemieszczący się w swoim obszarze dopasowujemy do szerokości. Przy krótszej nazwie zostaje jednak więcej miejsca na sam projekt. Jeśli plakat zaczyna przypominać drobny druk, warto skrócić tytuł.

Zbuduj pojedynczy plik HTML: interaktywne studio plakatu fikcyjnego wydarzenia muzyczno-projektowego. Całość ma działać offline, bez bibliotek, zewnętrznych obrazów i fontów z sieci. Podgląd to prawdziwy SVG 480 × 600, z tekstem zachowanym jako edytowalne elementy text. Dodaj pola: nazwa wydarzenia (42 znaki), data i godzina (32), miejsce (48). Przygotuj trzy wyraźnie różne kompozycje: Orbita — ciemne tło, duży bezszeryfowy tytuł i dysk z elipsą; Siatka — jasne tło, typografia, linie podziału i rytmiczne moduły; Scena — koło, trójkąt, pionowe linie i tytuł szeryfową kursywą. Trzy palety: fiolet/limonka, kobalt/koral, wino/róż. Dodaj przycisk zmiany wariantu z deterministycznym seedem; tekst ma zostać bez zmian. Zawijaj tytuł do maksymalnie trzech wierszy i dopasuj długie linie do obszaru tekstu. Fonty: Arial/Helvetica/sans-serif oraz Georgia/Times New Roman/serif. Przycisk Pobierz SVG ma zapisać aktualny tekst, paletę i wariant. Twórz SVG przez createElementNS i textContent, bez wstawiania danych użytkownika do innerHTML. Puste wymagane pola blokują eksport i pokazują komunikat. Kontrolki po lewej, cały plakat po prawej; na telefonie od 320 px ułóż je pionowo. Dodaj etykiety, widoczny focus, opis SVG oraz jasny i ciemny motyw otoczenia. Zaznacz, że figury rysuje kod i wydarzenie jest fikcyjne.

Dajcie szablonowi trudniejszą nazwę

Po krótkim tytule wpiszcie długi, z polskimi znakami. Obejrzyjcie wszystkie trzy style: czy nazwa nie nachodzi na datę, miejsce da się przeczytać, a figury nie znikają poza obszarem? Potem wyczyśćcie jedno pole. Nasze demo powinno wskazać brak, zablokować pobranie i zostawić ostatni kompletny podgląd.

Tekst w pliku pozostaje tekstem SVG. Nie pobieramy fontów ani nie zamieniamy liter w krzywe. Ułatwia to późniejszą edycję i pozwala zachować mały plik. Jest też konsekwencja: na innym komputerze może włączyć się krój zastępczy, a plakat będzie wyglądał nieco inaczej. Otwórzcie więc SVG w programie, w którym zamierzacie kończyć projekt.

Plakat do edycji, studio do dalszych pomysłów

„Pobierz SVG” zapisuje bieżącą nazwę, datę, miejsce, paletę i wariant. Otwórzcie ten plik w przeglądarce lub edytorze grafiki wektorowej i porównajcie z podglądem, zwłaszcza po wpisaniu długiego tytułu. To materiał do dalszej pracy. Jeśli planujecie druk, trzeba jeszcze dopasować projekt do wymagań konkretnej drukarni.

Pobranie HTML zapisuje całe studio, które uruchomicie bez internetu. Startuje ono jednak od ustawień początkowych i nie pamięta wpisów między otwarciami. Własny plakat zachowajcie najpierw jako SVG. A jeśli chcecie rozwijać narzędzie, zaprojektujcie jeden kolejny układ z własnymi zasadami rozmieszczania tekstu i figur.

W kodzie za eksport odpowiada XMLSerializer: zamienia aktualny SVG na tekst, z którego przygotowujemy plik do pobrania. Niżej podlinkowaliśmy dokumentację tego mechanizmu i tekstu w SVG. Przyda się, gdy będziecie zmieniać łamanie tytułu albo sam eksport.