Konwertuj PSD na CSS

Makietę Photoshop należy przekształcić w interfejs przeglądarkowy, gdy projektant przekazuje programiście internetowemu warstwowy plik .psd. Rezultatem nie jest inny format obrazu, lecz kod HTML stylowany za pomocą arkusza stylów .css oraz wyeksportowane zasoby graficzne lub wektorowe tam, gdzie są wymagane.

Czym jest format PSD

PSD to natywny, warstwowy format rastrowy programu Adobe Photoshop. Może przechowywać warstwy pikseli, edytowalny tekst, kształty wektorowe, maski, warstwy dopasowania, linie pomocnicze, efekty warstw, obiekty inteligentne oraz inne dane edycyjne w jednym dokumencie.

Fotografowie, ilustratorzy, graficy, projektanci UI i agencje internetowe używają plików PSD do tworzenia edytowalnych kompozycji, makiet interfejsów, materiałów reklamowych i projektów do druku. Plik PSD może przedstawiać kompletną stronę lub ekran aplikacji, ale nie definiuje struktury HTML, znaczenia semantycznego, interakcji, dostępności ani responsywnego zachowania.

Czym jest format CSS

CSS to format arkuszy stylów w postaci zwykłego tekstu, który steruje prezentacją i układem HTML oraz SVG. Jego właściwości obejmują color, font-family, font-size, margin, padding, display, grid-template-columns, obramowania, cienie, transformacje i responsywne reguły mediów.

CSS umożliwia edycję projektu w witrynie internetowej lub aplikacji, pozwala dopasowywać tekst i układy do różnych ekranów oraz oddziela prezentację od treści HTML. Arkusz stylów nie może przechowywać warstw programu Photoshop, historii dopasowań, edytowalnego tekstu PSD ani dowolnych danych pikselowych.

Jak przekonwertować PSD na CSS

Nie istnieje kompletna, bezstratna konwersja PSD do CSS, ponieważ PSD opisuje edytowalną kompozycję wizualną, a CSS opisuje reguły stosowane do elementów dokumentu. W praktyce konwersja polega na przekazaniu projektu i implementacji front-endowej.

1. Otwórz plik w Adobe Photoshop i uporządkuj warstwy w znaczące grupy, takie jak nagłówek, nawigacja, karta i stopka. Zmień nazwy warstw tak, aby wskazywały odpowiadające im elementy interfejsu.
2. Sprawdź wymiary, odstępy, kolory, typografię, krycie i efekty za pomocą linii pomocniczych, linijek, panelu Character oraz próbnika kolorów w Photoshopie. Stosuj spójny system pomiarów oparty na pikselach lub jednostkach rem.
3. W przypadku zgodnych warstw tekstu, kształtów i obrazów użyj polecenia Copy CSS z menu kontekstowego warstwy. Wklej deklaracje do pliku takiego jak styles.css, a następnie usuń selektory i właściwości, które nie pasują do rzeczywistego kodu HTML.
4. Utwórz semantyczne elementy HTML reprezentujące projekt, a następnie połącz je z arkuszem stylów za pomocą klas lub innych odpowiednich selektorów. Zastąp współrzędne obszaru roboczego programu Photoshop modelem układu Flexbox, CSS Grid, normalnym przepływem lub innym modelem układu.
5. Wyeksportuj zasoby, których CSS nie może bezpośrednio odtworzyć. Użyj opcji File → Export → Export As: w przypadku fotografii wybierz .jpg, w przypadku rastrowej grafiki wymagającej przezroczystości wybierz .png, a w przypadku odpowiednich prostych grafik wektorowych wybierz .svg. Odwołuj się do nich za pomocą <img> lub background-image, zależnie od potrzeb.
6. Przetestuj implementację w przeglądarkach przy wymaganych rozmiarach obszaru wyświetlania. Porównaj typografię, zawijanie wierszy, odstępy, kadrowanie obrazów i efekty wizualne z plikiem PSD, a następnie dodaj reguły responsywne zamiast wymuszać jeden stały obszar roboczy.

Adobe Photoshop jest najbardziej bezpośrednią opcją desktopową, ponieważ odczytuje natywne dane PSD oraz udostępnia eksport zasobów i kopiowanie CSS. Photopea to renomowana alternatywa działająca w przeglądarce, odpowiednia do okazjonalnej pracy: otwiera pliki PSD, udostępnia właściwości warstw i może kopiować CSS dla obsługiwanych warstw. Nadal wymaga jednak ręcznego przygotowania HTML, pracy nad układem, eksportu zasobów i testów responsywności.

Narzędzia do inspekcji projektu i przekazywania go do implementacji, takie jak Avocode, mogą udostępniać wymiary warstw, kolory, typografię i fragmenty CSS, ale funkcje importu i eksportu PSD różnią się w zależności od produktu i subskrypcji. Przed poleganiem na konkretnym narzędziu sprawdź jego aktualną obsługę PSD. Ogólne internetowe konwertery „PSD to CSS” zwykle generują jedynie podstawowe deklaracje lub fragmenty z pozycjonowaniem stałym; nie przesyłaj poufnych plików projektowych do nieznanej usługi.

Ograniczenia jakości i zgodności

Skopiowany z programu Photoshop kod CSS często odwzorowuje stały obszar roboczy z pozycjonowaniem absolutnym. Może pasować do jednego zrzutu ekranu, ale przestać działać poprawnie, gdy obszar wyświetlania się zwęzi, zmieni się długość tekstu, zwiększy się ilość treści lub użytkownicy powiększą rozmiar czcionki. Przebuduj układ za pomocą semantycznego HTML, Flexbox lub Grid, jednostek względnych i zapytań medialnych.

Style warstw, tryby mieszania, maski przycinania, filtry inteligentne, warstwy dopasowania i złożone cienie mogą nie mieć bezpośrednich odpowiedników w CSS. W miarę możliwości odtwórz je za pomocą gradientów, cieni, filtrów, pseudoelementów i właściwości mieszania; w przeciwnym razie wyeksportuj zmodyfikowany rezultat jako zasób rastrowy lub wektorowy.

Typografia w przeglądarce zależy od dostępnej czcionki bezpiecznej dla sieci, licencjonowanej czcionki internetowej lub reguły @font-face. Brak czcionki albo zastąpienie jej inną zmienia zawijanie wierszy i może wpłynąć na cały układ. CSS nie może również zachować edytowalnej historii warstw programu Photoshop, dlatego zachowaj oryginalny plik .psd jako plik źródłowy.