Dnes je tu druhá polovina know-how „Jak správně
servírovat design“, pokud jste nečetli první, máte možnost zde (taky už bylo načase vydat
pořádný článek).
V tomto spotu se budu věnovat tomu, jak mít správně strukturovaný
soubor s vrstvami ve Photoshopu a správně přichystaný hotový layout
webu.
Struktura souboru s vrstvami
Pokud připravujete pouze design, neboli grafický návrh,
exportujete klientovi tradičně zdrojový soubor (.PSD, .TIFF a pod.),
rozstříhanou grafiku v .PNG a optimalizovanou pro použití na webu. Pokud
ovšem bude váš klient či jeho pomocná ruka chtít zdrojový soubor
otevřít, například pro úpravů textů či změnu barev a následnou novou
exportaci rozstříhané grafiky, nesmíteho ho nepříjemně překvapit hroznou
úpravou souboru. Řiďte se těmito zásadami:
- všechny vrstvy mějte stručně pojmenované, nezapomeňte pro zahraniční klienty pojmenovávat anglicky ;)
- rozhodně nezahazujte všechny pravítka a jiné pomocné nástroje, které jste si pro práci nastavili a které vám určují například hranice nějaké plochy. Rovněž jsou pravítka důležitá pro snadnější nastavení ořezových ploch
- Photoshop CS a CS2 umožňuje vrstvy řadit do složek – využijte toho a nezapomeňte, že i složka, stejně tak jako vrstva, může mít pro větší přehled jinou barvu. Tu nastavíte poklikáním na název složky nebo vrstvy.
- ujistěte se, že dokument OBSAHUJE ořezové cesty, vybrané nástrojem „Slince Tool“ (K), tyto cesty využijete, když ukládáte dokument pro web (SHIFT+CTRL+ALT+S), kdy se vám celá grafika krásně a přesně rozstříhá, dle nastavených ořezových ploch
- nenechávejte zbytečná místa, pokud je celý design situován pouze na 760*1000 pixelové ploše, je zbytečné aby na krajích byla další plocha, která jen zvětšuje výsledný soubor a zpomaluje práci s ním. Stejně tak i plochy za konci plátna. Ale POZOR! Pokud budou nějaké vrstvy přesahovat za plochu plátna a chceme je v budoucnu využít (například pokud by se něco pootočit či posunou), tak tyto vrstvy neořezávejte!
- konečný soubor ukládejte v módu zpětné kompatibility, který nabízí Photoshop CS i CS2 a kterou zapnete přes zkratku CTRL+K → otevřou se vám nastavení, z roletky zvolte „FIle handling“ (zacházení se souborem) → volbu „Maximize PSD and PSB filce compatibility“ nastavte na „Ask“. Program se vás tedy vždy při uložení .PSD nebo .PSB souboru zeptá, zda chtete optimalizovat jeho kompatibilitu nebo ne.
Přichystání hotového layoutu webu
Layout (tedy šablonu webu v HTML a s grafikou a všemi jeho součástmi,
které jste měli vytvořit) podávejte nejlépe s předvyplněným obsahem
například nástrojem Lipsum.com. Dbejte na to
aby layout byl naducmaný a v celé jeho kráse. Vyplňte tímto generátorem
všechny sloupce, odkazy, nadpisy, citáty a pod.
O struktuře souborů jsme se bavil minule, možná bych ještě poznamenal, to
co jsme minule zapomněl, tedy jak by měla vypadat struktura na serveru.
Rozhodně nemíchejte všechno do jedné složky! Obrázky a stylopis umístěte
do ./img/, dokumenty do ./doc/ a tak dále.
Popularity: 2% [?]
