Newsletter na Autopilocie: Planowanie szablonów grafik

0:00W tej lekcji pokażę Ci kilka sposobów na

0:02przygotowanie automatyzacji odpowiedzialnej za generowanie grafik.

0:06W moim przypadku przygotowałem sobie

0:07szablony, które będę wykorzystywał właśnie na potrzeby automatyzacji.

0:12I w tym momencie krótko chciałbym je omówić.

0:14Mianowicie jak widać mamy tutaj trzy rozmiary, a każda z kreacji jest

0:18praktycznie taka sama i różni się delikatnie układem i rozmiarem fontów.

0:23Na każdej z nich znajdują się statyczne elementy, takie jak np.

0:26logotyp oraz elementy dynamiczne, takie jak np.

0:30teksty, które mogą być pobierane z Airtabel,

0:33a następnie wstrzykiwane do takich szablonów.

0:35Na podstawie takiego szablonu może być

0:37wygenerowana grafika, która docelowo trafi na moje media społecznościowe.

0:42Zobaczmy więc, jak możemy to zrobić wykorzystując automatyzację.

0:47Zanim pokażę Ci sposoby na pełną automatyzację generowania grafik,

0:51warto zaznaczyć, że niektóre programy graficzne, takie jak np.

0:54Figma, oferują tzw.

0:56komponenty.

0:57W praktyce polega to na tym, że w każdym miejscu, w którym występuje dany

1:01komponent, zmiany, które wprowadzamy na oryginale będą odzwierciedlone.

1:06Przykładowo, jeżeli teraz przesuwam tą grafikę, przesuwa się na praktycznie

1:10wszystkich kreacjach, na których znajduje się mój komponent.

1:13Jednocześnie jeżeli coś mi nie pasuje, mogę po prostu zwrócić uwagę na jeden

1:18szablon i wprowadzić w nim jakieś dedykowane zmiany.

1:23Takie wykorzystanie komponentów jest na

1:24tyle przydatne, że sam korzystam z niego praktycznie na każdym kroku.

1:28Jest to świetna technika optymalizacji

1:31pracy dotyczącej właśnie generowania wielu różnych rozmiarów tej samej grafiki.

1:35Ale jednocześnie tak jak powiedziałem, nie

1:38mówimy tutaj o pełnej automatyzacji, którą zapewniają narzędzia takie jak np.

1:42Bannerbear.

1:44W dodatku produkty takie jak Bannerbear

1:46umożliwiają po pierwsze dostęp przez API, a po drugie udostępniają prosty edytor

1:51graficzny, z pomocą którego możemy dosłownie wyklikać szablon, a następnie

1:56tylko przesyłać do niego dane i pobierać grafiki.

1:59Szczerze mówiąc Bannerbear bardzo mi się podobał, jednak jest pewna koncepcja

2:03reprezentowana przez narzędzie html css to Image, która jest zdecydowanie bardziej

2:08elastyczna niż wyklikiwanie szablonu z poziomu interfejsu.

2:12Co prawda trzeba przyznać, że jest ona zdecydowanie bardziej zaawansowana,

2:16ponieważ wymaga od nas zakodowania szablonu z pomocą HTML i CSS.

2:21Efekt końcowy jest tutaj jednak taki, że mamy praktycznie pełną kontrolę nad

2:25zachowaniem szablonu oraz wyglądem poszczególnych elementów.

2:29Mi osobiście ta koncepcja spodobała się na tyle, że utworzyłem własny serwis o nazwie

2:34EasyBanner, który robi dokładnie to, o czym powiedziałem przed chwilą.

2:39Czyli potrafi przyjmować kod HTML i CSS, a następnie zamieniać go na obrazki.

2:44To właśnie ten moduł wykorzystamy w naszej automatyzacji.

2:47Natomiast aktualnie EasyBanner jest dostępny wyłącznie na moje potrzeby.

2:52W związku z tym do czasu jego publikacji możesz skorzystać z narzędzia HTML CSS to

2:57Image, który również posiada natywny moduł w Make i sposób pracy z nimi jest

3:02dokładnie taki sam jak w przypadku EasyBanner.

3:04Niewykluczone też, że w momencie, gdy będziesz oglądać ten materiał EasyBanner

3:09będzie już dostępny i po prostu będzie można go wykorzystać.

3:12Samym utworzeniem scenariusza zajmiemy się jednak w kolejnej lekcji.

3:16W tym momencie chciałbym jeszcze tylko zwrócić uwagę na strukturę tych szablonów.

3:21Otóż jak nietrudno zauważyć, jest ona

3:23naprawdę prosta oraz dodatkowo treści dynamicznych pól przechowujemy w Airtabel.

3:28Mamy tutaj numer wydania, tytuł wydania oraz podsumowanie w punktach.

3:33Dokładnie te wartości będziemy wstrzykiwać do naszych szablonów

3:37i jedyne o czym musimy się upewnić na etapie ich projektowania,

3:41to to, aby były w stanie dostosować się do zmieniających tutaj treści.

3:45Jednocześnie musimy narzucić na siebie pewne ograniczenia.

3:48Przykładowo, jeżeli chodzi o podsumowanie newslettera, nie powinniśmy w moim

3:52przypadku, umieszczać tutaj więcej niż czterech punktów.

3:55Jednocześnie powinny być one możliwie krótkie.

3:58Podobnie zresztą jest z tytułem.

4:01Nie może być to raczej jedno słowo ale

4:03jednocześnie też tytuł nie może być zbyt długi.

4:06Mam nadzieję, że ta koncepcja jest tutaj zrozumiała.

4:09Oczywiście też nic nie stoi na przeszkodzie, aby podmieniać nie tylko

4:13teksty, ale również grafiki znajdujące się w naszym szablonie.

4:16Praktycznie niezależnie od tego, czy będziemy wykorzystywać EasyBanner czy Bannerbear,

4:21będziemy mogli skorzystać z takich modyfikacji.

4:24Tymczasem jeżeli chodzi o takie wstępne

4:26planowanie szablonu, to byłoby już na tyle.

4:29W związku z tym dzięki za uwagę i do usłyszenia w kolejnej lekcji.