July 26, 2018 - No Comments!

Animační sprint

Z plánu tvorby učebnice se nakonec stalo animované video, vytvořené v nadstandardně krátkém čase. Jak to probíhalo?

Učebnice. Paralýza nudou. Už jen pronesením toho slova na jednoho dolehnou chmury. Uvědomili jsme si to teď, když naše děti začínají nosit školní tašky, a došlo nám, že je chceme některých zkušeností zkráta ušetřit. Umíme věci vysvětlovat  — z tajuplných složitostí firemních a technologických procesů destilovat srozumitelné ilustrované pointy. Baví nás to. Podílet se na tvorbě knih pro děti je pro nás meta.

Poslali jsme tedy nabídku spolupráce — kam jinam — než do Albatrosu. Kamínek hozený do vody — jeden nikdy neví, kam může taková rozčeřená vlnka doplout a co tam způsobit.

Plácli jsme si. Učebnice to protentokrát sice nebude, ale i tak máme radost na druhou. Kohosi v nakladatelství upoutala naše záliba v animaci a díky tomu máme na stole podklady k animačnímu sprintu na téma úspěchů poslední knižní pětiletky.

Tři minuty za deset dní

Dostáváme z Albatrosu skript — páteř celé věci. Stojí na číslech, kupodivu však zajímavých, a navíc je psán s nadsázkou. Tohle bude radost. Rovnou připravujeme ukázku o délce několika vteřin, ve které se střetne vizuální a animační styl. V tomhle případě se termín totiž netvářil právě přátelsky. Mezi prvním mailem od zákazníka a uploadem 3 minutového videa na Youtube leželo deset dní a tak není čas na vymetání slepých cest. Nakladatelství ukázku s překvapivou obratností, kořeněnou nadšením, schvaluje.

Storyboard

Máme skript a víme do čeho jej chceme přetavit. Vzhledem k času, jenž nás tlačí, je nutné se vyjadřovat úsporně. Neplýtvat tahy. Každou čárku, kterou nakreslíte, po vás musí vzít do ruky animátor, a to obvykle vícekrát než jen jednou. Stavíme okénka storyboardu a vymýšlíme, jak z jednoho proplout do toho, které bude následovat.

Storyboard z ilustrací

Voiceover

Zatímco se za mixážním pultem ladí finesy právě nahrávaného hlasu, my můžeme na pár hodin zvolnit. Popadnout dech. Dojít si na záchod, zalít kytky a nakrmit slepice. V mezičase si děláme přípravu na animační fázi: Storyboard je třeba rozlámat do jednotlivých okének a ty pak ještě rozdrobit na separátní vrstvy, přičemž každé z těch osmiset padesáti je třeba vymyslet jméno. Objevují se pak názvy jako: Vavřín-list-levý-07, Antimaska-chlupu-štětce-A nebo Dudlík-záslepka-pololesk-01.

Animace

Ráno kdosi objeví mezi novými GDPR-emaily VAW s voiceoverem. Odteď už je to zase naše. V After Effects podle hlasové stopy rozčlenit časovou osu, a pak si její díly rozebrat tak, aby každý z nás dostal zhruba stejnou porci. Pod rukama nám začínají kresby zprudka ožívat. To jsou ty nejsladší chvíle —  máloco se vyrovná té parádě, moci si sám rozhýbat vlastní nakreslenou věc. Teď už ztrácíme pojem o čase zúplna. Každý buduje své vlastní několikavteřinové vesmíry, které nakonec slijeme do jednoho tříminutového univerza. To ale až nakonec — ten zatím leží někde v třídenním nedohlednu.

Albatros video Behind scene After EffectsProstředí, které vyplňovalo několik našich obrazovek po dobu 4 dnů.

Zvuk

Nakonec se na jednom stole sejdou všechny kompozice — rozhýbané kousky, které je třeba poskládat do jednoho kompaktního celku. Ten se pak okoření ruchy a přilepí se k němu hudební stopa. Následuje fáze nekonečného přehrávání, hledání much a chybiček. Ladíme.

Hotovo

FINAL-10-final-opravdu-final-2.MP4 se nahrál na Dropbox a kolegyně (manažerka odstupu) si ho zrovna pouští. Ze sluchátek k vám přes stůl dolehne slabá ozvěna úvodní věty, kterou jste za poslední tři dny slyšeli už devětsetkrát. Máme hotovo. Zbývá jen najít cestu k publiku. Všichni z Albatrosu jsou už u vody a večer, až se všichni sejdou v maloměstské konferenční místnosti si naše video budou chtít pustit. Tamní Wi-Fi se zdá být v kondici a my si můžeme na zbytek dne udělat volno.

ukázka části animovaného videa

Chlácholíme ospalé oči první odezvou od generálního ředitele Václava Kadlece:

“Pecka! Za mě výborný, a na teambuilding to chce vzít kontejner papírových kapesníků.”

Zvládli jsme to.
Banner Infografika 8 kroků k videu

May 31, 2018 - 1 comment.

How we create illustrational styles

An empty screen – a challenge that can make anyone weak in the knees. Creative jitters are the start of the journey; when we have no idea where it will lead. New work has arrived on our desk and we know this is exactly what we love to do.

Forbes Czech magazine asked us to collaborate on a project that addressed the practical risks of cybersecurity. Our task was to create a visual style for their online special report that would illustrate the given topic well, but also meet the standards of Cisco, the project partner.

1. In search of the general mood and dead-ends

Hackers. An infected computer. Stolen data. IT apocalypse. Define visual themes that will evoke this mood while not falling prey to clichés that pander. Determine the dimensions of unexplored landscapes. We put together a mood board: a collage of relevant images, fonts and photos, so that we can search it for the right way forward. We discuss our ideas with the client so that we can make sure we're on the same wavelength.

Moodboard

Project mood board.

2. Sharpen your pencils

We know where we need to go; we’re just not sure how to get there yet. We’re not looking for specific terms, but rather our own language. We create the initial object that we will turn into an illustration. We try out colors, textures; we layer gradients based on the moods on our mood board. Ultimately, we find that even darkness has its limits. We leave the dead-end in search of the light apocalypse.

 

We've got something that suits all partners’ manuals and that works; even if we engrave it in the actual article, we still need to spice it up with the anxious feeling of cyber danger. The bustling of bright colors and subtle destruction create a mood of sought after unrest. We found our way!

4. Defining rules and constants

For any illustrator to work better, they carve into stone all their necessary constants: from their color palette and the radii of their rounded edges to the thickness of lines and the angles of gradients used.

5. Application

With our headphones in place, we get to work. Read the theme, extrapolate the point and turn it into an image. Clicking, steam rises from our coffee, sipping tea. Drops of rain patter on the window and give rise to the thought of bringing all the compositions to life with animation. A several-hour dive outside of space and time.

Zavirovaný dokument - gif

Document infected with a virus.

Vysávání strategických informací - gif

Theft of strategic information.

Nechráněné sítě, lze napadnout z venku - gif

An unprotected network – can be penetrated from outside.

Zubaté reklamní banery - gif

Edgy ad banners.

únik dat - gif

Data leaks bring companies to their knees.

To impress our moms, kids and potential girlfriends, we edited a short video about cyber-problems:

6. And now... the reveal!

All that’s left is to put everything together; with some fine sand paper we polish the last little details and send it into orbit. You can see how high we’ve flown at kyberbezpecnost.forbes.com

You can download the portfolio of our illustrational styles here.

 

 

May 23, 2018 - No Comments!

Jak vzniká ilustrační styl

Prázdné plátno — výzva, která dokáže roztřást leckteré koleno. Tvůrčí chvění na začátku cesty, kdy netušíme, kam nás může zavést. Na stole nám leží nová práce a my víme, že přesně tohle máme rádi.

Časopis Forbes nás požádal o spolupráci na projektu zabývajícím se praktickými riziky kyberbezpečnosti. Měli jsme za úkol vytvořit takový vizuální styl webového speciálu, který by dobře ilustroval dané téma a zároveň by konvenoval společnosti Cisco, která byla partnerem projektu.

1. Hledání celkové nálady a slepých cest

Hekři. Napadený počítač. Ukradená data. IT apokalypsa. Definovat vizuální témata, která tuto náladu evokují a nešlápnout při tom do podbízivých klišé.  Vymezit kóty neprozkoumané krajiny. Skládáme moodboard — koláž relevantních obrázků, písem a fotek abychom v něm začli hledat možné cesty. Své dojmy konzultujeme s klientem, abychom se ujistili, že jsme naladění na stejné vlně.

Moodboard

Moodboard - nástěnka nálady projektu.

2. Tužky ostrouhat

Víme kam, ale ještě jsme nezjistili kudy. Nehledáme konkrétní pojmy, ale samotný jazyk. Vytvoříme výchozí objekt, který přetvoříme v ilustraci. Zkoušíme barvy, textury, vrstvíme gradienty dle nálad našeho moodboardu. Nakonec se ukazuje, že temnota má své limity. Opouštíme tedy slepou cestu a vydáváme se hledat apokalypsu světla.

 

Máme věc, která vyhovuje manuálům všech partnerů a funguje, i když ji naroubujeme do vlastního článku, zbývá maličko okořenit stísněným pocitem kybernetických trablí. Ruchy ostrých barev a jemné destrukce vnesou do nálady hledaný neklid. Našli jsme cestu!

4. Definování pravidel a konstant

Aby se každému z ilustrátorů (ilustrátorek) lépe pracovalo, tesáme do kamene všechny potřebné konstanty — od palety barev a poloměry zakulacených rohů, po tloušťky čar a úhly použitých gradientů.

5. Aplikace

Se sluchátky na uších se pouštíme do práce. Přečíst si téma, destilovat pointu a tu přetavit do obrázku. Klikání, pára nad kávou, srkání čaje. Kapky deště bubnující na okno nás přivádí na nápad všechny kompozice přivézt k životu animací. Mnohahodinové ponoření mimo čas a prostor.

Zavirovaný dokument - gif

Zavirovaný dokument.

Vysávání strategických informací - gif

Vysávání strategických informací.

Nechráněné sítě, lze napadnout z venku - gif

Nechráněné sítě, lze napadnout z venku.

Zubaté reklamní banery - gif

Zubaté reklamní banery.

únik dat - gif

Únik dat pokládá firmy na lopatky

Pro obdiv našich matek, dětí a potenciálních přítelkyň jsme sestříhali krátký spot kyber-potíží:

6. A ven s tím

Zbývá vše sesadit dohromady, jemným smirkem doladit poslední drobné detaily a vypustit to celé na orbit. Jak vysoko jsme dolétli, můžete posoudit na: kyberbezpecnost.forbes.com

Portfolio našich ilustračních stylů ke stažení zde.