W ciągu ostatnich lat zauważyłem, że pomimo obecności wielu nowoczesnych narzędzi do web designu, są jeszcze ludzie, którzy uważają Photoshop za dobre narzędzie do projektowania stron internetowych. Zrozumiałe jest to, że wśród ludzi niezwiązanych z branżą, są tacy, którzy uważają, że projektowanie strony internetowej sprowadza się do przygotowania statycznej grafiki, która później za sprawą programisty staje się interaktywna. Oczywiście jest to możliwe, ponieważ niegdyś tak właśnie powstawały strony internetowe. Obecnie, strony internetowe tworzy się zupełnie inaczej, głównie ze względu na responsywność i wiele innych nowych standardów.
Photoshop nadal jest świetnym narzędziem do obróbki zdjęć, czy fotomontażu. Jest to potężne narzędzie graficzne, lecz nie do końca spełnia ono wymogi stawiane przez współczesne technologie webowe. W tym artykule postaram się przedstawić 10 powodów, dla których Photoshop umarł jako narzędzie do projektowania stron internetowych, oraz przedstawię kilka narzędzi, którym warto się w tym temacie przyjrzeć.
To nie tylko przestarzałe podejście, lecz bardzo zła praktyka
Photoshop był pierwszym wyborem każdego projektanta stron internetowych — no właśnie, był... w 2003 roku. Wtedy wszystko było w porządku, ponieważ od razu można było zobaczyć, jak będzie wyglądała strona internetowa. Wystarczyło pociąć grafikę na kawałki i skleić obrazki przy pomocy HTML i CSS. Responsywność praktycznie w ogóle nie istniała, tworzono wówczas tzw. wersje mobilne, czyli odrębne strony internetowe przeznaczone na urządzenia mobilne, więc strony tworzono zwykle pod jedną rozdzielczość ekranu.
Obserwujemy coraz większy udział urządzeń mobilnych w ruchu internetowym, więc responsywność jest kierunkiem oczywistym. Nie tylko aplikacje webowe wymagają responsywnego projektu, ale także aplikacje mobilne, czy aplikacje na telewizory i inne urządzenia. Ilość różnych urządzeń oraz ich rozmaita gama rozmiarów i rozdzielczości sprawiają, że jeden obraz w Photoshopie to za mało, żeby mówić o projektowaniu responsywnych interfejsów.
Na rynku istnieje wiele aplikacji, które służą do tworzenia makiet i prototypowania responsywnych aplikacji, takich jak na przykład Figma, Adobe XD, czy Sketch. Nawet Adobe posiada w swojej ofercie program, który wyklucza Photoshopa jako narzędzie do projektowania interfejsów.
Dlaczego nie używa się Photoshopa do projektowania stron internetowych?
1. Istnieją lepsze narzędzia niż Photoshop
Photoshop nie był stworzony jako narzędzie do projektowania stron internetowych, lecz do obróbki zdjęć. Oczywiście kiedyś używano go do tego właśnie celu, ale warto zaznaczyć, że były to czasy, w których responsywność nie miała aż takiego znaczenia jak obecnie.
Obecność nowoczesnych narzędzi stworzonych do projektowania interfejsów graficznych, ich wygoda użytkowania i zgodność ze standardami webowymi, to moim zdaniem wystarczający argument, żeby używać właśnie takich rozwiązań. Dlatego odnosząc się do wad programu Photoshop, porównamy go z następującymi narzędziami:
- Figma
- Adobe XD
- Sketch
2. Photoshop „nie mówi językiem internetu”
Przygotowując grafikę w programie Photoshop, otrzymujemy statyczny obraz widoku dla konkretnej rozdzielczości. Możemy do czegoś takiego podejść na dwa sposoby. Pierwszy to oczywiście pocięcie i stworzenie strony internetowej, która nie będzie responsywna. Drugi sposób to stworzenie strony internetowej w sposób poprawny. Sposób ten będzie wymagał żmudnego wyciągania różnych wartości z pliku PSD (które niekoniecznie nadają się do bezpośredniego użycia) i odtworzenia projektu za pomocą HTML i CSS, a następnie próba nadania responsywności, która z samego projektu nie wynika.
Poprawnie stworzona strona internetowa to zbiór informacji opisujących jej wygląd. Strony internetowe renderowane są przez przeglądarki internetowe na podstawie tych informacji i dostosowywane do urządzenia. W celu stworzenia responsywnej strony internetowej należy wykonać szkielet (DOM) za pomocą HTML oraz opisać jego wygląd zewnętrzny za pomocą CSS. Każdy element posiada informacje na temat jego kształtu, koloru, pozycji. Własności, za pomocą których można opisać jeden element, są setki. Wszelkie filtry, maski, cienie, gradienty i wiele innych należy opisać właśnie za pomocą języka CSS.
Przeglądarka na podstawie tych informacji renderuje stronę internetową w sposób wektorowy, dzięki czemu strona jest wysokiej jakości i ładuje się szybciej niż elementy wykonane w formie rastrowych grafik.
3. Utrudniony eksport zasobów z Photoshop
Aby wydobyć jakieś zdjęcie, ikonę, czy inny graficzny element z pliku PSD potrzeba wielu kliknięć oraz ustawień w oknach dialogowych, żeby tego dokonać. Photoshop jest przeznaczony do edycji obrazów, więc pojedynczy obraz będzie efektem pojedynczego pliku PSD. Można natomiast poszczególne warstwy z niego wydobyć, ale nie jest to takie proste jak w programach do projektowania interfejsów, takich jak Figma, gdzie do eksportu gotowego do użycia elementu wystarczą zaledwie dwa kliknięcia.
Oprócz elementów graficznych, programy przeznaczone do projektowania interfejsów umożliwiają eksport kodu CSS poszczególnych elementów, dzięki czemu dobrze zaprojektowane elementy będą z automatu responsywne.
4. Brak możliwości prototypowania w Photoshop
Photoshop natywnie nie posiada żadnych narzędzi, które pozwoliłyby stworzyć interaktywny prototyp jeszcze przed rozpoczęciem pracy programisty. Możliwość prototypowania pozwala designerom zaprojektować nie tylko wygląd, ale i sposób działania strony internetowej. Tworząc aplikacje webowe, nie tylko responsywność ma znaczenie, ale także ich reaktywność. Reaktywność sprawia, że użytkownik, wchodząc w interakcje z interfejsem, od razu widzi efekt swojego działania, otrzymując zupełnie inne doświadczenie, niż jakby strona miała się przeładowywać z każdym kliknięciem.
Obecne technologie dają nam możliwość tworzenia interfejsów, które asynchronicznie wymieniają się informacjami z serwerem, dzięki czemu po kliknięciu przycisku nie trzeba czekać, aż strona się ponownie załaduje. Wykonując jakieś działanie, zmienia się zawartość na ekranie, a nie cała strona.
5. Kiepskie zarządzanie wektorami w Photoshop
Projektowanie wektorowe to podstawowy sposób na tworzenie responsywnych stron internetowych. Jeśli ktoś pracował z programami, takimi jak Adobe Illustrator, rozumie jak sprzeczne z intuicją są narzędzia wektorowe w Photoshopie. Użytkownik ma bardzo ograniczone możliwości jeśli chodzi o to, co można zrobić z elementami wektorowymi w projekcie w Photoshop.
Wszystkie aplikacje przeznaczone do projektowania interfejsów graficznych opierają się na grafice wektorowej, co sprawia, że efekt pracy z pewnością będzie responsywny i wysokiej jakości.
6. Projekt wykonany w Photoshop nie jest responsywny
Aby mówić o responsywności, projekt musi reagować na zmiany rozdzielczości ekranu i się do niej dostosować. W programach do projektowania interfejsów istnieją przeróżne narzędzia, które pozwalają na stworzenie układów, w których elementy układają się automatycznie do obszaru, w którym się znajdują. Manipulując wymiarami tego obszaru, możemy zaobserwować, w jaki sposób poszczególne elementy się układają lub zmieniają swoje rozmiary.
Techniki te odpowiadają stosowanym podczas tworzenia stron internetowych, takim jak flex, czy grid. Jest to przykład tego jak doskonale narzędzia te „rozumieją” ideę tworzenia responsywnych układów.
7. W Photoshop nie ma komponentów
Komponenty są elementami, które można stworzyć raz, a następnie dowolnie używać w projekcie. Gdy zajdzie taka potrzeba, można je dowolnie zmienić, a ich instancje również ulegną zmianie, bez konieczności poprawiania wszystkich wystąpień elementu w projekcie.
Idea tworzenia komponentów jest czymś oczywistym podczas tworzenia aplikacji webowych, czy mobilnych. Jest to podstawa reguły DRY (ang. Don’t Repeat Yourself), czyli „nie powtarzaj się”. Możliwość tworzenia komponentów daje praktycznie każdy program taki jak Figma, czy Adobe XD.
8. Photoshop jest powolny
Nie tylko brak komponentów może wydłużyć czas realizacji projektu. Photoshop powstał jako narzędzie do obróbki zdjęć, więc jest on wyposażony w ogromną ilość narzędzi, które to umożliwiają. Narzędzia te w większości nie są potrzebne do projektowania stron internetowych. Przekłada się to na jego wydajność, ponieważ potrzebuje on znacznie więcej zasobów komputera, aby działać.
Narzędzia służące do projektowania stron internetowych posiadają dokładnie tyle, ile jest potrzebne do realizacji swojego zadania, dzięki czemu są lekkie i szybkie.
9. Praca w Photoshop kosztuje więcej
Photoshop jest ciężkim, obładowanym funkcjami narzędziem do obróbki zdjęć, a co za tym idzie, jego cena jest dużo większa niż cena lekkich narzędzi do stworzonych projektowania interfejsów.
| Narzędzie | Koszt miesięczny | Koszt roczny | ||
|---|---|---|---|---|
| Podstawa | Premium | Podstawa | Premium | |
| Photoshop | $31,49 | $239,88 | ||
| Figma | Za darmo | $15,00 | Za darmo | $144,00 -20% |
| Adobe XD | $9,99 | $119,88 | ||
| Sketch | $9,00 | $99,00 1 miesiąc gratis | ||
10. Współpraca w Photoshop nie jest taka prosta
Niemalże wszystkie przeznaczone do projektowania stron internetowych programy umożliwiają współpracę w czasie rzeczywistym. Dokładnie jak ma to miejsce, chociażby w Dokumentach Google. Jest to bardzo duże udogodnienie, gdy nad projektem pracuje jednocześnie wiele osób.
Aby przekazać projekt wykonany w Photoshop innej osobie, trzeba jej wysłać pliki PSD, co nie jest już takie wygodne. Zwłaszcza gdy projekty nie są przechowywane w jednym miejscu, a wędrują od osoby do osoby.
Podsumowanie
Adobe Photoshop to doskonały program do obróbki zdjęć, fotomontażu i pracy z grafiką rastrową. Photoshop posiada ogromną ilość funkcji i narzędzi, dzięki którym możemy między innymi poprawiać nasze zdjęcia, czy tworzyć różnego rodzaju obrazy. Kiedyś używano Photoshopa do projektowania stron internetowych, materiałów promocyjnych i tak naprawdę do wszystkiego, co było związane z grafiką. Obecnie do każdego celu posiadamy odpowiednie narzędzia, które tworzone są z myślą o realizacji określonego celu. Dzięki temu uzyskujemy lekkie, szybkie, wygodne narzędzia, które idealnie wpasowują się w potrzeby związane z naszą pracą.
Wraz z pojawieniem się na rynku programów do projektowania i prototypowania interfejsów graficznych, rola Photoshopa w kontekście web designu zaczęła tracić na znaczeniu. O ile kilkanaście lat temu uważano Photoshopa za idealne narzędzie do projektowania stron internetowych, tak wraz z postępem jaki poczyniły technologie webowe, Photoshop przestał odpowiadać wymogom tworzenia nowoczesnych stron internetowych, a takie praktyki zaczęły być postrzegane jako archaiczne.