Create din egen Sexy bakgrunnsmønstre (Del 2: Støy Patterns)
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 vi i dag kommer til å bryte det ned for deg - steg for steg. Du vil bli å 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 andre utgave. Vi skal se på hvordan du kan lage den stadig populære "støy" mønstre som så mange nettsteder har brukt i det siste. Husk å sjekke ut det første innlegget i serien hvis du ikke rakk det
Vårt mål er enkelt: For å 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 Fireworks
Dagens Patterns
I dag er dag to 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 å dekke i dag er hvordan man skal skape en effektiv "støy 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: Lage den grunnstøymønster (Basic Grey)
Trinn 02: Invertere støy mønster (svart)
Trinn 03: Legge farge (blå)
Trinn 04: Justering av skyggelegging og fargetone (grønn)
Trinn 05: Legge til ekstra røre (Orange)
Klar? La oss gjøre dette
Trinn 01: Opprette den grunn Noise Pattern
Det første trinnet i dagens tutorial er trolig den mest avgjørende, fordi vi setter opp de grunnelementene. Det finnes mange forskjellige måter å lage disse støymønstrene ... men jeg skal vise deg en av de beste (og mest fleksible!) Metoder for å spare deg for frustrasjon og hodepine nedover linjen.
start med å åpne opp et nytt dokument. Størrelsen spiller ingen rolle mye (vi bruker 200px ved 200px i demo), men det er best å holde den over 75px å sikre at støy mønsteret er troverdig tilfeldig. Mindre dokumenter er ansvarlig for å begynne å se ut som "gjentatte fliser" -. Dokumenter som er betydelig større vil øke filstørrelsen uten mye merverdi
La oss legge en grunnleggende rektangel form og gi den navnet "Base Color" (organisasjonen vil gjøre livet lettere senere!). Du kan bruke hvilken farge du ønsker (vi brukte #ebebeb), men sørg for at rektangelet opptar hele plassen.
Nå skal vi åpne opp et nytt lag og gi den navnet "støy Layer". Det er bare et tomt lag akkurat nå ...
Bruke "Rectangular Marquee" -verktøyet (M), trekke et utvalg på tvers av hele dokumentet mens valgt på Noise Layer. Deretter velger du "Fill ..." fra kontekstmenyen (høyreklikk når over valg - eller er det også under Edit panel) og la oss fylle den med fargen White
Tips: Neste vi ønsker å konvertere. den "Noise lag" til et smart objekt. Du kan gjøre dette ved å høyreklikke på laget og velge "Convert to Smart Object" eller velge "Konverter for smartfiltre" fra Filter-menyen.
Til slutt setter Blending Mode på Noise Laget til "Multipliser "slik at bare de mørkere støy pikslene er synlige. Nå kan du endre fargen på underlaget for ulike støyende farge.
Whallah! Vi har nå etablert de grunnelementene for vår grunnleggende støy mønster ...
... og det ville være slutten på denne ydmyke opplæringen om vi var lat ...
I neste trinn skjønt, skal vi vise deg hvordan du invertere, endre og legge til troverdig dybde og liv til støy mønster for å gjøre det virkelig skiller seg ut fra flokken
Før du går videre: Gå videre og gruppe lagene sammen (Base Layer og Noise Layer) ved hjelp av Ctrl + G for å skape et lag mappe. Kopiere det en gang og skjule den opprinnelige, slik at vi alltid har en kopi av den. For hvert nytt steg, skal vi lage en ny kopi gruppe. Dette er bare en god grunnleggende vane å ha, fordi det sikrer at du alltid har en sikkerhetskopi av vår grunnmønster
Trinn 02:. Invertere Noise Pattern (Svart Noise)
Ok, la oss vri denne støyen mønster i noe mørkt og deilig nå. Jeg skal vise deg hvordan du oppretter en omvendt støy mønster som ser ut til å ha en subtil gnisten til det.
Start med en kopi av den originale støygruppen (se slutten av trinn 01). Det første vi vil gjøre er å gjøre bakgrunnsfargen sort, så gå videre og gjøre det på Base Layer.
Neste, fordi vår Noise Mønster består av bare "mørke" piksler, må vi i hovedsak invertere den. Dessverre kan vi ikke gjøre dette som en "smart" effekt, så vi trenger å flate ut støy mønster. Kontroller at du har intensitetsnivået satt til hva du ønsker, deretter "Raste" laget. Du kan gjøre dette ved å høyreklikke på laget og velge Raste fra hurtigmenyen, eller fra Layer> Rastrer> Rastrer Lag-menyen.
Nå som vi har i hovedsak flatet ut våre støy mønster, vi ønsker å invertere den. Gjør dette fra "Bilde> Justeringer> Invert" panel.
Hva er galt? Du kan ikke se Noise Mønster lenger?
Vi må gjøre noen små modifikasjoner for å se vår invertert støy mønster. Først setter Blending Mode på støy laget til "Screen".
Deretter justerer "nivåer" av din støy mønster (Ctrl + Alt + L ... eller Bilde> Justeringer> Nivåer).
Alternativ metode: Du kan også enkelt legge til et justeringslag for nivåene (Layer> New Adjustment Layer> Levels). Du kan foretrekker denne måten hvis du ønsker å gjøre endringer i intensiteten senere.
Presto! Nå har vi en glitrende, invertert støy mønster. Selvfølgelig kan du justere dette til ditt hjerte innhold - gjøre det mørkere og mer dempet - eller lysere og mer intens. Du kan selv endre underlaget farge til en mørk blå eller rød for å få andre effekter. Gå nøtter
Husk - du lagre lagre disse som "mønstre" i Photoshop ved å velge "Edit> Define Pattern". Gjør dette og senere vil du være i stand til å bruke disse mønstrene om og om igjen. Du kan også lagre dine mønstre som biblioteker og dele dem med venner og kolleger.
Neste vi skal vise deg hvordan du legger til dybde og liv til dine støy mønstre ...
Trinn 03: legge til farge, livlighet og dybde (Blå)
La oss legge til litt farge og liv til våre støy mønsteret nå. Det er verdt å nevne at i de neste trinnene vi skal bruke noen generelle teknikker ... du trenger ikke å følge dem til punkt og prikke -. Bare holde hver og en i tankene for når du går for å lage dine egne mønstre
Start med å legge litt farge til din Base Layer.
nå opprette en kopi av Noise lag og satt begge blandingsmodi til Color Burn. Det dupliserte laget vil hjelpe oss å få bunnlaget mørkere. Det vil også gi oss muligheten til å skifte opacity på en finere skala senere.
Opprett enda en kopi, men denne gangen skal vi rastrere det og Snu det (se trinn 2, Black Noise for detaljer om du gikk glipp av det).
Sett blending mode på vår nye laget til skjerm. Vi ønsker også å legge til en ny Adjustment Layer (Layers> New Adjustment Layer> Levels), slik at vi kan styre intensiteten av lyset støy.
Nå la oss lage en subtil forskyvning av nudging lett lag bort fra mørk lag (1px opp og 1px venstre) ved hjelp av Move Tool (V) og tastaturet.
Deretter legger du til en lagmaske over Lyse Noise lag, slik at vi kan leke med den.
ved hjelp av en grovt strukturert børste (satt til ca 130px og fargen svart) vi vil i hovedsak maske av en bit av vår lys støy ved å male bort fra lagmaske. En penselstrøk bør gjøre triks, men bruk din egen dømmekraft. Ideen her er å skape en grov, tilfeldig mønster.
Sett Opacity av laget ned til rundt 45%. Du kan gjøre mindre eller mer etter dine egne preferanser ... vi prøver bare å droppe intensiteten av kontrast tilbake litt skjønt.
Nå har vi et fint mønster med litt dybde til med den. Hvis du ikke grave dybden skjønt, kan du enkelt tinker med dette ved å vippe lyset støy lag horisontalt for å fjerne offset og lage en enkel "gnisten" effekt.
Alacadabra! Ikke dårlig, ikke sant? Her er hva den endelige strukturen vil være:
Bonus Tips: Hvis du merker noen subtile "sømmer" når du går å bruke den nye mønster, prøve beskjæring det opprinnelige mønsteret ned med 5 eller 10px rundt kantene. Du vil ofte få sømmer hvis Photoshop bestemmer seg for å klumpe seg mørkere støy piksler rundt kantene på din Noise Layer, så bare beskjæring av kantene vil resultere i en ren, sømløs mønster
Trinn 04:. Justere Shading og Hue (grønn)
De to neste trinnene kommer til å gå fort. Nå har vi satt de hovedprinsippene som vi trenger for å lage nesten alle støy mønster som du kan forestille deg - slik at vi bare kommer til å vise deg hva denne strukturen kan se ut når du begynner å spille med farge og intensitet av kontrast. La oss kikke på den grønne versjonen ...
Start med en kopi av den blå Noise laggruppe. Gå videre og endre Base Layer farge til grønt.
Du vil merke en morsom ting når skiftende farger rundt ... kontrasten kommer fra støy har en tendens til å skifte fra subtil til dramatiske med forskjellige farger. Dette betyr i hovedsak at vi ønsker å justere tettheten av støy lag for å ta hensyn til skiftende intensitet. Det er ikke en hard-set regel for dette - bare leke seg med tetthetsinnstillinger før du har utseendet du går for
Til slutt, her er det ferdige støy mønster.
jeg skal nevne det nok en gang for å være sikker - du merker sømmer på mønsteret når du går å bruke på en større form eller på nettstedet ditt, hva du trenger å gjøre er å beskjære i ca 10px hele din form å fjerne "edge" piksler som kan være mørkere når Photoshop legger dem i løpet av den aller første "Filter> Legg Noise" step
trinn 05:. Legge Tilleggs Vibrancy (Dual hued Orange)
OK - så jeg har bare en siste trikset opp ermet for denne opplæringen. Frem til nå har vi bare blitt justert Base Layer når vi ønsket en ny farge. Dette er alt fint og godt når vi vil ha en grunnleggende støy mønster ... men hva om vi vil ha noe med litt ekstra liv til det
Vel, dette siste trinnet hvis for dere som ønsker nettopp det? - en dual hued støy lag som har litt av en "gnist" til det.
Gå videre og starte den opp ved å endre vår bakgrunnsfarge. Juster støynivå tetthet som du vil (jeg ikke rote med det i det hele tatt for denne demo)
Her er der vi kaste kurve ball i. - Legge til en ny Adjustment Layer (Layers> New Adjustment Layer > Hue /Saturation) og gjøre det til en klipping maske over "light noise" lag. Nå bare tinker med innstillingene til du får en fin gyllen farge fra lys støy lag
Den endelige effekten er her:.
Det er subtile, men lyset "gløden" kommer fra det top støy lag kommer til å legge noen stor livet til noen prosjekter som du bruker det i. Nyt den og lage dine egne varianter!
Konklusjon
Alright! Så jeg håper du har fått litt noe ut av denne andre økten. Nå bør du ha en god forståelse av støymønstre og hvordan du bruker dem i dine egne prosjekter. Du kan lagre alle filene som vi opprettet her som GIF, PNG eller JPG-filer og bruke dem umiddelbart på nettet også ... men vi har egentlig bare så vidt begynt.
I neste nivå av denne serien skal vi vise deg hvordan du oppretter noen avanserte teksturmønstre, forme baserte mønstre, gjennomsiktige mønstre, og enda mer i fremtiden.
Abonner eller kom tilbake på området for å se alle de oppdateringer til denne serien som de skjer!