Od příchodu verze CS6 implementovala společnost Adobe ve Photoshopu velmi užitečnou možnost rozvržení a vývoje webových návrhů. Operace je velmi snadné a především rápido. Prostřednictvím aplikace budeme moci generovat kaskádové styly, přičemž jako reference použijeme naše tvarové a textové vrstvy. Postup je stejně jednoduchý jako vývoj naší makety, kopírování verze kódu našich prvků a její vložení na náš list.
Je to velmi dobrá volba, zejména proto, že nám umožňuje vidět vývoj našeho designu ve vizuálním smyslu a v reálném čase. Zde je několik tipů, jak tuto možnost využít a získat maximální výkon:
Snažte se být přesní
Pro získání profesionálního výsledku se doporučuje vzít v úvahu měření a proporce vašeho webu. Nastavte hodnoty Šířka a Výška šablony, kterou navrhujete, a použijte je ve vaší maketě. Když zkopírujete kód CSS, umístíme každý prvek jako referenční vzdálenost v pixelech mezi každým prvkem a hranami plátna. Vezměte také v úvahu velikosti a hierarchické důvody, které se chystáte zahrnout do svého návrhu, včetně zarovnání každého prvku a mezery mezi každým z nich, aby byla uživatelům zajištěna maximální čitelnost.
Použití vodítek a pravidel rozhraní vám pomůže vytvořit elegantní a čistou šablonu se všemi jejími prvky dokonale zarovnanými.
Nakonfigurujte všechny vlastnosti každého prvku
Možnost kopírovat kód CSS nám dává možnost navrhnout naše stránky s velkou přesností pomocí formových a textových vrstev. Obsah každé vrstvy bude zkopírován do schránky a můžeme ji rychle vložit do naší šablony stylů. Z vrstev tvarů zachyťte hodnoty následujících nastavení:
- Velikost
- Pozice
- Barva tahu
- Barva výplně (včetně přechodů)
- Vrhat stín
Z textových vrstev můžeme zachytit následující hodnoty:
- Rodina písem
- Velikost písma
- Tloušťka písma
- Výška čáry
- Podtrženo
- Přeškrtněte
- Horní index
- Dolní index
- Zarovnání textu
Mějte to na paměti a každou z těchto hodnot nastavte tak, aby poskytovala styl, který hledáte.
Práce se skupinami vrstev
Tato funkce překládá naši práci organizovanou dvěma typy tříd, jedním pro každou skupinu, která spojuje vrstvy tvarů nebo textu, a třídou pro každou vrstvu jednoho z těchto typů. Každá třída skupiny bude představovat nadřazený prvek div, který bude obsahovat podřízené prvky div a který bude odpovídat vrstvám vloženým do každé skupiny. Tímto způsobem budou nastaveny horní a levé hodnoty podřízených kontejnerů s odkazem na nadřazený kontejner. Musíte mít na paměti, že tato možnost není k dispozici u inteligentních objektů a nebude použitelná pro více než jednu vrstvu současně, pokud nejsou seskupeny.
Kroky k převodu
Jakmile vytvoříte maketu, přizpůsobili jste každý prvek a seskupili jste je podle skupin, budete muset postupovat pouze podle těchto kroků:
- Přejděte na panel vrstev a vyberte jednu z těchto dvou možností:
- Klepněte pravým tlačítkem na vrstvu tvaru nebo textu nebo skupinu vrstev a vyberte Zkopírujte CSS v kontextové nabídce.
- Vyberte vrstvu tvarů nebo textu nebo skupinu vrstev a poté vyberte tuto možnost Zkopírujte CSS v nabídce panelu Vrstvy.
-
Vložte kód do dokumentu šablony stylů a použijte jej na své stránky pomocí html5.
