Design et Forest Inspired Tumblr Tema i Photoshop
Tumblr er en mikroblogger platform, der giver brugerne mulighed for nemt at udgive uddrag af information til internettet, som f.eks. Et foto eller et fotosæt, en video, et citat eller blot et afsnit.
Det bruges ofte som en online dagbog på grund af sin brugervenlighed i forhold til andre blogging platforme som WordPress.
En masse Tumblr temaer er derude, både gratis og premium, men har du nogensinde spekuleret på, hvordan du ville lave om at designe din egen?
I denne vejledning lærer du, hvordan du opretter et skovinspireret Tumblr-tema, der bruger træstrukturer, subtile mønstre og moderne teknikker - en flot blanding af naturlige og moderne elementer.
Hvad vi skal designe
Temaet, vi skal designe i Photoshop, består af fire områder: Træ sidebar, hovedindhold område, højre sidebjælke og overskrift.
Trin 1
Det første skridt, som skal være med alle ting, du designer, er skitseringsfasen. Ved at bruge min Wacom Bamboo grafikkort og et blankt lærred i Photoshop skitserede jeg følgende design med nogle større elementer, bare for at få mine ideer nede på (digital) papir.
Trin 2
Med ideen ujævn, skal du oprette et nyt dokument i Photoshop. (Husk, dette er ikke sat i sten. Det er bare noget du kan henvise til, hvis du sidder fast i designet. Personligt plejer jeg at eksperimentere og ændre meget af det jeg oprindeligt planlagde.) Jeg brugte følgende indstillinger i Photoshop:
Trin 3
Næste trin er at lægge nogle guider ned på lærredet. Dette vil hjælpe dig med at holde temaets struktur nemmere, når du designer det. Jeg vil have den venstre sidebjælke til at være 200 pixels, hovedindholdsområdet skal være 600 pixels og det højre sidebjælke til 160 pixels, hvilket giver os en bredde på 960 pixels.
Hvis du har brugt de samme indstillinger, kan du placere dine guider ved 200, 800 og 960 pixel vandret. Dette design vil blive justeret til venstre, således at træ sidebar altid sidder mod venstre side af brugerens visningsport.
Jeg har også placeret guider 200 pixels under toppen af lærredet og 200 pixels over bunden af lærredet. Sådan ser mit dokument ud:
Trin 4
Lad os nu tilføje nogle mønstre til vores baggrund. Gå til Filer → Ny, og opret et nyt dokument, der er 8 × 8 pixel. Tegn nogle lodrette linjer med en bredde på 2 pixels. Dit lærred skal nu være 2 pixel sort, 2 pixel hvid, 2 pixel sort, 2 pixel hvid. Gå til Rediger → Definer mønster. Gem dit mønster som "Vertikale linjer 2px."
Gå til Lag → Nyt Fyldlag → Mønster i dit originale dokument. Vælg det mønster, du lige har oprettet, og klik på OK. Slet lagets opacitet, indtil det ser sådan ud:
Flet mønsteret med dit baggrundslag, der automatisk rasteriserer det i processen. Gå til Filter → Støj → Tilføj støj. Skift værdien til 5%, og klik på OK. Dette vil tilføje nogle subtile tekstur til baggrunden:
Opret et nyt lag, og udfyld det med hvidt. Placer det under det oprindelige baggrundslag. Sænk opaciteten af dit teksturerede lagemønster til omkring 40%, og fusioner det med baggrundslaget ved at gå til Lag → Flette lag.
Trin 5
Vælg værktøjet Rektangel og tegne en form, der er 200 pixel bred.
Vi skal skære ned i bunden af vores form ved hjælp af Polygonal Lasso værktøjet, så det ligner et bånd. Opret et valg over din form, rasteriser formlaget, og tryk derefter på Delete-tasten for at fjerne det valgte område.
Placer formen i det venstre sidebjælkeområde, som vi markerede ved hjælp af vores hjælpelinjer.
Opret et udvalg af den øverste del af formen, og gå til Rediger → Free Transform. Stret formen, så den overlapper med lærredens øverste linje.
Trin 6
Vælg Ellipse Shape-værktøjet, og tag en cirkel, der er fyldt med hvid, mens du holder Shift-tasten nede for at holde den rundt. Placer det øverst på sidebjælken, og omdøb laget til "Portræt".
Højreklik på det nye formlag, og vælg "Rasterize layer" mulighed for at vende det fra en smart objekt til pixels. Hold nede Kommando nøglen, og klik på lagets preview billede i panelet Lag. Dette vil gøre et valg af din cirkel.
Find et billede af dig selv (eller hvad din hjemmeside handler om) og kopier det. Gå tilbage til Photoshop, og med cirkelvalg stadig aktiv, skal du gå til Rediger → Indsæt ind. Dette vil indsætte objektet i dit cirkelvalg.
Når du har gjort dette, har du automatisk oprettet en lagmaske på billedet (dvs. på et nyt lag, ikke det eksisterende cirkellag). Gå til Rediger → Free Transform for at ændre størrelse og / eller rotere billedet. Det vil forblive en cirkel; bare sørg for ikke at gøre det for lille. Når det er gjort, skal du slette laget "Portræt", og omdøbe dit nye lag.
Trin 7
Vælg værktøjet Type og lav en tekstboks i overskriftsområdet. Jeg har givet mit tema et helt tilfældigt navn: "Kabooom." Jeg brugte en skrifttype kaldet Reklame Script. Du kan downloade en demo af skrifttypen eller købe den for $ 30 fra MyFonts .
Højreklik på dit type lag, og vælg "Blandingsindstillinger." Anvend et farveoverlay til teksten. Jeg brugte en lysegrå, der er lidt mørkere end baggrunden, med hex-koden # D6D6D6.
Anvend en indre skygge til typen ved hjælp af en opacitet på 10%, en afstand på 2 pixels og en størrelse på 1 pixel. Forlad alt andet ved 0. Dette vil få typen til at se ud som om den var indgraveret i baggrunden.
For at udfylde den indgraverede effekt, tilføjer vi en dråbeskygge til typen ved hjælp af farven hvid med en normal blandingstilstand. Giv skyggen en afstand på 2 pixel og en størrelse på 1 pixel. Disse indstillinger gør, at skyggen vises som et højdepunkt nederst på typen, og giver mere dybde til typen og forstærker den indre skygge.
Trin 8
Vælg Type-værktøjet og lav en tekstboks, der fylder bredden af det højre sidebjælke, som vi har markeret med hjælpelinjer. Sæt en række kategorier under kategorioverskriften, som vist nedenfor:
Vælg kategorioverskriften, og skift skrifttypen til et af dine valg. Jeg brugte Minion Pro. Eksperiment med underfonter (fed, kursiv osv.) Og punktstørrelser.
Skift skrifttype til kategorierne ("Nyheder", "Dage ud", "Fotografi" osv.) Jeg brugte Myriad Pro. Sænk typen af punktstørrelse, og juster den førende (dvs. mellemrummet mellem tekstlinierne), så topplinjen sidder lavere end den, der er som standard.
Kopier den første overskrift og linkene og indsæt dem nedenfor i samme tekstboks. Skift overskrift og kategorier. Jeg brugte overskrifterne "Mine projekter" og "Mine venner." Brug det, der er relevant for dit websted, selvfølgelig.
Trin 9
Vi skal nu gøre teksten i det højre sidebar lidt mere tiltalende. Vælg teksten for underkategorier (dvs. ikke overskrifterne), og skift farve fra sort til mørkegrå. Jeg brugte # 333333. Klik på OK.
Højreklik på type laget, og vælg "Blanding indstillinger." Anvend en hvid drop skygge med en normal blanding tilstand. Skift vinklen til 120 ° og afstanden og størrelsen til 1 pixel. Lad alt andet indstilles til 0 pixels. Dette vil tilføje en højdepunkt i bunden af teksten, ligesom vi gjorde med overskriften.
Trin 10
Vælg linjeværktøjet, og tag en linje under overskriften "Kategorier", mens du holder Skift-tasten nede for at holde den lige.
Højreklik på linjelaget, og vælg "Blandingsindstillinger." Anvend en hvid dropshadow med en normal blandingstilstand. Indstil vinklen til 90 ° og afstanden til 1 pixel. Indstil alt andet til 0 pixels.
Duplikér linjelaget og placér det under hver af overskrifterne.
Trin 11
Hvis du har samme antal overskrifter som mig, skal du have tre linjer. Vælg dem alle og duplikere dem. Med de tre linjelag, der stadig er valgt, skal du dæmpe dem 10 pixler ved at holde Shift-tasten nede og trykke en gang på Down-tasten. Sænk opaciteten af dine nyere linjelag til 25% for at ende med noget som dette:
Trin 12
Tag værktøjet Rectangle Shape og tegne et rektangel svarende til det, der er angivet nedenfor. Gør rektanglet nøjagtigt 570 pixel bredt. Dette giver mulighed for et 10-pixel mellemrum mellem venstre sidebjælke og kanten af det nye rektangel og et 20 pixel mellemrum mellem højre sidebjælke og kanten af det nye rektangel, som det ses i det annoterede skærmbillede nedenfor:
Trin 13
Vælg Rectangle Shape-værktøjet og lav et meget mindre gråt rektangel, som det nedenfor. Placer den i øverste højre hjørne af det store rektangel, forskudt fra det store rektangel med 10 pixels. Placer formen 30 pixels væk fra toppen af rektanglet.
Trin 14
Duplikér typelaget i højre sidepanel, og skub det lagrede dubletype over hovedindholdsområdet ved hjælp af Shift-tasten og markørknappekombinationen. Gør det samme med de to linjelag for din rubrik "Kategorier".
Vælg Type værktøjet, og klik på dit duplikeret type lag. Fjern al teksten i feltet, og skift overskriften til noget mere egnet. Jeg har lige brugt nogle dummy tekst her: "Dette her lige kaldes en titel."
Trin 15
Gå til File → Place, og find et fotografi, der skal placeres i dokumentet som en pladsholder. Brug af ægte billeder her er altid bedst, fordi de gør mock-up virker mere ægte og attraktiv. Jeg brugte en billede af min søster .
Gå til Rediger → Gratis omformning for at reducere billedets størrelse og placere det på det rigtige sted. Gør det i alt 20 pixels kortere i både bredde og højde, så det passer fint i det sorte rektangel, sådan:
Trin 16
Åbn blandingsmulighederne for det store sorte rektangel. Påfør en hvid farve overlay og en drop skygge med en opacitet på 10% og en størrelse på 3 pixels.
Trin 17
Vælg værktøjet Rectangle Shape igen, og træk en lang form under den hvide fotobaggrundsform. Sørg for, at det er den samme bredde. Fyld det med en lysegrå.
Åbn blandingsindstillingerne for det nye grå rektangel, og anvend en dropshadow. Indstil farven til hvid, med en normal blandingstilstand, opacitet til 100% og afstanden til 1 pixel. Lad alt andet indstilles til 0 pixels.
Anvend også en indre skygge ved hjælp af farven sort, med en opacitet på 10%. Skift størrelse til 13 pixel, og lad alt andet indstilles til 0 pixels. Disse tolags stilarter vil gøre den nye form ud som om den blev ætset i baggrunden, ligesom vores overskrifts typografi:
Trin 18
Flyt til sidebjælken, hent nogle gentagende træstrukturer. Jeg bruger en indstillet fra GraphicRiver der omfatter tre forskellige træstrukturer: lys, mellem og mørk.
Når du har installeret mønstre i Photoshop (ved at åbne hvert billede og definere det som et mønster), skal du vælge sidebjælken i dit Photoshop-dokument. Gå til Lag → Nyt Fyldlag → Mønster. Vælg en af dine træstrukturer (jeg valgte mellemversionen), og klik på OK. Ved at vælge sidebjælken først skal mønsteret kun fylde det pågældende område.
Højreklik på mønsterlaget, og vælg "Blandingsindstillinger." Anvend et overløbsoverlejring, der går fra sort til transparent til sort:
Skift uigennemsigtigheden af gradient overlay til 10%, og giv det en vinkel på 0 °. Dette vil tilføje en subtil skygge til sidepanelet, hvilket gør det til at virke lidt mere realistisk og mindre flade.
Anvend også en drop skygge til sidepanelet. Sænk opaciteten til 30%, og skift vinklen til 180 °. Ændre afstanden til 1 pixel og størrelsen til 5 pixel, så alt andet er sat til 0 pixel. Dette vil tilføje en lille og subtil skygge til sidepanelet.
Trin 19
Åbn "Blandingsindstillingerne" for den cirkelportræt, som vi oprettede nær begyndelsen af denne vejledning. Anvend en hvid drop skygge ved hjælp af nedenstående indstillinger:
Anvend også en indre skygge ved hjælp af nedenstående indstillinger. Dette vil gøre cirklen portræt ser ud som om det blev placeret i træet, snarere end bare sidder på det.
Trin 20
Duplikér titellaget i hovedindholdet. Skift det til sidebjælken, og skift teksten til "Om mig". Omsæt også og rediger størrelsen af de to linjer under overskriften.
Åbn "Blandingsindstillinger" for dit nye type lag, og skift dropshadow indstillingerne til disse:
Tilføj nogle tekst til afsnittet "Om mig", ved hjælp af samme skrifttype og størrelse, som vi brugte i den højre sidebjælke. Åbn "Blandingsindstillinger" for denne nye tekst, og klik på fanen "Yder glød" for at anvende en ydre glød; ændre opacitet til 30%, farven til hvid og størrelsen til 18 pixel.
Dette vil gøre vores tekst mere læselig mod træ baggrunden.
Spil rundt med skrifttypestørrelsen for at gøre teksten lettere at scanne.
Trin 21
Efter nogle eksperimenter besluttede jeg, at hele sidebjælken kiggede meget bedre i mørkere af de tre ovennævnte teksturer. Jeg har ændret sidebar mønsteret og farverne på teksten. Brug de teknikker, du allerede har lært at gøre dette.
Sådan ser mit design ud:
Trin 22
Hvor meget du har planlagt, er du nødt til at foretage ændringer under designprocessen. Ved at se på designet som helhed (snarere end piecemeal) konkluderede jeg, at 10 pixel mellem sidebjælkerne og hovedindholdsområdet ikke var nær nok.
Ved hjælp af Shift-tasten og markør-tastekombinationen skal du skubbe indholdet på tværs, hvilket gør de to huller 40 pixel i stedet for 10. Dette vil gøre designet mere brugbart og attraktivt.
Trin 23
Jeg har også besluttet at ændre stilen på temaets overskrift.
Skift farve (ved hjælp af en farveoverlay i vinduet "Blandingsvalg") til en valgt fra cirkelportræt. Jeg valgte en mørk grøn-blå.
Jeg fjernede også den indre skygge og ændrede dropshadow indstillingerne, så det ser ud som om overskriften sidder over baggrunden i stedet for at sætte ind i den.
Trin 24
Flyt videre til hovedindholdsbanneret (dvs. det rektangel, vi oprettede tidligere, der sidder i det øverste højre hjørne af vores hovedindholds billedområde), vælg rektanglet ved at klikke på lagets miniaturevisning, mens du holder kommandotasten nede.
Gå til Lag → Nyt Fyldlag → Mønster, og vælg den samme tekstur, du brugte til sidebjælken.
Højreklik på mønsterfyldningslaget, og vælg "Rasterize layer" indstillingen. Ved hjælp af Dodge og Burn-værktøjerne tilføjes højdepunkter til venstre og øverst i formen og skyggerne til højre og bunden af formen.
Dette vil tilføje dybde og give en lille tredimensionel fornemmelse af formen. Burn-værktøjet vil mørke billedet, mens Dodge-værktøjet vil lette det.
Vælg værktøjet Polygonal Lasso. Vælg en form svarende til den nedenstående, og udfyld den med en mørk brun, valgt fra din tekstur.
Brug det rektangulære marquee-værktøj ved at vælge de områder i den nye form, du ikke har brug for, og tryk på Delete-tasten for at fjerne dem. Du skal ende med noget der ligner dette:
Trin 25
Grib vores helt egen eksklusivt ikon sæt kaldet "Reflection." Vi vil bruge flere af disse ikoner i vores design.
Indsæt de ikoner, du har brug for i dokumentet, ved at gå til Fil → Placering. Jeg valgte kameraet, hjerte, genindlæs, rediger og ur ikoner, som vil tjene som mit foto, som, reblog, noter og tid ikoner i temaet.
Trin 26
Vælg kameraikonet og resize det. Placer det på den posttype bar, som vi netop har oprettet. Anvend en indvendig og drop skygge til det ved hjælp af indstillinger svarende til dem, vi har brugt i hele denne tutorial.
Tilføj nogle typografi til posttypelinjen. Jeg brugte det samme Reklame Script, som vi brugte i overskriften og de samme blandingsmuligheder, som vi brugte til venstre sidebjælkeoverskrifter.
Trin 27
Vælg de andre fire ikonlag. Højreklik og vælg "Rasterize layers" for at skifte dem fra smarte objekter til pixelobjekter.
Brug værktøjet Rektangulært marquee til at vælge alle ikonets refleksioner.
Tryk på Delete-tasten på hvert af ikonlagene for at fjerne dens refleksion.
Trin 28
Vælg alle fire ikonlag. Gå til Rediger → Free Transform, og hold samtidig Shift-tasten nede for at holde ikonerne i forhold. Reducer deres størrelse og placer dem på linjen under det primære indholdsområde, som vi tidligere har oprettet.
Placer ikonerne jævnt ud med markørtasterne.
Trin 29
Højreklik på hjerteikonlaget, og vælg "Blandingsindstillinger" i menuen. Skift farven til lysegrå ved hjælp af et farveoverlay, og anbring en indre skygge ved hjælp af følgende indstillinger:
Anvend nu en dropshadow med disse indstillinger:
Når indstillingerne er blevet anvendt på hjerteikonlaget, skal du højreklikke og vælge "Kopier lagtyper." Vælg alle fire ikoner, højreklik og vælg "Indsæt lagstile." Alle ikonerne i denne linje skal nu have samme effekt.
Trin 30
Vælg værktøjet Type, og lav en lille tekstfelt ud for hjerteikonet. Skriv "Ligesom dette indlæg." Anvend en indre skygge og drop skygge ved hjælp af indstillinger svarende til dem, vi har brugt i hele denne vejledning.
Gentag det forrige trin for de resterende ikoner ved at bruge følgende sætninger: "Reblog dette indlæg", "1052 noter" og "Sendt den 19/03/2011." Sørg for at kopiere og indsætte det samme lag stil på hvert type lag.
Du vil måske også ændre nogle af ikonerne med den nye tekst, og sørg for, at kløften mellem teksten og ikonerne er ensartede. På grund af de forskellige tekstlængder kan dette have ændret sig.
Trin 31
Duplikér alle lagene i hovedindholdsområdet og placer dem under originalen. Ændre titel, billede og posttype rektangel. Som nævnt, jo mere realistisk mock-up, jo bedre.
Trin 32
Duplikér overskriften og teksten i sidepanelet, og indsæt nogle ikoner. Jeg brugte de fremragende sociale medier ikoner kendt som Buddycons , et andet sæt eksklusivt til Webdesigner Depot.
Slutproduktet
Efter nogle flere touch-ups (jeg fjernede den hakkede båndlignende klippe i bunden af sidebjælken), er jeg helt klar! Her er vores endelige design, klar til at blive kodet eller sendt til en udvikler for at gøre det.
Denne vejledning blev samlet udelukkende til Webdesigner Depot af Callum Chapman , en freelance brugergrænseflade designer handel under navnet Cirkelkasse Creative . Callum arbejder også på en inspiration galleri projekt kaldet vinspires.
Vil du gerne se en anden vejledning om, hvordan du skarer og koder dette design i et fuldt fungerende Tumblr tema?