Altia photoProto: prototypy ve Photoshopu jednoduše a rychle - Grafika.cz - vše o počítačové grafice

Navigace:  » Úvodní stránka  » Rubriky  » Photoshop  

14. listopadu 2007, 00.00 | Otázku tvorby prototypů začne dříve nebo později řešit každý grafik
zabývající se tvorbou GUI grafiky. A přestože i v samotném Photoshopu lze
interaktivní grafiku nasimulovat, teprve s pluginem photoProto je tvorba
prototypů tou správnou zábavou.

Co je to prototyp?

Než začneme vůbec s pluginem a Photoshopem, vysvětlíme si, co je to prototyp. A začneme úplně jinde. U tisku. Dejme tomu, že pracujete v grafickém studiu a máte za úkol udělat leták. Zrovna na váš přišla kreativní nálada, takže leták uděláte nestandardně tvarovaný, různě prohnutý a s výsekem. Aby klient viděl, jak bude leták vypadat, nestačí mu jen poslat mailem náhled. Musíte buď přesně popsat co kde bude, jak to bude a proč to bude (do dlouhého textového souboru), nebo leták vytisknout, vzít nůžky a vystřihnout přesně tak, jak bude vypadat. Tomu se říká maketa. Tuto maketu poté ukážete klientovi a tuto maketu také zašlete společně s daty do tiskárny. Aby klient věděl, jak bude leták vypadat, a aby v tiskárně věděli, jak mají leták udělat.

Teď se přeneseme zpět na pole GUI grafiky. Sedíte stále v té stejné kanceláři, jen dostanete za úkol udělat novou grafiku pro bankomat. Takže se pustíte do práce, na jejímž konci budou zřejmě náhledy na jednotlivé obrazovky a jednotlivé rozřezané prvky - tedy obrázky pro jednotlivé stavy tlačítek a ostatní komponenty. Klientovi pošlete náhledy na jednotlivé obrazovky, ten je odsouhlasí, a tak pošlete data programátorovi. Po čase zamíříte do bankomatu, abyste si vybrali odměnu za vámi vytvořené dílo, když v tom dostanete šok. Grafika vypadá úplně jinak než jak - podle vás - vypadat měla!

Řešení problému je jednoduché a podobné jako v minulém případě - buď vše sáhodlouze popsat v textovém souboru, nebo vytvořit prototyp. Aplikaci, která ukazuje grafiku tak, jak bude fungovat. Funkční stránka takové aplikace není důležitá, hlavní je zkontrolovat vzhled, pozici, animaci, stavy tlačítek ... - prostě vše grafické, co jste vytvořili v Photoshopu. Podívat se, jak vypadá tlačítko, když nad něj najedete myší. Jak vypadá přepínání záložek, animace načítání, vkládání hodnot, změna velikosti prvků. Zkrátka vše, co v Photoshopu nezkontrolujete.

Prototyp je aplikace, která vám umožní zkontrolovat grafiku a zobrazit ji v podobě, jak bude vypadat v konečném programu. A úplně stejným způsobem poslouží i klientovi a programátorovi.

Jednou z možností, jak tvořit prototypy, je plugin Altia photoProto. Tento plugin je navržen tak, aby jste mohli tvořit prototyp přímo v Photoshopu. Svou funkcí je tak velmi blízký pluginu pro tvorbu stránek  Media Lab SiteGrinder.

Nejprve doporučuji navštívit stránky výrobce a stáhnout si demoverzi pluginu pro odpovídající systém - Altia photoProto. Plugin je pro Photoshop minimálně ve verzi CS (protože používá k práci Layer Comps), pro Windows i pro Mac OS X. V Mac OS je potřeba mít nainstalované X11. Omezení demoverze spočívá v přidaném vodoznaku, plnou verzi je možné pořídit za 495 USD (nebo dočíst tento článek do konce a zjistit, jak získat slevu). Ať sami vidíte, jak je tvorba prototypů jednoduchá, zkusíme si jeden takový vytvořit.

Tvorba prototypu

V Photoshopu začneme novým dokumentem, do kterého jsem si vložil předpřipravené pozadí. Abychom se s tím moc nezdržovali.

Důležitější jsou interaktivní prvky. V našem případě budeme chtít vytvořit jednoduché tlačítko, které nebude mít žádnou funkci. Pouze tři různé stavy - jeden normální, druhý při najetí myši a třetí při stisknutém tlačítku myši. Tedy naprosto standardní tlačítko.

Základ tlačítka nakreslíme např. nástrojem Zakulacený obdélník (Rounded Rectangle Tool), nastaveným na žlutou barvu #F1CD6C.

Tlačítku přidáme text - tj. novou textovou vrstvu. V tomto kroku jsem ještě přidal pro zpestření ikonku.

Text i ikonku malinko zprůhledníme - nastavením krytí na 70 %.

A všechny (tři) vrstvy vložíme do nové složky. Tím máme normal stav hotový. Složku zkopírujeme - to bude základ pro over stav.

V tomto stavu přebarvíme spodní vrstvu na světlejší #F4D377 a přidáme efekty vrstvy. Obrys (Stroke) nastavený na dva pixely a tmavou barvu #382803.

A Vnitřní Stín (Inner Shadow), který však s tímto nastavením vytvoří plastickou záři na horní straně tlačítka. Textu a případně i ikonce nastavíme krytí zpět na 100 % a máme i over stav hotový.

Znovu zkopírujeme složku, což bude základ pro poslední stav - down. Spodní vrstvu přebarvíme na tmavší odstín - #EDBE4C, efekt vnitřní stín změníme na černou barvu. Pro simulaci "zamáčknutí" tlačítka buď obsah tlačítka (text a ikonku) posuneme o několik pixelů (doprava) dolů, nebo obsah zmenšíme. Podobně, jako na následujícím obrázku.

Tím máme předpřipraveny všechny tři stavy. Pro použití v pluginu je ale potřeba mít tlačítko vždy jen jako jednu vrstvu. Abychom si nezničili dosud vytvořenou práci a mohli se k ní v budoucnu vrátit, zkopírujeme všechny tři složky a vždy je sloučíme do jedné vrstvy stiskem zkratky Ctrl + E (v Photoshopu verze CS2 a vyšší je možné složky překonvertovat v objekty smart object).

Tím nám vzniknou tři vrstvy.

Které vložíme do nové složky a všechny předešlé složky skryjeme. Aby tlačítko fungovalo, je potřeba dodržet správný název složky. Ten se skládá z částí: typ_objektu   jméno   stav_pro_akci   akce. Protože jsme si řekli, že zatím nechceme akci žádnou, stačí složku pojmenovat "button jméno", v našem případě tedy např. "button logout".

Všimněte si, že ve složce jsou vrstvy pojmenovány podle jejich stavu. To ale není nutné, důležité je jejich pořadí, jména mohou mít jakákoliv.

A jdeme prototyp spustit. K tomu stačí najet do menu File - Scripts - Altia PhotoProto - Build Prototype.

Otevře se následující dialog, ve kterém toho moc k nastavení není. Pouze určíte cestu, zaškrtnete zda chcete používat pouze viditelné vrstvy "Use Visible Layers Only" (což chceme, protože skryté vrstvy máme pouze jako pomocné) a zda chcete zobrazit souhrn problémů "Show Problem Detection..". To se také hodí. Takže stiskněte tlačítko Run, chvíli počkejte a ...

... prototyp je hotový. Následující animace ukazuje, jak prototyp vypadá. Najetím myši nad tlačítko se změní obrázek na over stav, stisknutím myši se změní na down stav. Není to nic převratného, ale je to výsledek pěti minut práce.

Mimochodem - pokud tlačítku necháme ve složce pouze vrstvy dvě, plugin vytvoří tlačítko pouze se stavy normal a down. Vynechá tedy stav over. Viz následující ukázka.

Abychom neskončili pouze u takto jednoduché ukázky, která by šla nasimulovat i v Photoshopu, zkusíme malinko složitější příklad obsahující obrazovky. V prototypu je totiž možné mít několik různých obrazovek a mezi nimi přepínat.

Pro následující kroky proto vytvoříme velkou textovou vrstvu, která nás bude informovat o tom, že jsme na druhé obrazovce, a jednoduché tlačítko "button back", kterému později přiřadíme akci pro návrat o obrazovku zpět. Při práci samozřejmě skryjte předchozí tlačítko. Obrazovka by mohla vypadat nějak takto:

Jednotlivé obrazovky nastavíme v paletce Layer Comps. Nejprve zobrazíme všechny vrstvy obrazovky s tlačítkem, poté vytvoříme nový stav (kliknutím na ikonku papíru) a obrazovku pojmenujeme např. "logout_screen".

Tlačítko skryjeme a naopak zobrazíme velký text a tlačítko zpět. Opět vytvoříme novou obrazovku, tentokrát pojmenovanou "logged_out_screen".

Aby tlačítka fungovala, je potřeba jim nyní přiřadit akce. Jak jsme si řekli dříve, třetí položka určuje, kdy se daná akce provede. Volby jsou "up" - akce se spustí po uvolnění tlačítka myši, nebo "down" - akce se spustí ihned po stisknutí tlačítka myši. Čtvrtá položka v názvu je již daná akce. Pokud chceme přepnout na danou obrazovku, stačí napsat její jméno.

Název tlačítka pro přepnutí zpět na první obrazovku se tedy změní na "button back up logout_screen". Tj. typ prvku (button), jméno prvku (back), kdy provést akci (up - při uvolnění tlačítka) a jakou akci provést (logout_screen - přepnout na tuto obrazovku).

Podobně se změní i název tlačítka na první obrazovce. Chceme přepnout na obrazovku logget_out_screen, takže název bude "button logout down logged_out_screen".

Opět zkuste prototyp spustit a pokud jste udělali vše podle návodu, měl by před vámi být prototyp podobný této animaci. Po stisknutí tlačítka se zobrazí druhá obrazovka, ze které se tlačítkem back můžeme dostat na obrazovku první.

Další prvky v pluginu

Zde je stručný přehled základních prvků, které dále můžete v pluginu používat. Využitelné akce zahrnují nejenom práci s těmito prvky, ale i například práci se zvukem (přehrávání MP3, změna hlasitosti), práci s videem a 3d objekty. Seznam prvků i akcí se samozřejmě rozrůstá s každou novou verzí. Prvky jsou podle obrázku následující:

1) Button (a odvozeniny) - standardní tlačítko, které jsme si ukázali v dnešním příkladu. Na obrázku vidíte, že možnosti aktivace akce jsou kromě up a  down i over - akci je možné nechat aktivovat i při najetí myši nad tlačítko.
2) Deck - je univerzální prvek který obsahuje (nejčastěji) sadu obrázků. Ty lze v určeném časovém intervalu střídat a vytvořit tak animaci. Tu je možné přehrát jednou (once), stále dokola (loop), nebo směrem nahoru a dolů (pingpong).
3) Toggle - je dvoustavové tlačítko (např. přepínání ano/ne), u kterého je možné definovat zvlášť akci pro každý stav.
4) Slider - standardní posuvník, pro jehož tvorbu stačí pouze vytvořit dvě vrstvy (pozadí a jezdec) a vhodně pojmenovat složku vrstev. Plugin automaticky pozná orientaci posuvníku podle jeho velikosti.
5) Knob - otočný knoflík, podobný tomu jak jej každý zná z regulace hlasitosti.

Další možnosti pro tvorbu prototypů

Rozhodnete-li se pro tvorbu prototypů, máte celou řadu možností. Začneme v samotném Photoshopu. V programu ImageReady (a od verze CS3 v samotném Photoshopu) máte možnost nastavit si interaktivní prvky - tlačítka. Dokument můžete následně uložit pro Internet a tím vygenerujete HTML kód společně s obrázky. Po spuštění HTML souboru můžete otestovat, jak vypadají tlačítka v akci, tj. po najetí a stisknutí. Stejně tak dobře můžete v programu pracovat i s animací. Tím ale možnosti Photoshopu bohužel končí. Pokud chcete vytvořit propracovanější prototyp, musíte vygenerovaný HTML kód ručně upravovat, nebo vytvořit znovu a lepší. Stejně tak vygenerované obrázky jsou nepoužitelné pro další práci, protože jsou sloučeny s pozadím.

Pokud stále zůstaneme u produktů Adobe, pak skvělým nástrojem pro tvorbu prototypů je program Flash. Ten obsahuje snad vše, co k práci potřebujete. Nevýhoda tvorby spočívá snad jen v časové náročnosti. Pokud porovnáme Flash s pluginem photoProto, pak u pluginu stačí nadefinovat objekty přímo v Photoshopu, stisknout tlačítko a prototyp je hotový. Pár minut práce. V případě programu Flash musíte nejdříve všechnu grafiku vyexportovat z Photoshopu, následně načíst do programu Flash, vše nastavit a podívat se na výsledek. Pokud se Vám něco nelíbí, znovu v Photoshopu otevřete dokument, upravíte grafiku a znovu ji vyexportujete.

Pro co možná nejrychlejší práci je proto výhodné skloubit to nejlepší z obou produktů dohromady. V Photoshopu udělat grafiku, rychle ji otestovat v pluginu photoProto a pokud potřebujete složitější prototyp na který už plugin nestačí, sáhnete pro programu Flash. Obrázky již máte vygenerované pluginem photoProto, takže vše jen načtete, nastavíte pár proměnných a funkcí a je to.

Na klienta vždy udělá dojem, když na něco může kliknout a když vidí, jak se věci hýbají. Než psát nekonečné dokumenty "tohle bude vypadat takhle a tohle takhle", je vždy lepší udělat prototyp, ve kterém to bude vidět. Ten pak může stejně tak dobře posloužit i vám. Ve většině případů totiž svou grafiku ve výsledném produktu nikdy neuvidíte - ať už z jakéhokoliv důvodu. A pokud ano, tak opět jen jako screenshoty, a ne něco, na co můžete kliknout a co vidíte v akci. Tedy pokud nebudete dělat novou grafiku pro bankomat ...

A na konec...

Pokud se rozhodnete zařadit plugin do vašeho pracovního řetězce, jistě vám přijde vhod následující akce, ve které můžete získat plnou verzi pluginu se slevou 100 USD. Což je v kombinaci s dobrým kurzem koruny celkem výhodná nabídka.

Autor článku Václav Krejčí se zabývá grafikou a GUI designem, své zkušenosti nejnověji zúročil v knize "Adobe Photoshop: design grafiky GUI", věnované tvorbě grafických uživatelských rozhraní.