🖼️ Generowanie grafik – jak je zautomatyzować?

Nawiązując do dzisiejszego tematu wydania, jedną z takich rzeczy, które czasami warto zautomatyzować, jest generowanie grafik do social media, czy do stron internetowych – szczególnie wtedy, gdy te grafiki są szablonowe i za każdym razem wyglądają tak samo, a zmienia się tylko ich tekstowa (i nie tylko) treść.

Nie będzie to rozwiązanie idealne dla każdego, ale jeśli zdarza Ci się tworzyć podobnie wyglądające grafiki, na bazie tych samych szablonów, to ten proces może Cię zainteresować.

Pokażę Ci dzisiaj, jak do niego podejść.

Stworzymy wspólnie przykładową automatyzację, w której po wypełnieniu prostego formularza, otrzymamy grafikę z tekstami podanymi w formularzu.

• 🧰 Zestaw narzędzi

• 🖼️ Konfiguracja szablonu

• 📝 Parametry tekstowe

• 🧽 Czyszczenie tła

• 📋 Formularz z tekstami

• 🔄 Generowanie automatyczne

• 💰 Ile to kosztuje?

• 💬 Podsumowanie

🧰 Zestaw narzędzi

Do stworzenia tej automatyzacji będzie Ci potrzebne kilka narzędzi:

1. Usługa do tworzenia formularzy online (wykorzystamy Tally.so);

2. Serwis do automatyzacji (w tym przypadku Make.com);

3. System do generowania grafik (gwiazda programu – skorzystamy z RenderForm);

Zanim zaczniemy, będziesz też potrzebować następujących informacji / zasobów:

1. Wiedza, jakie fonty są użyte na grafikach i jakie są ich parametry;

2. Przykładowa, finalna grafika z wszystkimi tekstami;

3. Grafika bez tekstów i elementów, które będą podlegać wymianie w trakcie procesu;

Jeśli masz edytowalne pliki, to otwórz program graficzny, zapisz wersję pełną, pusty podkład i pozostaw otwarty edytor, żeby móc sobie odczytywać z niego na bieżąco potrzebne parametry fontów.

🖼️ Konfiguracja szablonu

Na początek będzie nam potrzebne konto w usłudze RenderForm.

Jest to aplikacja, która pozwala przygotować szablon grafiki, a później generować jej kopie, z dostosowanymi parametrami, tekstami, czy grafikami, które się na niej znajdują.

Tak, jak mówiłem na początku, będziemy też potrzebować finalnej grafiki i pustego szablonu.

Oto przykładowe grafiki ode mnie:

Gdy już je mamy, logujemy się do naszego konta w RenderForm, przechodzimy do zakładki „My Templates” i klikamy „Create a new template”.

Z listy dostępnych formatów wybieramy ten, który nas interesuje (np. Instagram Post) i przechodzimy dalej.

Zobaczymy obszar roboczy, służący do konfiguracji naszej grafiki.

Zaczynamy od umieszczenia w nim naszej finalnej grafiki z wszystkimi tekstami.

Możemy po prostu przeciągnąć ją i upuścić na nasz obszar roboczy lub wybrać „Image” z listy dostępnych komponentów i wtedy wybrać grafikę, która powinna być do niego wczytana.

Po wgraniu naszej finalnej grafiki upewniamy się, że zajmuje ona cały obszar. Jej pozycją początkową powinno być 0 X i 0 Y, a wysokość i szerokość powinny być ustawione na pełną wysokość i szerokość grafiki (w tym przypadku 1080 w obu przypadkach).

Warto także zablokować te ustawienia, klikając “Lock” – podkład nie przesunie nam się wtedy przypadkiem.

📝 Parametry tekstowe

Teraz przechodzimy do uzupełniania tekstów.

Z listy komponentów wybieramy „Text” – po jego kliknięciu na obszar roboczy trafi nowy komponent tekstowy.

Możemy dostosowywać jego parametry, korzystając z menu po prawej stronie. Zaczynamy od wpisania mu identyfikatora (pole ID) – ta nazwa pozwoli nam później identyfikować, który parametr ma jaką wartość.

Następnie, w dużym polu tekstowym, wpisujemy dokładnie to samo, co znajduje się na naszej przykładowej grafice, a korzystając z ustawień fontu próbujemy odwzorować dokładnie ten sam styl tekstu z komponentu, względem naszej przykładowej grafiki.

Wygląd tekstu skonfigurujemy, używając parametrów:

• Font – font, którego używamy;

• Font Weight – grubość fontu;

• Font Size – wielkość fontu (wyłącz Dynamic Font Size Scaling, aby ją edytować);

• Line Height – wysokość linii;

• Kerning – odstęp pomiędzy literami;

• Fill – kolor tekstu;

Dążymy do tego, aby tekst na naszym komponencie wyglądał dokładnie tak samo, jak tekst na finalnej grafice w tle.

Wykonujemy te same kroki dla każdego kolejnego tekstu, który chcemy umieszczać na naszej grafice, a finalnie przenosimy je tak, aby zakrywały swoje odpowiedniki będące w tle.

U mnie wygląda to w taki sposób, jak poniżej. Widać, że niektóre literki lekko odstają, ale nie są to znaczące różnice.

🧽 Czyszczenie tła

Teraz dodajemy do naszego obszaru roboczego pusty podkład – przygotowaną wcześniej grafikę, bez tekstów. Ustawiamy jej też pozycję 0, 0 i odpowiednią wysokość i szerokość tak, aby zasłoniła ona wszystko, co znajduje się w naszym obszarze roboczym.

Korzystając ze strzałki przesuwamy go pod teksty, a nad bazową grafikę.

Teraz, gdy zapiszemy szablon i klikniemy „Preview” -> „Live preview”, będziemy mogli edytować wszystkie parametry w prostym edytorze, a finalnie – wygenerować grafikę.

To jest nasz punkt wyjścia do automatyzacji tego procesu.

📋 Formularz z tekstami

Zanim zaczniemy generować grafiki, potrzebujemy jeszcze formularza, w którym umieścimy odpowiednie pola. Wykonamy go w Tally.so – jeśli nie masz jeszcze konta w tej usłudze, to możesz je teraz założyć.

Po założeniu konta w Tally, tworzymy nowy formularz i umieszczamy w nim pola tekstowe, odpowiadające naszym potrzebom. U mnie będą to dwa małe i jedno duże.

Gdy mamy gotowy formularz, możemy połączyć oba systemy w całość, z pomocą narzędzia do automatyzacji.

🔄 Generowanie automatyczne

Do automatyzacji generowania wykorzystamy Make.com.

Logujemy się więc do Make i tworzymy w nim nowy scenariusz.

Jako pierwszą akcję wybieramy Tally i dalej Watch new responses. Konfigurujemy połączenie z usługą i podłączamy nasz formularz.

Następnie do naszego scenariusza dodajemy moduł RenderForm -> Render an Image, w którym podłączamy moduł do RenderForm (klucz API znajdziesz w ustawieniach swojego konta RenderForm) i łączymy wartości z formularza, ze zmiennymi użytymi w szablonie.

Zanim jednak zaczniesz to robić, wróć do RenderForm i kliknij przycisk „Preview”, w lewym, górnym rogu. Przejdź do zakładki „Live Preview”. Zobaczysz tam swój szablon i listę parametrów, które możesz w nim ustawić.

Dodajemy więc parametry, które będziemy chcieli ustawiać i kolejno wpisujemy nazwę parametru, a w części z wartością wybieramy zmienną z formularza.

I to już prawie wszystko! Musimy jeszcze tylko coś zrobić z plikiem, który będzie się generował.

W kolejnym kroku dodajemy więc moduł „HTTP” -> „Get a file”, w którym przekazujemy adres URL do wygenerowanej grafiki.

Na końcu umieszczamy moduł „Dropbox” -> „Upload a file”.

Finalnie nasz proces powinien wyglądać następująco:

Gdy go aktywujemy, to po każdym wypełnieniu formularza, wygenerowana grafika trafi do wybranego folderu na Dropbox.

Taki folder możesz mieć pod ręką na swoim komputerze, jeśli skorzystasz z szybkiej porady, o której mówiłem w poprzednim wydaniu (znajdziesz ją tutaj: 🍁 Gdzie Cię prowadzi Twoje cyfrowe życie?).

💰 Ile to kosztuje?

Na koniec bardzo ważna informacja – ile zapłacisz za to wszystko?

Z RenderForm wygenerujesz za darmo do 50 grafik. Powyżej tej wartości masz dwie możliwości – możesz z góry wykupić „kredyty” (1 grafika to 1 kredyt) lub zdecydować się na subskrypcję.

Decydując się na płatność z góry, przy 500 kredytach zapłacimy $19 (netto), co daje około 0.15 PLN za jedną grafikę.

💬 Podsumowanie

Wiesz już, w jaki sposób można skonfigurować proces automatycznego generowania grafik.

W naszym przykładzie zrobiliśmy to na podstawie formularza w Tally, ale nic nie stoi na przeszkodzie, aby wykorzystać ten sposób do bardziej automatycznej pracy z obu stron procesu:

• Automatyzacja może się wykonywać w odpowiedzi na inne zdarzenia, jak np. dodanie nowego wpisu na blogu;

• Efekt wcale nie musi trafiać do folderu w chmurze, tylko może być np. publikowany w sieciach społecznościowych;

Możliwości tutaj jest bardzo dużo, a taka automatyzacja może przydać się:

1. Biurom podróży, które chcą wygenerować serię grafik na temat oferowanych wyjazdów;

2. Twórcom online, do generowania szablonowych grafik promujących nowe filmy, czy wpisy na blogu;

3. Agencjom marketingowym, do generowania grafik do wykorzystania w kampaniach reklamowych, z różnymi tekstami;

4. Fotografom i grafikom, do automatycznego nakładania znaku wodnego;

5. I w wielu innych zastosowaniach;

Jeśli masz w swoich procesach krok polegający na generowaniu schematycznych grafik, to zastanów się, czy nie chcesz go zautomatyzować w ten sposób. Możesz też policzyć, ile czasu zajmie Ci konfiguracja tego procesu i sprawdzić, czy będzie to opłacalne – korzystając z tabeli, którą się z Tobą podzieliłem w tym wydaniu.