Od príchodu verzie CS6 implementovala spoločnosť Adobe vo Photoshope veľmi užitočnú možnosť rozloženia a vývoja webových návrhov. Operácia je veľmi ľahké a najmä rýchly. Prostredníctvom aplikácie budeme môcť generovať kaskádové štýly, ktoré budú slúžiť ako referencia pre naše tvarové a textové vrstvy. Postup je rovnako jednoduchý ako vývoj našej makety, kopírovanie kódovej verzie našich prvkov a jej vloženie do nášho hárka.
Je to veľmi dobrá voľba, najmä preto, že nám umožňuje vidieť vývoj nášho dizajnu vo vizuálnom vyjadrení a v reálnom čase. Tu je niekoľko rád, ako túto možnosť využiť a získať maximálny výkon:
Snažte sa byť presní
Pre získanie profesionálneho výsledku sa odporúča vziať do úvahy miery a proporcie vášho webu. Nastavte hodnoty Šírka a Výška šablóny, ktorú navrhujete, a použite ich vo svojej makete. Keď skopírujete kód CSS, umiestnime každý prvok, pričom ako referenciu uvedieme vzdialenosť v pixeloch medzi každým prvkom a okrajmi plátna. Berte do úvahy aj veľkosti a hierarchické dôvody, ktoré sa chystáte zahrnúť do svojho návrhu, vrátane zarovnania každého prvku a medzery medzi nimi, aby bola zaistená maximálna čitateľnosť pre vašich používateľov.
Použitie sprievodcov a pravidlá rozhrania vám pomôžu vytvoriť úhľadnú a čistú šablónu so všetkými jej prvkami dokonale vyrovnanými.
Nakonfigurujte všetky vlastnosti každého prvku
Možnosť skopírovať kód CSS nám dáva možnosť navrhnúť naše stránky s vysokou presnosťou pomocou tvarových a textových vrstiev. Obsah každej vrstvy sa skopíruje do schránky a my ju môžeme rýchlo vložiť do našej šablóny štýlov. Z vrstiev tvarov zaznamenajte hodnoty nasledujúcich nastavení:
- veľkosť
- pozície
- Farba ťahu
- Farba výplne (vrátane prechodov)
- Vrhať tieň
Z textových vrstiev môžeme zachytiť nasledujúce hodnoty:
- Rodina písma
- Veľkosť písma
- Hrúbka písma
- Výška čiary
- Podčiarknuté
- preškrtnuté
- Horný index
- Dolný index
- Zarovnanie textu
Pamätajte na to a každú z týchto hodnôt nastavte tak, aby poskytovali štýl, ktorý hľadáte.
Pracujte so skupinami vrstiev
Táto funkcia prekladá našu prácu usporiadanú do dvoch typov tried, jedného pre každú skupinu, ktorá spája vrstvy tvarov alebo textu, a triedy pre každú vrstvu jedného z týchto typov. Každá trieda skupiny bude predstavovať nadradený prvok div, ktorý bude obsahovať podradené prvky div a ktorý bude zodpovedať vrstvám vloženým do každej skupiny. Týmto spôsobom sa nastavia horné a ľavé hodnoty podradených kontajnerov odkazom na nadradený kontajner. Mali by ste mať na pamäti, že táto možnosť nie je k dispozícii pre inteligentné objekty a nebude možné ich použiť na viac ako jednu vrstvu súčasne, pokiaľ nie sú zoskupené.
Kroky na konverziu
Po vytvorení makety ste prispôsobili každý prvok a zoskupili ste ich do skupín. Budete musieť postupovať iba podľa týchto krokov:
- Prejdite na panel vrstiev a vyberte jednu z týchto dvoch možností:
- Pravým tlačidlom myši kliknite na vrstvu tvaru alebo textu alebo na skupinu vrstiev a vyberte Kopírovať CSS v kontextovej ponuke.
- Vyberte vrstvu tvaru alebo textu alebo skupinu vrstiev a potom vyberte príslušnú možnosť Kopírovať CSS v ponuke panela Vrstvy.
-
Vložte kód do svojho dokumentu so štýlmi a aplikujte ho na svoje stránky pomocou html5.
