Share
Noen gang lurt på hvordan du lager perfekte, sømløse bakgrunnsmønstre som fungerer på Photoshop og på nettet? Ikke se lenger fordi vi i dag skal bryte den ned for deg - trinnvis. Du lager dine egne bakgrunnsmønstre på kort tid!
Heya alle! I dag fortsetter vi vår opplæringsserie om å lage bakgrunnsmønstre som kan brukes på nettet (og i designfasen) med vår fjerde utgave: Syntetiske stoffstrukturer. Vi skal se på hvordan du kan lage troverdige, fliserbare stoffmønstre ved å starte med en vanlig vanilje-tilnærming, og deretter ta de samme prinsippene for å skape avanserte versjoner.
Vårt mål er enkelt: Å lære noen hvordan å lage bakgrunnsmønstre som er ment for nettet (men det kan også brukes lett under designprosessen). Vi skal være "agnostiske program", noe som betyr at de fleste tipsene vil fungere i både Photoshop og Fireworks.
Pass på å sjekke ut resten av serien, inkludert Carbon Fiber, Noisy Backgrounds, og Intro til Patterns posten!
I dag er dag fire i serien vår - men det er verdt å nevne at alle disse veiledningene er "frittstående" - noe som betyr at du burde kunne plukke helt opp på del 4, selv om du savnet de første pardelene.
Mønsteret vi skal dekke i dag er hvordan du lager en effektiv "syntetisk stofftekst" som kan brukes som et mønster i Photoshop, samt en flisebakgrunn på websidene dine. Vi skal gjøre dette i 4 trinn:
De siste månedene har subtile, støyende teksturer vært super populære blant webdesignere (se vår veiledning om å lage dem her). I de siste ukene har jeg imidlertid sett mer og mer "avanserte" støystrukturer? som er å si at folk går utover det enkle "add noise pattern" tilnærming og prøver funkier effekter. Det er to hovedpunkter som jeg vil gjerne påpeke:
1: Teksturene som vi skal dekke i dag, er alle opprettet 100% i Photoshop. Vi vil dekke hvordan du lager fotografiske teksturer i vår neste opplæring.
2. Disse teksturer skal være subtile og brukes sparsomt. Ingenting skriker 1995 som en fuglybakgrunnsstruktur med tunge håndsagte Photoshop-filtre.
Ok? du har blitt advart. La oss gjøre dette!
Denne innledende teksten er utrolig enkel å lage, men kan brukes til noen svært profesjonelle utseende når den brukes riktig.
For eksempel, sjekk ut teksten bak fotfoten av "qop" WordPress-temaet:
Ikke dårlig riktig? Vi starter med et tomt lerret. Still størrelsen til 400 x 400 for nå. Størrelsen kan endres senere, men du vil ikke at den skal være for liten fordi vi trenger litt plass rundt kantene for å jobbe med.
Lag et nytt lag og fyll det inn med Svart farge.
Gå videre og navnet den Black Layer bare for organisasjons skyld.
Nå ønsker vi å bruke et raskt filter for å etablere grunnlaget for vår grove linjestruktur. På det svarte laget må du bruke følgende filter: Filtre> Skisse> Vannpapir.
Du kan justere innstillingene til du har din egen tilpassede ønskede effekt, men demo-tekstur bruker følgende innstillinger:
Sett svartlagets blandingstilstand til Skjerm slik at bare de hvite linjene viser seg. På dette punktet kan du også legge til et bakgrunnsrektangel for å etablere en farge for tekstur. Vær oppmerksom på at du kan endre fargen når som helst i denne prosessen.
Vi kan egentlig ikke se noe annet enn hvitt nå? så la oss legge til et enkelt farget rektangel og gi det navnet vår Bakgrunnsfarge. Jeg brukte fargen # 242d34, men vær så snill å bruke alt du vil.
Ahh, mye bedre! Nå kan vi se vår tekstur. Det er litt flatt skjønt. Så la oss legge til litt dybde i tekstur - vi gjør dette ved å lage et nytt lag og fylle det inn med svart (igjen). Navn dette laget "White" (du vil se hvorfor i de neste trinnene).
Nå skal vi legge til Filtre> Skisse> Vannpapir effekt igjen, men denne gangen vil vi legge til mye mer lysstyrke og kontrast til innstillingene:
Nå, bare inverter fargene for det samme laget (Bilde> Justeringer> Inverter), og sett blandemodus til Multiplisere. Ta opp lagets opasitet til rundt 90% slik at effekten ikke er for slitende.
Whallah! Ikke så loslitt til høyre?
Det neste trinnet er å beskjære ned kantene på dette mønsteret, fordi Photoshop har en tendens til å bli litt tungt håndet rundt kantene. Beskjær i ca 50px fra hver kant ved hjelp av Avling verktøy.
Hvorfor beskjære vi dette? Fordi Photoshop har en tendens til å bli litt tungt håndtert rundt kantene på Vannpapirfilteret, noe som betyr at hvis vi prøver å gjøre det til et mønster, får vi tydelige "sømmer". Beskæring inn fra kanten hjelper oss med å eliminere disse synlige sømmer når vi går for å bruke dette som et mønster eller på nettet.
Det endelige trinnet er enkelt - bare sett bakgrunnsfarge til ønsket farge, juster opaktheten til hvert filterlag til du får ønsket nivå av tekstur, og gjør det til et mønster (Rediger> Definer mønster). Ferdig!
Og sluttproduktet skal se slik ut når det brukes som et mønster:
Dette kan være litt for dramatisk når det gjelder kontrast til bruk (jeg pleier å ringe intensiteten opp for opplæringsprogrammer for å gjøre effektene tydelige), så vær så snill å leke med opaktheten av teksturlagene for å få det "akkurat" for din egen spesielle design.
For å tilpasse denne effekten: De viktigste tingene du kan være interessert i å tilpasse er "fiberlengder" av vannpapirfilteret og bakgrunnsfargen. I tillegg kan det også være morsomt å rote med skalaen til det endelige mønsteret. Når du er beskåret inn, kan du prøve å endre størrelsen på hele bildet for å justere tetthetet i teksten (og bruk Sharpen-verktøyet til å justere hvor skarpt det er).
Denne neste tekstur er trolig den enkleste av alle fire i dag. Tre enkle trinn vil fullføre effekten:
Først oppretter du et nytt dokument (400 x 400) og tegner et farget rektangel på dokumentet. Vi bruker dette senere til å justere fargen på det endelige mønsteret.
Deretter lager du et nytt lag, fyller det inn med svart, og legger til filteret: Filter> Tekstur> Texturizer. Bruk følgende innstillinger:
Sett blandemodus på det laget til Skjerm.
Deretter lager du et nytt lag, fyll det inn med White denne gangen. Legg til samme eksakte filter: Filter> Tekstur> Texturizer. Bruk følgende innstillinger:
Sett bare lagets blandingstilstand til Color Burn slik at du kan se gjennom bakgrunnsfargen.
Til slutt, la oss justere bakgrunnsfargen til noe mer subtilt. Vær oppmerksom på at når du justerer bakgrunnsfargen, kan det hende du også vil justere opasiteten og blandingsmodusene til de to øverste lagene til effekten er som du ønsker det.
Det endelige mønsteret som vist i demonstrasjonen:
Du kan opprette mønsteret herfra (Rediger> Definer mønster), eller du kan leke med bakgrunnsfargen, filterlagets opasitet og beskjæringen til du har et mønster som er sømløst og passer til designet.
Denne neste tekstur er litt mer avansert, så vær spesielt oppmerksom hvis du ønsker å gjenskape denne effekten.
Begynn med et nytt dokument (400 x 400) og begynn med å tegne et blått rektangel (# 2b4891) som bakgrunn. Du kan faktisk velge hvilken som helst farge, men vi er vant til å se blå denim, så vi holder fast med det for nå.
Deretter lager du et nytt lag og Fylle den med 50% grå (du kan bruke hurtigtasten Shift + Backspace / Delete). Gi det navnet Horizontal Layer for nå.
Sett deretter inn forgrunnen og Bakgrunn farge til standard svart og hvitt ved å trykke D. Vi må legge grunnlaget for vår denim-mønster. På vårt grålag, bruk filteret: Filter> Skisse> Halvtonmønster.
Bruk følgende innstillinger:
Dette bør produsere et grunnleggende linjemønster? men denim er "fuzzy", så vi vil rote dette opp litt med et annet filter: Filter> Pixelate> Mezzotint. Sett typen til Fine prikker.
Lag nå en duplikatkopi av dette laget (Cntrl + J) og nevne det "vertikal lag".
Bruk Free Transform Tool ()Cntrl + T) for å rotere den 45 grader og skala den så langt at den møter hvert hjørne av dokumentet. Jeg skjedde å skalere det opp 145% hvis du prøver å matche min nøyaktig.
Ikke bekymre deg for at skalering mønsteret opp så stort vil skape noen rasterfeil. Vi vil faktisk ha dem. Faktisk, fortsett og legg til ekstra uskarphet (Filter> Gaussian Blur satt til 0,3) til både dette laget og det første ikke-transformerte laget.
Endelig sett blandemodus på diagonallaget til multiple med 70% Opacity -- og sett blandemodus på det horisontale stripelaget til Mykt lys med 60% Opacity.
Det fullfører denim effekten! Du kan tinker med bakgrunnsfarger og gjøre det til et mønster (Rediger> Definer mønster).
Merk: Hvis du merker noen åpenbare sømmer i mønsteret ditt, må du leke litt med beskjæringen. Trikset her er å bare sørge for at det ikke er noen unaturlige lyse eller mørke linjer nær noen av kantene. Prøv noen få forskjellige beskjæringer til mønsteret er sømløst.
Hvis du fulgte demoen til brevet, kan du bare kutte ned høyden på dokumentet til 400px av 396px. Dette fjerner sømmen (under):
Whallah! Hvordan virker dette? Hvis du husker tilbake i vår første opplæringsoppgave, er den generelle ideen her at de siste få pikslene på høyre side og bunnen av mønsteret vårt alltid må koble til venstre og øverst på dokumentet. Beskjæring av de 4px i dette tilfellet bidrar til den nederste kampen til toppen. Siden høyre og venstre allerede stemmer overens, er det bra å gå!
Ok! Vi har kommet til den endelige teksten til dagen. Ved nå har vi brukt noen ganske vanskelige teknikker, så dette siste skrittet kommer faktisk til å virke ganske enkelt.
Lage en 200 x 240 dokument. Gå videre og dra i de tre rålagene som vi brukte for vår denim-mønster (de to teksturlagene + bakgrunnsfargen).
Grupper disse lagene sammen (Ctrl + G) og sett en 50px bred maske over hele gruppemappen. Hvis du ikke har opprettet en gruppe maske som dette før, er det enkelt: Bare bruk Rektangulær markør valgverktøy for å tegne et 50px bredt utvalg som fyller dokumentet fra topp til bunn (se på info panel for å sjekke målingen din). Deretter klikker du bare på «Add Vector Mask» -knappen nederst på lagpanelet:
Hvorfor 50px? Fordi med et dokument på 200px bred, kommer vi til å passe 4 striper på 50px.
Deretter dupliserer denne laggruppen, flytt den over til høyre for den første gruppen, og deretter (valgfritt) vri den horisontalt for å opprette et motsatt diagonalt mønster.
For å legge til litt kontrast i stripene, må du bare endre bakgrunnsfarge (subtile endringer er best her) til noe litt lysere eller mørkere enn den opprinnelige fargen).
Til slutt dupliserer begge våre stripegrupper og flytter dem over i det tomme rommet på dokumentet.
Vi er notat ganske ferdig ennå - for å legge til noen visuell interesse, la oss de-link gruppemaskene for disse to siste stripene, og flytt deretter de 3 denim-lagene på innsiden over 100px for å lage en litt annen strikking. Sluttresultatet er ikke dramatisk annerledes, men folk som ser etter sømmer i mønsteret ditt, vil bli kastet av ved dette siste skrittet.
Gratulerer! Å velge Rediger> Definer mønster, og begynn å bruke dette i dine egne prosjekter. Som en endelig tanke kan du selvfølgelig gjøre mye mer med dette ved å legge til dine egne tilpasninger. Nedenfor-eksemplet endrer fargene til en brun nyanse, og har også nedskalert mønsterets "strikke" ved å redusere bildestørrelsen. Sjekk ut vårt siste eksempel:
Ok! Så nå bør du ha en god nok grunnleggende forståelse for å skape dine egne tilpassede variasjoner av disse syntetiske fibermønstrene - lek med nivåene, farger, dokumentstørrelser og mer for å legge til din egen personlige vri på disse. Heck, du kan til og med invertere skyggen for å lage subtile, lyse mønstre.
I de neste delene av denne serien viser vi deg hvordan du lager noen avanserte fotobaserte tekstmønstre, mer formbaserte mønstre, gjennomsiktige mønstre og enda mer i fremtiden.
Abonner eller sjekk tilbake på nettstedet for å se alle oppdateringene til denne serien når de skjer!
Accentsconagua