Google Remarketing
Baza wiedzy - wszystkie artykuły

Profesjonalne przygotowanie pliku psd do kodowania strony

Developer kodujący stronę internetową bazuje na pliku PSD, czyli projekcie graficznym programu Adobe Photoshop. Plik ten dostarcza wszystkich niezbędnych grafik, z jakich składa się strona, jak i informacji pozwalających na jej zakodowanie. Dzięki takiej wizualizacji Web Developer jest w stanie bezbłędnie przenieść projekt na kod HTML. Profesjonalne przygotowanie takiego projektu zapobiega problemom, które uniemożliwiają pracę, bądź wydłużają jej czas. Przyjrzyjmy się wymaganiom dotyczącym przygotowania profesjonalnych plików PSD dla projektów stron internetowych.


Projekt strony gogomedia.pl

Dlaczego PSD?

Najpopularniejszym programem do pracy z projektowaniem wyglądu strony jest Adobe Photoshop. Oferuje dużo udogodnień, które przyśpieszają pracę Web Designera, a następnie Web Developera. Zapisany w ten sposób projekt jest edytowalny i z łatwością pozwala sprawdzić atrybuty wszystkich elementów z jakich będzie składać się strona jak np. szerokość, wysokość, przeźroczystość, wielkość czcionki. 

Zawartość pliku

Każdy projekt powinien składać się z uporządkowanych warstw zawierających po jednym elemencie (ikonka, grafika, kształt, tekst). Osadzenie na oddzielnych warstwach (z dodatkowym opisem) znacząco przyśpiesza pracę podczas ustalania atrybutów, jak i wycinania potrzebnych grafik do zamieszczenia na stronie.


Uporządkowane warstwy z podziałem na sekcje

Kompatybilność projektu

Żyjemy w czasach kiedy każda strona musi być dostosowana do różnych wielkości ekranu. Podczas przygotowywania projektu sprawdźmy, czy stworzyliśmy dodatkowe widoki dostosowane dla wyświetlaczy tabletów i telefonów.


Widoki dla trzech wielkości wyświetlaczy

Materiały graficzne

Zamieszczając w projekcie grafiki, pamiętajmy o osadzeniu ich jako obiekty inteligentne (w oryginalnym rozmiarze), które dopiero potem można dowolnie modyfikować (przycinać, skalować). Jest to o tyle ważne, że podczas cięcia grafik z projektu używa się dla wyświetlaczy retina większych rozmiarów grafiki w celu polepszenia ich jakości na wyświetlaczu.

Wszystkie obiekty graficzne najlepiej osadzać używając bezstratnej kompresji zapisu (np. PNG).

Typografia

Decydując się na używanie niestandardowych czcionek w projekcie, trzeba dołączyć je w końcowej paczce z projektem. Nie wystarczy ich użyć jedynie w pliku PSD. Front Developer nie posiada wszystkich typów typografia (szczególnie tych, które są na licencji).

Ikonki

Planując zamieszczenie ikonek na stronie, warto zastosować grafiki wektorowe. Ich jakość jest bezstratna w porównaniu z grafikami rastrowymi. Wielkość pliku wynikowego również będzie znacząco odczuwalny. (przeczytaj więcej o SVG).


Ikonka informacyjna w grafice wektorowej.

Stany elementów

Jeśli dany element posiada dodatkowy stan (np. rozwinięcie menu po najechaniu myszką albo kliknięcie przycisk) powinien być uwzględniony w projekcie. Developer musi wiedzieć, że coś będzie interaktywne, aby móc to zakodować.


Wizualizacja interakcji najechania myszką na element

Podsumowanie

Profesjonalne przygotowanie pliku PSD do zakodowania strony znacząco ułatwia pracę Web Developerowi. Głównie przekłada się na czas poświęcony pracy nad danym projektem. Dodatkowo klient ma pewność, że jego strona będzie idealnie odwzorowywać jego koncepcje wyglądu jak i zachowania.

Ciasteczka Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje.