Alibistická odpověď by zněla: "jak pro koho". Pro mě jednoznačně ano.

S Adobe Fireworks CS5 pracuji denně již necelé 3 měsíce, takže mohu za sebe objektivně říci, že je pro mně lepším nástrojem než byl Adobe Photoshop. Nepřešel jsem ještě úplně, protože se musím občas vracet ke starším projektům, ale nové věci řeším výhradně přes FW. Díky tomuhle switchování mezi PS a FW si dokonale uvědomuji rozdíly mezi jednotlivými programy počínaje klávesovými zkratkami, až po celý systém práce.

Ve Photoshopu jsem kvůli datové velikosti musel řešit každou stránku webu / screenu jako jeden PSD soubor, ve FW mohu využívat stránky v jednom souboru a nejen to, mohu definovat i různé stavy na jedné stránce. Nemusím kopírovat vrstvy z jednoho PSD souboru do druhého, ve FW si je dávám sdílet do stránek a stavů. Elegantní řešení, které zvyšuje efektivitu a přesnost. Pokud mám 1000 vrstev, tak ve FW mi PNG zabírá maximáln 10Mb a PSD ve PS 200Mb.

FW i PS jsou aplikace, které občas spadnou a pak je práce v háji. Tomu se asi nevyhne žádný designér. Nevyřeší to ani nabušená mašina s rychlým procákem a 16GB ramek. Respektive pomůže, ale i tak občas aplikace spadne. Rozdíl je v tom, že obě aplikace padají jinak. Photohop se zasekne a ihned se odstřelí z procesu. Fireworks vypíše hlášku, že má nedostatek paměti a pak se hodí do stavu, kdy se dá chvílemi ovládat, to znamená že umožní v této chvíli "uložit / uložit jako". Pak nezbývá, než aplikaci odstřelit a pustit znovu. Samozřejmě ideální řešení je, aby aplikace nepadali vůbec, nicméně FW má ten pád vyřešený "elegantněji".

Ve FW pracuji na 90% s pravými vektory. Mohu nakreslit obdélník s oblými rohy, roztáhnout ho tak, abych si nezničil poloměry rohů. Mohu jednoduše zadávat přesnou délku a výšku v px. Mohu využívat metodu 9patch pro roztahování a zmenšování jednotlivých prvků. Díky této metodě si určím, v jaké části má být prvek natahován a při zvětšování si nezničím třeba logo. Na vrstvu mohu aplikovat třeba 5 vržených stínů, pod jiným úhlem a jinou intenzitou, aniž bych jí musel duplikovat. A Photoshop? Musím zápasit s maskama, svazovat vrstvy a nebo je slučovat destruktivně.

Ve FW vrstvy mohu seskupovat a zase rozdělovat jednoduše. Zkrátka si je naklikám na plátně, zmáčknu klávesovou zkratku a mám grupu. Dokonce v seznamu vrstev vidím i kolik je ve skupině vrstev. Každá vrstva může mít svůj styl (přechod, stín, šum, tah apod.). Pokud vrstvy seskupím a zase rozdělím, ponechávají si svůj styl.. wow! A co víc. Mohu dokonce třeba na grupu 100 vrstev aplikovat jeden styl. Tohle prostě Photoshop neumí.

Na konec zmíním spíš už jen takové perličky. FW umí jednoduše kopírovat vrstvy přes Ctrl+C / Ctr+V a přes klávesovou klávesovou zkratku kopírovat styl z jedné vrstvy na druhou.. Ve Photoshpu se musím hrabat v seznamu vrstev a složitě duplikovat vrstvu, kopírovat a vkládat styl přes kontextovou nabídku. Možná, že tyhle věci jdou ve Photoshopu taky někde nastavit, ale nepodařilo se mi to objevit. Další perla je to, že FW pracuji stále s vektory, takže pokud se rozhodnu v půlce projektu, že upravím styl všech oblých rohů na tlačítkách, tak změním jen 1 parametr u každého tlačítka a nemusím znova vrstvy překreslovat. Ve FW se neperu s půl-pixely, mohu pracovat přesně na "pixel-perfekt" a to (nejen) díky klávesové zkratce Ctrl+K, která pomůže, při ruční změně velikosti nějaké vrstvy, půl-pixely změnit na celé pixely. A třeba Řezy jsou na vlastní kapitolu. Stačí jen dodat, že se chovají jako vrstvy (jednoduchá změna velikosti, kontrola nad velikostí, žádné čáry přes celé plátno jako v PS).

Tímto článkem nechci hanit Photoshop. Spíš je to takové shrnutí toho, co mi přinesl Fireworks, a proč je pro mě jako designéra lepším nástrojem než PS. I Fireworks má ale svoje slabá místa, jako je třeba úchylný rozměr panelu vlastností, který nejde jinak modifikovat. Nebo omezené nástroje pro práci s bitmapou (nahrazování barev, odbarvování, křivka a úrovně barev, vyplňování obsahem..). Photoshop je skvělý program, který by těžko asi třeba fotograf vyměnil za Fireworks. Ale přijde mi, že pro designéra, je to neobratný dinosaurus, který je nadupaný nástroji pro práci s bitmapovou grafikou, které využije tak z 10%. Což ho bohužel ovlivňuje a doplácí na to v těch 90% designérské práce.

A na závěr jeden skvělý odkaz na důvody "Proč" a zdroje pro FW.

http://www.isfireworksbetterthanphotoshop.com/

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Skoro po třech letech jsem si objednal a koupil na tvorbu grafiku další software, tentokrát Adobe Fireworks CS5.

V prosinci jsem si vyzkoušel trial verzi a bylo rozhodnuto. Tenhle žlutej ohňostroj mě přesvědčil, že je to skvělý nástroj na prototypování aplikací a vývoj grafiky nejen pro mobilní zařízení. Navíc třeba od Adobe Photoshop je o 2/3 levnější (cca 7300kč s DPH).

Fireworks jsem kupoval zde: http://www.svetsoftware.cz/adobe-fireworks-cs5. Obchod dodal do třetího dne. Takže maximální spokojenost.

Haleluja, jdu provětrat CD mechaniku :-)

Permalink | Leave a comment  »

Docela rád bych na konci přístího roku porovnal, jak si stojí s návštěvností tento blog, proto jsem vytípal tři obrazovky z Google Analytics.

Příští rok porovnáme :-) 

Permalink | Leave a comment  »

Na konci roku se snažím vždycky bilancovat svoje výsledky a to ve všech kruzích svého života. Na tomto blogu se hlavně věnuji grafice a podnikání na internetu, a tak bych to chtěl pro následující rok zachovat. Pojďme se za tím ohlédnout.

Permalink | Leave a comment  »

Původně jsem tu chtěl sdílet můj excelový sheet na počítání jednotlivých dpi v Androidu, ale k mému údivu, můj kolega (a kamarád :-) ) Martin Cohen udělal online  webovou kalkulačku. Najdete jí zde: http://coh.io/adpi/.

O co tedy jde... 

Jedná se o jednoduchý nástroj, využitelný pro designéry, kteří připravují grafiku na platformu Android. Kalkulačka dokáže, po zadání rozměru v jedné densitě, dopočítat ostatní density, což se hodí hlavně při vytváření řezů a následně pro přípravu resources. Pro příklad, pokud víme že ikonka má rozměry pro xdpi = 48x48px, kalkulačka nám dopočítá hdpi = 36x36px, mdpi = 24x24px, ldpi = 18x18px. Pokud zadáme číslo nedělitelné třemi, zobrazí se na jakou hodnotu by bylo vhodné číslo zaokrouhlit.

Martine, super věc. Díky za ní!

Permalink | Leave a comment  »

Po otevření nového projektu ve Fluid UI dostaneme velkou plochu pro vytvoření jednotlivých screenů. Při editaci screenu máme k dispozici na levé straně panel s jednotlivými patterny (komponenty), které můžeme do svého projektu přetahovat.  Základní dělení patternů je na Sketchy (mobilní web?), iPhone, Android a Upload (možnost nahrání vlastních komponent). Obecně mě potěšila přítomnost Androida, většina webových nástrojů na tvorbu mockupů, které znám, byly zaměřené výhradně na web nebo iOS.

Pokud znáte prezi.com, tak práce s Fluid UI je podobná. Vytvoříte si screen, přetaháte do něj patterny, customizujete je, vytvoříte další screen a mezi sebou je propojíte. Což je druhá věc, kterou mohu na Fluid UI pochválit = jednotlivé screeny jdou propojovat (příklad: kliknu na položku v dashboardu a zobrazí se mi screen, který mám nalinkovaný k této ikonce). Hotový mockup jde sdílet, naskenovat QR kódem nebo zaslat emailem. To se může hodit. Ale dost chvály.

Fluid UI je líné a pomalé. Po umístění komponenty do screenu se ihned otvírá kontextové menu, které je šílené a plete se pod kurzor. Některé ikonky pro úpravu nedávají smysl, třeba mě překvapilo, pod čím jsem našel nastavování velikosti písma (pod paletou barev) apod. Velikost screenu je omezená na 480x320px, což je pro navrhování prototypů na smartphony nedostačující, o tabletech nemluvě.. Ač se to na první pohled nezdálo, tak pro tvorbu mi začali chybět základní ikonky jako třeba domeček (home), add (plus) apod. Zjistil jsem, že ikonky nelze ani obarvovat, tudíž je nemožné sestavit třeba nějaký pohled z klientských barev (brand).

Permalink | Leave a comment  »

Je na čase vydat další díl. Když to shrnu, tak za těch 6 dílů jsme se naučili základní pojmy, jak na samotnou tvorbu grafiky pro Android, ukázali jsme si, jak dělat skicy a modely, zkreslili jsme v grafickém programu aplikaci Vánočníček. Takže nám zbývají dvě poslední oblasti. A to jak grafiku rozřezat a strukturvat pro programátora a poslední díl se bude zabývat podpůrnými materiály jako jsou ikonky, bannery a widgety.

Nejprve rychlá teorie. Pokud máme hotový grafický design, máme rozkreslené všechny screeny, včetně všech stavů jednotlivých komponent. Jsme s designem spokojeni, přišel ten pravý čas na rozřez jednotlivé grafiky. Již před kreslením Vánočníčku jsme si rozvrhli, že naše nejvyšší podporovaná densita je HDPI, kreslili jsme tedy v rozlišení 480x800px, takže i v tomto rozlišení si ukážeme, jak design nařezat. Pokud bychom chtěli, jednotlivé komponenty si můžeme nazmenšovat a nařezat i MDPI a LDPI, ale to nebude obsahem tohoto článku.

Znám dvě varianty řezání. První je o tom, že pro každou komponenentu si udělám nové plátno o rozměrech té komponenty a uložím obraz jako PNG. Tahle technika se dá praktikovat u menších projektů max do cca 15-20 resourců. Pak je proces ukládání únavný, s různými stavy dochází k chybám vlivem naší nepřesnosti a chybí zpětná editovatelnost. Například, pokud změníme design jednoho prvku a chceme ho rozkopírovat na prvky stejného typu (typicky ikonky, tlačítka..), tak musíme všechny řezy dělat odznova. Téhle variantě se dnes vyhneme a ukážeme si efektivnější postup.

Jdeme na to. Otevřte si design jednotlivých screenů Vánočníčku a vytvořte si ještě jedno plátno, pro naše účely bude stačit 1600x1000px. Toto nové plátno nám bude sloužit jako rozřezové PSD. Do něho budeme postupně přetahávat jednotlivé komponenty, rovnat je a připravovat řezy. Než tak, ale začnete dělat, je potřeba se zamyslet, které komponenty budou řešené programově a které jako obrázek -> PNG. Takže: obsahové texty - psané nativním fontem se řezat nebudou, ani plochy, které jsou vyplněné solid barvou není potřeba řezat. Programátor má totiž několik nástrojů, díky kterým zvládne jednoduché vybarvení a nakreslení tvaru (kruh, čtverec, obdelník, elipsa). Aby to zvládl, potřebuje znát jen hex opis barvy (např.: #000000), velikost fontu, řádkování, barva a směr stínu. Vše ostatní je potřeba připravit jako PNG. Naše aplikace Vánočníček neobsahuje "složité" komponenty, takže tvorbu 9patch taky necháme do jiného článku. 

Začínám vždy od prvního screenu. Což je pro náš příklad Splash screen. Ten bychom chtěli udělat tak, že po tapnutí na jakékoliv místo ve screenu se zobrazí Home screen. To znamená, že na jednotlivých komponentách, které obsahuje nám nezáleží a také víme, že komponenty, které se na něm vyskytují, se už v celé aplikaci (v této velikosti) neobjeví. Takže nejjednodušší ho bude vyříznout celý. Přetáhněte ho na nové plátno a zarovnejte na mřížku (ta musí být stejná jako v designu screenů, pro náš příklad tedy 8x8px.).

Asi Vám je jasné, jak celý proces bude dále pokračovat. Ano, nyní další screen je Home, ze kterého si přetáhneme pozadí action baru. Dále zvlášť logo. Důvod proč zvlášť je ten, že bychom ho chtěli udělat s možností na tapnutí => akce návrat na home screen (akce skrz celou aplikaci). Dále je potřeba si přenést a připravit k řezu všechny ikonky a to včetně všech stavů.

Tahle nějak by mohlo tedy vypadat rozřezové PSD pro Vánočníček. Ve kterém neuvažujeme lokalizaci a jinou densitu než HDPI. PSD dávám ke stažení.

PSD s řezy ke stažení

Zbyvá nám tedy jednotlivé řezy uložit. Tuto funkci v PS najdeme: "Soubor => Uložit pro web a zařízení". Kde se nám zobrazí rozřezové okno. V tomto dialogu můžeme jednotlivé řezy označovat, zvolit cílový formát a pracovat s náhledem. My chceme řezat do PNG-24 a chceme mít zaplou průhlednost. Dáme uložit a vybereme možnost "všechny uživatelské řezy". Poté uložíme. A je to, máme 13 PNG souborů.

Aby bylo programátorovi hned jasné, že jsme mu připravili resources pro hdpi, vytvoříme mu adresářovou strukturu, kterou bude moc dobře znát "res\drawable-hdpi".

To je dnes vše. Jak je vidno, při řezání je už nutná komunikace s programátorem a mít na pixel dobře připravený designy jednotlivých screenů. Čím je práce přesnější, tím si ušetříme čas při tvorbě řezů. Díky rozřezovému PSD má člověk možnost vidět třeba ikonky jednoho typu vedle sebe a ještě doupravit jejich barvu nebo styl, což se pak odrazí v jednotnosti designu a kompaktnosti celé aplikace.

Jednotlivé PNG ke stažení

Permalink | Leave a comment  »

Včera proběhl 5. ročník akce AppParade, což je vlastně přehlídka nových mobilních aplikací z našich lesů a hájů. Míra naší společnou appku Vánočníček přihlásil na poslední chvíli a sám odprezentoval. Já jsem bohužel tahle na poslední chvíli nedokázal přijet.

Bylo mi jasné, že naše appka nemá šanci na výhru, ale že skončíme v první polovině jsem fakt nečekal. Porazili jsme třeba TN.cz, Cinemax ale i KB. To fakt zírám :-). Asi jsme lidem zabrnkali na strunu vánoční pohody a appka se líbila.

Celkové pořadí:

1.) Rune Legend (Dreadlocks)
2.) Brigády do kapsy (LMC/Jobs.cz)
3.) Power of Logic (Flow Studio)
4.) CG Transit – Jízdní řády / pro iOS i pro Android (Circlegate)
5.) Ginger Bells (Silicon Jelly) / Divoká karta Vodafonu
6.) Chrochtátko (Inmite)
7.) Vánočníček (Miroslav Čupalka) (android market)
8.) QuakeFrenzy (Martin Wenisch)
9.) MobiGuide (BTM Network)
10.) Autoškola 2012 (Mobildrive.cz)
11.) Goooooal HD (Cinemax)
12.) Mobilní banka 2 / pro Android/iOS (KB) / mimo soutěž o hlavní cenu
13.) Bank Fees Calculator (Robert Šrahol)
14.) Czech Ski Test 2011 (NewsLab)
15.) TN.cz (CET 21/TV Nova)

Na akci natáčela TV Metropol. Tady je záznam:

Díky za hlasy!

Permalink | Leave a comment  »

Hrozně to utíká. Před třemi lety jsem objevil službu Posterous a začal na ní psát tenhle blog. Ta služba nevypada jako dnes. Neměla desítky šablon vzhledu (měla 4), neměla mobilní aplikaci, nešli vytvářet Spaces. Ano, plynutím času se služby, věci a lidi mění. Vznikají nové, zanikají staré, prožívají evoluční vývoj... tak jako jsem se změnil já, tak se mění i tenhle blog...

Nechci tu psát přímo o sobě, to si nechám na silvestrovské shrnuté celého roku..:-) Rád bych jen napsal pár zajímavostí z tohoto blogu. Článek, který u mně na blogu byl nejvíce zobrazen (18 878krát) byl

http://www.michalfeltl.cz/tri-dny-s-htc-wildfire

A zároveň se pod ním objevila i nejdelší diskuze z celého blogu. Článek je starý skoro rok a půl a absurdní je to, že mi stále na email chodí dotazy ohledně HTC Wildfire, který již dávno nevlastním.. :-)

Za ty tři roky jsem napsal 136 blogpostů. Nejvíce aktivní v psaní bývám na jaře a pak v létě. Průměrně lidé u mně stráví při jedné návštěvě 1 minutu a 19 sekund, no to není špatné :-). Z toho jde ze 72% o človíčka česky mluvícího. Je třeba zajímavé, že ze Slovenska ke mně chodí jen 4%.. Slováci přijdete! 

Nejvíce mě lidé čtou z Mozilla Firefox (38%) a hned v závěsu z Chrome (31%). Internet Expolerer se propadl někam na 11%. Chodí ke mně samí geeci! :-). Co se týče mobilních zařízení, tak nejvíce lidi chodí z iPhonu a iPadu a na pak jim na paty šlape HTC Desire a SGS1 a 2. Androide, do toho!

Asi nejvíce mě rozesmálo, když jsem zjistil, že jedním nejčetnějším klíčovým slovem z googlu, přes který se lidé dostanou na můj web, je "programování pro začátečníky". Škoda jen, že těmhle lidem grafik moc nepomůže. 

Na počest tří letého výročí jsem zprovoznil archív všech článků, který najdete na tomto odkazu: http://www.michalfeltl.cz/pages/archive. Věřím, že pomůže pro případné hledání něčeho staršího..

Díky za Vaše návštěvy!

Permalink | Leave a comment  »

Dobrá věc se povedla. Je to tak měsíc, co mi napsal pro mně v té chvíli úplně neznámý člověk, že se mu design aplikace Vánočníček líbí a měl by zájem jí nezištně naprogramovat. Slovo dalo slovo a já začal chystat výstupní zdroje.

Mirek, tak se jmenuje ten programátor, během prvního týdne dal do kupy raný build, na kterém jsme odlaďovali chyby v GUI. Nakonec se dodělala i nová ikonka aplikace a také zdroje pro anglickou verzi aplikace. Aplikace podporuje telefony s rozlišením hdpi a mdpi.

Společné rozhodnutí bylo  do appky umístit reklamní proužek. Přeci jen by bylo fajn, kdyby appka vydělala nějaké peníze a zaplatila tak náš strávený čas nad jejím vývojovým životem.. :-)

Aplikace Vánočníček

Kolikrát se vám stalo, že jste zapomněli, co komu koupit k vánocům? Už nikdy více! Měj všechny osoby a dárky zapsané, všechny na jednom místě. Buďte připraveni na Vánoce!

Odkaz ke stažení:

https://market.android.com/details?id=cz.cupi.vanocnicek&feature=search_result#?t=W251bGwsMSwxLDEsImN6LmN1cGkudmFub2NuaWNlayJd

Permalink | Leave a comment  »

Chtěl bych v několika kratších článcích představit pár nástrojů, které používám k tvorbě grafiky pro mobilní aplikace. Nechci z toho dělat delší seriál, půjde spíš o volné nepravidelné vydávání. :-)

Prvním, kterým začnu, je Android Design Preview (ADP), který najdete na stránkách code.google.com. Jedná se o jednoduchou aplikaci, díky které je možné posílat reálný obraz z jednoho zařízení rovnou na display telefonu. K čemu to je dobré? Po chvíli přemýšlení by Vás to mělo trknout, ano půjde o geniální nástroj.. :-) Vše, to co se odehrává na monitoru PC, notebooku nebo displaye tabletu je možné zobrazovat i ve smartphonu. Takže čistě prakticky je možné mít otevřený Photoshop nebo jiný grafický program a nechat si do něj snímat v reálném čase Vaše plátno. Což je úžasné. Můžete mít pod kontrolou, to co kreslíte rovnou na displayi smartphonu..

Chtěl jsem udělat několik screenshotů, ale na youtube udělal autor ADP hezké instruktážní video, podle kterého Vám to bude hned jasné. Tady je:

Kdybych to měl popsat pár slovy.. Připojíte smartphone pomocí USB kabelu do PC, zapnete si ladění po USB. Poté si stáhnete ADP a spustíte ho. Zobrazí se Vám dvě tlačítka jedním vytvoříte zrcadlo ve velikosti 480x800px (takže hdpi) na svém monitoru a druhým ten obraz pustíte do mobilu. Jednoduché že? Z praktického hlediska se mi osvědčila kolébka a monitor postavený vedle LCD, tak abych viděl na obě plochy a mobil se současné nabíjel. Využil jsem to hlavně při kreslení detailů, kontroly volného místa a velikost plochy tapovatelného prvku (třeba tlačítko..).

Na závěr nezbývá než poděkovat autorovi (Roman Nurik) tohoto úžasného nástroje a přát si, aby pokračoval dál jeho vývoj (toho nástroje). Osobně bych uvítal dvě věci, podporu dalších rozlišení (vč. tabletu) a možnost dělat screenshoty v průběhu tvorby (ukládané do telefonu).

Permalink | Leave a comment  »

Dostal jsem příležitost udělat 30 minutovou přednášku na HTC Android RoadShow v úterý 15.11. v Praze. O víkendu se chystám důkladně připravit a vyzbrojit se kvalitní prezentací, tak abych neudělal ostudu :-). Rád bych něco řekl něco praktického o navrhování Android aplikací a o kreslení grafického designu pro mobilní zařízení. Takže pokud Vás tohle téma zajímá, určitě musíte na tuhle akci dorazit. Budu se těšit!

Celý program akce:

Inmite – Co je to Android a proč jej používat
HTC – Představení novinek a prostředí HTC Sence
Michal Feltl – Android aplikace očima grafického designéra
Petr Nálevka – Spíme s Androidem a další vychytávky

Permalink | Leave a comment  »

Je na čase náš grafický návrh smyšlené aplikace Vánočníček dokončit. Pokud nevíte o co jde, tak vězte že se chystám navázat na tento blogpost. Pokud tedy první díl nemáte projetý, nedoporučuji se pouštět do čtení tohoto druhého. Chyběli by Vám souvislosti, které byly již probrány a bez nich by jste nebyli schopni tento tutoriál dokončit.

Otevřete si tedy svůj původní pracovní soubor s aplikací Vánočníček a zkontrolujte si, že Vám z minulého dílu nic neuniklo a máte tedy hotové dva screeny (Splash a Home). V tomto druhém článku náš design aplikace dokončíme. Konkrétně tedy dokreslíme zbývající dva screeny a na závěr zkusíme naší aplikaci vložit do grafické makety telefonu a udělat jednoduchý promo obrázek.

Takže dle našeho wireframu přichází na řadu design Gifts screenu. Už z pohledu je jasné, že bude hodně vycházet z Home screenu. Takže zduplikujte skupinu "Screen: Home" a přejmenujte jí na "Screen: Gifts". V Action baru přibylo tlačítko domečku, který by nás měl po tapnutí vracet na Home screen. Zduplikujeme si tedy skupinu btn_plus a přejmenujeme jí na btn_home, odmažeme ikonku domečku a zbytek (separator) umístíme přesně dle obrázku. Nyní si nakreslíme ikonku domečku nebo pro ty málo tvořivé si stáhneme již hotovou odsud. Ikonku opět umístíme přesně do layoutu (viz. obrázek). A poté jí 2x zduplikujte a zkopírujte jednotlivé styly vrstev z ic_plus_focused a ic_plus_pressed. Protože, chceme zachovat stejné styly napříc celé aplikace.

See the full gallery on Posterous

Máme hotovu jednu položku, kterou můžeme zduplikovat a zkusit si vytvořit text na dva řádky. Pozadí položky nyní bude mít velikost 480x132px, linka zůstává 2px. Dbejte na přesné zarovnání. Odsazení mezi řádky jsme použil 30px. S dárkem nehýbeme.

Nyní si položku několikrát zduplikujeme a podle wireframu přepíšeme jednotlivé položky. Také si vytvoříme jednu nebo dvě neaktivní položky, to jsou ty, které máme na seznamu, ale zatím jsme je nekoupili. Funkčně to máme vymyšlené tak, že po tapnutí na neaktivní položku (šedá ikonka a text) se jí změní barva a navíc se nám zařadí nahoru za poslední aktivní položku. A obráceně.

No a je to. Vepsáním svého jména (moje nepište :)) do About screen jste úspěšně zakončili tento tutoriál. Nyní si múžete své plátno zvětšit na 1920x800px a pyšně se podívat na svojí práci.

Na začátku článku jsem slíbil jednoduchý postup, jak udělat pěkný promo obrázek naší aplikace. Takže se na to ještě v rychlosti podíváme. Potřebujete nějaký pěkný model mobilu (nejlépe aktuální model). Ke stažení dávám model Samsung Galaxy S pro rozlišení screenu 480x800, tedy ideální pro náš vzorový příklad. Je to PSD i PNG.

http://dl.dropbox.com/u/20904455/Blog/tut1_android/Samsung_Nexus_S%20-%20prom...

Soubor si otevřete a telefon jednou zduplikujte. Z našehho návrhu aplikace si vybereme dva screeny. Subjektivně vybírám vždy ty, o kterých si myslím, že jsou nejhezčí nebo z nich je jasně vidět smysl aplikace. Vybereme si tedy dva screeny a přeneseme je do promo obrázku. Umístíme je přesně na screen telefonu.

To je dnes vše.

Permalink | Leave a comment  »

Konec teorie. Dnes se podíváme na reálnou praxi toho, jak v grafickém programu zkreslit aplikaci pro Android. Čelý článek bude mít charakter tutorialu, jak při designování postupovat. Budu popisovat vlastní praxi, je možné že není 100% správná a najdou se designeři, kteří to dělají jinak. Způsobů, jak se do cíle dostat je několik. Dnes Vám ukážu svůj.

1.) Zadání

Dlouze jsme přemýšlel, jakou vzorovou aplikaci udělat a vzhledem k tomu, že se pozvolna blíží Vánoce, tak jsem se rozhodl pro takový jednoduchý Wishlist. Připravíme si design aplikace, která pokud by se zrealizovala, tak by sloužila pro vytvoření seznamu blízkých, kterým chceme o Vánocích nadělit dárky. A samozřejmě ke každé osobě pak možnost přidávat dárky, které si přeje a které již máme nakoupené. Vzhledem k tomu, že tutoriál budu psát v češtině, design aplikace (texty) bude také v češtině. Naše aplikace ponese také české jméno = Vánočníček. Jdeme na to.

2. Wireframe

Jak jsme si řekli v minulých dílech seriálu, základem úspěšného návrhu aplikace je dobrá příprava ve formě skicy nebo wireframu. Proto ani já tento krok nezanedbám a připravil jsem wireframe aplikace, kterou si dnes nadesignujeme v grafickém programu. Model jsem kreslil v Balsamiq Mockups. Design naší apliakce se bude skládat ze 4 screenů.

3.) Grafika

Návrh designu budu připravovat v grafickém programu Adobe Photoshop, nicméně pro samotnou tvorbu se dá použít i jiné programy (Adobe Fireworks, Gimp, Corel atd.) - jen jednotlivé funkce a nabídky budete mít jinde.

Takhle by měl vypadak dnešní výsledek:

Takže začínáme... Nejprve si vytvoříme nový dokument o rozměrech 480x800, protože budeme kreslit naší aplikaci v hdpi rozlišení.

A v něm si nastavíme patřičnou mřížku, kterou budeme v návrhu dodržovat. U Androida je výhodné využívat mřížku násobku 3. Vzhledem k tomu, že budeme dělat jednodušší návrh s méně detaily, uděláme si mřížku po 12 pixelech.

Vytvoříme si novou skupinu "Screen: Splash" a do ní umístíme naší první vrstu: Status bar. Pokud jí nemáte, můžete si jí stáhnout zde a umístit do dokumentu jako samostatnou vrstvu zarovnanou zcela nahoru. Bude nám zabírat 36px na výšku.

Splash screen je první obrazovka, která je vidět při zapnutí aplikace (loadovací obrazovka). U naší jednoduché aplikace, by snad ani nebyla potřeba, ale schválně jsem jí do tutoriálu zařadil, abychom si ukázali, jak na ní. Obecně se na ní nachází logo a motiv aplikace. Je to taky screen, který celou aplikaci prodává, proto musí být, jak se říká vymazlená...

V našem příkladu si vytvoříme nový tvar přes šířku obrazu a výškou 764px (36px zabírá status bar). Tento tvar vyplníme barvou #b80101 a ve stylech mu přidáme vzorek. který dávám ke stažení. Vzorku nastavte 20% krytí.

http://dl.dropbox.com/u/20904455/Blog/tut1_android/vanocnicek_pattern.pat

Duplikací tohoto tvaru si vytvoříme novou vrstvu, na které uděláme barevný přechod (#000000 -> #9e9e9e). Této vrstvě nastavíme krytí na 20%.

Nyní vytvoříme jednoduché logo naší aplikace, které se bude skládat pouze z textu Vánočníček. Font jsem použil Chaparral Pro Bold, pokud tento font nevlasníte, můžete si pomoct nějakým podobným. Prostrkávání nastavte na -30. Text je velký 75px a má následující styly:

See the full gallery on Posterous

Dále si stejným fontem napíšeme text "seznam dárků". Styl zkopírujte z textu "Vánočníček" a pouze upravte barvu na #ffd027. Hodila by se nám ještě menší ikonka odškrtuné položky, proto si pomůžeme tady. Jen jí lehce upravíme - odstraníme odlesk. Uděláme tedy výběr, vytvoříme vrstvu výjmutím a tuto vrstu smažeme. Opět zkopírujeme a vložíme stejný styl vrstvy do této ikonky.

Vytvoříme si novou skupinu, do které vložíme text i ikonku a celou skupinu vycentrujeme s textem Vánočníček a ikonou dárku. A tím máme hotový splash screen.

See the full gallery on Posterous

Nyní se pustíme do návrhu Home screen. Abychom si práci urychlili, tak celou skupinu se Splash screenem zduplikujeme a přejmenujeme na "Screen: Home". Skupinu se Splash screenem si dáme jako neviditelnou. A nyní již budeme pracovat jen se skupinou "Screen: Home", ze které odmažeme ikonu dárku, odškrtnutí a text "seznam dárků". Naše logo Vánočníček si zmenšíme ze 75px na 36px. Vrstvy Přechod a BG+vzorek si zmenšíme na 480x72px -> vytvoříme z něho pozadí pro Action bar. A do volné plochy 480x692px vytvoříme nový tvar vyplněný barvou: #FFFFFF. Pro lepší pochopení jak to poskládat se podívejte na následující obrázek:

See the full gallery on Posterous

See the full gallery on Posterous

Nyní se vrhneme na obsah, kde je potřeba vytvořit seznam (ListView) jednotlivých položek. Postupuji vždy tak, že si nejprve vytvořím všechny prvky jedné položky do jedné skupiny a tu následně rozkopíruji a upravím jen to, co je nezbytně nutné. Takže si nakreslíme nový tvar o velikosti 480x96px, umístíme ho přesně pod Action bar a uděláme mu přechod z #e5e5e5 do #f4f4f4.

Přemýšlel jsem jakou použít ikonku do seznamu, protože person/man se mi moc nehodila, vyštrachal jsem jednu hezkou santa čapku, takže jí v našem návrhu použijeme, stáhněte si jí zde ve velikosti 48x48px a zmenšete na 36x36px. Ikonku přesně umístěte tak, aby byla zarovnaná s textem Vánočníček, překryjte jí barvou #b11e1e a přidejte vržený stín 90°, 1px, #FFFFFF, 75%. Přidejte texty "Manželka" a počty dárků. Font již použijte systémový (Droid Sans Bold), 22px, barvy: červená: #b11e1e a žlutá #b68f03. A nakonec položku 4x rozkopírujeme a upravte texty. Výsledek našeho snažení si můžete prohlédnout na následujícím obrázku.

Abychom byli úplně spokojení, je potřeba zase definovat, jak bude vypadat pressed a focused stav u položky v seznamu. Protože se jedná o graficky nenáročnou appku, tak jsem zvolil pressed a focused stav udělat ve stejném a to překrytí barvou #ffd027. Tímto máme hotový další screen a jsme v půlce našeho tutoriálu.

Článek se pěkně natáhl, proto ho rozdělíme na dva díly. Pokud nebude něco jasného, reagujete do komentářů a já se pokusím na vše odpovědět.

Permalink | Leave a comment  »

Konečně jsme se dočkali změny systémovýho fontu v Androidu. V ICS 4.0 je použitý font "Roboto". Z grafického pohledu bylo Androidu právě vytýkáno použití systémového fontu Droid Sans. Díky němu byla vizuální stránka aplikací srážena dolů. Dávám font ke stažení. K čemu je dobrý? Grafický designer ho využije při vytváření návrhu aplikace v grafickém programu pro ICS. Možná trochu předčasně, ale do knihovny fontů se bude hodit. Zároveň přidávám ke stažení i font Droid Sans (může se někomu hodit).

Roboto-Fonts.zip Download this file

Droid-Sans.zip Download this file

Permalink | Leave a comment  »

htěl bych se podělit s pár postřehy, které jsem z včerejší návštěvy GDD v Praze nasbíral. Možná článek vyzní negativně, ale to není úmyslem. Odjel jsem z GDD s pocitem, velmi dobře investovaného času. A děkuji za pozvání.

See the full gallery on Posterous

Pozvánky
Už na samotném začátku vyplňování přihlášek se mi nelíbilo, jak je formulář úzce zaměřen na vývojaře (programátory). Chápu, že grafický designéři a UI/UX architekti nejsou mainstream pro tuhle akci, ale úplně zapomínat by se na ně nemuselo. Vývoj aplikací pro Android / Chrome není jen o bouchání samotného kódu, tomuto vývoji předchází skicování, tvorba grafických návrhů, řez resourců atd. Takže podle mého názoru měla tahle akce udělat i menší místo pro další obory, které vstupují do samotného procesu vývoje aplikací.

Registrace
Přijeli jsme do úplného chaosu. Po celé té velké místnosti se dokola tvořila obří fronta a přitom u některých registračních míst bylo 10 lidí. Jednodušší systém by byl příjem registrací na základě počátečního písmene příjmení (A-F G-J apod.). Milé překvapení bylo GDD tričko a několik placek na výměnu. Tohle zafungovalo. Díky plackám jsem se seznámil s lidma, které bych normálně neoslovil. Rád bych ještě vyzdvihl mobilní aplikaci pro GDD, která pomohla v orientaci. Super práce.

Keynote
Dalo by se hodnotit jako nadprůměr. Překvapením bylo - 3D brýle pod každou židlí. Místo známích marketingových číslech o aktivacích, počtu aplikací a historický vývoj Androida bych uvítal nakousnutí toho, jaká je blízká budoucnost a na čem třeba Google pracuje. Chápu, že většina věcí je tajných, ale proč se na takovéhle akci nemohou developeři dozvědět něco více. Co nás bude čekat a kam své aplikace můžeme směřovat. Škoda. Jinak keynote nenudila a občas byla i zábava.

Přednášky
Absoloval jsem všechny přednášky, co byly o Androidu. Přednášející hodnotím kladně, obsah záporně. Proč je nutné si vyslechnout úplné základy o tom, že je potřeba aplikace ladit podle rozlišení. Nebo že UI aplikace na smartphonu a tabletu musí být rozdílné z důvodu odlišného používání daného zařízení. Tohle jsou opravdu základy, které si každý developer může přečíst v dokumentaci nebo v nějakém článku. K tomu není potřeba mrhat časem Googlera.. Naopak bych uvítal hlubší ukázky reálných příkladů na úspěšných aplikací typu Gmail, Google+ apod.. Rozebrat takovouto aplikaci, ukázat si na ní návrh UI, design, funcionalitu, kód. To je to, co by vývojářům dalo více. Tohle jsou IMHO experience, které by se mohli sharovat..

Catering
Velmi dobře zvládnutý. Výběr jídla a pití byl výborný. Špinavé nádobí mizelo pod rukama. Opravdu super. Snad jen v ČR (národ pivařů) by chtělo mít víc píp na pivo než jednu :-).

Sandbox
Ideální místo pro střet vývojářů, sběr nových kontaktů a osahání hraček s OS Androidem. SvětAndroida.cz připravil expozici smartphonů a tabletů. Oceňuji hlavně to, že po celou dobu akce byli schopni podávat informace a jednotlivé hračky sami prezentovat / předvádět. Opravdu dobrá práce. O kousek dál bylo zázemí Gug.tv, kde za natočený videospot dostal návštěvník tričko. Zisk trička byl lákavý, ale odvahu jsem neměl :-). Asi nejvíc byla v Sandboxu vidět firma Inmite, která ve spolupráci se Samsungem uspořádala soutěž o Samsung Galaxy S2. Měl jsem neuvěřitelné štěstí a byl mezi 5 vylosovanými. Jako výherce jsem nakonec vybrán nebyl. Z toho si nesu zkušenost takovou, že když o něco jde, přestanu psát na Twitter kraviny :-). Sandbox byl super, ale stánků bylo zoufale málo.  Tohle je skvělý marketing, jak zpropagovat svojí aplikaci nebo firmu na vývoj aplikací. Podivuji se nad tím, že to nevyužilo více subjetů.. Škoda.

Ignite
Skvělá tečka na konec. Bleskové prezentace (řečník má 20s na 1 slide) byly vtipné a trefné. Možná si z nich odnáším více než z celých přednášek. Pokud jste na GDD nebyly a chcete nasát trochu té atmosféry, doporučuji si počkat na videa z právě Ignite.

Vývojáři
Byli různí. Nerdové i pohodáři. Přišli se  nadlábnout, přišli shánět kontakty do svých projektů, přišli si vypít flašku vodky do vestibulu, přišli ukázat svojí aplikaci,.. a další. Každý měl svůj cíl a věřím, že každý svojí potřebu na GDD ukojil. Můj hlavní cíl na této akci byl: vidět na živo lidi, se kterými komunikuji, které znám jen podle 50x50px avatarů. Poznat lidi, se kterémi dlouhodobě spolupracuji (SvětAndroida, Inmite, Locus a další..). A nabrat nové kontakty pro případnou další spolupráci. A to se také povedlo.

Akce byla fajn!. A zas někdy.. tedy za rok? Uvidíme.

Permalink | Leave a comment  »

Při nástupu Google+ jsem nevěděl, jak se zachovat. Další sociální síť, kde budou zajímavý lidé a hlavně informace, které se můžou hodit. Ze začátku jsem nečekal, že bych do téhle sítě nějak aktivně přispíval, ale to jsem se mýlil. Přečtěte si tři plusy, proč mě tahle síť přijde zajímavá a použitelná.

Permalink | Leave a comment  »

Permalink | Leave a comment  »