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 under designfasen) med vår andre utgave. Vi ser på hvordan du lager de stadig populære "støy" -mønstrene som så mange nettsteder har brukt i det siste. Pass på å sjekke ut det første innlegget i serien hvis du savnet det!
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.
I dag er dag to 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 "støytekst" som kan brukes som et mønster i Photoshop, samt en flisebakgrunn på websidene dine. Vi skal gjøre dette i 4 trinn:
Klar? La oss gjøre dette!
Det første trinnet i dagens veiledning er trolig den mest avgjørende, fordi vi setter opp grunnleggende elementene. Det er mange forskjellige måter å lage disse lydmønstrene på? 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 et nytt dokument. Størrelsen spiller ingen rolle mye (vi bruker 200px ved 200px i demoen), men det er best å holde det over 75px for å sikre at lydmønsteret ditt er troverdig tilfeldig. Mindre dokumenter kan begynne å se ut som "repeterende fliser" - dokumenter som er betydelig større vil øke filstørrelsen uten mye merverdi.
La oss legge til en grunnleggende rektangelform og nevne den "Base Color" (organisasjonen vil gjøre livet enklere senere!). Du kan bruke hvilken som helst farge du vil ha (vi brukte #EBEBEB), men sørg for at rektangelet okkuperer hele plassen.
La oss nå åpne et nytt lag og nevne det "Noise Layer". Det er bare et tomt lag akkurat nå?
Ved hjelp av verktøyet "Rektangulær markør" (M), trekk et valg over hele dokumentet ditt mens du er valgt på støylaget. Velg deretter "Fyll?" Fra hurtigmenyen (Høyreklikk når over valget - eller det er også under redigeringspanelet) og la oss fylle det med fargen White.
Tips: Deretter ønsker vi å konvertere "Noise Layer" til et smart objekt. Du kan gjøre dette ved å høyreklikke på laget og velge "Convert to Smart Object" eller velge "Convert for Smart Filters" fra Filters menyen.
Hvorfor gjøre det til en smart gjenstand? Fordi dette vil tillate oss å beholde evnen til å redigere intensiteten til støytekstur senere! Det kan være skritt i fremtiden der vi ender opp med å flate tekstur, men det er alltid best å holde ting redigerbare så lenge vi muligens kan.
Ok, Smart Object i hånden, vi vil legge til støytekstur.
Til slutt må du sette blendingsmodus på støylaget til å "Multiply" slik at bare de mørkere støypikslene er synlige. Nå kan du endre fargen på basislaget for forskjellige støyende farger.
Whallah! Vi har nå etablert grunnleggende elementer for vårt grunnleggende lydmønster?
? og det ville være slutten på denne ydmyke opplæringen om vi var lat?
I de neste trinnene skjønner vi imidlertid hvordan du skal omverve, endre og legge til troverdig dybde og livskraft i ditt lydmønster for å gjøre det virkelig skiller seg ut fra pakken!
Før du går videre: Gå videre og grupper lagene dine sammen (Base Layer og Noise Layer) ved hjelp av Ctrl + G for å lage en lagmappe. Dupliser den en gang og skjul originalen slik at vi alltid har en kopi av den. For hvert nytt trinn skal vi lage en ny duplikatgruppe. Dette er bare en god grunnleggende vane å ha fordi det sikrer at du alltid har en sikkerhetskopi av vårt grunnleggende mønster.
OK, la oss vri dette støymønsteret til noe mørkt og deilig nå. Jeg skal vise deg hvordan du lager et invertert lydmønster som ser ut til å ha en subtil gnist på den.
Start med en kopi av den originale støygruppen (se slutten av trinn 01). Det første vi vil gjøre er å lage bakgrunnsfargen Svart, så fortsett og gjør det på ditt grunnlag.
Da våre støymønster består av bare "mørke" piksler, må vi i hovedsak invertere det. Dessverre kan vi ikke gjøre dette som en "smart" effekt, så vi må flate ut støymønsteret. Pass på at du har intensitetsnivået satt til det du vil, og "Rasterize" laget. Du kan gjøre dette ved å Høyreklikke på laget og velge Rasterize fra hurtigmenyen, eller fra Lag> Rasterize> Rasterize Layer Meny.
Nå som vi i hovedsak har flatt ut vårt lydmønster, ønsker vi å invertere det. Gjør dette fra "Bilde> Justeringer> Inverter"panel.
Hva er galt? Du kan ikke se støymønsteret lenger?
Vi må gjøre noen små endringer for å se vårt inverterte lydmønster. Først sett Blending Mode på støynivået til "Skjerm".
Deretter justerer du "nivåene" av lydmønsteret ditt (Ctrl + Alt + L? Eller Bilde> Justeringer> Nivåer).
Alternativ metode: Du kan også bare legge til et justeringslag for nivåene (Lag> Nytt justeringslag> Nivåer). Du kan foretrekke denne måten hvis du vil gjøre endringer i intensiteten senere.
Presto! Nå har vi et sparkly, invertert lydmønster. Åpenbart kan du justere dette til ditt hjerte innhold - gjør det mørkere og dypere - eller lysere og mer intens. Du kan til og med bytte grunnlagsfarge til mørk blå eller rød for å få andre effekter. Gå nøtter!
Huske - du lagrer disse som "Mønstre" i Photoshop ved å velge "Rediger> Definer mønster". Gjør dette og senere kan du bruke disse mønstrene om og om igjen. Du kan til og med lagre dine mønstre som biblioteker og dele dem med venner og kolleger.
Deretter skal vi vise deg hvordan du legger til dybde og livskraft i støymønstrene dine?
La oss legge til litt farge og levetid til vårt lydmønster nå. Det er verdt å nevne at i de følgende trinnene skal vi bruke noen generelle teknikker? du trenger ikke å følge dem til brevet - bare hold hver enkelt oppmerksom på når du går for å lage dine egne tilpassede mønstre.
Begynn med å legge litt farge til ditt grunnlag.
Lag nå en kopi av støylagret ditt og sett begge blandemodiene til Color Burn. Det dobbelte laget vil hjelpe oss med å få det nederste laget mørkere. Det vil også gi oss muligheten til å flytte opaciteten i finere skala senere.
Opprett enda en kopi, men denne gangen skal vi Rasterize den og invertere den (se trinn 2, svart støy, for detaljer hvis du savnet det).
Sett blandemodus på vårt nye lag til Skjerm. Vi vil også legge til et nytt justeringslag (Lag> Nytt justeringslag> Nivåer) slik at vi kan kontrollere intensiteten til lysstøyen.
La oss nå lage en subtile forskyvning ved å nudge lyslaget bort fra det mørke laget (1px opp og 1px til venstre) ved hjelp av Move Tool (V) og tastaturet ditt.
Deretter legger du til en lagmaske over Light Noise-laget, slik at vi kan spille med det.
Ved å bruke en grovt teksturert børste (satt til ca. 130 px og fargen Svart), vil vi i hovedsak maskere litt av vår lette støy ved å male bort fra Layer Mask. En børstest bør gjøre kunsten, men bruk din egen vurdering. Ideen her er å lage et grovt, tilfeldig mønster.
Sett lagets opakthet ned til rundt 45%. Du kan gjøre mindre eller mer i henhold til dine egne preferanser? Vi prøver bare å slippe intensiteten av kontrasten tilbake litt skjønt.
Nå har vi et fint mønster med litt dybde til det. Hvis du ikke graver dybden skjønt, kan du enkelt tinker med dette ved å bla det lyse støynivået horisontalt for å fjerne forskyvningen og skape en enkel "glitrende" effekt.
Alacadabra! Ikke verst hei? Her er hva den endelige teksten ville være:
Bonus Tips: Hvis du legger merke til noen subtile "sømmer" når du går til å bruke det nye mønsteret, kan du prøve å beskjære det opprinnelige mønsteret ned med 5 eller 10px rundt kantene. Du får ofte sømmer hvis Photoshop bestemmer seg for å klumpe opp mørkere støypiksler rundt kantene på støylaget, slik at det bare blir et rent, sømløst mønster ved å kutte av kantene..
De neste to trinnene kommer til å gå raskt. Nå har vi satt de hovedprinsippene vi trenger for å skape omtrent alle støymønster som du kan forestille deg - så vi skal bare vise deg hva denne teksturen kan se ut når du begynner å spille med Farge og Intensitet av kontrast. La oss se på den grønne versjonen?
Start med en kopi av gruppen Blue Noise layer. Gå videre og endre grunnlagsfarge til grønt.
Du vil legge merke til en morsom ting når du skifter farger rundt? Kontrasten som kommer fra støyen har en tendens til å skifte fra subtil til dramatisk med forskjellige farger. Dette innebærer i hovedsak at vi vil justere opaktheten til støynivåene for å regne for den skiftende intensiteten. Det er ikke en streng regel for dette - bare lek med opasitetsinnstillingene til du ser ut som du skal.
Til slutt, her er det ferdige lydmønsteret:
Jeg nevner det igjen for å være trygt - hvis du merker noen sømmer på mønsteret ditt når du går til å bruke i større form eller på nettstedet ditt, må du beskjære ca 10 px rundt hele figuren for å fjerne "kanten" piksler som kan bli mørkere når Photoshop legger dem inn under det aller første "Filter> Add Noise" -trinnet.
Ok, så jeg har bare ett siste knep opp i ermet min for denne opplæringen. Frem til nå har vi bare justert grunnlaget når vi ønsket en ny farge. Dette er alt bra og bra når vi vil ha et grunnleggende lydmønster? men hva om vi vil ha noe med litt ekstra liv til det?
Vel, dette siste skrittet hvis dere vil ha det - et dual hued lydlag som har litt "gnist" til det.
Gå videre og start den opp ved å endre vår bakgrunnsfarge. Juster støynivået ugjennomtrengelighet som du vil (jeg har ikke rotet med det i det hele tatt for denne spesielle demoen).
Her er hvor vi kaster kurven ballen inn - legg til et nytt justeringslag (Lag> Nytt justeringslag> Hue / Metning) og gjør det til en klippemaske over "light noise" laget. Nå bare tinker med innstillingene til du får en fin gylden farge som kommer fra det lyse støynivået.
Den endelige effekten er her:
Det er subtilt, men lyset "glød" som kommer fra det høyeste støynivået, kommer til å gi deg et godt liv til alle prosjekter du bruker den inn. Nyt det og lag dine egne varianter!
Ok! Så jeg håper du har fått litt noe ut av denne andre økten. Nå skal du ha en god forståelse av lydmø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 nettopp begynt.
I neste nivå av denne serien viser vi deg hvordan du lager noen avanserte tekstmønstre, form basert 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