Jak vytvořit motivy Tumblr s designem PSD

Tumblr kombinuje důraz na vizuální kreativitu s délkou příspěvku, která spadá mezi stručnost Twitteru a otevřenou délku tradiční položky blogu. Když použijete vlastní téma Tumblr, které rozšiřuje vzhled vaší online a offline identity, tumblelog zapadá do strategie, která zahrnuje další online a sociální média. Weboví designéři často začínají vyvíjet vlastní motivy v Adobe Photoshopu a jako vizuální pracovní prostor používají vrstvený formát souboru PSD programu.

Stanovení dimenzí

Vodítka a možnosti vrstvení v Adobe Photoshopu zjednodušují vytváření základů motivu Tumblr, doplněného mřížkou rozvržení, která definuje rozměry oblastí obsahu. Pokud nastavíte skupiny vrstev pro každý aspekt vašeho návrhu, včetně jeho hlavní oblasti obsahu a postranního panelu, můžete umístit všechna vodítka pro každý prvek na jednu vrstvu v každé skupině. Toto uspořádání umožňuje zviditelnit vodítka selektivně, místo aby je všechny zobrazovala a skrývala pomocí klávesové zkratky nebo položky nabídky Photoshopu, a udržuje související prvky vodítka pohromadě. Pojmenujte své skupiny a vrstvy, abyste identifikovali funkci každé části vašeho návrhu. Okamžiky, které investujete do úkolů postupného pojmenování, se vyplatí v době, kdy nemusíte utrácet vrstvy zapínáním a vypínáním, abyste určili, co obsahují. Chcete-li rychle najít rozměry libovolného prvku rozvržení, stisknutím klávesy „F8“ otevřete informační panel a poté kliknutím „Ctrl-kliknutí“ na jeho miniatuře panelu Vrstvy načtěte výběr založený na pixelech v dané vrstvě.

Výběr barev

Ať už používáte osvědčený výběr barev k výběru odstínů motivu, načtení možností z knihovny barev tak, aby odpovídaly vytištěnému kusu nebo logu, nebo se spoléháte na nástroj Kapátko k vzorkování odstínů z jiného souboru nebo grafiky, Adobe Photoshop nabízí širokou škálu řada způsobů, jak vybrat barvy motivu. Když vyplníte vrstvu plnou barvou, abyste simulovali barvu pozadí motivu Tumblr nebo jiných prvků vašeho návrhu, můžete zkopírovat barevný vzorec jako text z hexadecimálního výběru Výběr barvy a vložit identifikaci barvy do názvu vrstvy pro rychlou orientaci. Šest alfanumerických znaků v hexadecimální barvě se zobrazuje v kódu Tumblr i ve webových designech pro blogy a další online formáty.

Vytváření grafiky

Záhlaví, které identifikuje tumblelog, může použít bitmapovou grafiku jako tematickou grafiku. Tento kritický prvek můžete vytvořit pomocí kombinace textových a pixelových nebo vektorových prvků uvnitř souboru PSD. Pokud grafika obsahuje přizpůsobitelné prvky, které zadáváte ve Photoshopu, nechte je jako živý typ v souboru motivu založeného na PSD a rastrujte je pouze v kopiích souboru, které poskytnete jiným lidem, kteří nemají licenci na požadované soubory písem ve vašem tématu. Když k kreslení ve Photoshopu používáte vektorové nástroje, včetně nástrojů pero a tvar, kreslete pomocí pravidel vodítka, která se shodují s podkladovým rozlišením vašeho souboru šablony. Tato technika pomáhá udržovat vaše kresby co nejostřejší, když ukládáte nebo exportujete jejich rastrované verze.

Další kroky

Pokud víte, jak kódovat HTML a CSS a rozumíte specializovaným proměnným, které Tumblr používá ve své struktuře kódu, můžete přeložit dimenze, barevné specifikace a grafiku, kterou vytvoříte v PSD, do funkčního vlastního tématu Tumblr. Pokud webové kódování nespadá do vašich dovedností, můžete svůj PSD poskytnout programátorovi, který vám téma vytvoří. Spolu s vizuální úpravou musí téma Tumblr obsahovat proměnné a bloky. Proměnné přijímají dynamické hodnoty k vytvoření standardních vizuálních prvků Tumblr. Bloky tvoří bloky kódu, které kombinují proměnné s HTML. Bloky vytvářejí příspěvky a trvalé odkazy, které se k nim dostávají, odkazy, které se pohybují mezi kousky chronologicky organizovaného materiálu a prvky, které vyhoví lidem, kteří mají rádi nebo sledují konkrétní tumblelog.

Informace o verzi

Informace v tomto článku se týkají aplikací Adobe Photoshop CC a Adobe Photoshop CS6. U jiných verzí nebo produktů se může mírně nebo výrazně lišit.