AP ropos

Jak poprawnie przygotować PSD?

2017/04/03
Jednym z najważniejszych etapów powstawania strony internetowej jest jej projekt graficzny. Co zrobić, żeby rzeczywisty wygląd strony odpowiadał temu, który został wymyślony przez grafika i jednocześnie nie utrudnić pracy programiście, który będzie zmieniał grafikę w rzeczywistą stronę? Wystarczy kierować się kilkoma prostymi zasadami.


1. Nazwy warstw odpowiadające faktycznym elementom.

Programy graficzne przy tworzeniu nowych obiektów nadają im własne, domyślne nazwy. Warto je zmienić tak, żeby odpowiadały elementom, do których się odnoszą. Słowa "koszyk", "zaloguj", "wyloguj", mówią dużo więcej niż "layer 1", layer 2" i "layer 3".

2. Logiczne zgrupowanie elementów

Warstwy składające się na ten sam fragment strony powinny znajdować się w jednej grupie. Nic nie stoi też na przeszkodzie, żeby każda z grup miała kolejne podgrupy, przedstawiające mniejsze obszary. I tak np. w grupie "belka górna" mogą być zawarte dodatkowe grupy "wyszukiwarka", "menu", czy "ikony społecznościowe".

Dobrze też, kiedy grupy ułożone są w kolejności występowania na stronie. Łatwiej zorientować się w układzie :

  • belka górna,

  • slider,

  • sekcja 1,

  • sekcja 2,

  • stopka,

niż w np. takim :

  • slider,

  • stopka,

  • sekcja 2,

  • belka górna,

  • sekcja 1.

3. Jedna warstwa - jeden element

Często żeby uzyskać odpowiedni efekt np. na zdjęciu w tle, trzeba nałożyć na nią kilka warstw z rożnymi filtrami. Jednak dla programisty dużo wygodniej jest, kiedy wszystkie te warstwy zostaną połączone w jedną. Nie musi on wtedy szukać i łączyć ze sobą wszystkich elementów składających się na grafikę, która ostatecznie i tak zamieni się w jeden plik .jpg.

Zdarzają się także błędy będące przeciwieństwem powyższego - w jednej warstwie znajduje się więcej niż jeden element.  To kolejne utrudnienie i niepotrzebnie stracony czas, kiedy np. wszystkie ikony do mediów społecznościowych są ze sobą połączone i trzeba je ręcznie rozdzielać.

4. Brak niepotrzebnych warstw

W trakcie pracy designera powstaje wiele pomysłów, z których jedynie część zostaje ostatecznie włączona do projektu. Nie ma potrzeby, żeby nieużywane elementy zostały w pliku .psd i powodowały zwiększenie bałaganu wśród warstw.

5. Uwzględnienie animacji

Jeżeli jakiś element (np. przycisk) ma zmienić swój wygląd po najechaniu na niego myszą lub po kliknięciu, każdy z tych możliwych stanów powinien zostać pokazany w projekcie. Dobrą praktyką jest także zaproponowanie animacji, które mogą pojawić się na stronie, chociaż ciężko to pokazać w pliku .psd. Można jednak opisać je słownie w oddzielnym pliku dołączonym do projektu  - np. "W sekcji pierwszej zdjęcia powinny wyjeżdżać z prawej strony".

6. Wykonalne efekty

W Photoshopie lub innym programie graficznym można zaprojektować wszystko. Trzeba jednak pamiętać, że mimo to, iż przy użyciu obecnych możliwości CSS, da się uzyskać już naprawdę dużo, to nie każdy efekt, który wymyśli designer będzie możliwy do zaprogramowania. Szczególnie, jeżeli klient będzie chciał, żeby jego strona wyświetlała się tak samo na najnowszych przeglądarkach jak i na tych sprzed pięciu lat. Przy wątpliwościach, czy dany pomysł uda się faktycznie wprowadzić w życie, lepiej dowiedzieć się czy będzie on wykonalny, zanim zostanie to sprzedane klientowi.

7. Responsywność

W dzisiejszych czasach każdy chce, żeby jego strona wyglądała równie dobrze na ekranie Full HD, tablecie i telefonie. Niestety często projekt graficzny nie uwzględnia tych potrzeb. Standardem jest projektowanie na duże rozdzielczości, ale strona internetowa to nie zdjęcie, które będzie się skalować proporcjonalnie wraz ze zmniejszaniem ekranu. Grafik, przygotowując plik z layoutem strony, powinien uwzględnić widoki dla wszystkich urządzeń, na których strona może być oglądana.

8. Przewidywanie przyszłości

W idealnym świecie, grafik tworząc design strony, znałby dokładnie wszystkie informacje, które się na niej znajdą. Niestety w rzeczywistości rzadko tak się dzieje. W związku z tym miejsce na tekst nie powinno być wyliczone co do piksela, żeby nie zaburzyć wyglądu całej sekcji, jeżeli tekstu ostatecznie znajdzie się tam więcej niż w początkowych założeniach.  

Tych kilka prostych rad powinno ułatwić życie obydwu stronom, zarówno wykonawcy jak i klientowi.

Spodobał Ci się ten artykuł? Chętnie o nim porozmawiamy.

Formularz kontaktowy

Witam. Nazywam się
i kontaktuje się w sprawie .   Mój adres email to ,    a mój numer telefonu to
* pole obowiązkowe
Administratorem danych osobowych jest AlterPage Sp. z o.o. z siedzibą w Warszawie (03-972),ul. Alzacka 16/2 ("Spółka"). Z Inspektorem Ochrony Danych powołanym w Spółce można się skontaktować pod adresem:inspektor@alterpage.pl lub korespondencyjnie: ul. Alzacka 16/2, 03-972 Warszawa. Dane osobowe będą przetwarzane w celu realizacji udostępnianych przez Spółkę działań marketingowych i usług własnych Spółki, stanowiącego tzw. prawnie uzasadniony interes Spółki - na podstawie art. 6 Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 roku w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO). Po wyrażeniu odrębnej zgody, na podstawie art. 6 ust. 1 lit. a) RODO dane mogą być przetwarzane również w celu przesyłania informacji handlowych drogą elektroniczną lub wykonywania telefonicznych połączeń w celu marketingu bezpośredniego, w tym kierowanych w wyniku profilowania, o ile użytkownik wyraził stosowną zgodę. W przypadku wyrażenia dodatkowej zgody, na podstawie art. 6 ust. 1 lit. a) RODO dane mogą być przetwarzane również w celu przesyłania informacji marketingowych dotyczących usług lub produktów innych podmiotów – w formie elektronicznej, telefonicznej lub papierowej, w zależności od wyrażonej zgody. Dane osobowe mogą być ujawnione pracownikom lub współpracownikom Spółki, jak też podmiotom udzielającym wsparcia Spółce na zasadzie zleconych usług i zgodnie z zawartymi umowami powierzenia. W innych przypadkach dane osobowe mogą być ujawnione podmiotom uprawnionym wyłącznie na podstawie przepisów prawa. Podanie danych osobowych jest dobrowolne.
Administratorem danych osobowych jest AlterPage Sp. z o.o. z siedzibą w Warszawie (03-972),ul. Alzacka 16/2 ("Spółka"). Z Inspektorem Ochrony Danych powołanym w Spółce można się skontaktować pod adresem:inspektor@alterpage.pl lub korespondencyjnie: ul. Alzacka 16/2, 03-972 Warszawa. Dane osobowe będą przetwarzane w celu realizacji udostępnianych przez Spółkę działań marketingowych i usług własnych Spółki, stanowiącego tzw. prawnie uzasadniony interes Spółki - na podstawie art. 6 Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 roku w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO). Po wyrażeniu odrębnej zgody, na podstawie art. 6 ust. 1 lit. a) RODO dane mogą być przetwarzane również w celu przesyłania informacji handlowych drogą elektroniczną lub wykonywania telefonicznych połączeń w celu marketingu bezpośredniego, w tym kierowanych w wyniku profilowania, o ile użytkownik wyraził stosowną zgodę. W przypadku wyrażenia dodatkowej zgody, na podstawie art. 6 ust. 1 lit. a) RODO dane mogą być przetwarzane również w celu przesyłania informacji marketingowych dotyczących usług lub produktów innych podmiotów – w formie elektronicznej, telefonicznej lub papierowej, w zależności od wyrażonej zgody. Dane osobowe mogą być ujawnione pracownikom lub współpracownikom Spółki, jak też podmiotom udzielającym wsparcia Spółce na zasadzie zleconych usług i zgodnie z zawartymi umowami powierzenia. W innych przypadkach dane osobowe mogą być ujawnione podmiotom uprawnionym wyłącznie na podstawie przepisów prawa. Podanie danych osobowych jest dobrowolne.

Dziękujemy za kontakt z nami.

Odezwiemy się tak szybko, jak to tylko możliwe.

Wiemy, że Twój projekt nie może czekać.

Ważne: Strona wykorzystuje pliki cookies.
W ramach naszej witryny stosujemy pliki cookies w celu świadczenia Państwu usług na najwyższym poziomie, w tym w sposób dostosowany do indywidualnych potrzeb. Korzystanie z witryny bez zmiany ustawień dotyczących cookies oznacza, że będą one zamieszczane w Państwa urządzeniu końcowym. Możecie Państwo dokonać w każdym czasie zmiany ustawień dotyczących cookies. Więcej szczegółów w naszej Polityce Cookies .
Akceptuję politykę cookies