Převod souboru PSD do CSS

Mockup ve Photoshopu je třeba převést na rozhraní v prohlížeči, když designér předá webovému vývojáři vrstvený soubor .psd. Výsledkem není jiný obrazový formát, ale HTML nastylované pomocí stylopisu .css spolu s exportovanými obrazovými nebo vektorovými prostředky tam, kde jsou potřeba.

Co je formát PSD

PSD je nativní vrstvený rastrový obrazový formát aplikace Adobe Photoshop. Může v jednom dokumentu ukládat pixelové vrstvy, upravitelný text, vektorové tvary, masky, vrstvy úprav, vodítka, efekty vrstev, inteligentní objekty a další editační data.

Fotografové, ilustrátoři, grafičtí designéři, UI designéři a webové agentury používají soubory PSD pro upravitelné kompozice, mockupy rozhraní, reklamní grafiku a tiskové návrhy. Soubor PSD může zobrazovat celou stránku nebo obrazovku aplikace, ale nedefinuje strukturu HTML, sémantický význam, interakci, přístupnost ani responzivní chování.

Co je formát CSS

CSS je formát stylopisu v prostém textu, který řídí prezentaci a rozvržení HTML a SVG. Mezi jeho vlastnosti patří color, font-family, font-size, margin, padding, display, grid-template-columns, okraje, stíny, transformace a responzivní pravidla médií.

CSS umožňuje upravovat design ve webu nebo aplikaci, přizpůsobovat text a rozvržení různým obrazovkám a oddělovat prezentaci od obsahu HTML. Stylopis nemůže ukládat vrstvy Photoshopu, historii úprav, upravitelný text PSD ani libovolná pixelová data.

Jak převést PSD na CSS

Neexistuje úplný bezeztrátový převod PSD na CSS, protože PSD popisuje upravitelnou vizuální kompozici, zatímco CSS popisuje pravidla aplikovaná na prvky dokumentu. Praktický převod spočívá v předání návrhu a implementaci front-endu.

1. Otevřete soubor v Adobe Photoshop a uspořádejte vrstvy do smysluplných skupin, například header, navigation, card a footer. Vrstvy přejmenujte tak, aby označovaly odpovídající prvky rozhraní.
2. Pomocí vodítek, pravítek, panelu Character a vzorkovače barev ve Photoshopu zkontrolujte rozměry, mezery, barvy, typografii, krytí a efekty. Používejte konzistentní systém měření založený na pixelech nebo jednotkách rem.
3. U kompatibilních textových, tvarových a obrazových vrstev použijte příkaz Copy CSS z kontextové nabídky vrstvy. Deklarace vložte do souboru, například styles.css, a poté odstraňte selektory a vlastnosti, které neodpovídají skutečnému markupu.
4. Vytvořte sémantické prvky HTML, které reprezentují design, a poté je pomocí tříd nebo jiných vhodných selektorů propojte se stylopisem. Souřadnice plátna z Photoshopu nahraďte pomocí Flexboxu, CSS Grid, běžného toku dokumentu nebo jiného modelu rozvržení.
5. Exportujte prostředky, které CSS nedokáže přímo reprodukovat. Pomocí File → Export → Export As exportujte fotografie jako .jpg, rastrovou grafiku vyžadující průhlednost jako .png a vhodnou jednoduchou vektorovou grafiku jako .svg. Podle potřeby na ně odkazujte pomocí <img> nebo background-image.
6. Implementaci otestujte v prohlížečích při požadovaných velikostech viewportu. Porovnejte typografii, zalamování řádků, mezery, ořezání obrázků a vizuální efekty s PSD a poté přidejte responzivní pravidla namísto vynucování jednoho pevného plátna.

Adobe Photoshop je nejpřímější desktopovou možností, protože načítá nativní data PSD a poskytuje export prostředků i kopírování CSS. Photopea je pro příležitostnou práci zavedenou alternativou v prohlížeči: otevírá soubory PSD, zpřístupňuje vlastnosti vrstev a u podporovaných vrstev dokáže kopírovat CSS. I tak vyžaduje ruční tvorbu HTML, práci s rozvržením, export prostředků a responzivní testování.

Nástroje pro kontrolu návrhu a předávání podkladů, jako je Avocode, mohou zpřístupňovat rozměry vrstev, barvy, typografii a úryvky CSS, ale funkce importu a exportu PSD se liší podle produktu a předplatného. Než se na některý nástroj spolehnete, ověřte jeho aktuální podporu PSD. Obecné online převodníky „PSD to CSS“ obvykle generují pouze základní deklarace nebo úryvky s pevnými pozicemi; nenahrávejte důvěrné soubory s návrhy do neznámé služby.

Omezení kvality a kompatibility

CSS zkopírované z Photoshopu často představuje pevné plátno s absolutními pozicemi. Může odpovídat jednomu snímku obrazovky, ale selhat při zúžení viewportu, změně délky textu, rozšíření obsahu nebo zvětšení velikosti písma uživatelem. Rozvržení znovu sestavte pomocí sémantického HTML, Flexboxu nebo Gridu, relativních jednotek a media queries.

Styly vrstev, režimy prolnutí, ořezové masky, inteligentní filtry, vrstvy úprav a složité stíny nemusí mít přímý ekvivalent v CSS. Tam, kde je to praktické, je aproximujte pomocí gradientů, stínů, filtrů, pseudo-elementů a vlastností prolnutí; v opačném případě exportujte výsledek jako rastrový nebo vektorový prostředek.

Typografie v prohlížeči závisí na dostupném webově bezpečném fontu, licencovaném webfontu nebo @font-face. Chybějící nebo nahrazený font mění zalamování řádků a může změnit celé rozvržení. CSS také nedokáže zachovat upravitelnou historii vrstev Photoshopu, proto si původní .psd ponechte jako zdrojový soubor.