Jak vytvořit Tumblr téma pomocí PSD designu

Tumblr kombinuje důraz na vizuální kreativitu s délkou příspěvků, která se pohybuje mezi stručností Twitteru a otevřenou délkou klasického blogu. Vytvořením vlastního Tumblr motivu, který rozšiřuje vzhled vaší online i offline identity, můžete začlenit tumblelog do širší strategie zahrnující další sociální sítě. Weboví designéři často začínají vývoj vlastních motivů v Adobe Photoshopu a využívají formát souboru PSD jako vizuální pracovní prostor.

Stanovení rozměrů

Pomocí pravítek a vodítek v Adobe Photoshopu je jednoduché vytvořit základ motivu pro Tumblr, včetně mřížky, která určuje rozměry jednotlivých oblastí. Pokud pro každý prvek (hlavní obsah, postranní panel) vytvoříte samostatnou skupinu vrstev, můžete umístit všechny vodítka daného prvku do jedné vrstvy ve skupině. Tento přístup umožňuje zobrazovat vodítka jen tam, kde jsou potřeba, a udržuje související prvky pohromadě. Pojmenujte skupiny a vrstvy tak, aby odrážely jejich funkci – úspora času při hledání a zapínání vrstev se rychle vrátí.

Pro rychlé zjištění rozměrů libovolného prvku stiskněte F8 a otevřete panel Informace, poté Ctrl‑klik na miniaturu vrstvy v panelu Vrstvy – Photoshop automaticky vytvoří výběr podle pixelů dané vrstvy.

Výběr barev

Ať už používáte klasický výběr barvy, knihovnu odstínů odpovídajících tištěnému materiálu či logu, nebo kapátko pro odebrání barvy z jiného souboru, Photoshop nabízí řadu možností. Při vyplňování vrstvy pevnou barvou (např. pozadí motivu) můžete z políčka hexadecimálního kódu v dialogu Výběr barvy zkopírovat kód a vložit jej do názvu vrstvy – rychlá reference během další práce. Šest znaků hex kódu se pak používá jak v kódu Tumblr, tak v běžném webovém designu.

Vytváření grafiky

Hlavička, která identifikuje váš tumblelog, může být bitmapová grafika. Vytvořte ji kombinací textu a pixelových nebo vektorových prvků přímo v PSD. Pokud zahrnete text, který má být upravitelný, nechte jej jako živý typ v souboru; rasterizujte jej až ve verzích určených pro uživatele bez licence na použité fonty. Při kreslení vektorových tvarů (pero, tvary) pracujte podél vodítek, která odpovídají rozlišení šablony – tak zajistíte maximální ostrost při exportu rastrových verzí.

Další kroky

Pokud ovládáte HTML a CSS a znáte specifické proměnné, které Tumblr používá, můžete převést rozměry, barvy a grafiku z PSD do funkčního motivu. Pokud kódování není vaším oborem, můžete PSD předat programátorovi, který motiv vytvoří. Kromě vizuální úpravy musí Tumblr motiv obsahovat proměnné (pro dynamické hodnoty) a bloky (kombinace proměnných s HTML). Bloky definují strukturu příspěvků, trvalé odkazy, navigaci a prvky pro sledování a lajkování.

Informace o verzi

Článek se vztahuje na Adobe Photoshop CC a Adobe Photoshop CS6. U jiných verzí či produktů se mohou některé kroky lišit.