Posterous theme by Cory Watilo

Ohlédnutí za rokem 2011

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.

Pracovat na ŽL jako grafický designér jsem začínal v létě 2009. Spadl jsem do mnou neprobádaných vod, ve kterých jsem se první rok topil. Šel jsem na hůl klientovi, byl jsem několikrát podveden, za svou práci nedostal zaplaceno, stal jsem se obětí lidí, kteří se na mně pokusili vydělat peníze a taky lidí, kteří peníze ze mně tahali.. Takhle to většinou začíná na Internetu u každého zelenáče. Člověk se musí otrkat a rozkoukat. Ostatní ho neberou, protože je nový a cizí. Člověk nic neumí, nemá zkušenosti, a nemá co nabídnout.

V roce 2010 jsem se toho hodně naučil. Přečetl jsem asi 20 knih kolem grafiky a obecně o podnikání, učil jsem se komunikovat s klientem, sestavovat smlouvu, cenovou nabídku a propagaci svých služeb. Byl to rok, ve kterém jsem se rozhodoval, zda pro mně grafika má smysl a jestli v ní pokračovat. Ke konci roku jsem sklidil úrodu a bylo rozhodnuto. Zvládnu to. V tomto roce bylo pro mně nejtěžší získat na trhu nějaké jméno a hlavně si ho nezkazit. Což se doufám povedlo. :-)

Začátek roku 2011 byl pro mně přelomový, protože jsem opustil tvorbu grafiky pro weby a naskočil do rozjetého vlaku ve tvorbě mobilních aplikací. Absolutně jsem netušil, co tenhle segment obnáší, ale hrozně se mi líbila myšlenka, že bych se mohl odlišit a dělat něco jiného než weby. Řekl jsem si, že by tenhle segment mohl v budoucnu být zajímavý a začal jsem studovat.. co? dokumentaci, mobilní aplikace, zahraniční články atd.

Pak jsem zkusil něco jen tak nakreslit a začal shánět pro to klienty... Ukazoval jsem jim svoje práce a podařilo se.  Celý rok jsem budoval dobrou klientelu a díky tomu jsem mohl spolupracovat na zajímavých projektech. A nejen to, díky motání kolem vývoje mobilních aplikací jsem získal hromadu nových známých a kamarádů, od kterých jsem mohl opět čerpat jejich zkušenosti.. Je to krásný a mladý segment, ve kterém je příjemná atmosféra. A to se mi líbí. Začínám se dostávat do fáze, že mohu sám předávat své zkušenosti, proto píšu návody a rady na tenhle blog. Proto jsem přednášel na Android RoadShow. Mám co říct a rád to předávám dál.

Pokud bychom úspěch měřili penězi, tak jsem dopadl, jako ta křivka na grafu. Záměrně jsem z vertikální osy odmazal částky, protože to už bych považoval za velké nahlédnutí do mého soukromí. 

Image

Tímto bych snad už jen dodal, že děkuji Všem kolegům, partnerům a klientům, se kterými jsem v tomto (i v minulých rocích) spolupracoval. Děkuji Vám za Vaší přízeň, za možnost získávat zkušenosti a učit se. Na druhou stranu mi bylo potěšením, že jsem pro Vás mohl pracovat, něco pro Vás vytvořit a pomoci tím k úspěchu Vašeho bysnysu.

Hodně štěstí, zdraví a úspěchů do dalšího roku 2012!

Michal Feltl

Užitečné nástroje #2 - Android dpi calculator

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/.

Image

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í!

Otestoval jsem Fluid UI

Dnes mi do emailu dorazila pozvánka k betatestu Fluid UI, což je webová aplikace na vytváření mobilních mockupů (prototypů). Neváhal jsem a začal si s tím hrát. Bohužel výsledek je smutný... ale od začátku.

Image

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).

Co říci závěrem? Ano takovýto nástroj na trhu chybí, ale ne v této podobě. Rád bych z Balsamiq Mockups přesedlal na nějakou online webovou aplikaci, ale zatím na obzoru není nic použitelného. Fluid UI má asi vykročeno nejdál, ale stále to není ono. Používání v této podobě by bylo o nervy :-).

7.) Vánočníček - řezání grafiky a struktura resources

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.).

01
Vezmeme si nástroj pro řezání (C) a obtáhneme celou vrstvu splash screenu, poté klikneme pravým tlačítkem a dáme upravit volby řezu, kde si přejmenuje řez na "bg_screen". Na jménu nezáleží, důležité je mít jasno v terminologii s programátorem. Já jsem zvyklý dávat prefixy: bg = pozadí, btn = tlačítko, ic = ikona. Ale není to dogma. Možná Vás napadlo, že pokud řízneme takhle celý splash screen, tak si zavíráme cestu k lokalizaci do jiných jazyků. Řešením by bylo nařezat splash screeny v různých jazycích (náročnost na velikost resources) nebo splash screen rozdělit na více komponent a ty lokalizovat, což zase bude více práce pro programátora. Je to vždycky na zvážení.

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ů.

02
Na komponenty, které mají více stavů si dejte obzvláště pozor, musí být správně zarovnané, tak aby třeba po tapnutí na ikonku její pressed stav neuskočil o 3px apod. Je také potřeba si dát pozor na stíny, tak aby nám vytvořený řez neodřízl kousek grafiky. Proto třeba prvky, které není potřeba na px přesně k něčemu pasovat, ořezáváme s dostatečným prostorem. Druhý dúvod je ten, že programátor pak nastaví tapnutí na celou plochu (aby se uživatel nemusel napřesno trefovat třeba na ikonku apod.). Co se týče terminologie, tak je opět zvykem pojmenovávat jednotlivé stavy jednoho prvku jako třeba: ic_home_normal, ic_home_pressed, ic_home_focused atd.

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í.

03

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".

04

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í

Vánočníček se umístil na 7. místě na akci AppParade

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!

 

3 roky tohoto blogu

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!

Aplikace Vánočníček je na Android marketu!

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