Základy Adobe Photoshopu, část 9.

Photoshop je velmi často využíván nejen pro DTP, ale zejména také pro tvorbu webové grafiky. To si uvědomili i chytří manažeři společnosti Adobe a přibalili k Photoshopu program ImageReady, který činí tvorbu webových stránek mnohem jednodušší.
Internet už dnes zdaleka není jen móda, je to součást každodenního života. Webové stránky se staly jedním ze zásadních informačních médií a jejich tvorba vyžaduje značné znalosti a dovednosti. Společnost Adobe si naštěstí (pro ni i pro uživatele) poměrně brzy uvědomila, že i její Photoshop je velice často využíván jako nástroj pro web, resp. pro tvorbu webové grafiky, ačkoliv původní zaměření programu bylo "čistě papírové" (DTP). Také proto je od verze 5 součástí balíku zvaného Adobe Photoshop program Adobe ImageReady, který jest určen právě pro tvorbu webových stránek. V sedmé verzi Photoshopu je to ImageReady verze 7.0 a právě o něm bude v této části našeho seriálu řeč.

Základy ImageReady

Jak jsem již řekl, ImageReady je zcela samostatný program a lze ho tak i použít (ovládání je téměř totožné s PS), avšak jeho největší potenciál tkví právě ve spojení s Photoshopem. Jako takový je samozřejmě i velice komplikovaný a nabízí téměř stejné množství funkcí (některé zcela totožné, jiné zase úplně nové) jako Photoshop. Hlavní obrazovka programu vypadá obvykle takto:

Na první pohled zde příliš rozdílů mezi ImageReady a Photoshopem nenajdeme, na druhý pohled si už ale všimneme, že např. uspořádání paletek je poněkud odlišné a také panel nástrojů není zcela totožný. Nový je nástroj Obrazová mapa (klávesová zkratka P) a nástroj Rozřezání (K).

Rozřezání je vlastně výchozím nástrojem celého programu - zkušenější tvůrci webů už jistě vědí, o čem je řeč, pro ty méně zkušené přiblížím: v dnešních webových stránkách obvykle textová informace úzce souvisí s informací prezentovanou graficky, tj. obrázkem. Tato grafika se často vytváří právě ve Photoshopu. Dříve bývalo obvykle nutné ji následně takzvaně "rozřezat" na jednotlivé díly (někdy za pomocí externího programu) a ty pak ve stránce opět poskládat za pomoci jazyka HTML. Jistým záchranným kruhem z této nemilé situace byly (a samozřejmě někdy stále jsou) ony programy jiných výrobců. To se samozřejmě společnosti Adobe nelíbilo, její programy by přeci měly poskytovat tvůrcům všechny potřebné nástroje, aby nemuseli sahat po programech cizích - a tak vznikl ImageReady.

Situace tedy dnes vypadá následovně: ve Photoshopu webdesignér navrhne grafickou podobu svých stránek. Pokud je opravdu velmi jednoduchá, může ji rovnou z Photoshopu exportovat do webové stránky. Jakmile však tvůrce staví poněkud složitější konstrukci, obvykle se přepne do ImageReady, což lze provést stiskem jediného tlačítka v panelu nástrojů Photoshopu, a v něm dodělá potřebné složitější prvky, jako jsou například odkazy, měnící se tlačítka, animace, apod. Pokud běží oba programy, ImageReady i PhotoShop současně, přenášejí se mezi nimi změny v souboru zcela automaticky.

Nástroj rozřezání

S jeho pomocí tvoříme tzv. řezy, což jsou vlastně jednotlivé obrazové části webové stránky. Máme-li grafické menu, které se s nájezdem myší na jednotlivé položky mění, musíme vytvořit řez z každého tohoto tlačítka. Nutno podotknout, že text vytvořený v ImageReady nebo Photoshopu nástrojem Text je z hlediska webové stránky brán taktéž jako obrázek. Často se stránky skládají hned z několika obrázků různého typu - jednou je to několik primitivních tvarů typu čtverce nebo jiného mnohoúhelníku, jindy jde o fotografii. Proto je dobré vytvářet samostatné řezy i z těchto částí obrázků a určovat jim různé typy komprese, respektive optimalizace.

U každého řezu lze totiž dopodrobna volit typ optimalizace (různé druhy GIF, JPG nebo PNG), odkaz či obrazovu mapu, na kterou má směřovat (pokud má jít o odkaz), animaci nebo rollover (obrázek, který se zobrazí po nájezdu myší - paletka Rollover). Existuje zde také možnost definovat řez jako neobrazový a vložit do něj text, jenž se bude v HTML jevit skutečně jako text. Navíc lze určit i barvu pozadí tohoto textu (paletka Řez).

Řezy se v obrázku jeví jako (obvykle, lze si to přizpůsobit) modře ohraničené obdélníky s číslem a informační ikonkou v levém horním rohu. K označování řezů slouží nástroj Výběr řezu, který nalezneme pod ikonkou nástroje Rozřezání. Řezům lze kdykoliv upravovat rozměry za pomoci malých čtverečkových úchytů v rozích a uprostřed stran. Aktuálně zvolený řez se vyznačuje (opět dodávám "obvykle") oranžovým ohraničením a "nezešednutím".

Nové možnosti

V horní části hlavního okna dokumentu se nachází čtyři záložky - Originál, Optimalizovaný, 2 najednou a 4 najednou. Jedná se o zobrazování více možností optimalizace obrázku najednou, hodí se zejména v okamžicích kdy si nejsme jisti, který typ optimalizace (zda JPG, GIF nebo PNG) by byl nejvhodnější a proto se raději na vlastní oči přesvědčíme, můžeme zároveň i sledovat velikost výsledného souboru. Pokud zvolíme jeden nebo více řezů, zobrazí se optimalizace právě a jen těchto řezů.

V dolní části hlavního okna dokumentu můžeme zase sledovat aktuální zvětšení, celkovou velikost dokumentu, případně výslednou velikost obrázků z jednotlivých řezů. Informace dole lze však libovolně přizpůsobovat (prostě na ně kliknete levým tlačítkem a vyberete si z nabídky).

V paletce Informace lze pak zjistit informace o přesných rozměrech každého řezu, případně i kterékoliv barvy v obrázku v hexadecimální tvaru.

Vrstvám lze snadno a rychle přiřazovat různé styly, vlastnoruční nastavování těchto voleb však v ImageReady chybí. Tuto a další možnosti získáte po kliknutí pravého tlačítka na některou vrstvu v paletce Vrstvy. Z každé vrstvy lze například jediným kliknutím vytvořit řez či obrazovou mapu. V paletce Vrstvy lze také volit různé vzájemné interakce vrstev, stejně jako v PS.

Práce se soubory

V ImageReady otevřete vlastně všechny soubory, které lze otevřít ve Photoshopu. Naproti tomu jediný formát, do kterého je možné v ImageReady ukládat, je PSD. Zdá se to málo, ale cokoliv dalšího by bylo v podstatě zbytečné. Možnosti exportu jsou poněkud rozšířené, lze ukládat např. i v BMP, TARGA či TIFF. Nejdůležitější funkcí tohoto programu je ovšem export do HTML, tedy do webové stránky (lze ale exportovat samostatně jak obrázky, tak i HTML soubor).

Výborně propracované jsou volby ukládání HTML souboru. Můžete si zde nastavit typ písmen HTML jazyka (malá, počáteční velká, velká), odsazení, typ uspořádání (tabulka/css), vkládání uvozovek, uzavírání tagů, atd. Také lze nastavit vkládání šířky a výšky buněk při uložení v tabulce či pojmenování jednotlivých řezů (obrázků).

Závěrem

V nejnovější verzi Photoshopu (7.0) už jsou některé funkce ImageReady také přístupné, zejména se jedná o řezy a přímé ukládání stránek do HTML souborů. Do budoucna to vypadá tak, že oba programy budou postupně splývat a je klidně možné, že nakonec se spojí v jeden (čímž by např. mohla vzniknout úplně nová verze zvaná třeba "iPhotoshop").

A to je konec dnešní "lekce". V příští, už předposlední části tohoto seriálu se budeme zabývat internetovými zdroji spojenými s Photoshopem a povíme si také něco málo o historii tohoto fenomenálního programu.

Váš názor Další článek: KaZaA Lite K++ 2.1.0 i v češtině

Témata článku: Adobe Photoshop, Adobe, Horní okno, Jediná možnost, Photos, Různé typy, Jednotlivý soubor, Samostatná stránka, Předposlední verze, Potřebná možnost, Photoshop, Jednotlivé verze, Informační panel, Různá móda, Přesný tvar, Papírová verze, PS 2, Výsledné dílo, Potřebný nástroj, Jednotlivá buňka, Základ

Určitě si přečtěte


Aktuální číslo časopisu Computer

Zachraňte nefunkční Windows

Jak nakupovat a prodávat kryptoměny

Otestovali jsme konvertibilní notebooky

Velký test 14 herních myší