Jak navrhnout perfektní obrázek záhlaví Twitter
Twitter nedávno představil aktualizovaný design pro profilové stránky, který vám umožní vložit novou „hlavičkovou fotku“, která sedí na vrcholu vašeho zdroje, podobně jako na titulní stránce na časové ose Facebooku.
Dnes se chystáme ponořit a uvidíme několik příkladů dobrých obrázků profilu Twitteru a probereme, jak si můžete navrhnout vlastní. Dokonce odhodím bezplatnou šablonu, abyste mohli hned začít.
Prozkoumejte prvky Envato
Šablona zdarma!
Než se ponoříme do článku, zde je šikovná bezplatná šablona, kterou můžete použít k vytvoření vlastního obrázku záhlaví Twitteru. Poskytnutý soubor je disk PSD vytvořený ve Photoshopu CS6.
Popadněte zdarma PSD: Klikněte zde pro stažení.
Jak to použít
Chcete-li použít tuto šablonu, jednoduše nahraďte obrázek na pozadí. Skupina vrstev uživatelského rozhraní je určena k tomu, aby vám pomohla získat dobrou představu o tom, jak bude obrázek vypadat, jakmile bude na webu implementován. Před uložením skryjte seskupené vrstvy.
Seznamte se s novým profilem Twitteru
Kdysi dávno, Twitter byla služba zaměřená na text. V současné době se neustále snaží zlepšit vizuální zážitek integrací multimediálních funkcí a podpory.
Poslední změna profilu posouvá tuto myšlenku prostřednictvím prominentnějších fotografických toků a zbrusu nové funkce: záhlaví profilu Twitter.
Jak vidíte, tento nový obrázek sedí na vrcholu vašich nedávných tweetů a drží váš profilový obrázek a několik krátkých textů o vás. Abychom pomohli zavést nové profily, zdá se, že Twitter spolupracuje s NBC, takže mnoho našich příkladů bude z jejich různých účtů (ne všichni uživatelé zatím upgradovali).
Nakonec to do vašeho profilu nepřidává tunu designových prací, je to prostě jeden zvláštní obrázek. Nicméně i jeden malý obrázek může přinést spoustu otázek, takže jsem tu, abych odpověděl na několik otázek, které byste mohli mít, když se budete blížit k vytváření záhlaví Twitteru.
Jak nastavíte záhlaví profilu?
První otázka, na kterou se musíte zeptat, je, jak se na to obrátíte? Pokud přejdete do svého profilu, bude to vypadat jako vždy. V současné době si budou uživatelé, kteří nenastavili obraz záhlaví, zachovat starý design.
Chcete-li upgradovat svůj profil, klikněte na ozubené kolo Nastavení v pravé horní části stránky. Odtud klikněte na záložku „Design“ v levém bočním navigačním panelu.
Jakmile jste na stránce Design, přejděte dolů do sekce „Přizpůsobte si vlastní“. Zde se zobrazí tlačítko „Změnit záhlaví“. Jednoduše na to klikněte a nahrajte obrázek, abyste nastavili záhlaví.
To je všechno k tomu! Nyní se jen musíte rozhodnout, co tam dát!
Jaké velikosti?
Další důležitá otázka, kterou je třeba položit při navrhování záhlaví vašeho profilu, je „Jakou velikost?“ Když se podíváme na obrázky NBC, které Twitter nepochybně osobně pomohl nastavit, vidíme, že velikost je 520px široká a 260px vysoká.
Nakonec se to rozdělí na poměr šířky a výšky 2: 1 s maximální velikostí uploadu 5 MB nebo 1252 pixelů na 626 pixelů.
Tipy pro návrh a úvahy
Velikost obrázku, který nahrajete, rozhodně není jediná úvaha, kterou musíte mít na paměti. Všiml jsem si pár vtípků, které určitě potřebujete vědět, pokud se chystáte stáhnout úspěšný design.
Sledujte svou čitelnost
Abych experimentoval s prostorem na mém osobním účtu, chytil jsem náhodnou fotku, kterou jsem pořídil z digitálního displeje v New Yorku. Vypadalo to, že by vytvořilo perfektní abstraktní pozadí. Zde je výsledek:
Jak vidíte, je to docela atraktivní vizuální. Problém je však v tom, že do textu trochu zasahuje a já jsem čitelnost.
Je zřejmé, že s bílým textem budete chtít pozadí, které je slušně tmavé. Důl odpovídá tomuto popisu, ale světla slouží jako jasné body, které snižují kontrast mezi písmeny a pozadím a přidávají příliš mnoho rozptýlení.
Řešení je zde celkem jednoduché, právě jsem zatemnil pozadí, kde leží text, takže světla tak moc nezasahují. Výsledek není vizuálně tak cool, ale je mnohem čitelnější:
Šrouby Twitter s vaším obrázkem
Lidé na Twitteru vědí, že trik, který jsem použil výše, ztmavení spodní části obrázku, je něco, co bude třeba udělat na mnoha obrázcích. Ve skutečnosti to web skutečně dělá automaticky, ať už chcete nebo ne.
Jako test jsem popadl tento obrázek a připravil jej pro hlavičku Design Shack. Zde je to, co vidím ve Photoshopu:
Pokud nyní nahraju tento obrázek, jak vidíte výše, je zde výsledek, jak se zobrazuje na naší stránce profilu:
Vidíš rozdíl? Automaticky byl použit přechod na pozadí, což značně ztmavlo původní barvy. Je to jemný účinek na většinu fotografií, ale když se dostanete do něčeho s méně podrobnostmi, opravdu to vyniká.
To rozhodně není špatná věc, opravdu to pomůže textu vyniknout, je to jen něco, co byste měli mít na paměti při přípravě obrazu. Také si všimněte, že Twitter automaticky používá zaoblené rohy jak na profil, tak na obrázek záhlaví.
Tipy pro návrh
Nyní, když víme vše o tom, jak vytvořit a použít náš obrázek, se rozhlédneme a uvidíme, co ostatní v této oblasti dělají pro nějakou inspiraci.
Integrujte svůj profilový obrázek
Jedním z nejlepších, které jsem dosud viděl, je Ryan Seacrest. Miluji integraci profilové fotografie do obrázku záhlaví. Brilantní. Můžete plně očekávat, že uvidíte spoustu uživatelů, kteří se to snaží různými způsoby stáhnout.
Předveďte svou práci
Graham Smith, oblíbený návrhář loga každého, skočil na příležitost okamžitě aktualizovat svůj profil. Jeho nápad je jednoduchý a efektivní: předvádí svou práci v pěkné, podhodnocené síti log.
Přizpůsobte si pozadí svého profilu
Jedna věc, kterou byste měli mít na paměti, když pracujete na obrázku záhlaví, je to, že je ve skutečnosti součástí většího designu a mělo by dobře fungovat s obrázkem na pozadí.
Vidíme to na dobře fungujícím zpravodajském účtu níže. Obrázek záhlaví je mapa červeného světa složená z pixelů.
Toto je vlastně stejný obrázek, který použili na pozadí stránky, pouze menší a v jiné barvě. Díky tomu je hezký konzistentní vzhled.
Miluji, jak velké pozadí je jemnější verzí, zatímco obrázek záhlaví opravdu upoutá vaši pozornost odvážnou barvou.
Keep It Simple
Pokud máte potíže s přijetím dobrého obrazu záhlaví, pamatujte na tři mocná slova: udržujte to jednoduché. I v tomto prostoru se odehrává mnoho věcí, a vaším cílem je spojit to vše dohromady, nikoli jej příliš komplikovat.
Ve vlastní rozšířené rodině Twitteru vidíme několik dobrých a špatných příkladů. Spoluzakladatel Twitteru Evan Williams si rozhodně vybral špatně s grafikou, která je pro tento prostor příliš zaneprázdněna.
Porovnejte to s obrázkem, který používá tvůrce Twitter Bootstrap Mark Otto. Jeho volba je mnohem lepší:
To je pěkné, jednoduché a vlastně docela nápadné. Většina obrázku je mezera (v tomto případě černý prostor), takže není příliš mnoho rušit text. Obsah představuje událost nabitou emocemi a zázrakem pro nás všechny, což přispívá k nezapomenutelnému zážitku.
Ukažte nám své!
Tam to máte, vše, co potřebujete vědět o vytvoření dokonalého obrazu záhlaví Twitteru. Nyní, když jste si přečetli moje tipy a viděli jste nějakou velkou inspiraci, jděte si vytvořit svůj vlastní s naší bezplatnou šablonou!
Až bude váš obrázek záhlaví Twitteru připraven, zanechte komentář níže s odkazem, abychom mohli vidět, s čím jste přišli.
