Použití PowerClipu při návrhu webového tlačítka – tutoriál Corel
Verze: CorelDRAW® X4
[12.02.2011 Petr Valach]
CorelDRAW je multifunkční program. S jeho pomocí lze připravovat kromě běžných předmětů typu vizitek a log také kompletní
webové stránky. V tomto článku se dovíte, jak připravit typický prvek webové grafiky, a sice speciální typ tlačítka, kterému
se říká rollover. Toto tlačítko mění svou podobu při najetí myší i při stisku.
Rollovery i celé webové stránky můžete vytvářet jak v CorelDraw, tak ve Photo-Paintu. My si ukážeme, jak postupovat v CorelDRAW,
protože je to jednodušší.
Abyste mohli v CorelDRAW vytvářet rollovery, je třeba zobrazit panel Internet; klepněte na kterýkoli panel
pravým tlačítkem a vyberte z nabídky položku Internet. Zobrazí se panel uvedený a popsaný níže:
S ním můžete vytvářet jednotlivé stavy rolloveru, rolloveru přiřazovat odkaz a exportovat rollover ve formě html stránky.
Obyčejně si při tvorbě rolloverů vystačíte se samotnými prvky vektorové grafiky, nicméně můžete rolloverlu přidat ještě
nějaké ozvláštňující prvky. Takovým může být například rastrová kresba. Pro tento příklad si proto stáhněte odsud obrázek,
který bude rollover vyplňovat. Koncept je následující: Vytvoříte vektorový objekt, do nějž vložíte rastrový obrázek (prostřednitvím
ořezové cesty), přidáte odlesky a nadefinujete stavy.
Vytvoření základního tvaru s odleskem a stínem
Začněte tím, že vyberete z Panelu nástrojů nástroj Obdélník a vytvořte jím obdélník velikosti 185/66. Poté se přepněte na nástroj Tvar. Zobrazí se uzly, jimiž můžete zaoblit rohy obdélníka. Vyberte jeden a přetáhněte ho tak, aby byl obdélník plně zakulacený – viz obrázek:
Dále importujte bitmapu, například prostřednictvím nabídky Soubor – Importovat. Najděte obrázek PH00551 a potvrďte. Ukáže se importovací kurzor, stačí však jen potvrdit stisknutím klávesy Enter. Načtený obrázek se vloží do kresby.
Přesuňte obdélník tak, aby překrýval obrázek ve vhodném místě; v případě potřeby upravte velikost obdélníka. Nedoporučuji provádět škálování na rastrovém obrázku. Respektive tak činit můžete, ale kontrolujte si, aby na stavovém řádku neklesla hodnota rozlišení pod řekněme 96 dpi (standardní rozlišení monitoru). S ohledem na vysoké rozlišení obrázku se není třeba příliš obávat.
Původní obdélník nyní zduplikujte (stisknutím klávesy +). Jeho vyplněním a zprůhledněním upravíte (nedestruktivně)
obrázek umístěný za ním. Ale to až za chvíli. Prozatím jej odsuňte stranou.
Jakmile budete mít původní obdélník na patřičném místě, můžete provést umístění do kontejneru PowerClipu. Předtím se však
ujistěte, že se vám obsah kontejneru nevystředí podle kontejneru, tedy obdélníku. Zjistíte to tak, že se přesvědčíte, že
položka Automaticky umísťovat nový obsah oříznutí PowerClip do středu v Nástroje | Možnosti |
Úpravy je odznačena. Poté již můžete vybrat rastrový obrázek a z nabídky Efekty | Oříznutí PowerClip vyberete
položku Umístit do kontejneru. Poté, co se zobrazí velká šipka, klepněte jí na zakulacený obdélník. Část
rastrového obrázku zmizela, je vymaskována obdélníkem.
Samozřejmě, že obrázek zůstal na svém místě a je možné jej posunovat a vůbec provádět s ním jakékoliv úpravy, které CorelDRAW umožňuje při editaci jakékoliv jiné rastrové grafiky. Pokud byste tak chtěli učinit, najděte v nabídce Efekty | Oříznutí PowerClip možnosti Upravit obsah, resp. Vyjmout obsah. (Ty samé najdete i v kontextové nabídce.) První vám umožní upravit obrázek, resp. obsah kontejneru (kterým může být rastrový i vektorový obázek). Druhá volba vyjímá z kontejneru jeho obsah a ruší tak efekt PowerClipu. A konečně, z kontextové nabídky si můžete vybrat možnost Zamknout obsah do oříznutí PowerClip. To je výchozí volba a znamená, že pokud budete pohybovat kontejnerem (ořezovou maskou), bude se jeho obsah pohybovat s ním. Pokud tuto volbu odznačíte, bude při pohybu kontejneru jeho obsah stát na místě. Je to tedy volba obrácená k volbě Upravit obsah. Nicméně i ta samozřejmě zůstává zachována. V našem případě byste ale možnost zamknutí obsahu PowerClipu mohli využít.
Dodám ještě, že vkládání obsahu kontejneru do PowerClipu lze udělat i prostřednictvím tažení myši za stálého držení pravého tlačítka. Zkuste si jakýkoliv objekt tímto způsobem přesunout dovnitř jiného uzavřeného vektorového objektu. Poté, co se zobrazí zaměřovací kříž, pusťte tlačítko. Vyjede kontextová nabídka, z níž můžete vybrat položku Oříznutí PowerClip dovnitř. Přesunovaný objekt se tak stane obsahem kontejneru a objekt, na který jste najeli, bude ořezávací maskou. Přičemž je třeba pamatovat si, že obsah kontejneru zůstane ve své pozici tam, kde jste ukončili pohyb – podle obrysu, který se při tažení ukazuje. Někdy to může být velmi užitečná alternativa a já ji využívám velice často. Případně po oříznutí můžete odemknout obsah PowerClipu, přesunout ořezávací objekt a obsah zase zamknout. Velice šikovné.
Nyní byste tedy měli mít takovýto obrázek:
Označte kontejner a zrušte mu obrys (klepnutím pravým tlačítkem myši na křížek v paletě). To samé proveďte u duplikovaného obdélníku. Na ukotvitelném panelu Správce objektů přesuňte tento obdélník nad kontejner PowerClipu. Vyberte oba objekty a stiskněte klávesu [p], čímž je vystředíte podle stránky, horní obdélník vybarvěte nějakou tmavší modrou barvou, například Modrou námořnickou. V Panelu nástrojů klepněte na nástroj Interaktivní průhlednost a v Panelu vlastností zadejte následující parametry:
Typ průhlednosti nastavený na režim Jednotný znamená, že daná průhlednost se na objekt aplikuje stejně ve všech místech. Operace sloučení Odečíst sčítá hodnoty obou barev a pak je každou odečte o 255. Obrázek se tak ztmaví. Možné je použít třeba i režim Násobit (přibližně s hodnotou 20), ale tento se zdá být lepší. Posuvníkem Počáteční průhlednost zadáváte stupeň průhlednosti. Můžete experimentovat dle libovůle, nižší hodnota znamená vyšší krytí a tedy snížení jasu celého obrázku.
Po provedených změnách bude obrázek vypadat takto:
Vytvořte nyní odlesk a stín. Nejlépe tak, že zvolíte nástroj Obdélník a vytvoříte dva obdélníky, které už známým způsobem zaoblíte. První, který bude umístěn u horního okraje rolloveru, bude mít velikost 140/16 mm a vyplněný bude bílou barvou. Druhý bude velký 115/16 mm a můžete ho obarvit jakoukoliv barvou. Oběma obdélníkům zrušte obrys, zarovnejte je středově vertikálně s velkým obdélníkem a umístěte je v něm podle následujícího obrázku:
Vyberte horní obdélník a z Panelu nástrojů nástroj Interaktivní průhlednost. Typ zadejte Lineární a táhněte nástrojem odshora dolů a mírně doprava. Měli byste vytvářet pozvolný přechod z bílé do průhledné.
Klepněte nástrojem Interaktivní průhlednost do spodního obdélníku. V Panelu vlastností zadejte poněkud neobvyklou hodnotu průhlednosti, a sice 100 %. Typ průhlednosti bude jednotný. V tomto případě se totiž odlesk (či stín) vytvoří pomocí nástroje Interaktivní stín. Klepněte na něj a z roletky předvoleb na Panelu vlastností vyberte typ Large Glow. V roletce Barva stínu pak zvolte nějakou světle modrou barvu, například Modrou dětskou.
Abyste zabránili tomu, že by tento stín přesahoval mimo rámec rolloveru, umístěte ho do PowerClipu podobně jako rastr.
Tím máte základ pro vytvoření rolloveru hotový. Sluší se však přidat ještě nějaký text. (Právě kvůli němu jste dělali spodní
stín.)
Nápis pro rollover
Nápis lze vyřídit celkem jednoduše – napíšete nějaký text, přidáte mu nějaký stín, aby vypadal plasticky, a jste hotovi.
My se však vydáme poněkud jinou cestou.
Vyberte textový nástroj a napište nějaký nápis, řekněme HOME. Font by měl být se silnou tloušťkou tahu (například Zorque,
který je použit i v našem příkladě). Zadejte mu přiměřenou velikost a vybravěte ho Blankytnou barvou.
Umístěte ho nad spodní modrý stín.. Otevřete ukotvitelný panel Zešikmit (najdete ho v nabídce Okno
| Ukotvitelné panely | Zešikmit). Zadejte následující hodnoty zešikmení:
Hodil by se ještě nějaký stín. Proto v ukotvitelném panelu Správce objektů (nachází se například v nabídce Nástroje) vyberte samotný textový objekt (nikoliv jeho zešikmení), resp. klepněte na text se stisknutou klávesou [Ctrl]. Z roletky Předvolby pak vyberte typ buď Medium Glow nebo Small Glow. Upravte hodnoty stínu podle následujícího obrázku:
Definování stavů rolloveru
Tím jste dostali definitivní podobu rolloveru pro pozici Normálně. To poznáte mj. tak, že vyberete všechny
objekty tvořící rollover a v roletce Aktivní stav rolloveru vidíte aktuální stav, kterým je Normální.
V praxi odpovídá situaci, při níž je tlačítko v neaktivovaném stavu, jen se prostě „nachází“ na webové stránce. (Stavy
rolloveru jste zatím nedefinovali, takže žádný jiný než normální nepřichází do úvahy.)
Akci mu přiřadit můžete jednoduše už tím, že do roletky Internetová adresa vepíšete nějakou adresu – například
http://www.corelclub.cz. Ale to by bylo příliš málo. V CorelDRAW můžete nadefinovat změnu vzhledu objektů při najetí myší
a při stlačení tlačítka myši na objektu. Tyto stavy definujete právě prostřednictvím panelu Internet.
Výhodné je celou situaci sledovat též na ukotvitelném panelu Vlastnosti objektu, který otevřete například
stisknutím kláves [Alt + Enter]. Záložka Internet obsahuje mnohé z panelu Internet. Přičemž
je třeba říci, že stejně jako na panelu Internet je i zde hloupá chyba v překladu: Komentáře pomocí
klávesy ALT je nesmysl, v originálu bylo nejspíš Alt comment a správný překlad tedy je Alternativní
komentář. Jde o nápis, který se zobrazí, pokud nad objekt najedete myškou. Již nyní můžete napsat například Domovská
stránka či něco podobného.
Připomínám, že odkaz nemusí směřovat jen na jinou stránku, v roletce Chování můžete vybrat Zvuk, který se přehraje, anebo odkaz na Záložku, kterou si můžete nadefinovat v CorelDRAW též. A slouží k tomu, jak jinak, právě panel Internet. Záložku definujete tak, že vyberete nějaký objekt – může se nacházet kdekoliv v otevřeném dokumentu CorelDRAW –, z roletky Chování vyberete typ Záložka a do roletky Internetová adresa vepíšete nějaký název – název záložky objektu. Pak vyberete objekt, na němž chcete definovat odkaz na záložku, a tuto záložku vyberete v téže roletce. Jako Chování musí tentokrát ovšem být nastaven režim Adresa URL. Je to prosté. Navíc máte nad záložkami kontrolu prostřednictvím ukotvitelného panelu Správce záložek, který najdete v nabídce Okno | Ukotvitelné panely. Ten vám dává nejen přehled o názvech záložek v dokumentu, ale i o jejich pozici – kde jsou umístěny, na jaké stránce. Pokud na název záložky poklepete, přesunete se na objekt, který je záložkou. Odtud také můžete záložky mazat.
Záložky nyní potřebovat nebudete, zaměřte se na definování stavů rolloveru. Vyberte všechny objekty a zmáčkněte první
tlačítko na panelu Internet – Vytvořit rollover. Tím se z vašeho bonbonu stal rollover,
ale prozatím s nenadefinovanými stavy. Definován je pouze základní stav, jak bylo uvedeno výše. A proto zmáčkněte druhé
tlačítko, Upravit rollover. Všechny objekty zmizí a zůstanou jen ty, které tvoří samotný rollover. Všechny
objekty zůstaly vybrány, ale můžete s nimi pracovat stejně, jako kdybyste se nenacházeli v režimu úpravy rolloveru. Dokonce
můžete některé objekty přesunovat, čímž vytvoříte zajímavé efekty po najetí myší nebo při stisknutí tlačítka myši – to
si po skončení cvičení můžete vyzkoušet.
Všimněte si ještě dvou změn. Všechny stránky z pořadače stránek zmizely a namísto nich se objevily záložky pro fefinování
jednotlivých stavů rolloveru. Jejich procházení má stejný efekt jako přepínání stavů v roletce Aktivní stav rolloveru.
Dále si všimněte, že se poněkud pozměnil panel Správce objektů. Jelikož už víte, co se děje, neměla by
vás tato změna překvapit.
Přepněte se na stav Nad a vyberte obdélník, který zakrývá rastr. Z již známého umístění ukotvitelných
panelů spusťte ukotvitelný panel Barva. Vyberte druhou záložku, Zobrazí prohlížeče barev,
a aktivujte režim živého náhledu (zámek Automaticky použije barvu musí být zamčený). Upravovat budete
výplň objektu, přesvědčte se tedy, že je stisknuto pouze tlačítko Výplň. Posouvejte čtvereček barvy v
okně náhledu nahoru, až dostanete přibližně takovéto hodnoty:
Potom vyberte odlesk a nástroj Interaktivní průhlednost a do roletky Střed průhlednosti zadejte hodnotu asi 70.
Změňte také parametry bílého stínu textu, krytí dejte na 100 % a prolnutí na 70.
Přepněte se do stavu Stisknuto a podobně upravte barvu překrývajícího obdélníka:
Odlesk vyplňte barvou 30% černá. Krytí stínu upravte na 100 % a barvu následovně:
Dále upravte text. Nikoliv však jeho barvu nebo vysunutí, ale obsah nápisu. (Je to čistě ze cvičných důvodů.) Vyberte textový nástroj a klepněte do textu. Změní se jeho podoba, takže bude vidět jen samotný text. Smažte ho a napište něco jiného, třeba corelclub.cz. (Budete asi muset změnšit velikost textu.) Potom výběrovým nástrojem vyberte text a velký obddélník a z nabídky Změnit | Zarovnat a rozmístit vyberte Svisle zarovnat středy. Zřejmě budete muset poupravit velikost spodního stínu.
Rollover je hotov – stiskněte tlačítko Dokončit úpravy akce při přechodu myši. Nyní je rollover v takovém
stavu, že není upravitelný jako běžný objekt. Vyzkoušejte si, jak reaguje, stiskněte tlačítko Náhled funkce rolloverů.
Přejíždějte nad rolloverem a stiskněte nad ním tlačítko myši. Sledujte, jak se mění jednotlivé stavy.
Rollover můžete samozřejmě i nadále upravovat a můžete z něj také vyextrahovat všechny objekty, které jej tvoří – extrakci
provedete tlačítkem Extrahovat všechny objekty z rolloveru. Po stisknutí se zdánlivě nic neděje, ale pohled
do správce objektů vás přesvědčí, že je tomu jinak.
Export do formátu html
Samotný rollover není v CorelDRAW co platný, potřebujete jej použít na webové stránce. Proto je třeba jej exportovat.
Označte si rollover a na panelu Internet zmáčkněte tlačítko Publikovat v síti WWW – HTML.
Vyjede dialogové okno, na kterém vidíte následující:
Pokud nemáte na stránce (resp. dokumentu) žádné jiné objekty, nemusíte nic měnit a jen stisknout OK. Nicméně co lze snadno změnit:
- V poli Cíl měníte cíl exportovaného dokumentu.
- Chcete-li, aby složka s obrázky měla jméno jako soubor, můžete zatrhnout pole Použít název HTML pro dílčí složku obrázků.
- Lze přepsat stávající soubory a po exportu zobrazit výsledek v prohlížeči.
- Lze vybrat, zda chcete exportovat všechny objekty, všechny objekty na stránce, vybraný objekt nebo objekty z určitých stránek.
Dalším možným nastavením (které v tomto případě nevyužijete) se budeme věnovat v některém z příštích článků.
Na poslední záložce věnované diagnostice se můžete dočíst, že jsou použity některé barvy nevhodné pro web. Tuto informaci
prakticky můžete ignorovat, protože dnes nikdo nepoužívá režim VGA pro zobrazování barev a určitě můžete použít i více
než 216 barev vhodných pro web.
Otevřete-li si vyexportovanou stránku v nějakém textovém prohlížeči, vidíte následující kód:
<HTML>
<!-- saved from url=(0020)http://www.corel.com -->
<HEAD>
<TITLE>rollover</TITLE>
<META http-equiv="Content-Type" Content="text/html; charset=utf-8">
<META NAME="Generator" CONTENT="CorelDRAW X4">
<META NAME="Date" CONTENT="01/02/2011">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<STYLE type="text/css">
<!--
-->
</STYLE>
<DIV STYLE="position: absolute; left: 0px; top:0px; width: 701px; height: 252px;">
<a
href="http://www.corelclub.cz" onMouseOver="T1.src='rollover/hex1.jpg'"
onMouseOut="T1.src='rollover/hex0.jpg'"
onMouseDown="T1.src='rollover/hex2.jpg'"
onMouseUp="T1.src='rollover/hex0.jpg'"><img
src="rollover/hex0.jpg" name="T1" alt="hex2.jpg" border=0 height=252
width=701 align=TOP>
</A></DIV>
</BODY>
</HTML>
Samozřejmě nejdůležitější je ta část zvýrazněná červeně. Najdete v ní polohu rolloveru na stránce, odkazy na obrázky jednotlivých
stavů (ty jsou ve složce), zarovnání i odkaz na webovou stránku.
Výsledek v grafické podobě je zde: ROLLOVER 1
A zde vidíte příklad použití téhož efektu; stejný postup: ROLLOVER 2
Prameny:
- Mistrovství v CorelDRAW, Gary David Bouton, Computer Press, 2009
- www.coreldrawtips.com
- CorelDRAW Graphics Suite Tutorials - Create Glassy Rollover Buttons in CorelDRAW - By Steve Bain
Zdrojové soubory ke stažení:
rollover.cdr (CDR,
X4, 3.9 MB)
PH00551.jpg (JPG,
X4, 189 kB)
Autor: Petr Valach
