Za nami kolejny odcinek Akademii home.pl. Podczas spotkania rozmawialiśmy o tym, jak tworzyć skuteczne banery reklamowe w Photoshopie. Poniżej zamieszczamy odpowiedzi na wszystkie pytania, które zadali uczestnicy.
Michale, czy możesz wkleić linka do reklamy na YouTube?
Zgodnie z tym o czym była mowa na naszym spotkaniu – wysyłam po webinarze (aby ludzie nie pouciekali na YouTube w trakcie 😉) link do reklamy kampanii reklamowej firmy AT&T z początku lat 90tych.
W 1993 roku amerykański gigant na rynku telekomunikacyjnym utworzył kampanię reklamową tak innowacyjną na tamte czasy, że naturalną jej kontynuacją była pierwsza reklama banerowa w Internecie (1994 rok). AT&T kreuje w niej wizję świata nowoczesnej technologii (smartwatche, wizualne nawigacje samochodowe, translatory, inteligentne domy, praca i nauka zdalna oraz tele-medycyna, serwisy VOD!), przyszłości, do której zaprasza, by przystąpić wraz z nią. Trzeba to po prostu zobaczyć, aby doświadczyć tego, ile rzeczy sprawdziło się w naszych czasach (nie byli jednak Stevem Jobsem aby wykreować w tej wizji smartphony 😉- wideorozmowa z budki telefonicznej…). Jest to zlepek wielu reklam z serii. Wszystko innowacyjne i odkrywcze jak na tamte czasy a przy tym, jako długoterminowa kampania, spójne: https://www.youtube.com/watch?v=a2EgfkhC1eo
Eksport banerów – problem z ostrością tekstu – czy problemem może być font czy sposób eksportowania? Jak uniknąć słabej jakości?
Jeśli w trakcie edycji w Photoshopie teksty wyglądają dobrze, to możliwości są dwie. Albo przy eksporcie zastosowano zbyt dużą kompresję pliku JPG, albo odczucie braku ostrości jest subiektywne i spowodowane urządzeniem, na którym banner się wyświetla. Jeśli tworzymy powiedzmy baner 300×250 i wyświetla się on na jakiejś nowoczesnej komórce, to na 100% będzie nieostry w porównaniu do tekstu (np. artykułu), który go otacza. Spowodowane to jest tym, że baner jest grafiką rastrową złożoną z pikseli. Teksty na stronach oraz ikonki itp. są elementami wektorowymi – zawsze są bardzo ostre. Czym większe zagęszczenie pikseli na wyświetlaczu (stosunek rozdzielczości ekranu do przekątnej ekranu w calach), tym bardziej ostry obraz wektorowy a tym mniej ostry obraz rastrowy (zakładając że nie był przygotowany pod wyświetlanie się na takich ekranach). Np. dzieje się tak na wyświetlaczach typu Retina zastosowanych w produktach Apple lub we flagowych smartfonach np. firmy Samsung, gdzie strony są wyświetlane tak jakby w powiększeniu nawet 3 krotnym (smartfonowa rozdzielczość 1080px na szerokość dzielona na 3 daje nam szerokość ekranu 360px i tak koduje się strony mobilne). Rozdzielczość ekranu jest tak wielka, że normalnie teksty by były trudne do odczytania (bardzo malutkie) gdyby nie ta sztuczka. Rozdzielczość na ekranie 6-calowego Samsunga jest większa niż rozdzielczość ekranu 24-calowego monitora. Zresztą i na laptopach stosuje się powiększenia. Rzadko który nowy laptop nie ma ustawionej w Windowsie powiększenia na poziomie 120 czy 150%.
Jeśli chodzi o kompresję, to trzeba sprawdzić czy jest na poziomie np. min 60-65% przy eksporcie w Photoshopie. Trochę wyższy procent kompresji (jakości) trzeba zastosować jeśli mamy do czynienia z kolorem czerwonym. Tutaj była mowa o typowym eksporcie, na który mamy wpływ przy banerach reklamowych. Są też „banery” wstawiane na własne strony czy sklepy. Tutaj teksty mogą być niewyraźne z powodu wbudowanej w system CMS i dokonywanej po stronie serwera kompresji plików. Wrzucamy dobry plik, a w trakcie przetwarzania i dodawania go na stronę jest on kompresowany aby osiągać lepsze wyniki ładowania strony itp. Inna możliwość to automatyczna konwersja do pliku WebP z bardzo dużą kompresją. Ostatnia możliwość to wrzucenie za małego banera na stronę, gdzie zostaje on „rozciągnięty” w stylach CSS strony aby dostosował się do elementu, który go wyświetla.
Czy robienie banerów w programie Canva ma sens?
Robienie banerów w tej aplikacji ma wielki sens. Nie ma tam praktycznie bariery wejścia, jeśli chodzi o wiedzę techniczną. Jest to edytor-kreator a nie program graficzny (choć niektórzy by bardzo chcieli Canve porównywać do Photoshopa). Zaczynamy tam od szablonów przygotowanych przez profesjonalistów i dostosowujemy je do własnych potrzeb. Można też stworzyć coś samemu, ale tutaj już trzeba posiadać coś takiego jak zmysł artystyczny. Minusem jest jednak to, że w pewnym momencie można dojść do punktu, w którym Canva nas ograniczy w jakimś zakresie działań, np. nie będzie można zrobić kreatywnego fotomontażu i zastosować ciekawych i niestandardowych efektów.
Canva dobra jest do wstawienia zdjęcia, szybkiego wycięcia obiektu czy osoby z tła, ułożenia tekstów i dodatkowych ozdobników. Jest to narzędzie świetne dla osób chcących tworzyć ładne grafiki w szybkim czasie. Dla osób, które nie są grafikami i nie mają umiejętności obsługi programów graficznych. Dla pracowników działu marketingu, osób zajmujących się social marketingiem, właścicieli małych firm i marek osobistych. Minus jest taki, że stosując szablony bez modyfikacji własnych, nie stworzymy elementu wyróżniającego naszą markę na tle innych. Jednak przymykając oko na pewne niedogodności, trzeba przyznać, że Canva jest pewną rewolucją w świecie designu.
Jak przekonać pracodawcę do zakupu pakietu Adobe?
Aby przekonać biznesmena do inwestycji, jednym z najlepszych rozwiązań jest pokazanie mu jaki będzie miał z niej zwrot. Warto udowodnić, że nie jest to tylko comiesięczny/coroczny koszt. Każdy wykonuje jednak inną pracę i ciężko tutaj przedstawić jakiś uniwersalny poradnik. Trzeba na początku odpowiedzieć sobie na pytanie, czy na pewno sami tego potrzebujemy. Pełny pakiet Adobe to spora liczba programów. U nas w home.pl na co dzień korzystamy (w zależności od pracownika zespołu) z 2 do 6 programów. Możliwe, że potrzebujesz tylko Photoshopa – na start jest to dużo tańsza opcja.
Przy 2+ programach już pewnie opłaca się brać cały pakiet. Ale znowu – jeśli pracownik korzysta z programu np. 1-2 razy na tydzień i to do drobnych przeróbek, to abonament nie jest najlepszą opcją. Niestety, Adobe nie ma już w swojej ofercie wersji tzw. „pudełkowych” – płatnych jednorazowo z licencją wieczystą. Jeśli ktoś nie pracuje w Photoshopie w pełnym wymiarze czasowym, należy się zastanowić, czy nie lepiej spróbować narzędzia Affinity Photo lub Designer (albo to i to – bo kwota jest wręcz śmieszna w porównaniu z ceną abonamentu Adobe). Affinity to narzędzie dla profesjonalistów do wykorzystania zawodowego.
Jeśli ktoś zajmuje się grafiką od czasu do czasu i jest gotów pójść na pewne ustępstwa to można przemyśleć aplikację webową photopea.com.
A czy w przypadku zdjęcia podzielonego na mniejsze kafelki (IG) da się zrobić tak, aby poszczególne kafelki zawsze były we właściwym miejscu mimo wstawiania później innych postów?
Na to pytanie jako graficy nie czujemy się kompetentni, aby odpowiadać, ale z tego co Adam (nasz specjalista od Social Media) odpowiedział na czacie, trzeba pamiętać, aby wrzucać je jednocześnie. Nowsze posty (dodane po tych z siatki) jednak zepchną wszystko w dół, czyli efekt się popsuje. Możliwe, że są jakieś sposoby na to, np. wrzucaj po 3 zdjęcia, aby zachować układ siatki na feedzie IG.
Eksport 9 kwadratów – jak to umieść na IG?
Wrzucamy to hurtowo jako osobne posty, zaczynając od tego, który na zrzucie jest jako ostatni, prawy-dolny. Tutaj znowu – jako graficy zachęcamy do eksperymentowania i poszukiwania wiedzy na temat publikacji takiego typu grafik u osób specjalizujących się w Social Media. My, jako graficy wiemy, jak to wykonać technicznie. Publikacją zajmują się dedykowani specjaliści.
Czy ArtBoards można uruchomić w PS CS6?
Niestety w wersji CS6 nie ma tej funkcji (musieliśmy to jeszcze sprawdzić i teraz mamy pewność). Pojawiła się ona w wersji CC (abonamentowej) w 2015 roku. To Photoshop w wersji 16.0. Sporo ciekawych rzeczy, które są obecnie wykorzystywane na co dzień, nie ma niestety w ostatniej wersji „wieczystej” CS.
Artboardy są za to dostępne w Affinity Designer (odpowiednik Illustratora) oraz w darowej Photopea.com (odpowiednik Photoshopa).
Jak zachować ostrość przy bardzo małym rozmiarze baneru?
Wielkość banera nie ma raczej nic wspólnego z jego ostrością. Oczywiście, jeśli nie mówimy o grafice wstawianej do kontenera HTML, gdzie jest rozciągana sztucznie, aby wypełnić zawartość w pionie czy poziomie. Jeśli dobrze wyeksportujemy baner i zadbamy o to, aby czytelnie ułożyć teksty i grafikę (redukując nadmiarowe treści oraz ozdobniki graficzne) to baner będzie poprawny.
Jak w programie Photopea pociąć grafikę analogicznie jak w PhotoShop żeby ją zapisać?
Sposób będzie właśnie analogiczny. Trzeba jednak brać pod uwagę pewne małe różnice. Rozszerzenie obszaru roboczego robi się identycznie w menu Image->Canvas Size. Dodawanie prowadnic w siatce z automatu dokonujemy za pomocą menu „Window->More->Guide Gay” i w środkowym wierszu (column oraz row count) wpisujemy 3 i 3. Potem przechodzimy do narzędzia Slice Tool i w górnym menu wybieramy Slices from Guides. Eksportuje się za pomocą menu File->Export As->(tutaj wybieramy format). W podglądzie będziemy mieli niestety cały obrazek i nie będziemy mogli wybrać poszczególnych obrazków i dostosować indywidualnie jakości. Są to minusy darmowego oprogramowania. Po zapisie „ściągnie” nam się plik ZIP z pociętą grafiką oraz plikiem HTML trzymającym układ (niepotrzebnym dla grafik do IG)
Nie udało mi się uzyskać wyświetlenia plusików przy artboardzie żeby zdublować artboard. Jak się to robiło?
Ciężko odpowiedzieć na to pytanie nie widząc ekranu lub pliku. Jeśli w samym pliku został utworzony poprawnie pierwszy artboard (nad obszarem roboczym jest nazwa taka sama jak katalog w panelu warstw) to kółeczka z plusikami powinny się pojawić po wybraniu narzędzia Artboard Tool (jest ono ukryte w tym samym miejscu co Move Tool). Po aktywacji Artboarda powinny pojawić się plusiki. Oczywiście pod warunkiem że dookoła tego Artboarda jest miejsce aby dodać nowy obok. Dla pewności można kliknąć w nazwę Artboarda nad obszarem roboczym. Innym powodem może być jakaś starsza wersja Photoshopa (nie pamiętam czy od zawsze był ten plusik) ale to raczej mało możliwe.
Photoshop to jedno z wielu narzędzi, które można wykorzystać do pracy. Jest wiele innych, które pomogą osiągnąć te same rezultaty, jednocześnie nie wymagając inwestycji miliona monet liczy się osoba która potrafi wykorzystać dane jej narzędzie. Czy Panowie możecie polecić alternatywy w kwestii ceny dla Photoshopa?
Dobrze powiedziane. Są osoby, które dobrze poradzą sobie i w innych programach jeśli mają odpowiednie umiejętności i smykałkę do grafiki (są na YT filmiki osób tworzących cuda w starym MS Paint – ale to bardziej jako ciekawostka). Jeśli chodzi o doradzanie to szczerze powiedziawszy pracujemy tylko na Photoshopie i Photopea.com (szkoląc z Photoshopa na darmowym narzędziu podobnym bardzo do pierwowzoru). Dużo też zależy do czego ktoś chce używać programu. Są osoby, które np. zajmują się digital paintingiem i w Photoshopie fenomenalnie da się to robić, ale można też np. w darmowym programie Krita, lub dla osób posiadających iPada – w Procreate. Jeśli ktoś obrabia zdjęcia i edytuje je oraz tworzy „fotomontaże” to super sprawdzi się Affinity Photo. Jeśli ktoś projektuje to Affinity Designer lub Gravit albo darmowy Incscape (odpowiednik Illustratora lub Corela). A jeśli ktoś skoncentrowany jest tylko na obróbce zdjęć to może zamiast Photoshopa skupić się na dobrym poznaniu Lightrooma lub programów mu podobnych. Uogólniając – do zastosowań amatorskich i półprofesjonalnych (Photopea lub GIMP – ale z tą myślą że GIMPa nie ma sensu się uczyć jeśli planujemy przyszłość zawodową jako grafik). Do półprofesjonalnych i profesjonalnych zastosowań – duet Affinity Photo + Affinity Designer. Cenowo bezkonkurencyjne.
Można gdzieś obejrzeć inne webinary Waszej produkcji – tematyka Photoshopa?
Mamy już ich 11 (łącznie z naszym ostatnim). Można je zobaczyć „w zamian” za podanie maila (którego i tak już podaliście zapisując się na webinar, na którego pytania właśnie odpowiadamy – więc bez obaw). Są one umieszczone w serwisie YouTube ale z opcją niewidoczności w wynikach wyszukiwania. Jest to specjalna korzyść tylko i wyłącznie dla uczestników naszych webinarów i osób należących do Akademii home.pl. Adres naszych poprzednich „wystąpień” to: https://akademia.home.pl/zakonczone-webinary/grafika/
Czy mieliście okazje korzystać z Affinity i czy uważacie że nadaje się do pracy jak Photoshop?
Częściowo odpowiedzieliśmy na to pytanie powyżej. Nie mieliśmy okazji pracować. Programy firmy Serif cieszą się dużą popularnością wśród doświadczonych grafików. Wywołały one rewolucję oczekiwaną głównie w świecie freelancerów. Jednorazowa płatność i ucieczka z wymuszonego abonamentu Adobe to główny powód. Dodatkowo w końcu graficy doczekali się narzędzia, które bardzo szybko i profesjonalnie się rozwija odpowiadając na specyficzne wymagania (czego nie można powiedzieć np. o Gimpie). Wiadomo – Affinity goni konkurencję. Ale robi to bardzo umiejętnie i dość szybko wprowadza brakujące funkcjonalności jak choćby Smart Objecty, których brakowało w pierwszych wydaniach programu. Jednak co ciekawe – Affinity pozwala za darmo aktualizować aplikację do czasu wypuszczenia „dużej” wersji swojego programu (np. skok z wersji 1 do 2). Czy nadaje się do pracy jak PS… To zależy kto co robi na Photoshopie. Jeśli ktoś korzysta z pełnego spektrum możliwości Photoshopa (jak np. funkcje 3D czy animacje na timeline) to będzie mu brakowało pewnych rzeczy. Ale należy sobie zdać sprawę z tego, że większość osób korzystających z Photoshopa – wykorzystuje jego 5% możliwości. Cena Affinity jest na tyle mała, że warto zakupić i przekonać się samemu czy da się zastąpić programy Adobe.
