O czym jest ten film
- Jack Roberts pokazuje siedem zastosowań Opus 5.5 w projektowaniu grafiki i animacji. Według niego model jest tańszy i szybszy od wersji 5.1, zachowując porównywalną jakość.
- Pierwszy przykład to animowany slajd, który odtwarza się w pętli.
- Autor pobiera kolory i inne elementy identyfikacji marki ze strony za pomocą Firecrawl, a następnie wykorzystuje je przy tworzeniu animacji na stronie.
- Model przygotowuje także krótką prezentację produktu oraz oprawę graficzną nagrania, w którym autor mówi do kamery.
- Jedną kompozycję można dostosować do różnych proporcji ekranu i formatów publikacji.
- Kolejny przykład obejmuje krótkie animacje znaków firmowych, niekiedy z dodaną oprawą dźwiękową.
- Obraz referencyjny pomaga nadać nowej grafice pożądany styl, choć wyniki wymagają oceny i czasem poprawek.
- Roberts pokazuje serię animacji przygotowaną dla stu marek. Uważa, że największą korzyść daje włączenie takiego procesu do stałego sposobu pracy.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Zacznij od animacji odtwarzanej w pętli
Na czym polega: Opus 5.5 może przygotować krótki ruchomy slajd na podstawie opisu pomysłu, zamiast tworzyć wyłącznie statyczną grafikę.
Jak stosować: Określ, co ma się poruszać, ile ma trwać animacja i gdzie zostanie pokazana. Zacznij od pojedynczego slajdu lub planszy.
Na co uważać: Obejrzyj kilka pełnych powtórzeń. Początek i koniec pętli powinny do siebie pasować, a ruch nie może utrudniać czytania.
2.Podaj modelowi rzeczywiste materiały marki
Na czym polega: Autor używa Firecrawl do pobrania ze strony kolorów, logo i innych wskazówek dotyczących wyglądu marki.
Jak stosować: Przed zleceniem projektu zbierz adres strony, znak firmowy i podstawowe zasady identyfikacji wizualnej. Dołącz je do opisu zadania.
Na co uważać: Sprawdź, czy pobrane dane są aktualne. Samo dopasowanie kolorów nie wystarczy, by projekt był zgodny z zasadami marki.
3.Wykorzystaj ruch tam, gdzie pomaga zrozumieć produkt
Na czym polega: W przykładzie ze stroną Glidera animacja przedstawia przemianę mowy w tekst. Ruch pokazuje więc działanie usługi.
Jak stosować: Wybierz jedną czynność wykonywaną przez produkt i przełóż ją na prostą sekwencję wizualną, na przykład od wypowiedzianych słów do gotowej transkrypcji.
Na co uważać: Efektowna animacja nie powinna odwracać uwagi od treści strony ani sugerować funkcji, których produkt nie ma.
4.Przygotuj krótką demonstrację produktu
Na czym polega: Roberts pokazuje filmową prezentację swojej usługi, wygenerowaną na podstawie zwięzłego polecenia. W przykładzie pojawił się również krótki motyw dźwiękowy.
Jak stosować: Opisz odbiorcę, najważniejszą funkcję i przebieg demonstracji. Potraktuj pierwszą wersję jako materiał do oceny.
Na co uważać: Sprawdź, czy pokazane działanie odpowiada rzeczywistemu produktowi oraz czy dźwięk pasuje do miejsca publikacji.
5.Łącz nagranie mówiącej osoby z grafiką objaśniającą
Na czym polega: Model może podzielić nagranie na ujęcia i dodać do wypowiedzi animowane plansze, napisy oraz elementy graficzne.
Jak stosować: Przygotuj krótkie nagranie i wskaż, które wypowiedzi wymagają ilustracji. Osobno określ układ, wielkość napisów i styl czcionek.
Na co uważać: Autor sam zauważa, że jeden z wyników był zbyt zatłoczony, a krój pisma wyglądał typowo dla projektów generowanych przez Claude. Przejrzyj każdą planszę na ekranie telefonu.
6.Projektuj z myślą o kilku formatach
Na czym polega: Tę samą koncepcję graficzną można przygotować w rozmiarach odpowiednich dla różnych serwisów i rodzajów publikacji.
Jak stosować: Zleć wersje pionowe i poziome, a następnie sprawdź układ tekstu i głównych elementów w każdej z nich.
Na co uważać: Zmiana proporcji wymaga ponownego ułożenia kompozycji. Nie zakładaj, że automatycznie dopasowana wersja zachowa czytelność oryginału.
7.Dodaj ruch do znaku firmowego
Na czym polega: Krótka animacja logo może otwierać prezentację, pojawiać się na stronie lub towarzyszyć materiałom wideo.
Jak stosować: Dostarcz poprawny znak i określ czas trwania. Roberts testuje między innymi trzysekundowe animacje przygotowane dla kilku rozpoznawalnych marek.
Na co uważać: Obejrzyj efekt w małym rozmiarze. Znak musi pozostać rozpoznawalny, a sposób jego użycia powinien odpowiadać zasadom danej marki.
8.Korzystaj z przykładów stylu, ale oceniaj wynik
Na czym polega: Model potrafi przygotować nową grafikę po otrzymaniu obrazu referencyjnego. W pokazanych próbach częściowo zachował układ, kolory i charakter typografii.
Jak stosować: Wskaż konkretnie, co ma inspirować nowy projekt: paleta, kompozycja, faktura albo sposób animacji.
Na co uważać: Nie każdy przykład wyszedł równie dobrze. Roberts sugeruje dodatkowe polecenia lub inne narzędzie, gdy potrzebne są szczegółowe efekty obrazu.
9.Skaluj dopiero sprawdzony projekt
Na czym polega: Po ustaleniu wzoru można pobrać dane wielu marek i przygotować całą serię dopasowanych animacji.
Jak stosować: Najpierw dopracuj jeden przykład. Dopiero potem zastosuj ten sam proces do większej listy stron i logo.
Na co uważać: Przy dużej serii sprawdzaj wyniki pojedynczo. Kolor, położenie znaku i wolna przestrzeń wokół niego mogą wymagać korekty dla każdej marki.
10.Zachowaj styl i instrukcje do ponownego użycia
Na czym polega: Roberts łączy wzory, polecenia i narzędzia w swoim systemie pracy, aby szybciej zamawiać kolejne projekty.
Jak stosować: Zapisuj udane opisy zadań, zatwierdzone style i poprawki. Dzięki temu następny materiał może powstać według sprawdzonych zasad.
Na co uważać: Automatyzacja powiela również błędy. Przed użyciem szablonu na dużą skalę sprawdź typografię, zgodność z marką i działanie animacji.
Redakcyjne tłumaczenie
Co zmieniło się w projektowaniu z Opus 5.5
Claude z modelem Opus 5.5 potrafi teraz przygotowywać grafiki, animacje i projekty, których wcześniej nie udawało mi się w ten sposób uzyskać. Pokażę siedem zastosowań. Spędziłem na próbach wiele godzin i wykorzystałem kredyty o wartości kilkuset dolarów. Udostępniam też opisy poleceń, na których pracowałem.
Według podawanych przeze mnie danych Opus 5.5 jest o 40 proc. tańszy i o 30 proc. szybszy od wcześniejszej wersji 5.1, przy porównywalnej jakości wyników. Najciekawsza jest jednak możliwość tworzenia bardziej dopracowanych projektów graficznych.
Wszystkie przykłady, które zaraz pokażę, powstały po jednym poleceniu. Nie wracałem do modelu z kolejną rundą poprawek. Nie znaczy to, że każdy wynik jest gotowy do publikacji: przy niektórych sam wskazałbym rzeczy do zmiany.
1.Animowane slajdy
Zacznijmy od slajdu odtwarzanego w pętli. Zamiast nieruchomej planszy możemy przygotować grafikę, w której elementy się poruszają. Wystarczy opisać Claude’owi pomysł i poprosić o animację trwającą, na przykład, pięć, dziesięć albo dwadzieścia sekund.
W mojej próbie model przygotował cały slajd. Poszedł nawet krok dalej: umieścił animowaną planszę w widoku przypominającym PowerPoint. Taki projekt można zlecić w wybranych kolorach marki.
W opisie filmu zamieszczam polecenia użyte przy poszczególnych przykładach. Zebrałem je w autorski schemat RISE, który pomaga mi dokładniej opisać oczekiwany efekt i ograniczyć liczbę nieudanych prób.
2.Ruchome elementy strony internetowej
Najciekawiej robi się wtedy, gdy model ma pracować z istniejącą marką. Korzystam w tym celu z Firecrawl: podaję adres strony i pobieram z niej potrzebne informacje. W przykładzie używam strony Glidera, mojego narzędzia do zamiany mowy na tekst.
W Firecrawl wybieram pobranie danych o identyfikacji wizualnej zamiast zwykłego tekstu strony. Narzędzie zbiera między innymi kolory i inne elementy, do których projekt może się odwoływać. Następnie zapewniam Claude’owi dostęp do tych danych przez Firecrawl i opisuję, co chcę zbudować.
Poprosiłem o dwa elementy: animację u góry strony oraz ruchomą grafikę w jej dolnej części. W pierwszej model sam wymyślił niebieską postać. Wypowiadane przez nią słowa przybierają postać małych ptaków, które następnie zmieniają się w tekst. To wizualny sposób pokazania działania produktu. Animacja odtwarza się w pętli.
W dolnej części strony powstał drugi ruchomy element, z którym można wejść w interakcję. Jego zachowanie dałoby się jeszcze dopracować, ale oba projekty powstały po jednym poleceniu. Model skorzystał z wyglądu istniejącej strony i rozwinął go w nowym kierunku. Pierwszy wynik spodobał mi się na tyle, że zaproponowałem zespołowi, by przyjrzeć mu się bliżej.
Podobny proces można wykorzystać do demonstracji produktu. Poprosiłem o krótką prezentację Glidera i otrzymałem animację pokazującą usługę; model dodał nawet motyw dźwiękowy. Także tutaj nie było drugiej rundy poleceń.
W swoim systemie pracy przechowuję takie projekty i przykłady stylów. Mogę wybrać wzór, opisać pomysł oraz czas trwania animacji, a system przygotowuje polecenie do dalszej pracy w narzędziu programistycznym. Udostępniam również materiały szkoleniowe i odsyłam do nich w opisie filmu.
3.Oprawa graficzna nagrań do mediów społecznościowych
Coraz więcej uwagi poświęcam materiałom na Instagram. Częsty układ takiego nagrania jest prosty: osoba mówiąca znajduje się na dole kadru, a u góry pojawiają się napisy, logo i grafiki objaśniające wypowiedź.
Teraz mogę nagrać siebie, a następnie poprosić Opus 5.5, by przygotował ruchome ilustracje do kolejnych fragmentów wypowiedzi. W jednej z prób podałem tekst o tym, że model jest o 40 proc. tańszy. W innych sprawdziłem odmienne sposoby przedstawienia tego, o czym mówię. Model potrafił też dodać napisy.
Pokazane przykłady mają różny układ i różne animacje. Nie każdy bym zachował. Jeden jest zbyt zatłoczony, a zastosowaną czcionkę również bym zmienił — wygląda jak częsty wybór w projektach tworzonych przez Claude. Mimo to z pojedynczego nagrania otrzymałem kilka kierunków, które mogę dalej rozwijać. Model podzielił materiał na ujęcia i dopasował do nich elementy graficzne.
Ponieważ projekty powstają z kodu, można włączyć do nich także widok strony lub demonstrację usługi. Gdybym mówił o konkretnych firmach, mógłbym pobierać z ich witryn informacje o wyglądzie marki przez Firecrawl, a potem wykorzystywać je w materiałach na Instagram, TikTok czy YouTube Shorts. Widz od razu zobaczyłby, o jakim produkcie mowa.
4.Jedna koncepcja w różnych proporcjach
Materiały ogląda się na ekranach o różnych kształtach. Dlatego sprawdziłem, czy tę samą animowaną grafikę da się przygotować w kilku formatach.
W przykładzie wykorzystałem motyw balonu i hasło o kawie. Model opracował wersje o innych proporcjach, w tym pionową do krótkich nagrań. Pomysł i charakter grafiki pozostały te same, choć układ został dopasowany do nowego kadru.
Można połączyć taki proces z systemem, który zbiera materiały do publikacji na kilku platformach. Wtedy najpierw przygotowujemy projekt i jego odmiany, a później kierujemy je do odpowiednich kanałów. Zastosowanie jest proste: zamiast budować każdą wersję od początku, prosimy model o dostosowanie gotowej koncepcji do potrzebnego formatu.
5.Krótkie animacje logo
Przy mojej poprzedniej firmie zapłaciłem projektantowi za animowaną prezentację działalności. Zatrudniłem również lektora i poznałem zagadnienia związane z licencjonowaniem głosu. Dużo czasu poświęciłem wtedy na zaplanowanie kolejnych scen. Lubię ten rodzaj pracy i od dawna chciałem mieć również efektowną animację własnego logo.
Sprawdziłem więc, co Opus 5.5 zrobi z gotowymi znakami. W poleceniu można poprosić model, by pobrał przez Firecrawl informacje o marce i jej logo, a następnie przygotował krótką animację. W mojej próbie określiłem czas na trzy sekundy, ale nie podałem szczegółowej instrukcji, jak znak ma się poruszać.
Powstały przykłady dla Notion, Duolingo, Spotify i Nike. Każdy wygląda inaczej. Znak Duolingo podskakuje, a w animacji Nike pojawia się charakterystyczny symbol marki. W niektórych przykładach model dodał również krótką oprawę dźwiękową.
Taką animację można wykorzystać na początku prezentacji dla klienta albo przy omawianiu jego marki. Sam lubię, gdy prezentacja nawiązuje do mojego logo: widzę wtedy, że ktoś poświęcił uwagę firmie, dla której pracuje.
6.Projektowanie na podstawie obrazu referencyjnego
Modelowi można też pokazać grafikę, której styl nam się podoba, i poprosić o przygotowanie nowego projektu. Inspiracji szukam w serwisach z pracami projektantów; dostępne są zarówno płatne zbiory, jak i bezpłatne źródła, choćby Pinterest.
Przetestowałem kilka obrazów. W pierwszym przykładzie porównałem grafikę referencyjną z wynikiem przygotowanym przez model. Szczególnie spodobała mi się spójność typografii. Czcionka bywa jednym z elementów, po których szybko rozpoznaję projekt wygenerowany przez AI, dlatego zwracam na nią uwagę.
Druga próba była słabsza. Model uchwycił część pomysłu, lecz nie oddał w pełni charakteru obrazu. Poprawiłbym wynik kolejnym poleceniem, na przykład prosząc o efekt starej taśmy filmowej. Można też sięgnąć po narzędzie do generowania obrazu lub wideo, jeśli taki szczegół jest istotny.
W trzecim przykładzie model rozpoznał układ przypominający tabelę oraz połączenie czerwieni, żółci i zieleni. To dobry punkt wyjścia, choć do bardzo dokładnego odwzorowania potrzebowałbym dalszej pracy. Wszystkie te próby celowo wykonałem po jednym poleceniu, żeby zobaczyć, jak blisko oczekiwanego efektu model potrafi dojść od razu.
Mam też własne repozytorium służące do wychwytywania typowych cech treści tworzonych przez AI. Korzystam z niego przy ocenie tekstów i stron, również pod kątem materiałów sprzedażowych oraz marketingowych. Odsyłacz do niego zamieszczam w opisie filmu.
7.Tworzenie całej serii projektów
Gdy jeden projekt się sprawdzi, można zastosować ten sam sposób pracy do większej liczby marek. Firecrawl pobiera dane ze stron, a Opus 5.5 wykorzystuje je do przygotowania animacji. W mojej próbie Firecrawl odczytał 106 witryn w cztery minuty i osiem sekund. Z moich obserwacji wynika też, że pobieranie potrzebnych danych w ten sposób potrafi wyraźnie ograniczyć liczbę tokenów zużywanych później w pracy z modelem; w niektórych zadaniach oszczędność przekraczała 80 proc.
Można więc podać listę firm i poprosić o pobranie ich znaków oraz informacji o identyfikacji wizualnej. Ja przygotowałem w ten sposób serię obejmującą sto stron, między innymi OpenAI, Anthropic, Cursor, Monzo, Wise, Revolut i Stripe.
Każda animacja ma nieco inny kolor, zaczerpnięty z wyglądu danej marki. Model poradził sobie również z rozmieszczeniem znaków, zachowaniem wolnej przestrzeni wokół nich i dopasowaniem różnych logo do wspólnego układu. Taką serię można później wykorzystać w krótkich filmach, prezentacjach lub innych materiałach graficznych.
Ostatnim krokiem jest włączenie tego procesu do codziennej pracy. W swoim systemie przechowuję style i łączę narzędzia, których używam do opisywania pomysłów, pobierania danych oraz budowania projektów. Dzięki temu mogę wpisać albo podyktować kilka zdań i rozpocząć przygotowanie kolejnej animacji według wcześniej ustalonych zasad.
Moim zdaniem możliwości są duże, ale same w sobie nie rozwiążą problemu projektowego. Trzeba jeszcze wiedzieć, gdzie ruchoma grafika rzeczywiście przyda się na stronie, w prezentacji albo w materiale wideo. Dopiero wtedy warto powtarzać sprawdzony pomysł na większą skalę.