Designa en skogsinspirerad Tumblr-tema i Photoshop
Tumblr är en mikrobloggarplattform som gör det möjligt för användarna att enkelt publicera informationsuppslag på webben, till exempel ett foto eller bildsätt, en video, ett citat eller bara ett stycke.
Det används ofta som en online dagbok på grund av att det är lätt att använda jämfört med andra bloggar som WordPress.
Många Tumblr-teman finns där ute, både gratis och premium, men har du någonsin undrat hur du skulle gå med att designa din egen?
I den här handledningen lär du dig hur du skapar ett skogsintresserat Tumblr-tema som använder trästrukturer, subtila mönster och moderna tekniker - en fin blandning av naturliga och moderna element.
Vad vi ska designa
Temat vi ska utforma i Photoshop består av fyra områden: trä sidebar, huvudinnehåll, höger sidofält och rubrik.
Steg 1
Det första steget, som borde vara med alla saker du designar, är skisseringsfasen. Med hjälp av min Wacom Bamboo grafikkort och en tom duk i Photoshop skissade jag följande design, med några större element, för att få mina idéer på (digitalt) papper.
Steg 2
Med tanken grovt, skapa ett nytt dokument i Photoshop. (Tänk på, det här är inte i sten. Det är bara något du kan referera till om du fastnar i designen. Personligen tenderar jag att experimentera och ändra mycket av det jag ursprungligen planerade.) Jag använde följande inställningar i Photoshop:
Steg 3
Nästa steg är att lägga några guider ner på duken. Detta hjälper dig att hålla tematets struktur snyggt när du utformar den. Jag vill att vänster sidofält ska vara 200 pixlar, huvudinnehållsområdet ska vara 600 pixlar och det högra sidofältet vara 160 pixlar, vilket ger oss en bredd på 960 pixlar.
Om du har använt samma inställningar kan du placera dina guider i 200, 800 och 960 pixlar horisontellt. Denna design kommer att vara inriktad till vänster, så att träspärren alltid sitter mot vänster sida av användarens visningsport.
Jag placerade också guider 200 pixlar under kanvasens överdel och 200 pixlar ovanför kanvasens botten. Så här ser mitt dokument ut:
Steg 4
Låt oss nu lägga till ett mönster till vår bakgrund. Gå till Arkiv → Nytt och skapa ett nytt dokument som är 8 × 8 pixlar. Rita några vertikala linjer med en bredd på 2 pixlar. Din duk kan nu vara 2 pixlar svart, 2 pixlar vit, 2 pixlar svart, 2 pixlar vit. Gå till Redigera → Definiera mönster. Spara ditt mönster som "Vertikala linjer 2px".
Gå till Lag → Nytt fyllnadslag → Mönster i ditt ursprungliga dokument. Markera det mönster du just skapat och klicka på OK. Lossa opaciteten i lagret tills det ser något ut så här:
Slå samman mönstret med ditt bakgrundslag, rasteriserar det automatiskt i processen. Gå till Filter → Buller → Lägg till Buller. Ändra värdet till 5% och klicka på OK. Detta lägger till lite subtil textur i bakgrunden:
Skapa ett nytt lager och fyll i det med vit. Placera den under det ursprungliga bakgrundsskiktet. Sänk opaciteten hos ditt texturerade lagermönster till cirka 40% och slå sedan samman det med bakgrundslagret genom att gå till Lag → Sammanlagda lager.
Steg 5
Välj rektangelverktyget och dra en form som är 200 pixlar bred.
Vi kommer att skära av botten av vår form med hjälp av Polygonal Lasso-verktyget, vilket gör att det ser ut som ett band. Skapa ett urval över din form, rasterisera formlagret och tryck sedan på Delete-tangenten för att ta bort det markerade området.
Placera formen i det vänstra sidofältet som vi markerade med våra guider.
Skapa ett urval av den övre delen av formen och gå till Redigera → Gratis omvandling. Sträck formen så att den överlappar med dukens övre linje.
Steg 6
Välj Ellipse Shape-verktyget och rita en cirkel, fylld med vit, medan du håller Shift-tangenten intryckt. Placera den högst upp i sidofältet och byt namn på skiktet till "Porträtt".
Högerklicka på det nya formlagret och välj alternativet "Rasterize" för att ändra det från ett smart objekt till pixlar. Håll ned kommandotangenten och klicka på lagrets förhandsgranskningsbild i panelen Lager. Detta kommer att göra ett urval av din cirkel.
Hitta en bild av dig själv (eller vad din webbplats handlar om) och kopiera den. Gå tillbaka till Photoshop och, med cirkelvalet fortfarande aktivt, gå till Redigera → Klistra in. Detta klistrar in objektet i ditt cirkelval.
Efter att ha gjort det har du automatiskt skapat en lagmaske på bilden (dvs. i ett nytt lager, inte det befintliga cirkellagret). Gå till Redigera → Gratis omvandling för att ändra storlek och / eller rotera bilden. Det kommer att förbli en cirkel; var noga med att inte göra den för liten. När det är klart, ta bort skiktet med namnet "Stående" och byt namn på ditt nya lager.
Steg 7
Välj Typverktyget och skapa en textruta i rubrikområdet. Jag har gett mitt tema ett helt slumpmässigt namn: "Kabooom." Jag använde ett typsnitt som heter Reklame Script. Du kan ladda ner en demo av teckensnittet eller köpa den för $ 30 från MyFonts .
Högerklicka på ditt typlager och välj "Blandningsalternativ". Lägg till ett färgöverlägg i texten. Jag använde en ljusgrå som är lite mörkare än bakgrunden, med hex-koden # D6D6D6.
Applicera en inre skugga på typen, med en opacitet på 10%, ett avstånd på 2 pixlar och en storlek på 1 pixel. Lämna allt annat vid 0. Det gör att typen ser ut som om den var inristad i bakgrunden.
För att slutföra den graverade effekten lägger vi till en droppskugga till typen, med färgvit med ett normalt blandningsmodus. Ge skuggan ett avstånd på 2 pixlar och en storlek på 1 pixel. Dessa inställningar gör att skuggan visas som en höjd längst ner på typen, vilket ger mer djup till typen och förstärker den inre skuggan.
Steg 8
Återställ typverktyget och skapa en textruta som fyller bredden på den högra sidofältet, som vi har markerat med guider. Lägg till en rad olika kategorier under rubrikrubriken, se nedan:
Välj rubrikrubrik och ändra typsnittet till ett av dina val. Jag använde Minion Pro. Experimentera med undertexter (fet, kursiv osv.) Och punktstorlekar.
Ändra teckensnittet för kategorierna ("Nyheter", "Dagar ut", "Fotografi", etc.) Jag använde Myriad Pro. Sänk punktstorleken på typen och justera ledningen (dvs. mellanslag mellan textraderna), så att topplinjen sitter lägre än där den är som standard.
Kopiera den första rubriken och länkarna och klistra in dem i samma textruta. Ändra rubrik och kategorier. Jag använde rubrikerna "Mina projekt" och "Mina vänner". Använd själv vad som är relevant för din webbplats.
Steg 9
Vi ska nu göra texten i rätt sidor lite mer tilltalande. Välj texten för underkategorier (dvs. inte rubrikerna) och ändra färgen från svart till en mörkgrå. Jag använde # 333333. Klicka på OK.
Högerklicka på typslagret och välj "Blandningsalternativ". Använd en vit droppskugga med ett normalt blandningsläge. Ändra vinkeln till 120 ° och avståndet och storleken till 1 pixel. Lämna allt annat till 0 pixlar. Detta lägger till en höjdpunkt i botten av texten, precis som vi gjorde med rubriken.
Steg 10
Välj linjearktyget och dra under en rubrik under rubriken "Kategorier", medan du håller Shift-tangenten för att hålla den rak.
Högerklicka på linjelagret och välj "Blandningsalternativ". Använd en vit droppskugga med ett normalt blandningsläge. Ställ vinkeln till 90 ° och avståndet till 1 pixel. Ställ in allt annat till 0 pixlar.
Duplicera linjelaget och placera det under var och en av rubrikerna.
Steg 11
Om du har samma antal rubriker som jag borde du ha tre linjer. Välj dem alla och duplicera dem. Med de tre linjelager som fortfarande valts, slår du dem ner 10 pixlar genom att hålla Shift-tangenten och tryck en gång på ned-knappen. Minska opaciteten hos dina nyare linjelaggar till 25% för att sluta med något så här:
Steg 12
Ta med rektangelformverktyget och rita en rektangel som liknar vad som är nedan. Gör rektangeln exakt 570 pixlar bred. Detta kommer att möjliggöra en 10-pixel mellanrum mellan den vänstra sidofältet och kanten på den nya rektangeln och en 20-pixel mellanrum mellan det högra sidofältet och kanten på den nya rektangeln, vilket framgår av den kommenterade skärmbilden nedan:
Steg 13
Återställ verktyget Rektangelformat och skapa en mycket mindre grå rektangel, som den nedan. Placera den högst upp till höger i den stora rektangeln, förskjuten från den stora rektangeln med 10 pixlar. Placera formen 30 pixlar borta från toppen av rektangeln.
Steg 14
Duplicera typskiktet i det högra sidofältet och, med hjälp av Shift-tangenten och Cursor-tangentkombinationen, dämpa dubbletypslaget över huvudinnehållsområdet. Gör detsamma med de två linjerna för rubriken "Kategorier".
Välj typverktyget och klicka på ditt dubbletypslag. Ta bort all text i rutan och ändra rubriken till något mer lämpligt. Jag har just använt lite dummytext här: "Detta här heter en titel."
Steg 15
Gå till Arkiv → Plats och lokalisera ett fotografi för att placera i dokumentet som platshållare. Att använda riktiga bilder här är alltid bäst för att de gör mock-up verkar mer verklig och attraktiv. Jag använde en foto på min syster .
Gå till Redigera → Gratis transformera för att minska bildens storlek och placera den på rätt plats. Gör det totalt 20 pixlar kortare i både bredd och höjd så att den passar snyggt i den svarta rektangeln, så här:
Steg 16
Öppna upp blandningsalternativen för den stora svarta rektangeln. Applicera en vit färgöverlägg och en droppskugga med en opacitet på 10% och en storlek på 3 pixlar.
Steg 17
Välj rektangelformverktyget en gång till och dra en lång form under den vita fotobackformen. Se till att det är samma bredd. Fyll den med en ljusgrå.
Öppna blandningsalternativen för den nya grårektangeln och använd en droppskugga. Ställ in färgen till vit, med ett normalt blandningsläge, opacitet till 100% och avståndet till 1 pixel. Lämna allt annat till 0 pixlar.
Applicera också en inre skugga, med färg svart, med en opacitet på 10%. Ändra storleken till 13 pixlar och lämna allt annat till 0 pixlar. Dessa två lager stilar gör att den nya formen ser ut som den etsades i bakgrunden, som vår rubrik typografi:
Steg 18
Flytta till sidofältet, ladda ner några repeterande trästrukturer. Jag använder en inställd från GraphicRiver som innehåller tre olika trästrukturer: ljus, medium och mörk.
När du har installerat mönstren i Photoshop (genom att öppna varje bild och definiera den som ett mönster) väljer du sidofältet i ditt Photoshop-dokument. Gå till Lag → Nytt fyllnadslag → Mönster. Välj en av dina trästrukturer (jag valde medietypen) och klicka på OK. Genom att välja sidfältet först bör mönstret endast fylla det området.
Högerklicka på mönsterskiktet och välj "Blandningsalternativ". Använd ett överföringsöverdrag, från svart till transparent till svart:
Ändra uppaciteten av gradientöverlagringen till 10% och ge den en vinkel på 0 °. Detta lägger till en subtil skugga i sidofältet, vilket gör den lite mer realistisk och mindre platt.
Applicera också en droppskugga i sidofältet. Sänk opaciteten till 30% och ändra vinkeln till 180 °. Ändra avståndet till 1 pixlar och storleken till 5 pixlar, och lämna allt annat till 0 pixlar. Detta lägger till en liten och subtil skugga i sidofältet.
Steg 19
Öppna "Blandningsalternativen" för den cirkelporträtt som vi skapade nära början av denna handledning. Applicera en vit droppskugga med hjälp av inställningarna nedan:
Applicera också en inre skugga med hjälp av inställningarna nedan. Detta gör att cirkelporträtten ser ut som om den placerades i trädet, istället för att bara sitta på den.
Steg 20
Kopiera titellagret i huvudinnehållet. Byt den till sidofältet och ändra texten till "Om mig". Omplacera och ändra storlek på de två raderna under rubriken.
Öppna "Blandningsalternativ" för ditt nya typslag och ändra inställningarna för droppskuggning till dessa:
Lägg till lite text i avsnittet "Om mig", med samma typsnitt och storlek som vi använde i den högra sidofältet. Öppna "Blandningsalternativ" för den här nya texten och klicka på fliken "Ytterglöd" för att applicera en yttre glöd. ändra opacitet till 30%, färgen till vit och storleken till 18 pixlar.
Detta gör vår text mer läsbar mot träbakgrunden.
Spela runt med teckenstorleken för att göra texten lättare att skanna.
Steg 21
Efter några experiment bestämde jag mig för att hela sidofältet såg mycket bättre ut i de mörkare av de tre ovan nämnda texturerna. Jag har ändrat sidospårsmönstret och textens färger. Använd de tekniker som du redan har lärt dig att göra detta.
Så här ser min design ut så här långt:
Steg 22
Men mycket du har planerat, du är tvungen att göra ändringar under designprocessen. Efter att ha tittat på designen som helhet (snarare än i stycken) kom jag fram till att 10 pixlar mellan sidofält och huvudinnehållsområdet inte var nära tillräckligt.
Med hjälp av Shift-tangenten och Cursor-tangentkombinationen, slår du in ditt innehåll över, vilket gör de två luckorna 40 pixlar istället för 10. Detta gör designen mer användbar och attraktiv.
Steg 23
Jag bestämde mig också för att ändra stilen på tematets rubrik.
Ändra färgen (med ett färgöverlägg i fönstret "Blandningsalternativ") till en vald från cirkelporträtten. Jag valde en mörkgrönblå.
Jag tog också bort den inre skuggan och ändrade inställningarna för droppskuggning, så att det ser ut att rubriken sitter ovanför bakgrunden istället för att sätta in den.
Steg 24
Flytta vidare till huvudinnehållsbanan (dvs. rektangeln som vi skapade tidigare som sitter i det övre högra hörnet av huvudinnehållets bildområde), välj rektangeln genom att klicka på lagrets miniatyrförhandsgranskning medan du håller kommandotangenten.
Gå till Lag → Nytt fältlager → Mönster och välj samma textur som du använde för sidofältet.
Högerklicka på mönsterfyllningsskiktet och välj alternativet "Rasterize". Med hjälp av Dodge och Burn-verktygen lägger du till höjdpunkter till vänster och överst på formen och skuggorna till höger och botten av formen.
Detta kommer att lägga djup och ge en liten tredimensionell känsla till formen. Brännverktyget kommer att mörka bilden medan Dodge-verktyget lyser det.
Välj verktyget Polygonal Lasso. Välj en form som liknar den nedan och fyll i den med en mörkbrun, vald från din textur.
Använd verktyget Rektangulärt markeringsverktyg genom att markera områdena i den nya formen du inte behöver, och tryck på Delete-tangenten för att ta bort dem. Du borde sluta med något liknande det här:
Steg 25
Ta vår egen exklusiv ikonuppsättning kallas "Reflection." Vi kommer att använda flera av dessa ikoner i vår design.
Sätt i ikonerna som du behöver i dokumentet genom att gå till Arkiv → Placera. Jag valde kameran, hjärtat, reload, redigera och klocka ikoner, som kommer att fungera som mitt foto, som, reblog, anteckningar och tidsikoner i temat.
Steg 26
Välj kamerans ikon och ändra storlek på den. Placera den på den posttypsfält som vi just skapat. Applicera en inre och droppe skugga på den, med inställningar som liknar dem som vi har använt under hela denna handledning.
Lägg till lite typografi till posttypfältet. Jag använde samma Reklame Script som vi använde i rubriken och samma blandningsalternativ som vi använde för de vänstra sidofältet.
Steg 27
Välj de övriga fyra ikonlagren. Högerklicka och välj "Rasterize layers" för att vända dem från smarta objekt till pixelobjekt.
Använd det rektangulära markeringsverktyget för att välja alla ikonens reflektioner.
Tryck på Delete-tangenten på var och en av ikonlagren för att ta bort dess reflektion.
Steg 28
Återmarkera alla fyra ikonlagren. Gå till Redigera → Gratis omvandling, och håll inne Shift-tangenten för att hålla ikonerna i proportion, minska deras storlek och placera dem i fältet under huvudinnehållsområdet som vi skapade tidigare.
Rym ut ikonerna jämnt med markörknapparna.
Steg 29
Högerklicka på hjärtaikonlagret och välj "Blandningsalternativ" från menyn. Ändra färgen till ljusgrå med ett färgöverlägg och använd en inre skugga med följande inställningar:
Använd nu en droppskugga med följande inställningar:
När inställningarna har tillämpats på hjärtaikonlagret, högerklicka och välj "Kopiera lagstilar." Markera alla fyra ikoner, högerklicka och välj "Klistra in lagstilar". Samtliga ikoner i den här fältet ska nu ha samma effekt.
Steg 30
Välj Typverktyget och gör en liten textruta bredvid hjärtatikonen. Skriv "Gilla det här inlägget." Applicera en inre skugga och släpp skugga med inställningar som liknar dem som vi har använt under hela denna handledning.
Upprepa det föregående steget för de återstående ikonerna med följande fraser: "Reblog this post", "1052 notes" och "Postat den 19/03/2011." Var noga med att kopiera och klistra in samma lagerstil på varje typslag.
Du kanske också vill placera några av ikonerna med den nya texten, se till att klyftan mellan texten och ikonerna är konsekvent; På grund av de olika textlängderna kan detta ha ändrats.
Steg 31
Kopiera alla lager i huvudinnehållet och placera dem under originalet. Ändra titel-, bild- och posttyprektangel. Som nämnts, desto mer realistiska mock-up, desto bättre.
Steg 32
Kopiera rubriken och texten i sidofältet och sätt in några ikoner. Jag använde de utmärkta sociala medierna ikoner som kallas Buddycons , en annan uppsättning exklusiv för Webdesigner Depot.
Slutprodukten
Efter några fler touch-ups (jag tog bort den ihåliga bandet som klippet längst ner på sidofältet) är jag klar! Här är vår slutliga design, redo att kodas eller skickas till en utvecklare för att göra det.
Denna handledning sammanställdes uteslutande för Webdesigner Depot av Callum Chapman , en frilans användargränssnittet designerhandel under namnet Cirkelbox Creative . Callum arbetar också med en inspirationsgalleri projektet heter Vinspires.
Vill du se en annan handledning om hur du skivar och kodar den här designen till ett fullt fungerande Tumblr-tema?