Okładka artykułu Projektowanie stron internetowych — Z wykorzystaniem obszarów kompozycji Photoshopa
Poradniki

Projektowanie stron internetowych

Z wykorzystaniem obszarów kompozycji Photoshopa

Zdjęcie autora Aleksandra Tulibacka
0

30 listopada Adobe wypuściło kolejna, znaczną aktualizację swojego flagowego programu – Photoshopa. Zaszło kilka zmian, niektóre opcje pojawiły się po raz pierwszy, a inne zostały udoskonalone. W dzisiejszym artykule chciałabym pochylić się nad wspominanymi w jednym z wcześniejszych artykułów obszarami kompozycji, które zostały znacznie zaktualizowane.

Wcześniejsze obszary były bardzo niedopracowane, brakowało w nich ważniejszych funkcji, takich jak chociażby indywidualne linie pomocnicze dla konkretnych obszarów, możliwości ich kopiowania czy dobrego eksportu. Przy okazji warto też wspomnieć o tym, że oprócz funkcji, zmienił się także nieco sam interfejs – ikony, cienie, tła, zobaczycie to na screenach poniżej.

Na potrzeby tego tekstu stworzyłam testowy projekt z wykorzystaniem zdjęć z serwisu Fotolia (1, 2). Nie będę omawiać jego tworzenia podczas opisywania samych zasad działania obszarów kompozycji, bo jest on zbyt prosty i raczej nie miało by to sensu.

Nowe linie pomocnicze

Najważniejszą z nowości udostępnionych nam do użytku podczas aktualizacji są linie pomocnicze, które w przeciwieństwie do wcześniejszej wersji – tym razem zależne są od aktualnie zaznaczonego obszaru kompozycji, a nie całego obszaru roboczego. Tworzenie ich jest proste – wystarczy przeciągnąć je z linijki z boku ekranu lub skorzystać z jednej z opcji automatycznego generowania dostępnej w zakładce Widok.

obszary-kompozycji-photoshop-linie-pomocnicze

Jak widać na grafice powyżej – podczas tworzenia nowych linii, te znajdujące się na sąsiednich ekranach są oznaczone linią przerywaną – tak abyśmy mogli je porównać i sprawdzić. Podczas pracy, nawet przy włączonej ich widoczności, pokazane są jedynie te dotyczące aktualnie używanego obszaru.

Układy linii pomocniczych można tworzyć każdorazowo dla nowych obszarów bądź kopiować wraz z nimi za pomocą opcji Powiel obszar kompozycji dostępnej po kliknięciu w grupę zawierającą obszar w panelu warstw.

powielanie-obszaru-kompozycji

Takie skopiowanie zaowocuje powieleniem całej zawartości obszaru, możemy ją jednak usunąć w każdym momencie i zostawić sobie same linie pomocnicze. Nowy obszar zawsze zostanie dodany z prawej strony źródłowego, nawet jeśli na tym miejscu znajduje się już inny.

To, czego wciąż brakuje, to możliwość wybrania punktu odniesienia podczas skalowania obszaru. Potrzebne to być może na przykład w momencie, kiedy chcemy powielić obszar i przygotować wersję pod inną szerokość ekranu, ale z wykorzystaniem takiego samego grida. Jak widać poniżej – zmniejszanie obrazu następuje zawsze w odniesieniu do lewego górnego rogu.

linie-pomocnicze-w-obszarach-kompozycji

Z problemem tym można sobie jednak dość prosto poradzić. Wystarczy za pomocą wcześniej wspomnianej opcji Nowy układ linii pomocniczych dodać odpowiednie marginesy, przykadrować do nich obszar roboczy, a następnie przesunąć go tak, aby wyrównać odpowiednio do pozostałych elementów projektu. Dzięki temu, że teraz linie przesuwają się one razem z obszarem, możemy robić to bez obaw.

tworzenie-innej-rozdzielczosci-obszaru-kompozycji-photoshop

Oprócz linii pomocniczych przypisanych do konkretnych obszarów, wciąż dostępne są te standardowe – widoczne zawsze, globalnie dla obszaru roboczego. Aby taką linię stworzyć, wystarczy kliknąć myszką w tło – tak aby odznaczyć aktualnie wybrany obszar i skorzystać z dobrze znanych wszystkim opcji ich dodawania (przez przeciągnięcie, na bazie kształtu czy automatycznie).

zwykle-i-dodawane-linie-pomocnicze-photoshop

Jak widać powyżej, po ponownym wybraniu danego obszaru, widoczne są zarówno globalne linie w standardowym kolorze, jak i niebieskie linie przypisane do zaznaczenia.

Na screenie widać także kolejną nowość, które nie zasługuje na swój rozdział, ale warta jest wspomnienia, mianowicie przyciski dodawania nowych obszarów. Pozwalają one po prostu na tworzenie obok wybranego przez nas obszaru kolejnego w tym samym rozmiarze, położonego do wybranej przez nas stronie.

Filtrowanie po obszarze kompozycji

Inną z nowych opcji, która zdecydowanie była potrzeba, jest filtrowanie po obszarze kompozycji, a więc pokazywanie tylko tych warstw, nad którymi aktualnie pracujemy. Te osoby, które pracowały już z obszarami pewnie nie raz spotkały się z problemem w którym zamieszczamy gdzieś jakiś element czy zmieniamy go, a efektów nie widać, ponieważ pracujemy na odpowiedniej warstwie (o odpowiedniej nazwie), ale w nieodpowiedniej grupie.

filtrowanie-po-obszarze-kompozycji

Dzięki zastosowaniu filtrowania (dostępnego w opcji w panelu warstw widocznym powyżej), możemy uprościć sobie pracę i uniknąć wspomnianych problemów. W przypadku mojego projektu nie jest to aż tak potrzebne, bo jest on wyjątkowo prosty, jednak jeśli będziecie tworzyć zdecydowanie bardziej rozbudowane realizacje, ograniczenie widoku tylko do wykorzystywanego obszaru kompozycji może być bardzo pomocne. Podczas moich kolejnych prac z obszarami kompozycji mam zamiar mieć zawsze włączoną opcje takiego filtrowania.

filtrowanie-po-obszarze-kompozycji-photoshop

Eksport masowy

Ostatnią z opcji na którą warto zwrócić uwagę są nowe możliwości eksportowania plików wynikowych – zbiorczy eksport do PSD oraz generowanie pliku PDF.

Eksport do PSD

O konieczności generowania plików PSD z naszych obszarów kompozycji wspominałam już przy okazji poprzedniego artykułu. Dla tych którzy go nie znają, albo nie zapamiętali – przydaje się to przede wszystkim podczas przekazywania ich dalej. Takie podzielone pliki mogą zostać bez problemu otwarte w starszych wersjach oprogramowania, możemy też przekazać tylko część naszego projektu, przez co ograniczyć obciążenie łącza. W celu wygenerowania plików PSD dla poszczególnych obszarów kompozycji wystarczy skorzystać z bardzo prostej funkcji dostępnej pod Plik→Eksportuj→Obszary kompozycji do plików….

obszary-kompozycji-eksport

Jak widać na screenie powyżej, opcji zapisu nie ma za dużo. Możemy zdefiniować miejsce, prefiks, jakie obszary mają być zapisane oraz zadecydować o opcjach jakie będą miały przyszłe pliki PSD. Największym minusem tego rozwiązania, który może nawet zdyskwalifikować je dla wielu z Was, jest gubienie podczas eksportu informacji o liniach pomocniczych (pozostają tylko te globalne), co znacznie utrudni kodowanie projektu.

Eksport do PDF

Ostatnią z ciekawych opcji jest możliwość zapisu całego projektu do jednego pliku PDF, na przykład w celu zaprezentowania go klientowi. Zapisu dokonujemy równie prosto jak poprzednio, wystarczy wybrać Plik→Eksportuj→Obszary kompozycji do PDF… i odpowiednio skonfigurować zapis.

zapis-obszaru-kompozycji-do-pdf

Podobnie jak poprzednio, nie mamy do dyspozycji szczególnie skomplikowanych opcji. Możemy wybrać miejsce, źródło oraz jakość zapisywanych plików. W efekcie otrzymujemy prosty, wielostronicowy plik PSD do którego za pomocą oprogramowania do PDF klient może dodać swoje uwagi. Zapisane pliki zachowują teksty w formie edytowalnej.

plik-pdf-z-edytowalnym-tekstem

To już wszystko co chciałam pokazać Wam przy okazji przedstawiania nowości w obszarach kompozycji najnowszej wersji Photoshopa. Mam nadzieję, że informacje tutaj zawarte będą dla Was przydatne i pozwolą podjąć decyzję na temat zakupu czy aktualizacji oprogramowania od Adobe.

To może Cię zainteresować