Create dine egne Sexy bakgrunnsmønstre (del 4: Syntetisk Fiber)

Noen gang lurt på hvordan du kan lage perfekte, sømløse bakgrunnsmønstre som fungerer på Photoshop og på nettet ? Ser ikke lenger fordi i dag vi kommer til å bryte det ned for deg - steg for steg. Du skal lage dine egne bakgrunnsmønstre på et blunk!

Innledning

Heya alle! I dag skal vi fortsette vår tutorial serien på å skape bakgrunnsmønstre som kan brukes på nettet (og under designfasen) med vår fjerde utgave: syntetisk stoff teksturer. Vi skal se på hvordan å skape troverdige, flis-stand stoff mønstre ved å starte med en vanlig vanilje tilnærming, og deretter tar de samme prinsippene for å lage avanserte versjoner

Vårt mål er enkelt:. Å lære noen hvordan å lage bakgrunnsmønstre som er ment for web (men som også kan brukes lett under designprosessen). Vi kommer til å være "program agnostiker", som betyr at de fleste av tipsene vil fungere i både Photoshop og fyrverkeri.

Husk å sjekke ut resten av serien, inkludert Carbon Fiber, støyende bakgrunner, og Intro til Patterns poste

Dagens Patterns

I dag er dag fire i vår serie - men det er verdt å nevne at alle disse opplæringsprogrammer er "frittstående" - noe som betyr at du bør være i stand til å plukke rett opp på del 4, selv om du gikk glipp av de første par deler.

Mønsteret vi kommer til å bli dekket i dag er hvordan man skal skape en effektiv "syntetisk stoff tekstur" som kan brukes som et mønster i Photoshop samt en flislegging bakgrunn på websidene dine. Vi kommer til å gjøre dette i 4 trinn:

Trinn 01: Basic Fiber Texture

Trinn 02: Basic Canvas Texture

Trinn 03: Intermediate Denim Texture

Trinn 04: Avansert Denim Stripe Texture

For de siste månedene, subtile, støyende teksturer har vært super populære blant webdesignere (sjekk ut vår tutorial på å lage dem her). I de siste ukene skjønt, har jeg fått merke mer og mer "avanserte" støy teksturer ... som er å si at folk går utover den enkle 'legge støy mønster' tilnærming og prøver ut spenstig effekter. Det er hovedsakelig to ting som jeg ønsker å påpeke:

1. Teksturene som vi kommer til å dekke i dag er alle skapt 100% i Photoshop Vi dekker hvordan du oppretter fotografiske teksturer i vår neste opplæringen.
to. Disse teksturer bør være subtile og brukes med måte. Ingenting skriker 1 995 som en fugly bakgrunn tekstur ved hjelp av tunge handed Photoshop-filtre.

Alright ... du har blitt advart. La oss gjøre dette

Det skrevne Instruksjons

Trinn 01: Basic Fiber Texture

Denne innledende teksturen er utrolig enkel å lage, men kan brukes for noen svært profesjonelt utseende resultater når det brukes riktig

For eksempel, sjekk ut teksturen bak bunnteksten av "QOP 'WordPress tema.

Ikke verst ikke sant? Vi vil starte med blanke ark. Angi størrelsen til 400 x 400 for nå. Størrelsen kan endres senere, men du ikke vil at det skal være for liten fordi vi trenger litt plass rundt kantene for å jobbe med.

Lag et nytt lag og fylle det inn med svart farge .

Gå videre og name it Black Layer bare for moro skyld organisasjonen.

Nå ønsker vi å bruke en rask filter for å etablere grunnlaget for vår grov linje tekstur. Mens på Black lag, gjelder følgende filter: Filter> Skisse> Vann Paper

Du kan justere innstillingene før du har dine egne ønskede effekten, men demoen tekstur bruker følgende innstillinger:.


Fiber Lengde: 15

Lysstyrke: 42

Kontrast: 43

Sett Svart lagets overgangsmodus til skjerm, slik at bare den hvite linjene viser gjennom. På dette punktet kan du også legge til en bakgrunn rektangel for å etablere en farge for tekstur. Merk at du kan endre fargen på noe punkt i denne prosessen.

Vi kan ikke se noe, men hvit nå ... så la oss legge til en enkel farget rektangel og gi den navnet vårt bakgrunnsfarge. Jeg brukte farge # 242d34, men gjerne bruke noe du ønsker.

Ahh, mye bedre! Nå kan vi se vår tekstur. Det er litt flat skjønt. Så, la oss legge litt dybde til vår tekstur - vi vil gjøre dette ved å opprette et nytt lag og fylle det inn med svart (igjen). Navn dette laget "White" (du vil se hvorfor i neste trinn).

Nå skal vi legge til Filter> Skisse> Vann Papir effekt igjen, men denne gangen ønsker vi å legge mye mer lysstyrke og Kontrast til innstillingene:

Fiber Lengde: 15

Lysstyrke: 63

Kontrast: 66

Nå, bare invertere farger for at samme lag (Bilde> Justeringer> Inverter), og sette blending mode å formere seg. Få ned opacity av laget til rundt 90%, slik at effekten ikke er for slitende.

Whallah! Not too shabby sant?

Det neste trinnet er å beskjære ned kantene av dette mønsteret fordi Photoshop har en tendens til å bli litt tung handed rundt kantene. Avling i ca 50 piksler fra hver kant bruker beskjæringsverktøyet.

Hvorfor har vi beskjære dette i? Fordi Photoshop har en tendens til å bli litt tung handed rundt kantene av Water Paper filter, noe som betyr at hvis vi prøver å gjøre det til et mønster, vil vi få åpenbare "sømmer". Beskjæring inn fra kanten hjelper oss å eliminere disse synlige sømmer når vi går for å bruke dette som et mønster eller på nettet

Det siste trinnet er enkelt -. Bare sette bakgrunnsfarge til ønsket farge, justere tettheten av hvert filter laget til du får ønsket nivå av tekstur, og deretter gjøre det til et mønster (Edit> Define Pattern). Alle gjort

Og, det endelige produktet skal se slik ut når den brukes som et mønster:

Dette kan være litt for dramatisk når det gjelder kontrast å bruke (jeg vanligvis oppringning intensiteten opp for opplæringsprogrammer for å gjøre effekten åpenbare), så gjerne leke seg med tettheten av tekstur lag for å få det "akkurat passe" for din egen spesielle design on

For å tilpasse denne effekten. De viktigste tingene du kan være interessert i tweaking er "fiberlengder" av Water Paper filter og bakgrunnsfargen. I tillegg kan det også være morsomt å rote rundt med omfanget av den endelige mønster. Når du beskjære i, prøv å endre størrelse på hele bildet for å finpusse tettheten av tekstur (og bruke Sharpen verktøy for å justere hvor kraftig den er)

Trinn 02:. Basic Canvas Texture

Denne neste tekstur er trolig den enkleste av alle fire i dag. Tre enkle trinn vil fullføre effekten:

Først oppretter et nytt dokument (400 x 400) og tegne et farget rektangel på dokumentet. Vi vil bruke dette senere å justere fargen på den endelige mønsteret

Deretter oppretter et nytt lag, fyll det med svart, og legge filteret. Filter> Texture> Texturizer. Bruk følgende innstillinger:

Texture: Canvas

Skalering: 50%

Relief: 3

Light: Øverst til venstre

Sett blending mode på det laget til skjerm.

Deretter oppretter et nytt lag, fyll det med hvitt denne gangen. Legg de samme filter: Filter> Texture> Texturizer. Bruk følgende innstillinger:

Texture: Canvas

Skalering: 50%

Relief: 3

Light: Øverst til venstre

Nå nettopp satt som lagets overgangsmodus til Color Burn slik at du kan se gjennom til bakgrunnsfarge.

Til slutt, la oss justere bakgrunnsfargen til noe mer subtil. Vær oppmerksom på at når du justerer bakgrunnsfarge, kan du også ønsker å justere opasitet og blandingsmodi av de to øverste lagene frem til effekten er som du ønsker det

Den endelige mønster som vist i demoen.

Du kan lage mønsteret herfra (Edit> Define Pattern), eller du kan spille rundt med bakgrunnsfargen, filtrer lag 'opasitet, og beskjæring før du har et mønster som er sømløs og passer din design.

Trinn 03: Intermediate Denim Texture

Denne neste tekstur er litt mer avansert, så vier spesiell oppmerksomhet hvis du er ute etter å gjenskape denne effekten

Begynn med en. nytt dokument (400 x 400) og begynner med å tegne en blå firkant (# 2b4891) som bakgrunn. Du kan faktisk velge hvilken som helst farge, men vi er vant til å se blå denim, så vi vil holde med det for nå.

Deretter oppretter du en ny layer og fyll den med 50% Gray (du kan bruke hurtigtasten Shift + Backspace /Slett). Gi den navnet Horisontal Layer for nå.

Deretter satt forgrunnen og bakgrunnen farge til standard svart og hvitt ved å trykke D. Vi må legge grunnlaget for vår denim mønster. På vår grå lag, bruke filteret: Filter> Skisse> Halvtonemønster

Bruk følgende innstillinger:.