Design et Forest Inspired Tumblr-tema i Photoshop
Tumblr er en mikrobloggerplattform som lar brukerne enkelt publisere utdrag av informasjon til nettet, for eksempel et bilde eller et bilde, en video, et sitat eller bare et avsnitt.
Det brukes ofte som en online dagbok på grunn av sin brukervennlighet i forhold til andre bloggingplattformer som WordPress.
Mange Tumblr-temaer er der ute, både gratis og premium, men har du noen gang lurt på hvordan du ville gå om å designe ditt eget?
I denne opplæringen lærer du hvordan du lager et skogsinnspilt Tumblr-tema, ved hjelp av tre teksturer, subtile mønstre og moderne teknikker - en fin blanding av naturlige og moderne elementer.
Hva skal vi designe
Temaet vi skal designe i Photoshop, består av fire områder: trebjelke, hovedinnhold, høyre sidefelt og topptekst.
Trinn 1
Det første trinnet, som det burde være med alt du designer, er skissefasen. Ved å bruke min Wacom Bamboo grafikkbrett og et tomt lerret i Photoshop, skisserte jeg følgende design, med noen større elementer, bare for å få mine ideer nede på (digital) papir.
Steg 2
Med ideen grovt ut, opprett et nytt dokument i Photoshop. (Husk, dette er ikke satt i stein. Det er bare noe du kan henvise til hvis du sitter fast i designen. Personlig pleier jeg å eksperimentere og forandre mye av det jeg planla først.) Jeg brukte følgende Innstillinger i Photoshop:
Trinn 3
Neste trinn er å sette noen guider ned på lerretet. Dette vil hjelpe deg å holde strukturen i temaet pent når du designer det. Jeg vil at venstre sidebjelke skal være 200 piksler, hovedinnholdsområdet skal være 600 piksler og høyre sidebjelke til 160 piksler, noe som gir oss en bredde på 960 piksler.
Hvis du har brukt de samme innstillingene, kan du plassere guider på 200, 800 og 960 piksler horisontalt. Denne utformingen vil bli justert til venstre, slik at trebjelken alltid sitter mot venstre side av brukerens visningsport.
Jeg har også plassert guider 200 piksler under toppen av lerretet og 200 piksler over bunnen av lerretet. Slik ser dokumentet mitt ut:
Trinn 4
La oss nå legge til et mønster i bakgrunnen vår. Gå til Fil → Ny, og opprett et nytt dokument som er 8 × 8 piksler. Tegn noen vertikale linjer med en bredde på 2 piksler. Lerret ditt skal nå være 2 piksler svart, 2 piksler hvitt, 2 piksler svart, 2 piksler hvitt. Gå til Rediger → Definer mønster. Lagre mønsteret ditt som "Vertikale linjer 2px."
Gå til Lag → Nytt fyll lag → Mønster i ditt originale dokument. Velg mønsteret du nettopp har opprettet, og klikk OK. Slett lagets ugjennomsiktighet til det ser noe ut som dette:
Slå sammen mønsteret med bakgrunnslaget ditt, og rasteriserer det automatisk i prosessen. Gå til Filter → Støy → Legg til støy. Endre verdien til 5% og klikk OK. Dette vil legge til litt subtil tekstur til bakgrunnen:
Lag et nytt lag, og fyll det med hvitt. Plasser den under det opprinnelige bakgrunnslaget. Senk opaciteten til det strukturerte lagemønsteret til rundt 40%, og smelter det deretter sammen med bakgrunnslaget ved å gå til Lag → Flett lag.
Trinn 5
Velg Rectangle-verktøyet, og tegne en form som er 200 piksler bredt.
Vi skal kutte av bunnen av vår form ved hjelp av Polygonal Lasso-verktøyet, slik at det ser ut som et bånd. Lag et utvalg over formen din, rasteriser formlaget, og klikk deretter Slett-tasten for å fjerne det valgte området.
Plasser formen i det venstre sidebarområdet som vi merket med hjelpelinjene våre.
Lag et utvalg av den øverste delen av formen, og gå til Rediger → Gratis omforming. Strek formen slik at den overlapper med lerretets øverste linje.
Trinn 6
Velg Ellipse Shape-verktøyet, og hold en sirkel, fylt med hvit, mens du holder Shift-tasten nede for å holde den rundt. Plasser den øverst på sidepanelet, og gi nytt navn til laget til "Portrett".
Høyreklikk på det nye formlaget, og velg alternativet "Rasterize" for å slå det fra en smart objekt til piksler. Hold nede Kommando-tasten, og klikk på lagets forhåndsvisningsbilde i Lagpanelet. Dette vil gjøre et utvalg av sirkelen din.
Finn et bilde av deg selv (eller hva nettstedet ditt handler om) og kopier det. Gå tilbake til Photoshop, og med sirkelselectivet fortsatt aktivt, gå til Rediger → Lim inn. Dette limer inn objektet i sirkelvalget.
Etter å ha gjort dette, har du automatisk opprettet en lagmaske på bildet (dvs. på et nytt lag, ikke det eksisterende sirkelaget). Gå til Rediger → Gratis omforming for å endre størrelse og / eller rotere bildet. Det vil forbli en sirkel; bare vær sikker på ikke å gjøre den for liten. Når det er gjort, slett laget som heter "Stående", og gi nytt navn til det nye laget.
Trinn 7
Velg Type-verktøyet, og opprett en tekstboks i overskriftsområdet. Jeg har gitt temaet mitt et helt tilfeldig navn: "Kabooom." Jeg brukte en font som heter Reklame Script. Du kan laste ned en demo av skrifttypen eller kjøpe den for $ 30 fra MyFonts .
Høyreklikk på ditt type lag, og velg "Blandingsalternativer." Bruk et fargeoverlegg til teksten. Jeg brukte et lysegrå som er litt mørkere enn bakgrunnen, med heksekoden # D6D6D6.
Påfør en indre skygge til typen, med en opasitet på 10%, en avstand på 2 piksler og en størrelse på 1 piksel. La alt annet stå på 0. Dette vil gjøre at typen ser ut som den ble gravert i bakgrunnen.
For å fullføre den graverte effekten, legger vi til en dråpeskygge til typen, ved hjelp av fargehvitt med en vanlig blandemodus. Gi skyggen en avstand på 2 piksler og en størrelse på 1 piksel. Disse innstillingene vil gjøre at skyggen vises som et høydepunkt nederst på typen, og legger til mer dybde til typen og forsterker den indre skyggen.
Trinn 8
Velg Type-verktøyet, og opprett en tekstboks som fyller bredden på høyre sidefelt, som vi har merket med guider. Sett en rekke kategorier under kategorien overskrift, som vist nedenfor:
Velg kategorioverskriften, og endre skrifttypen til et av dine valg. Jeg brukte Minion Pro. Eksperimenter med underfonter (fet, kursiv, etc.) og punktstørrelser.
Endre skriften for kategoriene ("Nyheter", "Dager ut", "Fotografi", etc.) Jeg brukte Myriad Pro. Senk punktstørrelsen på typen, og juster den ledende (dvs. mellomrommet mellom tekstlinjene), slik at topplinjen sitter lavere enn hvor den er som standard.
Kopier den første overskriften og linkene og lim dem inn i samme tekstboks. Endre overskriften og kategoriene. Jeg brukte overskriftene "Mine prosjekter" og "Mine venner." Bruk det som er relevant for nettstedet ditt selvfølgelig.
Trinn 9
Vi skal nå gjøre teksten i høyre sidefelt litt mer tiltalende. Velg teksten for underkategorier (dvs. ikke overskriftene), og endre fargen fra svart til mørkegrå. Jeg brukte # 333333. Klikk på OK.
Høyreklikk på type laget, og velg "Blending alternativer." Bruk en hvit dråpe skygge med en vanlig blanding modus. Endre vinkelen til 120 ° og avstanden og størrelsen til 1 piksel. La alt annet stille til 0 piksler. Dette vil legge til et høydepunkt i bunnen av teksten, akkurat som vi gjorde med overskriften.
Trinn 10
Velg Linjeverktøyet, og hold nede Shift-tasten for å holde den rett, ta en linje under overskriften "Kategorier".
Høyreklikk på linjelaget, og velg "Blandingsalternativer." Bruk en hvit dråpeskygge med en vanlig blandemodus. Still vinkelen til 90 ° og avstanden til 1 piksel. Sett alt annet til 0 piksler.
Dupliser linjelaget, og plasser det under hver av overskriftene.
Trinn 11
Hvis du har samme antall overskrifter som meg, bør du ha tre linjelag. Velg dem alle, og dupliser dem. Med de tre linjelagene som er valgt, må du dempe dem 10 piksler ved å holde Shift-tasten nede og trykke én gang på Down-tasten. Senk opaciteten til dine nyere linjelag til 25% for å ende opp med noe slikt:
Trinn 12
Ta tak i Rectangle Shape-verktøyet, og trekk et rektangel som ligner på det som er under. Gjør rektangelet nøyaktig 570 piksler bredt. Dette gir mulighet for en 10-pikslers mellomrom mellom venstre sidebjelke og kanten av det nye rektangelet og en 20-pikslers mellomrom mellom høyre sidefelt og kanten av det nye rektangelet, som vist i det angitte skjermbildet nedenfor:
Trinn 13
Vellgjør rektangulær formverktøyet og opprett et mye mindre grått rektangel, som det nedenfor. Plasser den øverst til høyre for det store rektangel, offset fra det store rektangel med 10 piksler. Plasser formen 30 piksler vekk fra toppen av rektangelet.
Trinn 14
Dupliserer typeskiktet i høyre sidebjelke, og bruk Skift-tasten og Markør-tastkombinasjonen til å pusse over duplisert type laget over hovedinnholdsområdet. Gjør det samme med de to linjelagene for overskriften "Kategorier".
Velg Type-verktøyet, og klikk på duplisert type laget. Fjern all teksten i boksen, og endre overskriften til noe mer egnet. Jeg brukte bare noen dummy tekst her: "Dette her heter en tittel."
Trinn 15
Gå til Fil → Plasser, og finn et fotografi som skal plasseres i dokumentet som plassholder. Å bruke ekte bilder her er alltid best fordi de gjør mock-up virke mer ekte og attraktiv. Jeg brukte en bilde av søsteren min .
Gå til Rediger → Gratis omforming for å redusere størrelsen på bildet og plasser det på riktig sted. Gjør det totalt 20 piksler kortere i både bredde og høyde slik at den passer pent i det svarte rektangelet, slik som:
Trinn 16
Åpne blandingsalternativene for det store, svarte rektangelet. Påfør et hvitt fargeoverlegg og en dråpeskygge med en opasitet på 10% og en størrelse på 3 piksler.
Trinn 17
Velg rektangulær formverktøyet igjen, og tegne en lang form under den hvite fotobaggrundsformen. Pass på at den er i samme bredde. Fyll den med en lys grå.
Åpne Blandingsalternativer for det nye grå rektangel, og bruk en dråpe skygge. Angi fargen til hvit, med en vanlig blandingstilstand, opaciteten til 100% og avstanden til 1 pixel. La alt annet stille til 0 piksler.
Bruk også en indre skygge ved å bruke fargen svart, med en opasitet på 10%. Endre størrelsen til 13 piksler, og la alt annet settes til 0 piksler. Disse tolagsstilene gjør at den nye formen ser ut som den var etset i bakgrunnen, som vår overskrifts typografi:
Trinn 18
Flytt til sidelinjen, last ned noen repeterende tre teksturer. Jeg bruker en sett fra GraphicRiver som inkluderer tre forskjellige tre teksturer: lys, middels og mørk.
Når du har installert mønstrene i Photoshop (ved å åpne hvert bilde og definere det som et mønster), velg sidefeltet i Photoshop-dokumentet. Gå til Lag → Nytt fyll lag → Mønster. Velg en av dine tre teksturer (jeg valgte medium versjon), og klikk OK. Ved å velge sidefeltet først, må mønsteret bare fylle det området.
Høyreklikk på mønsterlaget, og velg "Blendingalternativer." Bruk et overlater overlegg, gå fra svart til gjennomsiktig til svart:
Endre opaciteten til gradientoverlegget til 10%, og gi det en vinkel på 0 °. Dette vil legge til en subtil skygge i sidefeltet, noe som gjør det til å virke litt mer realistisk og mindre flatt.
Også, bruk en dråpe skygge til sidepanelet. Senk opaciteten til 30%, og bytt vinkelen til 180 °. Endre avstanden til 1 piksler og størrelsen til 5 piksler, slik at alt annet settes til 0 piksler. Dette vil legge til en liten og subtil skygge i sidefeltet.
Trinn 19
Åpne "Blandingsalternativer" for sirkelportretten som vi opprettet nær begynnelsen av denne opplæringen. Bruk en hvit dråpe skygge ved hjelp av innstillingene nedenfor:
Bruk også en indre skygge ved hjelp av innstillingene nedenfor. Dette vil gjøre sirkelportretten ser ut som om den ble plassert i treet, i stedet for å bare sitte på den.
Trinn 20
Dupliser tittellaget i hovedinnholdet. Sett det på sidefeltet, og endre teksten til "Om meg." Også plassere og endre størrelsen på de to linjene under overskriften.
Åpne "Blandingsalternativer" for ditt nye type lag, og endre dropshadow-innstillingene til disse:
Legg til litt tekst i avsnittet "Om meg", ved hjelp av samme skrift og størrelse som vi brukte i høyre sidefelttekst. Åpne "Blandingsalternativer" for denne nye teksten, og klikk på "Ytre glød" -fanen for å bruke en ytre glød; endre opasiteten til 30%, fargen til hvit og størrelsen til 18 piksler.
Dette vil gjøre teksten mer lesbar mot trebakgrunnen.
Spill rundt med skriftstørrelsen for å gjøre teksten lettere å skanne.
Trinn 21
Etter noen eksperimenter bestemte jeg meg for at hele sidebjelken så mye bedre i mørkere av de tre ovennevnte teksturer. Jeg har endret sidebaremønsteret og fargen på teksten. Bruk teknikkene du allerede har lært å gjøre dette.
Her ser designet mitt ut så langt:
Trinn 22
Men mye du har planlagt, er du nødt til å gjøre endringer under designprosessen. Når jeg så på designet som helhet (i stedet for piecemeal), konkluderte jeg med at 10 piksler mellom sidebars og hovedinnholdsområdet ikke var nær nok.
Bruk Skift-tasten og Markør-tastkombinasjonen, slett innholdet ditt over, slik at de to hullene er 40 piksler i stedet for 10. Dette vil gjøre designet mer brukbart og attraktivt.
Trinn 23
Jeg bestemte meg også for å endre stilen på temaets overskrift.
Endre fargen (ved hjelp av et fargelegg i vinduet "Blandingsalternativer") til en valgt fra sirkelportretten. Jeg plukket en mørk grønnblå.
Jeg fjernet også den indre skyggen og endret dropshadow-innstillingene, slik at det ser ut som toppteksten sitter over bakgrunnen i stedet for å sette inn den.
Trinn 24
Hvis du går videre til hovedinnholdsbanneren (dvs. rektangelet vi opprettet tidligere som sitter øverst til høyre i hovedinnholdets bildeområde), velger du rektangelet ved å klikke på lagets miniatyr forhåndsvisning mens du holder kommandotasten.
Gå til Lag → Nytt fyll lag → Mønster, og velg samme tekstur du brukte til sidefeltet.
Høyreklikk på mønsterfyllingslaget, og velg alternativet "Rasterize". Ved hjelp av Dodge og Burn-verktøyene, legger du til høydepunkter til venstre og toppen av formen og skyggene til høyre og bunnen av formen.
Dette vil legge til dybde og gi en liten tredimensjonal følelse til formen. Burn-verktøyet vil mørke bildet, mens Dodge-verktøyet vil lette det.
Velg Polygonal Lasso-verktøyet. Velg en form som ligner den nedenfor, og fyll den med en mørk brun, valgt fra tekstur.
Ved hjelp av Rectangular Marquee-verktøyet, velg områdene i den nye formen du ikke trenger, og trykk Slett-tasten for å fjerne dem. Du burde ende opp med noe som ligner på dette:
Trinn 25
Ta tak i vårt eget eksklusivt ikon sett kalt "Refleksjon." Vi vil bruke flere av disse ikonene i vårt design.
Sett inn ikonene du trenger i dokumentet, ved å gå til Arkiv → Plasser. Jeg valgte kamera-, hjerte-, reload-, redigerings- og klokkeikonene, som vil fungere som bildet mitt, som, reblog, notater og tidsikoner i temaet.
Trinn 26
Velg kameraikonet og endre størrelsen på det. Plasser den på posttypelinjen som vi nettopp har opprettet. Bruk en innvendig og slipp skygge til den ved hjelp av innstillinger som ligner på de vi har brukt gjennom hele denne opplæringen.
Legg til litt typografi på posttypefeltet. Jeg brukte det samme Reklame Script som vi brukte i overskriften og de samme blandingsalternativene som vi brukte til venstre sidefelt overskrift.
Trinn 27
Velg de fire andre ikonlagene. Høyreklikk, og velg "Rasterize layers" for å slå dem fra smarte objekter til pikselobjekter.
Bruk Rectangular Marquee-verktøyet til å velge alle ikonets refleksjoner.
Trykk Slett-tasten på hvert av ikonlagene for å fjerne refleksjonen.
Trinn 28
Velg alle fire ikonlagene. Gå til Rediger → Free Transform, og hold nede Shift-tasten for å holde ikonene i proporsjon, reduser størrelsen deres og plasser dem på linjen under hovedinnholdsområdet som vi opprettet tidligere.
Plasser ikonene jevnt ut med markørtastene.
Trinn 29
Høyreklikk på hjerteikonlaget, og velg "Blandingsalternativer" fra menyen. Endre fargen til lysegrå med et fargelegg, og bruk en indre skygge ved hjelp av følgende innstillinger:
Bruk nå en dråpeskygge ved å bruke disse innstillingene:
Når innstillingene er blitt brukt på hjerteikonlaget, høyreklikker du og velger "Kopier lagstiler." Velg alle fire ikoner, høyreklikk og velg "Lim inn lagstiler." Alle ikonene i denne linjen skal nå ha samme effekt.
Trinn 30
Velg Type-verktøyet, og lag en liten tekstboks ved siden av hjerteikonet. Skriv "Like this post." Bruk en indre skygge og slipp skygge ved hjelp av innstillinger som ligner på de vi har brukt gjennom denne opplæringen.
Gjenta det forrige trinnet for de resterende ikonene, ved å bruke følgende setninger: "Reblog dette innlegget", "1052 notater" og "Skrevet den 19/03/2011." Pass på å kopiere og lime inn samme lagestil på hvert type lag.
Du kan også ønske å plassere noen av ikonene med den nye teksten, og sørg for at gapet mellom teksten og ikonene er konsekvent; På grunn av de forskjellige tekstlengder, kan dette ha endret seg.
Trinn 31
Dupliser alle lagene i hovedinnholdsområdet, og plasser dem under originalen. Endre tittel, bilde og posttype rektangel. Som nevnt, jo mer realistisk mock-up, jo bedre.
Trinn 32
Dupliser overskriften og teksten i sidefeltet, og sett inn noen ikoner. Jeg brukte de gode sosiale medier ikonene kjent som Buddycons , et annet sett eksklusivt til Webdesigner Depot.
Det endelige produktet
Etter noen flere touch-ups (jeg fjernet den tynne båndlignende kuttet nederst på sidepanelet), er jeg ferdig! Her er vår siste design, klar til å bli kodet eller sendt til en utvikler for å gjøre det.
Denne opplæringen ble samlet ut eksklusivt for Webdesigner Depot by Callum Chapman , en freelance brukergrensesnitt designer trading under navnet Sirkelboks Creative . Callum jobber også på en inspirasjon galleri prosjektet heter Vinspires.
Vil du se en annen opplæring om hvordan du skal skille og kode dette designet til et fullt fungerende Tumblr-tema?