Jak skutecznie organizować swoje warstwy Photoshopa
My, projektanci, często jesteśmy sfrustrowani przez programistów, kiedy robią to swobodnie z naszą pracą.
Ale musimy zrozumieć, że nie są całkowicie winni.
Postaw się na ich miejscu: wyobraź sobie, jak to jest otwierać plik Photoshopa (PSD), tylko po to, by znaleźć kupkę źle oznakowanych warstw i folderów, a także kupkę niezaznaczonych ukrytych warstw i innych na wpół wypalonych pomysłów, które nie trafiły do urzeczywistnienie.
W poniższym samouczku opisano sposób tworzenia zorganizowanych, projektantów i programistów plików PSD .
Nie jest to jedyne rozwiązanie, ale mam nadzieję, że zachęci to do lepszej praktyki w świecie projektowania stron internetowych.
Podczas pisania tego samouczka przeprowadziłem wywiady z kilkoma programistami, którzy mają duże doświadczenie w pracy z wieloma projektantami.
Ich opinie były niezwykle wnikliwe. Zdecydowanie zachęcam do skontaktowania się z programistami, z którymi pracujesz , aby dowiedzieć się, czy możesz zrobić wszystko, aby ulepszyć swoje pliki PSD.
1. Podstawowa struktura folderów
Na początek przechowuję plik PSD o nazwie "Website-Template.psd" .
Ten plik zawiera podstawy każdej witryny internetowej, w tym system siatki, podstawową strukturę folderów i wspólne wymiary (używam przestrzeni roboczej o rozmiarach 1000 na 1440 pikseli i szerokości witryny 960 pikseli).
Ten szablon eliminuje potrzebę konfigurowania nowego pliku dla każdego projektu.
Poświęćmy chwilę na zapoznanie się z podstawową organizacją tych folderów.
Zauważysz, że moja domyślna struktura folderów zawiera tylko trzy podstawowe foldery: "nagłówek", "treść" i "stopka".
Ten prosty zestaw zawiera podstawowe foldery, z których korzysta większość stron internetowych, i sprawia, że zaczynam od właściwej strony, zapewniając skuteczną platformę organizacyjną.
Zauważysz , że oznaczyłem wszystkie foldery tak prosto, jak to tylko możliwe .
Foldery te będą zawierać mnóstwo podkatalogów. Gdy Twój projekt będzie się rozwijał, upewnij się, że te nowe foldery są tak samo wyraźnie oznaczone.
Po rozwinięciu folderu "nagłówek" zobaczysz organizację podfolderów.
Zauważ, że podfolder "nawigacja" jest zwykle najbardziej złożony: zachowanie dewelopera na etykiecie podczas tworzenia etykiety i tworzenia podfolderu i jego zawartości jest ważne.
Ostatnim krokiem przed przejściem do projektu jest zgrupowanie tej kolekcji folderów w folderze nadrzędnym o nazwie "wireframes" .
Pomoże to w uporządkowaniu zawartości, gdy zaczniemy projektować i kolorować. Jest to również dobry sposób na odróżnienie różnych stron w obrębie tego samego pliku PSD.
2. Zarządzanie warstwami dla całej witryny
Kiedy projektanci wpadają w rytm, rezygnacja z kreatywności może być łatwa. To wtedy musi wkroczyć samodyscyplina.
Musimy zmusić się do poświęcenia czasu na uporządkowanie warstw, które tworzymy .
Teraz, gdy początkowa konfiguracja została zakończona, przedstawię w zarysie, w jaki sposób grupuję różne elementy pełnego projektu.
Jak wiadomo, projektowanie rzadko przebiega liniową ścieżką, więc należy pamiętać, że jest to tylko jedno z niezliczonych rozwiązań.
"Jeśli wszyscy projektanci zastosują standardową procedurę organizowania swoich PSD [organizując swoje foldery zgodnie ze standardowym zestawem wytycznych], można łatwo zrzucić godzinę kosztów rozwoju, jeśli nie więcej. Nie wspominając już o tym, że wypełniasz rozłam między projektowaniem i rozwojem, ograniczając wszelkie wahania w stosunku do oryginalnego projektu, który jest wspólny w fazie projektowania "
Matt Sears, programista Ruby on Rails
3. Szczegółowa struktura folderów
Zaczniemy od przeglądu głównej treści (treści) i zakończymy nagłówkiem, ponieważ ma on ważny element (nawigację), który wymaga szczególnej uwagi.
Otwierając folder zawartości, zauważysz, że podzieliłem podfoldery, aby wizualny układ projektu witryny został odzwierciedlony w strukturze folderów .
Na przykład, ponieważ treść ma górną i dolną sekcję, nazwałam je odpowiednio: "góra" i "dół" .
Umieściłem również całą grafikę tła (gradienty i inne obrazy, które trzeba pokroić w kodzie HTML) do ich własnych folderów.
Teraz otwórzmy folder "top" (podfolder folderu "content" ), który zawiera kilka wspólnych elementów, takich jak spacja dla tekstu, miejsce na obraz itp.
Zwróć uwagę na użycie kolejnej podstruktury dla dodatkowych warstw i folderów.
Foldery zostały oznaczone czcionkami, obrazami i grafiką tła (gradienty, jednolite kolory itp.).
Ponieważ czcionki mogą rozpraszać deweloperów podczas sortowania przez PSD, otwórzmy folder "fonts", aby zobaczyć, jak je uporządkowałem.
Oparłem swoją metodę na opiniach, które otrzymałem od programisty, który wspomniał, że byłoby wspaniale móc klikać czcionki, aby tworzyć plasterki bez przeszkadzania tekstowi.
Zrobiłem dodatkowy krok i faktycznie dałem warstwie taką samą nazwę jak czcionka .
Dzięki temu programista może wiedzieć, której czcionki użyć podczas kodowania kodu HTML.
W przypadku bardziej skomplikowanych szablonów można utworzyć dodatkowe foldery, aby określić inne czcionki i ważne czcionki nagłówków.
(Podpowiedź: nagłówki są zwykle oznaczone jako H1, H2 itd. W terminologii CSS / XHTML, więc oznaczanie czcionek nagłówków w ten sam sposób jest dobrą praktyką).
Wszystko, co jest związane z czcionkami, powinno znajdować się w folderze "fonts" , więc programista musi wykonać tylko jedno kliknięcie, aby usunąć wszystkie czcionki i wyizolować elementy graficzne witryny.
Może wyglądać mniej więcej tak:
Zawsze używaj swojej intuicji i utrzymuj etykiety w sposób prosty i oczywisty .
Ta technika nie polega na ręcznym trzymaniu programisty; chodzi o stworzenie łatwego w użyciu pliku, który pomaga wszystkim na dłuższą metę.
Im bardziej rozróżniasz elementy, warstwy i foldery w swoim projekcie, tym płynniejsze rzeczy będą w fazie projektowania .
Użyj tej metody organizacji podczas całego procesu, a będziesz zaskoczony, jak szybko stanie się ona drugą naturą.
4. Nawigacja i Roll-Overs
Podczas konfigurowania interfejsu nawigacyjnego - bez względu na to, czy używasz kart, zwykłego tekstu czy czegoś innego - pokaż programistom, jak powinny wyglądać karty w określonych stanach .
Na przykład, czy karta może zmieniać kolor, gdy użytkownik ją przewinie? Czy potrzebny jest specjalny JavaScript, na przykład do wstawiania się? Możliwości są nieskończone, więc nie oczekuj, że programista będzie w stanie odczytać twój umysł. Foldery dotyczą tylko tych szczegółów.
Zachęcam do uzupełnienia PSD o brief projektowy, który zawiera konkretne wskazówki dotyczące bardziej skomplikowanych i szczegółowych aspektów twojego projektu.
Załóżmy, że interfejs użytkownika (UI) naszego projektu ma strukturę tabulatora. Deweloperzy mają tendencję do używania określonych terminów w odniesieniu do różnych "stanów" zakładki (przez "stan" rozumiem różne sposoby wyświetlania zakładki użytkownikowi).
W wywiadzie dla programistów znalazłem następujące terminy, które są najbardziej konsekwentnie używane i rozpoznawalne.
Zwróć uwagę na obraz odpowiadający każdemu opisowi i zwróć uwagę, w jaki sposób struktura folderów odzwierciedla mój proces myślowy.
5. Prawidłowe oznaczenie kart i ich stanów
Włączone : Stan "włączony" elementu nawigacji (w tym przypadku zakładka) wskazuje, że aktualnie wyświetlana jest jego strona pokrewna. Zazwyczaj powinien być najbardziej zauważalny.
Wyłączony : ten stan wskazuje, że można kliknąć kartę, ale nie jest ona aktualnie oglądana ani przesuwać kursorem myszy.
Najedź : ten stan pokazuje, w jaki sposób pojawia się zakładka, gdy kursor myszy unosi się lub przewija nieaktywną kartę. Graficzne przetwarzanie tego stanu jest często takie samo jak stan "włączony", ale nadal należy mu nadać własny folder.
Kluczem jest spójność: bez względu na to, jak etykietujesz swoje karty, pamiętaj o zachowaniu ich spójności!
6. Ostatnia uwaga na kartach
Otwierając jeden z podfolderów w nawigacji (folder "off" na zrzucie ekranu poniżej), zobaczysz, że ponownie zgrupowałem cały tekst w osobnym folderze.
Jest to opcjonalne, ponieważ tekst często jest częścią graficznego składu karty.
Jeśli tekst zostanie odtworzony w HTML, zalecamy umieszczenie go w oddzielnym folderze, aby deweloper mógł go kliknąć, aby ułatwić krojenie grafiki.
7. Finalizacja plików
Ta strategia może wydawać się nieco obsesyjna, a zwracanie uwagi na strukturę i porządek, gdy ktoś zostanie złapany w rzuty świetnego projektu, nie jest łatwe.
Niemniej jednak poświęć czas na zakończenie projektu, aby odpowiednio uporządkować i oznakować foldery .
Jeśli masz skomplikowane ilustracje w swoim projekcie, spróbuj je spłaszczyć w jedną dobrze etykietowaną warstwę.
Jeśli nie można tego zrobić (być może z powodu zaawansowanych metod mieszania), spróbuj przekonwertować warstwy na inteligentne obiekty, a następnie rasteryzuj je.
Ostatecznie celem jest zredukowanie warstw i folderów do absolutnego minimum, a następnie oznaczenie ich wszystkich tak wyraźnie, jak to możliwe.
8. Krok we właściwym kierunku
Programiści i projektanci nie zawsze myślą podobnie.
Podczas gdy wielu projektantów pracuje w stanie kreatywnego chaosu, programiści zazwyczaj polegają na porządku, strukturze i logice .
Jak projektujemy, mała organizacja ma długą drogę w kierunku zadowolenia programistów.
Z pewnością nie ma właściwego sposobu na porządkowanie plików PSD, więc skontaktuj się z programistami i zobacz, co możesz zrobić, aby stworzyć pliki PSD, które utrzymają porządek!
Josh Sears jest pisarzem, ilustratorem i projektantem dla wielu projektów internetowych. Zarabia na życie jako główny projektant stron internetowych, dyrektor kreatywny i współwłaściciel Littlelines.com . Możesz sprawdź swoją pracę tutaj lub śledź jego aktualizacje na Twitterze .
Czy stosujesz te wskazówki podczas pracy z programem Photoshop? Jakie inne techniki wykorzystujesz do uporządkowania warstw programu Photoshop?