Design Témata Tumblr inspirovaná lesem ve Photoshopu
Tumblr je platforma pro vytváření mikroblogů, která uživatelům umožňuje snadno zveřejňovat úryvky informací na webu, například fotku nebo sadu fotografií, video, citát nebo jen odstavec.
To je často používáno jako on-line deník, protože k jeho snadné použití v porovnání s jinými blogy platformy, jako je WordPress.
Mnoho Tumblr témat je venku, a to jak zdarma, tak prémiové, ale přemýšleli jste někdy o tom, jak byste chtěli navrhnout vlastní?
V tomto tutoriálu se dozvíte, jak vytvořit téma Tumblr inspirované lesem, využívající dřevěné textury, jemné vzory a moderní techniky - pěknou směs přírodních a moderních prvků.
Co budeme navrhnout
Téma, které navrhujeme ve Photoshopu, se skládá ze čtyř oblastí: dřevěného postranního panelu, oblasti hlavního obsahu, pravého postranního panelu a záhlaví.
Krok 1
Prvním krokem, jak by měl být se všemi věcmi, které navrhujete, je fáze skicování. Pomocí grafické tablety Wacom Bamboo a prázdné plátno ve Photoshopu jsem načrtl následující návrh s některými většími prvky, jen abych získal své nápady na (digitálním) papíru.
Krok 2
S myšlenkou hrubé, vytvořte nový dokument ve Photoshopu. (Mějte na paměti, že to není v kamenu, je to jen něco, na co se můžete vrátit, pokud se uvíznete v designu. Osobně mám tendenci experimentovat a měnit spoustu toho, co jsem původně plánoval.) Použil jsem následující nastavení ve Photoshopu:
Krok 3
Dalším krokem je položit několik průvodců na plátno. To vám pomůže udržet strukturu tématu úhledné, jak ji navrhujete. Chci, aby levý postranní panel byl 200 pixelů, hlavní oblast obsahu byla 600 pixelů a pravá postranní lišta měla být 160 pixelů, což nám dává šířku 960 pixelů.
Pokud jste použili stejné nastavení, můžete vodítka umístit na 200, 800 a 960 pixelů vodorovně. Tento návrh bude zarovnán doleva, takže dřevěná postranní lišta vždy sedí na levé straně výřezu uživatele.
Také jsem umístil vodítka 200 pixelů pod vrcholem plátna a 200 pixelů nad dnem plátna. Takhle vypadá můj dokument:
Krok 4
Nyní přidejte nějaký vzor k našemu pozadí. Přejděte do Soubor → Nový a vytvořte nový dokument, který je 8 × 8 pixelů. Nakreslete některé svislé čáry o šířce 2 pixely. Vaše plátno by nyní mělo být 2 pixely černé, 2 pixely bílé, 2 pixely černé, 2 pixely bílé. Přejděte na Upravit → Definovat vzorek. Uložte vzor jako "Vertikální čáry 2px".
V původním dokumentu přejděte do vrstvy → Nová vrstva výplně → vzorek. Vyberte model, který jste právě vytvořili, a klepněte na tlačítko OK. Zrušte opacitu vrstvy, dokud se nezobrazí takto:
Sloučte vzorek s vrstvou pozadí a automaticky ji rasterizujte. Přejděte na Filtr → Šum → Přidat šum. Změňte hodnotu na 5% a klepněte na tlačítko OK. To přidá jemné textura na pozadí:
Vytvořte novou vrstvu a naplňte ji bílou barvou. Umístěte jej pod původní vrstvu pozadí. Snižte opacitu texturovaného vzoru vrstev na přibližně 40% a poté jej sloučte s vrstvou pozadí tím, že přejdete do vrstvy Layer → Merge Layers.
Krok 5
Vyberte nástroj Obdélník a nakreslete tvar, který je široký 200 pixelů.
Odrážíme spodní část našeho tvaru pomocí nástroje Polygonální laso, což vypadá jako stuha. Vytvoření výběru přes tvůj tvar, rasterizování vrstvy tvaru a následné stisknutí klávesy Delete pro odstranění vybrané oblasti.
Umístěte tvar do levé postranní čáry, kterou jsme označili pomocí našich průvodců.
Vytvořte výběr horní části tvaru a přejděte na položku Upravit → Volná transformace. Protáhněte tvar tak, aby se překrýval s horní částí plátna.
Krok 6
Vyberte nástroj Ellipse Shape (Tvar elipsy) a podržte stisknutou klávesu Shift, abyste ji udrželi kulatou, nakreslete kružnici naplněnou bílou barvou. Umístěte jej v horní části postranního panelu a přejmenujte vrstvu na hodnotu "Na výšku".
Klepněte pravým tlačítkem myši na novou vrstvu tvaru a vyberte možnost "Rozvrstvení vrstev", abyste ji přepnuli z inteligentního objektu do obrazových bodů. Podržte stisknuté tlačítko Příkaz a v panelu Vrstvy klikněte na náhled náhledové vrstvy. Tím se vytvoří výběr vašeho kruhu.
Vyhledejte obrázek sebe sama (nebo jakoukoli vaši webovou stránku) a zkopírujte jej. Vraťte se zpět do Photoshopu a s volbou kruhu stále aktivní přejděte na Upravit → Vložit do. Tím dojde k vložení objektu do výběru kruhu.
Po provedení tohoto postupu jste automaticky vytvořili masku vrstvy na obrázku (tj. Na novou vrstvu, nikoli na existující vrstvu kruhu). Přejděte na položku Upravit → Volná transformace, abyste změnili velikost a / nebo otočili obrázek. Zůstane to kruh; stačí, aby nebylo příliš malé. Až to uděláte, odstraňte vrstvu s názvem "Portrét" a přejmenujte novou vrstvu.
Krok 7
Vyberte nástroj Typ a vytvořte textové pole v oblasti záhlaví. Dal jsem mojí téma zcela náhodnému jménu: "Kabooom." Použil jsem písmo s názvem Reklame Script. Můžete si stáhnout demo písma nebo ji zakoupit za 30 USD MyFonts .
Klepněte pravým tlačítkem myši na typovou vrstvu a vyberte možnost "Blending Options". Použijte na text textovou barvu. Používala jsem světle šedou, která je trochu tmavší než pozadí, s hexadecimálním kódem # D6D6D6.
Použijte typ vnitřního stínu s nepřesností 10%, vzdáleností 2 pixelů a velikostí 1 pixelu. Nechte vše ostatní na 0. To způsobí, že typ vypadá, jako by byl na pozadí vyrytý.
Chcete-li dokončit gravírovaný efekt, přidejte ke vzorku stínový stín s použitím bílé barvy s normálním míchacím režimem. Dejte stín vzdálenost 2 pixely a velikost 1 pixel. Tato nastavení umožňují, aby se stín objevil jako zvýraznění v dolní části daného typu, přidáním větší hloubky k typu a posilování vnitřního stínu.
Krok 8
Znovu vyberte nástroj Typ a vytvořte textové pole, které vyplní šířku pravého postranního panelu, který jsme označili vodítky. Vložte do kategorie záhlaví různé kategorie, jak je vidět níže:
Vyberte záhlaví kategorie a změňte typ písma na vybraný. Používal jsem Minion Pro. Experimentujte s podsložkami (tučně, kurzíva atd.) A velikostí bodů.
Změňte písmo kategorií ("Zprávy", "Dny ven", "Fotografie" atd.) Použil jsem Myriad Pro. Zmenšete velikost bodu typu a upravte vodítko (tj. Mezeru mezi řádky textu) tak, aby horní čára byla ve výchozím nastavení nižší, než kde je.
Zkopírujte první nadpis a odkazy a vložte je do stejného textového pole. Změňte nadpis a kategorie. Používal jsem nadpisy "Moje projekty" a "Moji přátelé". Použijte, samozřejmě, co je relevantní pro vaše webové stránky.
Krok 9
Nyní budeme text v pravém postranním panelu trochu líbit. Zvolte text pro podkategorie (tedy ne nadpisy) a změňte barvu z černé na tmavě šedou. Používal jsem # 333333. Klepněte na tlačítko OK.
Klepněte pravým tlačítkem myši na typovou vrstvu a vyberte možnost "Blending Options". Použijte bílý stín s normálním míchacím režimem. Změňte úhel na 120 ° a vzdálenost a velikost na 1 pixel. Nechte vše ostatní nastaveno na 0 pixelů. Tím se přidá zvýraznění do dolní části textu, stejně jako jsme to udělali s nadpisem.
Krok 10
Vyberte nástroj Řádek a podržte klávesu Shift tak, aby byl rovný, nakreslete řádek pod nadpisem "Kategorie".
Klepněte pravým tlačítkem myši na vrstvu čáry a vyberte možnost "Možnosti kombinace". Použijte bílý stín s normálním míchacím režimem. Nastavte úhel na 90 ° a vzdálenost na 1 pixel. Nastavte vše ostatní na 0 pixelů.
Duplikujte vrstvu čáry a umístěte ji pod jednotlivé záhlaví.
Krok 11
Pokud máte stejný počet okruhů jako já, měli byste mít tři linky. Vyberte je všechny a duplikujte je. Při výběru tří linek, které jsou stále vybrány, posuňte je o 10 pixelů přidržením klávesy Shift a jednou stisknutím klávesy Down. Snižte opacitu vašich novějších vrstev na 25%, abyste skončili s tímto:
Krok 12
Uchopte nástroj Rectangle Shape (Tvar obdélníku) a nakreslete obdélník podobný tomu, který je níže. Vytvořte obdélník přesně 570 pixelů. To umožní 10-pixelovou mezeru mezi levým postranním panelem a okrajem nového obdélníku a 20-pixelovou mezerou mezi pravým postranním panelem a okrajem nového obdélníku, jak je vidět na níže uvedeném snímku obrazovky:
Krok 13
Znovu vyberte nástroj Obdélník tvaru a vytvořit mnohem menší šedý obdélník, jako je níže. Umístěte jej v pravém horním rohu velkého obdélníku, posunutím od velkého obdélníku o 10 pixelů. Umístěte tvar 30 pixelů od horní části obdélníku.
Krok 14
Duplikovat typovou vrstvu v pravém postranním panelu a pomocí klávesy Shift a kombinace kurzoru posunout duplikovanou typovou vrstvu nad hlavní obsahovou oblast. Udělej to samé se dvěma vrstvami řádků pro nadpis "Kategorie".
Vyberte nástroj Typ a klepněte na duplikovanou typovou vrstvu. Odebrat celý text v poli a změnit nadpis na něco vhodnějšího. Právě jsem použil nějaký falešný text: "Právě tady se říká titul."
Krok 15
Přejděte do Soubor → Umístění a vyhledejte fotografii, kterou chcete umístit do dokumentu jako zástupný symbol. Používání reálných snímků je vždy nejlepší, protože způsobují, že model vypadá spíše reálný a atraktivní. Použil jsem foto mé sestry .
Chcete-li snížit velikost fotografie a umístit ji na správné místo, přejděte na volbu Upravit → Volná transformace. Udělat to celkem 20 pixelů kratší v šířce i výšce tak, aby se hodí do černého obdélníku, a to takhle:
Krok 16
Otevřete možnosti Blending pro velký černý obdélník. Použijte bílou barvu a stín s nepřesností 10% a velikostí 3 pixelů.
Krok 17
Znovu vyberte nástroj Obdélník tvaru a nakreslete dlouhý tvar pod bílým tvarem pozadí. Zkontrolujte, zda je stejná šířka. Naplňte ji světle šedou barvou.
Otevřete možnosti Blending pro nový šedý obdélník a použijte stín. Nastavte barvu na bílou, s normálním míchacím režimem, opacitou až 100% a vzdáleností až 1 pixel. Nechte vše ostatní nastaveno na 0 pixelů.
Rovněž aplikujte vnitřní stín pomocí černé barvy s opacitou 10%. Změňte velikost na 13 pixelů a vše ostatní nastavte na 0 pixelů. Tyto dva vrstvové styly způsobí, že nový tvar vypadá, jako by byl leptaný na pozadí, jako naše typografie:
Krok 18
Přejděte na postranní lištu a stáhněte si několik opakujících se textur dřeva. Používám a nastaven z programu GraphicRiver který obsahuje tři různé dřevěné struktury: světlo, střední a tmavé.
Po nainstalování vzorků ve Photoshopu (otevřením každého snímku a definováním jeho vzoru) vyberte boční lištu dokumentu ve Photoshopu. Přejděte do vrstvy → Nová vrstva plnění → Vzor. Vyberte jednu z vašich textur dřeva (jsem zvolil střední verzi) a klepněte na tlačítko OK. Vyberete-li nejprve postranní panel, vzor by měl vyplnit pouze tuto oblast.
Klepněte pravým tlačítkem myši na vrstvu vzoru a vyberte možnost "Možnosti kombinace". Použijte překryvný gradient, přechází z černého na průhledný až černý:
Změňte opacitu překryvu přechodu na 10% a nastavte úhel 0 °. To přidá do bočního panelu jemný stín, čímž se zdá, že je trochu realističtější a méně plochý.
K bočnímu panelu také použijte stín. Snižte opacitu na 30% a změňte úhel na 180 °. Změňte vzdálenost na 1 pixel a velikost na 5 pixelů a nechte vše ostatní nastaveno na 0 pixelů. Tím se do bočního panelu přidá malý a jemný stín.
Krok 19
Otevřete "Blending options" pro kruhový portrét, který jsme vytvořili v blízkosti tohoto tutoriálu. Použijte následující nastavení:
Rovněž aplikujte vnitřní stín pomocí níže uvedených nastavení. To způsobí, že kruhový portrét vypadá, jako kdyby byl umístěn ve stromu, spíše než jen sedět na něm.
Krok 20
Duplikovat titulní vrstvu v hlavním obsahu. Přemístěte jej na postranní panel a změňte text na hodnotu "O mně". Také přemístěte a změňte velikost dvou řádků pod záhlavím.
Otevřete "Možnosti míchání" pro novou typovou vrstvu a změňte nastavení stínového drop na tato:
Přidejte text do sekce "O mě" pomocí stejného písma a velikosti, které jsme použili v pravém postranním textu. Pro tento nový text otevřete možnost "Blending" a klepnutím na záložku "Vnější záře" použijte vnější záře; změnit opacitu na 30%, barvu na bílou a velikost 18 pixelů.
Tímto způsobem bude náš text čitelnější na dřevěném pozadí.
Přehrávejte si s velikostí písma, abyste usnadnili skenování textu.
Krok 21
Po nějakém experimentu jsem se rozhodl, že celý postranní pruh vypadá mnohem lépe v tmavší ze tří textur uvedených výše. Změnil jsem vzhled bočního panelu a barvy textu. Použijte techniky, které jste se již naučili.
Zde je moje podoba, jak vypadá dosud:
Krok 22
Jakkoli jste si naplánovali, budete muset během procesu navrhování provést změny. Při pohledu na design jako celek (spíše než na kusové) jsem dospěl k závěru, že 10 pixelů mezi postranními pruhy a hlavní oblastí obsahu nebylo dost blízko.
Použitím klávesy Shift a kombinace kurzoru můžete posunout svůj obsah napříč, čímž vytvoříte dva mezery 40 pixelů namísto 10. Tím bude design více použitelný a atraktivní.
Krok 23
Také jsem se rozhodl změnit styl hlavičky tématu.
Změňte barvu (pomocí překrytí barev v okně "Možnosti míchání") na jednu vybranou z kruhového portrétu. Zvolil jsem tmavě zeleno-modrou barvu.
Také jsem odstranil vnitřní stín a změnil nastavení stínu, takže vypadá to, že hlavička sedí nad pozadím, než aby se do něj vložila.
Krok 24
Přejděte na hlavní banner obsahu (tj. Obdélník, který jsme vytvořili dříve, který je umístěn v pravém horním rohu oblasti obrazu hlavního obsahu), vyberte obdélník kliknutím na náhled náhledů vrstvy a podržte klávesu Command.
Přejděte do vrstvy → Nová vrstva plnění → vzorek a vyberte stejnou strukturu, kterou jste použili pro postranní panel.
Klepněte pravým tlačítkem myši na vrstvu výplně vzoru a vyberte možnost "Rastrovat vrstvu". Pomocí nástrojů Dodge a Burn přidejte zvýraznění vlevo a v horní části tvaru a stíny vpravo a dole tvaru.
Tím se přidá hloubka a dává trochu trojrozměrný pocit tvaru. Nástroj Burn ztmaví snímek, zatímco nástroj Dodge jej zesvětlí.
Vyberte nástroj Polygonální laso. Vyberte tvar podobný níže uvedenému a naplňte jej tmavě hnědou, vybranou z vaší struktury.
Pomocí nástroje Rectangular Marquee vyberte oblasti v novém tvaru, které nepotřebujete, a stisknutím klávesy Delete je odeberte. Měli byste skončit s něčím podobným:
Krok 25
Chyť se naše vlastní exkluzivní sadu ikon "Reflection". V našem designu použijeme několik těchto ikon.
Vložte potřebné ikony do dokumentu tím, že přejdete do Soubor → Umístění. Vybrala jsem si fotoaparát, srdce, reload, úpravy a ikony, které budou sloužit jako moje fotografie, jako reblog, poznámky a ikony času v tématu.
Krok 26
Vyberte ikonu fotoaparátu a změňte její velikost. Umístěte jej na tyč typu post, který jsme právě vytvořili. Aplikujte na něj vnitřní a stínový stín s použitím nastavení podobných těm, které jsme použili v tomto tutoriálu.
Přidejte typografii do lišty typu post. Použil jsem stejný reklamný skript, který jsme použili v záhlaví a stejné možnosti prolnutí, které jsme použili pro záhlaví levého postranního panelu.
Krok 27
Vyberte další čtyři vrstvy ikon. Klepněte pravým tlačítkem myši a vyberte "Rastrovat vrstvy", chcete-li je přepnout z inteligentních objektů na objekty pixelů.
Pomocí nástroje Rectangular Marquee vyberte všechny odrazy na ikonu.
Klepnutím na tlačítko Smazat na každé vrstvě ikony odstraníte její odraz.
Krok 28
Znovu vyberte všechny čtyři vrstvy ikon. Přejděte na položku Upravit → Volná transformace a současně podržte klávesu Shift, abyste ikony udrželi v poměru, zmenšili jejich velikost a umístěte je na liště pod hlavní oblastí obsahu, kterou jsme dříve vytvořili.
Vymazání ikon rovnoměrně pomocí kurzorových tlačítek.
Krok 29
Klepněte pravým tlačítkem myši na ikonu srdce ikony a v nabídce vyberte možnost "Možnosti kombinace". Změňte barvu na světle šedou pomocí překrytí barev a použijte vnitřní stín pomocí následujících nastavení:
Nyní použijte stín, který používá tyto nastavení:
Jakmile jsou tato nastavení aplikována na vrstvu ikony srdce, klepněte pravým tlačítkem myši a vyberte možnost "Kopírovat styly vrstev." Znovu vyberte všechny čtyři ikony, klepněte pravým tlačítkem myši a vyberte možnost "Vložit styly vrstev." Všechny ikony v tomto panelu by nyní měly mít stejný účinek.
Krok 30
Vyberte nástroj Typ a vytvořte malé textové pole vedle ikony srdce. Zadejte "Líbí se mi tento příspěvek". Použijte vnitřní stín a stín stín pomocí nastavení podobného těm, které používáme v tomto tutoriálu.
Opakujte předchozí krok pro zbývající ikony pomocí následujících frází: "Reblog this post", "1052 notes" a "Publikováno dne 19/03/2011". Ujistěte se, že jste kopírovali a vložili stejný styl vrstvy na každou typovou vrstvu.
Můžete také přemístit některé ikony novým textem a ujistit se, že mezera mezi textem a ikonami je konzistentní; protože z různých délky textu se to mohlo změnit.
Krok 31
Duplikujte všechny vrstvy v hlavní oblasti obsahu a umístěte je pod původní. Změňte obdélník titulu, obrázku a postového typu. Jak bylo uvedeno, čím realističtější je model, tím lépe.
Krok 32
Duplikujte nadpis a text v postranním panelu a vložte některé ikony. Využil jsem vynikající ikony sociálních médií známých jako Buddycons , další sada exkluzivní pro Webdesigner Depot.
Konečný produkt
Po několika dalších dotycích (jsem odstranil zubaté pásky jako ve spodní části postranního panelu), jsem hotovo! Zde je náš konečný návrh, připraven k tomu, aby byl kódován nebo odeslán vývojáři, aby to udělal.
Tento tutoriál byl sestaven výhradně pro Webdesigner Depot by Callum Chapman , nezávislý návrhář uživatelského rozhraní, který obchoduje pod jménem Circlebox Creative . Callum pracuje také na jednom inspirační galerie projekt s názvem Vinspires.
Chtěli byste vidět další tutoriál o tom, jak rozřezat a kódovat tento design do plně funkčního Tumblr tématu?