PSD to pliki programu Photoshop, który jest często wykorzystywany do projektowania stron internetowych. Aby jednak projekt przeistoczył się w działającą stronę internetową, należy przełożyć go na zrozumiały dla wyszukiwarek język HTML oraz arkusze stylów CSS.
Konwersje projektów PSD do HTML można przeprowadzać poprzez samodzielne kodowanie. Pozwala to zachować wysoką staranność podczas konwersji pliku. Dostępne są także narzędzia automatyzujące ten proces. Pozwalają go przeprowadzić szybko i wygodnie, ale niestety istnieje ryzyko niedokładnością konwersji.
Etapy ręcznej konwersji projektu z PSD na HTML są następujące:
- eksportowanie obrazów z PSD: należy tu zwracać uwagę na warstwy oraz pamiętać o możliwościach CSS, które pozwalają na dodawanie wielu efektów graficznych. CSS nie tylko ogranicza ilość pracy programisty podczas wycinania obrazów, ale także zmniejsza ilość plików, które użytkownik musi pobrać z serwera przy otwieraniu strony, co poprawia jej wydajność.
- tworzenie struktury strony w HTML: wszystkie sekcje strony powinny być zdefiniowane poprawnie, m.in. nagłówek, elementy nawigacji czy stopka strony. Należy także starannie przejrzeć składnię kodu, aby uniknąć np. problemów z SEO czy responsywnością.
- definiowanie stylów CSS: w tym celu używane są często frameworki, takie jak np. Bootstrap, które samodzielnie konfigurują część CSS. Korzystać można także z preprocesorów, jak SASS, LESS i Stylus.
- tworzenie interakcji za pomocą JavaScript: JavaScript pozwala na umieszczenie w witrynie dynamicznych elementów oraz dodatkowych efektów. Pomocne mogą tu być takie frameworki takie jak Angular.
