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, Adobe Photoshop, Základ, Informační panel, Jediná možnost, Různá móda, Potřebná možnost, Různé typy, Samostatná stránka, Jednotlivý soubor, Papírová verze, PS 2, Předposlední verze, Photoshop, Horní okno, Výsledné dílo, Photos, Jednotlivé verze, Potřebný nástroj, Přesný tvar, Jednotlivá buňka, Mnohoúhelník


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

Porno insider: Jak virtuální realita vstupuje do filmů pro dospělé

Porno insider: Jak virtuální realita vstupuje do filmů pro dospělé

** Pornografie údajně představuje třetinu internetové obsahu a je technologický tahounem ** Do erotického obsahu postupně zasahuje i virtuální realita ** Kromě vizuálního vjemu se pracuje také na virtuálním uspokojení toho hmatového

Jan Dudek | 28

Sex a rozmnožování při mezihvězdné cestě: Kolik lidí je potřeba pro let k Proximě Centauri?

Sex a rozmnožování při mezihvězdné cestě: Kolik lidí je potřeba pro let k Proximě Centauri?

** Vědci spočítali, jak velká by musela být posádka pro vícegenerační let k nejbližší hvězdné soustavě ** Proxima Centauri se nachází 4,3 světelných let od nás ** Za současných technologií bychom k ní letěli 6300 let

Petr Kubala | 53

15 věcí, které umí Windows 10, ale možná o nich vůbec nevíte

15 věcí, které umí Windows 10, ale možná o nich vůbec nevíte

** Systém Windows 10 umí spoustu užitečných drobností ** O mnoha praktických funkcích pravděpodobně ani nevíte ** Poznejte užitečné tipy, které se vám mohou hodit každý den

Vladislav Kluska | 36

Alan Turing: Genius, který matematicky stvořil počítač

Alan Turing: Genius, který matematicky stvořil počítač

Řešením matematického problému se dostal k modelu teoretického stroje, který nese jeho jméno a je základem logiky univerzálních počítačů.

Pavel Tronner | 56

Jak dopadl velký den Applu s náloží novinek: Sledujte, co letos připravil

Jak dopadl velký den Applu s náloží novinek: Sledujte, co letos připravil

** Apple večer představil novinky ** Ukáže nové operační systémy, ale čekala se i nová zařízení ** Začíná vývojářská konference Applu WWDC 2018

Karel Javůrek | 87

Budoucnost elektroniky: čeští vědci stojí za revolučním čipem, který nemá ve světě obdoby

Budoucnost elektroniky: čeští vědci stojí za revolučním čipem, který nemá ve světě obdoby

** Čeští vědci pod vedením Tomáše Jungwirtha vyvíjí nový typ revolučního paměťového čipu ** Zatímco v současnosti elektronika pracuje s elektrony, v budoucnu to budou spiny elektronů ** Čipy budou moci být klidně i 1 000x rychlejší a úspornější

Karel Javůrek | 32


Aktuální číslo časopisu Computer

Velký test 18 bezdrátových sluchátek

Vše o přechodu na DVB-T2

Procesory AMD opět porážejí Intel

7 NVMe M.2 SSD v přímém souboji