Dlaczego wciąż tworzysz layouty stron w Photoshopie?

Przy okazji nagrywania kursu Photoshop CS6/CC/CC2014 — od bohatera do mistrza (którego premiera odbyła się niedawno), zostałem niejako „uruchomiony“ (jak Neil Degrasse Tyson, który mówi „don’t get me started“) przez samego siebie w temacie tworzenia layoutów stron internetowych w Photoshopie. Wszyscy to robią. Wszyscy to robią w Photoshopie. Tymczasem ja uważam, że (tym bardziej w obecnych czasach) to błąd. Z wielu powodów lepiej, wygodniej i mądrzej jest robić to w… Illustratorze. Wiem co teraz myślisz — „Ha! ale dureń, layouty zawsze się robiło w peesie! co za pomysł by robić to w ai!“. Poniżej przedstawiam kilka powodów, które pokażą Ci dlaczego tak twierdzę.

1. Tworzenie struktury i hierarchii

W Illustratorze mamy bogate możliwości tworzenia struktury layoutu, począwszy od warstw, podwarstw (sublayers), po grupy (dowolnie zagnieżdżalne) i w końcu obiekty. To pozwala całkowicie kontrolować hierarchię obiektów — który, gdzie, i w czym się znajduje. W Illustratorze tworzenie warstw, podwarstw i grup jest dziecinnie proste.

W Photoshopie strukturę layoutu (i szerzej ujmując — dokumentu) tworzymy poprzez warstwy i grupy warstw. Tyle. Nie możemy wyodrębnić pojedynczych obiektów, chyba że będziemy pamiętać, aby każdy z nich tworzyć na nowej warstwie — co jest uciążliwe. Przenoszenie warstw do grupy jest troszkę karkołomnie — najpierw musimy stworzyć grupę, a potem zaznaczyć odpowiednie warstwy i przenieść je do grupy (można też zaznaczyć warstwy, wcisnąć shift i kliknąć na ikonę nowej grupy — ale o tym mało kto wie 😉 ).

2. Edycja grafiki wektorowej

Edycja grafiki wektorowej w Illustratorze to chleb powszedni i bułka z masłem. Bezstratnie możemy skalować, obracać, odbijać, tworzyć obiekty symetryczne, zmieniać wypełnienia, obrysy i efekty.

W Photoshopie musimy zamieniać warstwy na obiekty inteligentne by nie traciły na jakości przy modyfikacjach — jednocześnie pamiętając żeby obiekt inteligentny tworzyć z dużej grafiki. Edycja kształtów wektorowych nie jest tak intuicyjna jak w Illustratorze, a wiele czynności odbywa się dziwnie lub w sposób inny niż do przewidzenia. Narzędzie pióro w Photoshopie także nie jest tak elastyczne jak jego odpowiednik w AI.

3. Importowanie plików zewnętrznych

W Illustratorze importujemy grafikę jako plik zalinkowany, niedołączany do dokumentu. Później możemy taki plik osadzić, lub plik osadzony znów zalinkować. Jest to proste i intuicyjne. Do tego mamy panel Links, który umożliwia zarządzanie zaimportowanymi dokumentami.

W Photoshopie mamy dwa polecenia: Place linked i Place embedded — czyli już na początku musimy się na coś zdecydować. Nie mamy panelu do zarządzania importowanymi plikami, a ich właściwości w tym zakresie możemy podglądnąć tylko w panelu Properties.

4. Tworzenie skalowalnych ikon

Illustrator wręcz natywnie umożliwia tworzenie skalowalnej grafiki, a więc i ikon.

W Photoshopie musimy tworzyć duże grafiki, które potem trzeba zamienić na obiekty inteligentne, pamiętając zawczasu o stworzeniu odpowiednio wielkiego dokumentu. Późniejsza edycja zawartości takiej ikony nie jest przyjazna — trzeba edytować zawartość w osobnym pliku.

5. Eksportowanie plików na ekrany Retina i HiDPI

Illustrator może w prosty sposób eksportować pliki dwukrotnej wielkości oryginału — takie jakie są potrzebne dla ekranów Retina i HiDPI.

Photoshop nie ma takiej możliwości — chyba że wszystko tworzymy na obiektach inteligentnych i możemy je bezstratnie powiększyć dokładnie dwa razy, o czym po prostu trzeba pamiętać wcześniej z góry. Uwaga z 2014-10-14: w najnowszej aktualizacji Photoshopa pojawia się funkcja Extract Assets, która umożliwia eksport pliku dwukrotnej wielkości. Nie rozwiązuje to jednak problemu skalowalności grafiki rastrowej.

6. Dodawanie efektów

W Illustratorze możemy dodawać do obiektów efekty właściwe Illustratorowi oraz filtry z Photoshopa. Co więcej — te efekty często są „żywe“, czyli można szybko zmodyfikować parametry efektu dla uzyskania innego wyglądu.

W Photoshopie ograniczeni jesteśmy do filtrów Photoshopa, które — by zachować edytowalność — muszą być nadawane obiektom inteligentnym. W przypadku potrzeby edycji zawartości takiego obiektu, wracamy do pkt. 4.

7. Zapis kawałków

Illustrator posiada narzędzie Slice do cięcia kawałów i okno dialogowe Save for web, gdzie można te kawałki zapisać do odpowiednich formatów.

Photoshop — poza funkcjami powyżej — posiada wielką przewagę w tym względzie — Adobe Generator (oraz — teraz– funkcję Extract Assets). Generator w prosty sposób pozwala na eksport warstwy do pliku o konkretnym formacie, wielkości i jakości. W tym punkcie Photoshop wygrywa z Illustratorem, ale — tak myślę — do czasu :)

To są zatem powody, dla których uważam, że layouty stron www powinno się projektować w Illustratorze, tym bardziej, że coraz więcej przeglądarek obsługuje SVG — otwarty format wektorowy, który z czasem wyprze archaiczne gify i png’i. A jak Ty uważasz? Wolisz tworzyć layouty w Photoshopie, czy tak jak ja, wolałbyś/abyś to robić w Illustratorze?