Vývoj sestav LuckyTemplates: Vytváření motivů, firemních log, ikon a pozadí

V tomto tutoriálu vám ukážu, jak vymýšlím své celkové téma, barevná schémata, pozadí a jak tyto základní prvky spojuji, aby mé sestavy vypadaly čistě a se snadnou navigací. To má obrovský dopad na můj proces vývoje sestavy LuckyTemplates, protože to ovlivňuje to, jak lidé procházejí sestavou a interpretují data, která prezentuji.

Jako příklad použiji zprávu, kterou jsem vytvořil pro jednu z výzev LuckyTemplates, abych krok za krokem jasně ukázal, jak to dělám.

Obsah

• Výběr celkového tématu
• Vytvoření loga
• Vytvoření barevného schématu
• Použití motivu na LuckyTemplates
• Přidání ikon do zprávy
• Vytváření pozadí v aplikaci PowerPoint
• Přidání navigace na stránce
• Závěr

Výběr celkového tématu

Ve chvíli, kdy dostanu zadání pro takovou výzvu, okamžitě se snažím rozhodnout, jaké téma budu dělat. Je to první část mého procesu vývoje sestavy LuckyTemplates ještě předtím, než přinesu jakákoli data, modely nebo opatření, takže není potřeba aplikovat téma do každého prvku jeden po druhém.

Začnu tím, že půjdu na namelix.com .

Do prostoru na úvodní stránce můžete zadat libovolné klíčové slovo. Jakmile kliknete na Generovat , zobrazí se vám výsledky podle klíčového slova, které jste zadali. Pokud tedy použiji například klíčové slovo „data“, zobrazí se mi tyto výsledky.

Můžete procházet všemi výsledky a vybrat ten, který podle vás nejlépe vyhovuje vaší zprávě. V mém případě je to ten, který jsem si vybral.

Jen si pamatujte, že tady nejde o značku. Vše, co potřebujeme, je téma, pak použijeme vlastní jméno nebo titul.

Stručný popis této zprávy obsahoval název, takže tento název použijeme na tento snímek kliknutím na tlačítko Upravit a poté do zobrazeného prostoru zadejte „Enterprise Manufacturers LTD“.

Můžete také kliknout na Barva a změnit barvu jména, které jste zadali.

Na původním snímku, který jsem vybral, bylo pouze první písmeno modré a zbytek byl bílý. Pokud to chci změnit, mohu kliknout na konkrétní barvu zde.

Tím se automaticky změní název na snímku.

Vytvoření loga

Nyní, když se mi líbí, jak název vypadá, vyberu ikonu, kterou k názvu přidám. To nám pomůže vytvořit logo, které použijeme pro naši zprávu.

Stačí přejít do nabídky ikon a poté kliknout na Procházet ikony .

Získám tak celou stránku možných ikon, které mohu přidat ke značce nebo názvu.

K vyhledání konkrétních ikon, které odpovídají tématu sestavy, kterou se snažím vytvořit, mohu použít vyhledávací lištu nahoře. Pokud tedy zadám DNA , zúží výsledky na nejrelevantnější ikony.

Jakmile uvidím ikonu, která se mi líbí, stačí na ni kliknout, aby se objevila na snímku, na kterém pracuji.

Mohu také změnit velikost této ikony posunutím posuvníku v nabídce ikon.

Pokud chci upravit barvu ikony, mohu to udělat také prostřednictvím stejné nabídky.

Teď, když se mi líbí, jak moje logo vypadá, stačí si z něj udělat snímek obrazovky a uložit ho do složky na ploše.

Vytvoření barevného schématu

Dalším krokem je vymyslet barevné schéma založené na tématu, které jsem si vybral dříve. Za tím účelem přejdu na web s názvem imagecolorpicker.com .

V dolní části domovské stránky je tlačítko s nápisem „Nahrát obrázek“.

Jakmile na to kliknu, otevře se mé složky. Vyberu logo, které jsem si dříve uložil, a kliknu na Otevřít .

Jakmile je nahrávání dokončeno, zobrazí se mi obrázek, který jsem nahrál, spolu s paletou, která se skládá z barev, které jsem použil pro logo. Skvělé na tom je, že mohu najet ukazatelem myši na jakoukoli část obrázku, a když kliknu na konkrétní pixel, zobrazí se mi hexadecimální kód pro tuto konkrétní barvu.

Všimněte si, že všechny tyto hex kódy později uložím do souboru JSON, který může nést pouze osm barev. Jakmile si ty barvy vyberu, sepíšu si hexadecimální kódy a přejdu na PowerBI.tips . Kliknu na Advanced Theme Generator.

Uvnitř pokročilého generátoru témat mohu zadat všechny tyto hexadecimální kódy pod vícenásobným vstupem.

Jakmile stisknu tlačítko přidat, zobrazí se moje paleta se specifickými hexadecimálními kódy pro každou barvu.

Jeden z dalších odborníků na LuckyTemplates, Brian Julius, také používá stejný nástroj. Zmínil se ov jednom ze svých předchozích tutoriálů.

Karta Vlastnosti je místo, kde mohu nastavit, jak chci, aby určité vizuály vypadaly. Pokud například kliknu na první graf pod výběrem grafu, zobrazí se tyto různé karty, což mi umožňuje přizpůsobit každou část grafu.

Pokud tedy chci, aby mé grafy měly legendu, mohu kliknout na Legend a změnit název a barvu.

Mohu upravit velikost písma a také provést různá přizpůsobení na ose X.

Mohu vybrat název, barvu nadpisu, barvu štítku a velikost písma. Ještě důležitější je, že zde mohu upravit barvy dat.

Je skvělé, že toto vše mohu nastavit zde, protože to znamená, že jakmile vložím celé toto téma do LuckyTemplates, nebudu muset při vytváření položek upravovat barvy jednu po druhé. I s datovými štítky, jakmile je zapnu v LuckyTemplates, tato nastavení se automaticky spustí.

To je klíč k bezproblémovému vývoji sestav LuckyTemplates – hledání věcí, které by mohly zmírnit kroky k dokončení vaší sestavy.

U většiny svých modelů bych použil tmavší pozadí a pak jako štítek s údaji použil bílou. Můžete si vybrat své vlastní barvy; jen se ujistěte, že máte dostatečný kontrast mezi pozadím a popisky, aby byly lépe čitelné.

Stejná nastavení lze změnit pro název grafu.

Jakmile je vše nastaveno, mohu se vrátit na paletu a stáhnout si motiv kliknutím na tlačítko ve spodní části.

Všechna tato nastavení budou uložena v souboru JSON. Zobrazuje se to takto, protože můj počítač čte soubory JSON pomocí poznámkového bloku Microsoft. Lze jej však otevřít také pomocí jiných aplikací, jako je Visual Studio.

Pokud otevřu soubor JSON, vypadá to takto.

Když se dívám na kód, vidím zde osm hexadecimálních kódů.

Použití motivu na LuckyTemplates

Kromě palety barev tento soubor JSON obsahuje také všechna nastavení, která jsem dříve uložil. To znamená, že jakmile tento soubor naimportuji, nebudu muset dělat tolik podrobné práce, jakmile začnu s sestavou.

Chcete-li importovat tento soubor, půjdu na plochu LuckyTemplates a kliknu na podokno Zobrazit nahoře. Poté kliknu na „Procházet témata“.

Stačí vybrat tento soubor a kliknout na Otevřít.

Tím se automaticky importuje nastavení motivu do mých LuckyTemplates. Mohu si to ověřit přechodem do Vizualizace. Kliknu na panel formátu a přejdu na pozadí stránky. Jak můžete vidět, barvy motivu, které jsem zvolil dříve, se nyní zobrazují zde.

Všimnete si, že zde je deset řad barev, ale dříve jsme ušetřili jen osm. LuckyTemplates totiž automaticky zahrnuje bílou a černou barvu v jakémkoli barevném motivu. Poté uvidíte, že třetí řádek říká „Barva motivu 1“, což znamená, že je to první z osmi barev, které jsem do svého motivu importoval.

Přidání ikon do zprávy

Nyní, když mám celé téma v LuckyTemplates, ukážu vám, jak jsem vybral všechny tyto ikony, které jsem použil na domovské stránce sestavy.

Když jsem na Googlu hledal bílé ikony, tato webová stránka byla první věc, která se objevila ve výsledcích.

Zde je odkaz, jak se na tuto stránku dostat.

Pamatujte, že ve svých přehledech preferuji tmavé pozadí. Proto jsem zde hledal bílé ikony. Existuje mnoho dalších stránek, kde můžete získat své vlastní ikony na základě vašeho tématu a preferencí.

Na tomto webu mi stačí zadat klíčové slovo, abych získal nejrelevantnější ikony v databázi webu. Použiji slovo „rozhodnutí“.

Jakmile kliknu na tlačítko Hledat , zobrazí se tyto výsledky.

Jakmile kliknu na ikonu, kterou chci, objeví se všechny tyto možnosti, jak mohu soubor uložit.

Vždy stahuji soubor PNG. Velikost, kterou obvykle stahuji, je 48×48. Jakmile kliknu na svou volbu, požádá mě o stažení a uložení do složky. Takto to vypadá po uložení do mého počítače.

Vytváření pozadí v aplikaci PowerPoint

Jakmile budu mít všechny ikony, které potřebuji, další zastávkou v tomto procesu je vytváření snímků pro mé pozadí pomocí aplikace PowerPoint.

Obvykle začínám s prázdným snímkem, ale v příkladu, který zde používám, vám ukážu soubor, který jsem vytvořil, když jsem ještě pracoval na sestavě. Když se například podíváte na tento snímek, uvidíte, že používám stejné logo, které jsem vytvořil dříve.

V podstatě jsem právě přidal tento obrázek do tohoto souboru PowerPoint. Za tímto účelem jsem šel do nabídky Vložit, kliknul na Obrázky a poté vybral „Vložit obrázek z tohoto zařízení“.

Pokud jde o záhlaví snímku, je to pouze textové pole, kam mohu zadat název každého snímku.

Také jsem přidal tento řádek, který prochází přes stránku, abych izoloval záhlaví od zbytku obsahu, který na stránku přidám.

Všimněte si, že všechny tyto prvky na snímku musí být uloženy jako skupina, aby se zobrazily na obrázku, jakmile jej uložím. Jinak se tyto prvky nezobrazí, když uložím tento snímek jako obrázek.

Stačí vybrat všechny tyto prvky kliknutím na každý z nich a současně podržet klávesu Ctrl. Že byly vybrány, poznáte podle toho, že kolem každého prvku uvidíte bílé tečky.

Jakmile je vše vybráno, stačí kliknout pravým tlačítkem a vybrat Skupina.

Poté znovu klikněte pravým tlačítkem a vyberte Uložit jako obrázek.

Jakmile je soubor uložen, lze jej nyní použít jako šablonu pro všechny ostatní snímky potřebné pro sestavu.

Zde jsem také vytvořil domovskou stránku své zprávy.

Jak můžete vidět, je to trochu podrobnější ve srovnání s běžnou šablonou, na které jsem pracoval dříve. Právě jsem použil tvary dostupné v PowerPointu, abych to dal dohromady.

Všimněte si, že zatím nemá ikony, které jsem si dříve uložil. Jakmile budu v LuckyTemplates, přidám ikony a použiji je pro navigaci na stránce. Prozatím je to vše, co moje domovská stránka potřebuje.

Přidání navigace na stránce

Nyní se vrátím zpět na plochu LuckyTemplates, abych vám ukázal, jak jsem toto vše přidal do svých přehledů a jak jsem nastavil také navigaci na stránce.

Musím přejít do nabídky Vložit a poté kliknout na Obrázek.

Tím se otevřou mé složky. Jakmile do sestavy dostanu snímky a ikony, mohu podle potřeby změnit jejich velikost, aby bylo vše správně rozvrženo.

Jak můžete vidět, stránka nyní zobrazuje snímek, na kterém jsem pracoval v PowerPointu, plus ikony, které jsem dostal online.

Nyní přidám navigaci na stránce. Začnu touto ikonou pro Defekty.

Poté přejdu do sekce Akce vpravo a v části Typ zvolím Navigaci po stránce.

V části Cíl stačí vybrat stránku, na kterou má ikona vést. V tomto příkladu zvolím Defekty.

Také jsem přidal malou poznámku do popisku a napsal „Kliknutím zobrazíte snímek defektů“.

Takže kdykoli zvýrazním kurzor myši nad ikonou, můžete vidět, že se zobrazí popis.

Zatímco jsem stále uvnitř a dávám věci dohromady, musel bych kliknout levým tlačítkem Ctrl +, aby to fungovalo. Jakmile je však zpráva zveřejněna, uživatel, který si zprávu prohlíží, stačí kliknout levým tlačítkem, aby se dostal na správnou stránku.

Na snímku Defekty uvidíte šablonu, na které jsem pracoval dříve, ale s větším obsahem na stránce. Nahoru jsem také přidal ikonu domů, aby se uživatelé mohli kdykoli vrátit na domovskou stránku.

Stejný proces jsem provedl s ostatními ikonami na domovské stránce, což uživatelům usnadnilo přechod z jedné části mého přehledu do druhé.

Závěr

Věci, kterými jsem prošel v tomto tutoriálu, jsou zásadní pro proces vývoje sestavy LuckyTemplates, protože mohou mít obrovský dopad na to, jak bude vaše sestava interpretována.

Samotný výběr správné barevné palety by mohl vaši sestavu poškodit. Vědět, že nesprávný výběr barev může způsobit, že vaše štítky nebudou čitelné nebo vaše vizualizace budou těžko srozumitelné.

Doufám, že vám tento tutoriál pomůže vytvořit si vlastní proces vývoje sestavy LuckyTemplates. Vždy si můžete vymyslet svůj vlastní pracovní postup, ale toto by bylo dobré místo, kde začít, pokud právě začínáte zjišťovat, co pro vás funguje.

Vše nejlepší,

Jarrett