8 sposobów na projektowanie stron Szybciej w Photoshopie
Jako projektant stron internetowych trudno jest utrzymać porządek. Nie tylko równoważysz kilka projektów naraz, ale także prawdopodobnie czekają Cię napięte terminy i trudni klienci. Możesz także odbijać się od marki do marki i ciągle uczyć się nowych wskazówek i stylów marki.
Na szczęście istnieje wiele sposobów na usprawnienie przepływu pracy. Aby pomóc, przygotowałem te osiem wskazówek, które pomogą Ci zachować spokój w karierze projektowania stron internetowych
1. Zachowaj porządek plików
Jedną z najłatwiejszych rzeczy, które możesz zrobić, aby zachować zdrowy rozsądek, jest porządkowanie plików. Tworzenie i utrzymywanie spójnej struktury folderów sprawi, że znalezienie plików będzie proste. Problemy pojawiają się, gdy struktura folderów jest inna niż inna, co utrudnia wyszukanie tego pliku Final-Final-logo.ai .
Konsekwentne konwencje nazewnictwa plików są niezbędne podczas porządkowania plików. To tutaj pojawia się wersja. Niektórzy projektanci używają dat, inni używają numerów wersji i niektórych rund użytkowania. Zależy to od Twojej branży i osobistych preferencji, ale jest to dobra praktyka. Dzięki wersjonowaniu możesz łatwo śledzić, który plik jest najbardziej aktualny, zwłaszcza jeśli masz stare wersje zapisane dla odniesienia.
Generalnie zachowuję dwie do trzech starych wersji na wypadek, gdyby klient chciał powrócić do strategii tego bohatera od rundy pierwszej lub preferował swoją mobilną terapię z drugiej rundy. W celu uniknięcia mentalności pakujących szczurów, dobrze jest archiwizować lub usuwać starsze pliki, aby nie ugrzęznąć na dysku twardym.
Oto przykładowa struktura, której używam w Clearlink.
Połączenie spójnej struktury folderów i konwencji nazewnictwa z wersjonowaniem również pomoże w wyszukiwaniu. Na przykład, jeśli zaczniesz wszystkie nazwy plików od jednej marki z nazwą marki lub skrótem, możesz filtrować zasoby tej marki łatwiejsze. Pomoże to odróżnić "ATT-logo-final.ai" od tego, co potencjalnie może być morzem "logo-final.ai".
2. Zrozum swoją strukturę
Jedną rzeczą, której nie nauczyłem się przez kilka lat w mojej karierze projektowej, jest to, jak prawidłowo wykorzystać istniejące ramy. Dwa ciężkie hity w świecie ramowym są obecnie Bootstrap i Fundacja , ale Google Zmaterializować na pewno da im szansę na swoje pieniądze w najbliższej przyszłości. Firma, w której pracuję, korzysta z Fundacji w większości witryn z markowymi witrynami.
Fundacja ma wbudowaną responsywną siatkę, a także stylizację na guziki, pola, typografię, nawigację itp. Oraz wiele innych rzeczy, które ułatwią Ci życie. Wykorzystując wbudowaną siatkę Foundation w swoje PSD, ułatwisz programistom implementowanie twoich projektów w bardziej pikselowy sposób niż wtedy, gdy robisz coś własnego. Photoshop ma to świetne narzędzie do tworzenia przewodników, które nie tylko sprawia, że tworzenie siatek jest proste, ale także dołącza je do płyty plastycznej, co ułatwia restrukturyzację i ruch plików.
Zrzut ekranu z Foundation Cheat Sheet
Ramy stanowią również dobry punkt wyjścia do stylizacji guzików, formularzy itp. I pomagają pokazać możliwości i ograniczenia strategii projektowania, które można wdrożyć. Będzie to nie tylko dobry punkt wyjścia do projektu, ale także pomoże w bardziej przyjaznej współpracy z programistą.
3. Uporządkuj swoje warstwy według sekcji zawartości
Kiedy masz do czynienia ze skomplikowanymi stronami PSD do projektowania stron internetowych z tak wieloma folderami, warstwami, inteligentnymi obiektami itp., Rzeczy łatwo się brudzą. Gdy pojawi się warstwa 2 455, zaczynasz zdawać sobie sprawę, że potrzebujesz jakiejś organizacji wewnątrz twojego PSD. Dlatego zalecam zorganizowanie twojego PSD według sekcji.
Moje generalnie składają się z folderów, które zawierają Nav, Hero, Intro, Packages, Benefits, Footer, itp. Ja także koloruję te foldery w tęczowy sposób, dzięki czemu są łatwe w nawigacji. To sprawia, że aktualizowanie sekcji i przerabianie PSD to pestka.
Organizuję mój plik w folderach sekcji, które są oznaczone kolorami tęczowymi dla łatwego skanowania.
Na przykład, jeśli chcesz powiększyć sekcję bohatera, możesz łatwo przeciągnąć wszystkie foldery poniżej jako jedną jednostkę (przytrzymanie polecenia), a następnie przeciągnąć ją po aktualizacji. Ta strategia pomaga również programistom i innym projektantom łatwo poruszać się po pliku. Dzięki użyciu zrozumiałych nazw, takich jak "Hero" i "Nav", nowy projektant może z łatwością wskoczyć do folderu i wprowadzić potrzebne zmiany.
Niektórzy projektanci mogą nawet nazywać poszczególne warstwy, co może być niewiarygodnie korzystne, ale może być trochę czasochłonne. Ponieważ warstwy są łatwe do znalezienia za pomocą narzędzia automatycznego wybierania, gdy jest ustawione na "warstwę", obecnie łatwo jest dostać się do poszczególnych warstw, więc do indywidualnego projektanta należy sposób organizacji warstw. Chodzi o to, że git 'er done.
4. Zapamiętaj wszystkie skróty klawiaturowe, z których zwykle korzystasz
Ten jest wielbicielem wydajności. Jeśli regularnie używasz określonego polecenia, zapamiętaj je. Zwiększysz swoją wydajność w postępie geometrycznym, jeśli zmniejszysz wszystkie podstawowe skróty klawiaturowe.
Niektóre z nich to: oszczędność, rozmiar czcionki i prowadzenie, kolejność warstw, oszczędność w Internecie i krycie wśród wielu innych. Program Photoshop umożliwia również tworzenie niestandardowych skrótów. W mojej książce najważniejszą komendą do zapamiętania jest zapisanie pliku. Ze względu na przypadkowe awarie Adobe, warto często błądzić po stronie oszczędzania, a nie ryzykować utraty swoich postępów.
Adobe oferuje opcję dostosowywania skrótów klawiaturowych w obszarze Edycja> Skróty klawiaturowe
Skróty również wiążą się z organizowaniem warstw przez foldery sekcji treści (jak wspomniano powyżej). Łatwiej jest przenosić warstwy na górę i spód folderu za pomocą skrótów klawiaturowych niż porządkowanie warstw w niezorganizowanym pliku. W tym miejscu w grę wchodzi porządkowanie pliku podczas projektowania. Zapamiętywanie często używanych skrótów klawiaturowych i organizowanie warstw znacznie poprawi wydajność i pomoże innym projektantom pracować z plikami.
5. Wykorzystaj biblioteki CC
Jedną z najlepszych rzeczy, które Adobe dodała od czasu utworzenia CC, są biblioteki. Jeśli nie słyszałeś o nich, musisz to sprawdzić niesamowity samouczek jak z nich korzystać.
Czuję, że każdy zespół projektowy powinien korzystać z tej niesamowitej funkcji. Biblioteki umożliwiają tworzenie biblioteki marki zawierającej takie zasoby, jak kolory, style czcionek, zdjęcia, ikony i symbole (takie jak nagłówki i stopki). Dzięki bibliotekom możesz łatwo współpracować z kreacjami z wielu organizacji korzystających z biblioteki jednej marki.
Biblioteki ułatwiają zmianę kolorów i aktualizację stylów tekstu za pomocą kliknięcia przycisku. Pomagają również w przechowywaniu ikon marki, które można łatwo aktualizować w jednym miejscu, a aktualizacje są szybko odzwierciedlane w urządzeniach PSD. Jest to niezwykle korzystne dla nagłówków i stopek Twojej witryny, w których możesz dokonywać niewielkich aktualizacji w całym projekcie.
Używam również bibliotek CC do stylizacji czcionek w całym moim projekcie. Skonfiguruję style kopiowania bohaterów, nagłówki, podtytuły, kopie ciała, zrzeczenia się itp. Na komputery, tablety i aplikacje mobilne. Jeśli chodzi o przełączanie widoku, używam formatu listy bardziej niż widoku kafelka ze względu na łatwość skanowania.
Elementy biblioteki wyświetlane jako współpracownik
Biblioteki doskonale nadają się również do współpracy zespołowej. Możesz wybrać opcję współpracy z innymi kreacjami, aby można je było edytować i dodawać do biblioteki, lub możesz udostępnić link do biblioteki, aby uzyskać łatwy dostęp. Mają też funkcję "Utwórz nową bibliotekę z dokumentu", ale wolę sam ją stworzyć, więc pozostaje zorganizowany i ma tylko najbardziej odpowiednie zasoby.
Niestety, istnieje kilka wad w stosunku do bibliotek, z których jednym jest brak osobnych stylów znaków i akapitów dla tekstu. Pracuję nad tym poprzez zastosowanie mojego stylu znakowego w osobnym polu, a następnie wklejenie różnych stylów w pudełku, aby ułatwić sobie zarządzanie ramkami tekstowymi w pliku. Kolejną wadą jest to, że obecnie nie można zaktualizować stylu znaków na całym świecie. Obecnie w bibliotece nie ma żadnych zdolności organizacyjnych do tworzenia podfolderów w obrębie kategorii (kolor, style znaków itp.), Ale mam nadzieję, że Adobe również nad tym pracuje.
Obecny sposób działania bibliotek CC polega na tym, że ostatnio zaktualizowany / dodany zasób pojawi się na górze. Kolorów biblioteki CC nie można zastosować do pojedynczego tekstu w polach tekstowych i można je łatwo zastosować tylko do kształtów i całych pól tekstowych. Jestem pewien, że Adobe ciężko pracuje nad naprawieniem tych problemów, więc nie martwię się zbytnio, zwłaszcza że profesjonaliści zdecydowanie przeważają nad wadami.
6. Zachowaj obrazy i wektory w formacie obiektów inteligentnych
Nawet jeśli zwiększy to twój plik, przechowywanie obrazów i wektorów w formacie obiektów inteligentnych ułatwi przyszłym projektantom edycję plików PSD. Wyobraź to sobie: klient wraca z edycjami, które obejmują ponowne kadrowanie zdjęcia bohatera i wprowadzanie drobnych zmian w ikonie wektorowej. Jest to łatwiejsze, jeśli PSD zawiera zdjęcie w pełnej rozdzielczości, a nie mniejszą, zrasteryzowaną wersję. Wektory są także łatwe do podrobienia, gdy są inteligentnymi obiektami z programu Illustrator, a nie zrasteryzowaną grafiką.
Kolejną zaletą posiadania zdjęć w formacie obiektów inteligentnych jest zapisanie ich jako plików PSD, a następnie umieszczenie ich w pliku jako inteligentnego obiektu. Użycie umieszczonego zdjęcia PSD ułatwia dodawanie warstw dopasowania i edycji w oddzielnym, zawartym pliku zdjęciowym, a nie zaśmiecanie pliku źródłowego. Wykorzystanie inteligentnych obiektów jako grafiki bibliotecznej daje jeszcze więcej zwycięskiej kombinacji. Nie tylko można łatwo edytować obiekty wektorowe, ale grafika biblioteki będzie aktualizowana we wszystkich aplikacjach.
Grafikę "Hero Illustration" można edytować w oddzielnym pliku PSD, aby ograniczyć bałagan do głównego pliku.
7. Utwórz przewodnik stylu i trzymaj się go
Wiele marek będzie miało ogólny przewodnik po stylach, który możesz zastosować, jeśli chodzi o czcionki, kolory, zdjęcia, ikony, ilustracje itp. Jest to przydatne, ale nie zawsze zapewnia spójność w stylach związanych z Twoją witryną. . Znacznie poprawiłam swoją wydajność, tworząc przewodniki po Internecie dla każdej konkretnej witryny, nad którą pracuję.
Czasami marki będą miały wiele witryn o różnych stylach, więc zapewniam, że mam jedną dla każdej witryny, dzięki czemu mogę zachować spójność podczas projektowania. To również tworzy łatwy do przeciągania i upuszczania zasób, gdy potrzebuję przycisków, ikon, ilustracji, zdjęć itp. Nie tylko zwiększy to wydajność projektanta, ale pomoże ci zachować spójność stylizacji na całej stronie.
Jakich odstępów używam między sekcjami? Sprawdź przewodnik po stylu! Jaki był pierwotny kolor przycisku i dopełnienie? Pobierz go z przewodnika po stylach! Pomoże to również innym projektantom łatwo przeskoczyć projekty witryny z łatwością i efektywnością. Jeśli połączysz korzystanie z bibliotek CC z przewodnikiem po stylach, będziesz jeszcze bardziej zaawansowany.
Tworzę przewodnik stylu PSD dla wszystkich marek, nad którymi pracuję, dzięki czemu mogę łatwo chwytać takie elementy, jak przyciski i ikony.
Wielu projektantów ma ochotę dodawać nowe style za każdym razem, gdy napotykają nowy problem w projekcie. Aby zachować spójność, najlepiej tego unikać i zawsze trzymać się standardów ustalonych w podręczniku stylu. Jeśli dodasz nowe warstwy i style, upewnij się, że są one stosowane w całej witrynie.
Im więcej powstanie nowych stylów, tym bardziej złożone będą przyszłe projekty, tym trudniej będzie nowym projektantom skakać na projektach i utrzymywać spójność projektów. W wielu przypadkach spójność jest ważniejsza niż ciągła innowacja, jeśli chodzi o wrażenia użytkownika. Nawet jeśli tworzenie projektu internetowego przewodnika na początku projektu może zająć więcej czasu, zwiększy to wydajność wszystkich przyszłych stron.
Jedną z najlepszych praktyk, których nauczyłem się od Brada Frosta jest zrobienie inwentarz interfejsu podczas procesu projektowania lub w istniejącej witrynie, nad którą będziesz pracował. Inwentaryzacja interfejsu polega na zbieraniu wszystkich różnych stylów tekstu, stylów przycisków itp. Za pomocą zrzutów ekranu i ich kompilacji w celu wykrycia niespójności. Następnie możesz przedstawić swoje ustalenia klientowi, aby zaproponować aktualizacje i ulepszenia.
Ponieważ strony internetowe dotykają wielu projektantów w związku z ich istnieniem, w dziale konsystencji sprawy mogą stać się dość owłosione. Po znalezieniu ujednoliconego stylu dla elementów na stronie, zaktualizuj swój przewodnik po stylach, aby wszyscy byli na bieżąco.
Zrzut ekranu interfejsu z http://bradfrost.com/blog/post/interface-inventory/
8. Promuj współpracę międzyresortową
Wiele osób, które prowadzą karierę w produkcji marketingowej (projektanci, programiści, copywriterzy, itp.) Wydają się być introwertykami, więc trudno jest wyjść ze strefy komfortu, jeśli chodzi o współpracę. Trudno jest również zostawić bańkę ekspertyzy, zwłaszcza gdy łatwiej jest nawiązać kontakt z osobami z Twojej branży. Mimo że czasami może to być niewygodne lub niewygodne, pozostawienie bańki i regularna współpraca z osobami z innych działów może znacznie poprawić jakość twoich projektów wraz z wydajnością.
Najlepszym tego przykładem jest współpraca projektantów i programistów nad przeprojektowaniem. Powinieneś wcześniej spotkać się z programistą, aby dowiedzieć się, z jakich ram korzysta, wykształcić się w systemie sieci i ocenić możliwości. Po zakończeniu pracy nad projektem pamiętaj, aby udostępnić swoją bibliotekę Photoshop, aby programista miał łatwy dostęp do palety kolorów, stylów czcionek itp. Pomocne może też być udostępnienie przewodnika po stylach wraz z wszystkimi komponentami, które posiadasz. zaprojektowane, aby zapewnić im dobry start.
Współpraca z innymi projektantami w Twoim zespole wykorzystującym biblioteki pomoże Ci zachować spójność i być bardziej efektywnym. Przekazanie dyrektorowi artystycznemu lub większości starszych projektantów odpowiedzialności za aktualizację przewodników i stylów pomoże wyeliminować zamieszanie i zachować spójność marki. Wystarczy upewnić się, że istnieje linia komunikacji podczas aktualizacji, aby wszyscy znajdowali się na tej samej stronie.
Pozostań przy zdrowych zmysłach
Projektowanie stron internetowych może być czasem przytłaczające i wymagające. Nie zawsze musi tak być. Postępując zgodnie z tymi prostymi wskazówkami na temat wydajności Photoshopa, możesz zmniejszyć dobry stres. Nie tylko poprawi to twoje samopoczucie, ale także menedżerowie i dyrektorzy, zarówno po stronie biznesowej, jak i kreatywnej, docenią Twoją ciężką pracę i pochwalą Cię za to. W końcu każdy jest dobry, o bardziej spójnym, wydajnym, pięknie zaprojektowanym designie.