Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

Szkolenia, certyfikaty, tutoriale i nowosci ze swiata Adobe

Artykuł pochodzi z magazynu PSD

Jeśli zdarzyło ci się przygotować kilkanaście czy nawet kilkadziesiąt banerów reklamowych na podstawie jednego projektu graficznego z pewnością dobrze wiesz jak nudna to i niewdzięczna praca. Mimo że, wprowadzanie jedynie drobnych zmian w tekstach reklamowych czy datach nie jest być może wielce skomplikowanym działaniem, jest jednak niezwykle monotonne i zwykle zabiera wiele cennego czasu.

01

Możemy to jednak łatwo i szybko zmienić. Dzięki użyciu Photoshopa jesteśmy w stanie szybko i całkowicie automatycznie przygotować setki grafik czy właśnie banerów internetowych opartych o jeden projekt graficzny, używając w tym celu zewnętrznych zmiennych. Zapisane w pliku tekstowym dane można łatwo edytować za pomocą najprostszych edytorów tekstu np. Notatnika, a proces ich przygotowania i użycia w praktyce nie jest szczególnie trudny.

Założenia ogólne – kampania reklamowa

Wyobraźmy sobie następującą sytuację. Przygotowujemy właśnie ogólnopolską kampanię reklamową  dla ciekawego wydarzenia sportowego, które odbywać się będzie w wielu miastach Polski. Naturalnie w tej sytuacji, konieczne będzie przygotowanie banerów informacyjnych wraz z datą oraz lokalizacją imprezy dla każdego miasta osobno. Oczywiście pomimo tworzenia osobnych reklam, wykorzystamy tu jeden wspólny projekt graficzny oraz dane tekstowe zapisane w zewnętrznym pliku.

Podczas projektowania reklamy ważne jest aby przygotować dobrą strukturę całego projektu. Kolejne miasta oraz daty prezentowane będą zawsze w tym samym miejscu, musimy więc przygotować odpowiednio dużo miejsca na wprowadzanie nawet najdłuższych nazw miast a także dat. W całej pracy zmieniamy jedynie zawartość tekstową bez ingerencji w układ graficzny, toteż dobry projekt ułatwi nam w pełni automatyczne działania. Zatem do dzieła.

Przygotowanie szablonu graficznego banera

Pracę nad banerem rozpoczynamy od przygotowania prostego projektu graficznego. Możemy to zrobić za pomocą za pomocą Photoshopa ale także za pomocą dowolnego innego programu graficznego. W tym przypadku wykorzystałem prosty układ graficzny oparty na kilku elementach graficznych zbudowanych w programie Adobe Illustrator CS3. Zarówno postać jak i elementy tła utworzone zostały za pomocą funkcji Live Trace czyli automatycznego przekształcania elementów bitmapowych w wektorowe. Dodałem także nowy, bardziej wyrazisty kolor tła, tekstowe logo oraz niewielki tekst z adresem strony internetowej naszej hipotetycznej imprezy.

02

Naturalnie do budowy projektu banera wykorzystać możemy także wszystkie narzędzia dostępne w programie Adobe Photoshop. Nie będzie żadnych problemów z użyciem masek, stylów warstw czy innych zaawansowanych narzędzi programu. Całość za pomocą polecenia Save For Web & Devices zostanie zapisana w postaci prostego banera GIF i wszystkie wykorzystane obiekty pozostaną spłaszczone do jednej warstwy.
Wprowadzenie i formatowanie tekstów

Kolejny krok to wprowadzenie właściwych tekstów. Za pomocą narzędzia Horizontal Type Tool (T) wprowadzamy nazwę przykładowego miasta. O ile to konieczne dobieramy odpowiedni kolor, krój i  wielkość tekstu. Co ważne, w tym miejscu nic nie stoi na przeszkodzie by wprowadzony tekst poddać dodatkowej edycji. Za pomocą narzędzi transformacji (Rotation, Warp) czy też stylów warstw (Drop Shadow, Bevel&Emboss, Stroke itp.) nadajemy naszej pracy ostateczną postać.

03

W podobny sposób dodajemy i formatujemy drugi tekst z datą konkretnego wydarzenia. Naturalnie oba teksty zapisane są na oddzielnych warstwach tekstowych.

04

Tworzenie zmiennych tekstowych

Aby wykonać serię banerów na podstawie przygotowanego projektu, konieczne jest  zdefiniowanie zmiennych, które pozwolą na prezentację nazw kolejnych lokalizacji oraz terminów imprezy w ustalonych miejscach.

W tym celu zaznaczamy pierwszą warstwę tekstową z widoczną nazwą miasta i za pomocą polecenia Image>Variables>Define przekształcamy ją w zmienną (variable). W oknie dialogowym Variables konieczne jest wprowadzenie kilku istotnych zmian.

05

W sekcji Layer upewniamy się, że wybrana jest właściwa warstwa tekstowa, a następnie zaznaczamy opcję Text Replacement i w aktywowanym w ten sposób polu Name wprowadzamy nazwę zmiennej – miasto. Następnie za pomocą przycisku OK, potwierdzamy wprowadzone właśnie ustawienia. 

W podobny sposób zaznaczamy drugą warstwę tekstową – datę i za pomocą polecenia Image>Variables>Define tworzymy kolejną zmienną typu Text Replacement o nazwie – data.

06

W rezultacie, mamy już gotowe wszystkie elementy graficzne oraz zdefiniowane konieczne zmienne. Zapisujemy roboczy dokument w formacie PSD w dowolnej lokalizacji na naszym dysku. Kolejny istotny krok to utworzenie pliku tekstowego zawierającego dane o wszystkich lokalizacjach oraz terminach imprezy.

Budujemy zewnętrzny plik danych

Do budowy pliku danych wykorzystać możemy najprostszy edytor tekstu. Doskonale sprawdza się tu nawet  popularny Notatnik na Windows lub TextEdit na Macu. Aby dane zostały poprawnie interpretowane przez Photoshopa konieczne jest zachowanie specjalnej struktury pliku. Musi być on skonstruowany dokładnie na podstawie następującego schematu:

nazwa zmiennej nazwa zmiennej  nazwa zmiennej
wartość zmiennej wartość zmiennej  wartość zmiennej
wartość zmiennej 2  wartość zmiennej 2  wartość zmiennej 2
wartość zmiennej n  wartość zmiennej n  wartość zmiennej n

07

Co ważne nie należy w żaden specjalny sposób formatować danych, powinien to być jedynie prosty tekst z konkretnymi danymi rozdzielanymi za pomocą tabulatora. W naszym przypadku kolejne pary zmiennych (miasto i data) wprowadzamy w nowych wierszach i oddzielamy tabulatorem.
Przykłady plik danych dla naszej pracy mógłby wyglądać w następujący sposób:

Miasto  data
Warszawa  23 maja 2008 Stadion Gwardii
Poznań  24 maja 2008 Arena
Katowice 26 maja 2008 Spodek
Jelenia Góra 27 maja 2008 Stadion miejski

Wprowadzając dane w pliku tekstowym, ważne jest aby pamiętać o kilku drobnych szczegółach:

  • kolumna danych musi odpowiadać nazwie zmiennej dla danej kolumny
  • muszą być zdefiniowane wszystkie zmienne, nie można pozostawić pustego miejsca w kolumnie z danymi

Gotowy plik tekstowy zapisujemy w dowolnej lokalizacji na naszym dysku. Naturalnie byłoby bardzo wygodnie zapisać go w tym samym katalogu co przygotowany wcześniej plik PSD Photoshopa.

Wykorzystanie zmiennych w Photoshopie

Przygotowany plik danych wykorzystamy niebawem do automatycznego utworzenia serii banerów reklamowych. Wcześniej jednak, musimy wczytać wszystkie zmienne do przygotowanego wcześniej projektu w pliku PSD.

Wykorzystamy w tym celu plecenie Data Sets dostępne w menu górnym Image/Variables/Data Sets.

08

Początkowo, w wyświetlonym oknie dialogowym Data Sets niedostępne są wszelkie opcje dotyczące obsługi zmiennych. Nie jest to jednak żaden problem wkrótce ulegnie całkowitej zmianie. Dla wygody uruchamiamy od razu podgląd (przycisk Preview), a następnie za pomocą przycisku Import wczytujemy dane zapisane w przygotowanym pliku tekstowym.

09

Jeśli korzystamy z Photoshopa CS3/CS4 nie ma konieczności by w oknie importu wprowadzać jakiekolwiek zmiany. Kodowanie tekstu zostanie automatycznie rozpoznane i właściwie interpretowane przez Photoshopa.

Bezpośrednio po wczytaniu zewnętrznych zmiennych aktywują się opcje okna Data Sets co umożliwia nam podjęcie kolejnych działań.

010

W dolnej sekcji okna widoczne są wszystkie zdefiniowane wcześniej zmienne. W tym przypadku będą to odpowiednio: miasto oraz data. Dzięki uruchomieniu podglądu, pierwszy zestaw wczytanych danych od razu widoczny jest także w oknie dokumentu Photoshopa.

011

Za pomocą niewielkich strzałek w sekcji Data Set możliwy jest podgląd kolejnych par zmiennych. Naturalnie każda wczytana para, odpowiednio przekształcona i formatowana jest od razu widoczna w oknie naszego projektu.

Nawet już po zamknięcie okna Data Sets można łatwo zmieniać zestaw danych za pomocą palety Apply Data Sets dostępnej w menu górnym Image>Apply Data Set. Tu po uruchomieniu podglądu możliwe jest szybkie wyszukanie odpowiedniego zestawu danych i jego zapis całej pracy w osobnym pliku graficznym.

012

To całkiem wygodne, import i podgląd danych z pliku zewnętrznego działa bez zarzutu, jednak co w sytuacji gdy danych zewnętrznych mamy kilkanaście lub nawet więcej. Zapis kolejnych plików z odpowiednim zestawem danych byłby strasznie nudnym i żmudnym procesem. Spróbujmy więc nieco zautomatyzować ów proces.

Eksport – Automatyczne tworzenie serii banerów reklamowych

Gdy wszystkie zewnętrzne dane są poprawnie ładowane do pliku Photoshopa, możliwe jest użycie automatycznych narzędzi, które pomogą szybko zapisać serię banerów internetowych. Za pomocą polecenia File>Export>Data Sets as Files otwieramy ciekawe okno dialogowe – Export Data Sets as Files.

013

Za pomocą przycisku Save Folder w sekcji Save Options wskazujemy miejsce docelowe, gdzie zostaną zapisane wszystkie pliki wynikowe naszej serii. Dodatkowo w polu poniżej wybieram jaki zestaw danych chcielibyśmy wyeksportować. Najwygodniej zadziała tu opcja All Data Sets, która pozwoli mi na zapis serii banerów budowanych na podstawie wszystkich zestawów (Data Sets) zmiennych.

W sekcji File Naming możliwe jest określenie wybranego sposobu nazywania plików wynikowych. Co istotne, jako podstawę nazwy pliku graficznego mogę w tym miejscu wskazać jedną ze zmiennych by w ten sposób różnicować produkty. Naturalnie, w przypadku, gdy odpowiadały by mi bardziej jednorodne nazwy, nie muszę korzystać ze zmiennych podczas określania nazw plików.

No cóż, po wciśnięciu przycisku OK, nie pozostaje mi nic innego jak radować się nową wspaniałą funkcją programu, która w wielu przypadkach pozwoli zaoszczędzić naprawdę dużo, zwykle cennego czasu.

Uwaga!

Jest tu jednak pewien problem, wszystkie banery eksportowane są do pliku PSD, który niezbyt dobrze sprawdza się w zastosowaniach internetowych. Do prezentacji na stronie internetowej konieczna jest jego konwersja na postać GIF lub JPEG w zależności od potrzeb. Naturalnie tą prostą operację możemy wykonać używając panel Actions i przygotowaną akcję.

014

Dodaj komentarz

Musisz się zalogować by dodać komentarz.