W trakcie projektowania wyglądu stron internetowych, natrafiamy na istotny problem organizacji warstw Photoshopa. Przy mniejszych projektach albo prostych stronach wizytówkowych, gdzie projektujemy zazwyczaj jedną główna podstronę - nie ma to aż tak wielkiego znaczenia. Problem pojawia się, gdy musimy zaprojektować większą ilość podstron w projekcie - bądź wprowadzać poprawki w elementach już istniejących. Dlatego bardzo ważne jest, aby od samego początku nabrać nawyku - oznaczania i grupowania warstw.
Wyobraźmy sobie sytuację, że klient prosi o zaprojektowanie strony internetowej, w której jest logo, menu górne z kategoriami, kontent z zawartością po lewej stronie i oczywiście główna treść. Główna treść, w której musisz zaprojektować 3 działy - stronę główną, galerię i kontakt. W przeciętnej sytuacji wygląda to tak, że projektujemy cały layout - jako pierwszą pokazując stronę główną. Projektujemy i wysyłamy wersję do momentu, aż klientowi się spodoba. Na moim przykładowym pliku wygląda to tak :
Widzimy naszą przykładową stronę - a obok przedstawiam pasek z warstwami - jak widać jest ich tyle, że nie mieszczą się na ekranie. Mimo, że warstwy są ponazywane - istnieje lekki chaos i dość ciężko się w tym wszystkim połapać. Ale teraz stajemy przed kolejnym zadaniem - czyli zaprojektowaniem następnych podstron. Jak już mówiłem, można to zrobić na parę sposobów:
1) Zapisanie każdej podstrony w osobnym pliku:
* To mój projekt - każda podstrona na osobnym pliku - jest to niezbyt poręczne
Możemy zastosować pierwszy sposób - wydaje się najprostszy, ale ma dość dużo wad. Po pierwsze - jeśli klient zażyczy sobie jakiejkolwiek zmiany tła, czy elementów nawigacji itp - będziesz musiał zmieniać to wszystko parę razy, osobno dla każdego pliku, a to równa się z większą ilością niepotrzebnej pracy, której możesz uniknąć. A po drugie, wyobraź sobie, że masz zaprojektować 20 podstron - a sam plik z tłem, nawigacja itp. zajmuje już 20mb - dodajmy do tego treść i potem zapiszmy jako 20 osobnych plików, każdy dla innej podstrony. Na jeden projekt na twoim dysku potrzebujesz 200 mb miejsca. Następnie musisz jeszcze wysłać to programiście i klientom. Ten sposób zdecydowanie jest najgorszy ! Marnuje twój czas, miejsce na dysku i.. jeszcze raz czas.
2) Projektowanie podstrony w tym samym pliku i wyłączanie nieaktywnych warstw :
* To mój projekt - każda podstrona na osobnej warstwie, -50 % czasu to włączanie/wyłączanie ich
Druga z możliwości jest bardziej sensowna, ale także ma wady. Przy małych podstronach może to zdać egzamin. Jedną z głównych wad tego postępowania jest ogromna ilość warstw, które musimy za każdym razem wyłączać/włączać, jeśli chcemy zmienić widok podstrony w projekcie. Wyobraźmy sobie, że w naszym pliku mamy podstronę w której jest galeria - dajemy tam miniaturki - każdą na osobnej warstwie, plus teksty, jakieś boxy i tło. Mamy ponad 60 warstw, które musimy za każdym razem wyłączać (a potem włączać inne), jeśli chcemy zmienić widok podstrony w projekcie. To rozwiązanie jest pod pewnym względem lepsze od poprzedniego (wszystko w jednym pliku), ale o wiele gorsze w przypadku zmiany podstrony (mozolne włączanie i wyłączanie warstw). Zaletą jest także to, że przy zmianie jakiegoś szczegółu designu strony (tło itp.) wystarczy, że zrobimy to w jednym pliku. Ten sposób jest lepszy niż poprzedni, ale ma zbyt dużą ilość wad, by go używać.
3) Finalnie ! Wszystko w jednym pliku - pogrupowane i oznaczone
* Wszystko w jednym pliku - bardzo ładnie i czytelnie poukładane oraz zaznaczone :)
To właśnie sposób, o którym opowiadamy w tutorialu. Jak widać na pasku warstw - wszystkie elementy są pogrupowane - szukaj, menu góra, logo, tło. A podstrony pogrupowane i dodatkowo oznaczone kolorem (tu akurat aktywna podstrona główna). Możemy jednym kliknięciem włączać i wyłączać dane podstrony. Możemy także przesuwać elementy strony np. menu. Wszystko to wymaga oczywiście zmiany pewnych przyzwyczajeń i mniejszego chaosu w projektowaniu, ale po przyswojeniu nawyków grupowania/oznaczania - nasza wydajność wzrośnie, a wiele rzeczy zacznie zajmować o wiele mniej czasu i energii. To najlepszy ze sposobów organizacji projektu layoutu. Teraz w końcu zobaczmy, jak grupować projekty:
Grupowanie i organizacja warstw:
Przy projektowaniu zawsze staram się rozdzielać warstwy na pewne elementy :
- menu i elementy nawigacji
- logo - adres strony
- slidery i kontenty dodatkowe
- elementy tła
Oczywiście czasami nie da się tego zrobić , zwłaszcza przy fantazyjniejszych layoutach. Podążając tym tropem warstwy danego elementu, który projektujemy, powinniśmy wsadzić do jednej grupy/folderu.
Tutaj widzimy, że cała wyszukiwarka jest wstawiona do folderu - Szukaj. W tym folderze są warstwy tekstowe oraz kolejny folder - przycisk. Dzięki takiemu rozwiązaniu możemy w dowolnym momencie przesunąć wyszukiwarkę w inne miejsce projektu. Analogicznie działa to z innymi elementami nawigacji :
Menu górne składające się z tekstu, kształtu tła i hovera (elementu widocznego docelowo po najechaniu myszką) - zgrupowane w jeden folder menu. Widać także, że podstrony poniżej są pogrupowane - z włączoną stroną główną, a także oznaczone kolorem.
Jak grupuje się warstwy ?
Grupowanie warstw jest bardzo proste !
Wystarczy, że zaznaczymy te warstwy, które chcemy aby znalazły się grupie. Czyli klikniemy na nie myszką z przytrzymanym CTRL ( CTRL+LPM ) - w taki sposób zaznaczymy te warstwy, na które kliknęliśmy:
Możemy kliknąć na warstwy z przytrzymanym klawiszem SHIFT ( SHIFT+LPM )- wtedy zaznaczamy ich więcej OD pierwszego klikniętego DO drugiego:
Po zaznaczeniu warstw wystarczy je już tylko pogrupować - możemy to zrobić na dwa sposoby. Sposób, który ja stosuję (jest szybszy) to naciśnięcie skrótu CTRL+G - zaznaczone warstwy grupują się w folder. Można to także zrobić myszką, naciskając ikonkę foldera na dolnym pasku warstw :
Obydwa sposoby prowadzą do zgrupowania folderu. Po zgrupowaniu możemy zmienić nazwę folderu/grupy - naciskając dwukrotnie na jego nazwę na pasku warstw. Jeśli chcesz zmienić kolor folderu - naciśnij prawym przyciskiem myszy na oczko obok i wybierz kolor, który ci odpowiada.
Podsumowanie:
Dzięki odpowiedniej organizacji warstw twoje projekty zaczną być czytelniejsze dla późniejszych odbiorców. Ułatwisz pracę sobie, programiście, przyszłym grafikom, którzy będą nad tym siedzieć i wszystkim, którzy zetkną się z plikiem źródłowym. Przy okazji późniejszych poprawek zaoszczędzisz mnóstwo czasu dzięki zmianom w jednym, a nie wielu plikach. Warto zacząć grupować i oznaczać warstwy !
W taki właśnie sposób możesz zawierać pogrupowane i poukładane podstrony w swoim projekcie. Poniżej zamieszczam do pobrania plik psd. z przykładową 'pogrupowaną' stroną. Możesz ją pobrać i zobaczyć, jak ja sobie to organizuję :)
Dodaj do:
Muszę przyznać, że jestem całkowicie zgadzam się z tobą. ! Dobry blog! Jeśli chcesz zmienić swoje włosy, test moim blogu, być może znajdziesz kilka koncepcji, w szczególności rodzaju średniej długości włosów cienkich włosów:)
Tak zgadzam się porządek musi być !