Create dine egne Sexy bakgrunnsmønstre (del 3: Carbon 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 serie på å skape bakgrunnsmønstre som kan brukes på nettet (og under designfasen) med vår tredje utgaven: Carbon Fiber Tekstur. Vi skal se på hvordan å lage elegante, profesjonelle karbonfiber 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 det første innlegget i serien om du gikk glipp av det! Anmeldelser
Dagens Patterns
I dag er dag tre 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 "carbon fiber tekstur" som kan brukes som et mønster i Photoshop, samt en flislegging bakgrunnen på websidene dine. Vi kommer til å gjøre dette i 4 trinn:
Trinn 01: Basic Carbon Fiber Texture
Trinn 02: Endre Basic Carbon Fiber
Trinn 03: Komme Funky: Diagonal Carbon Fiber
Trinn 04: Tar det til neste nivå: Advanced Carbon Fiber
Klar? ! La oss gjøre dette
The Video Tutorial
Det skrevne Tutorial
Trinn 01: Basic Carbon Fiber Texture
Den grunnleggende carbon fiber tekstur er faktisk ganske darned enkel å lage. Det er tonnevis av tutorials for denne grunnleggende mønster der ute på nettet, så vi vil ikke bryte noen nye bakken her. Hva er viktig i dette første trinnet er at du plukker opp de grunnleggende prinsippene som vi skal bruke i de mer avanserte stadier. De viktigste triksene er:..
Bruk mørke graderinger å skape en overbevisende og subtile lyskilde
Ikke få for fancy - litt går en lang måter med karbonfiber
La oss starte vår basisversjon ved å opprette en 4x4 dokument:
Neste, ta en 2x4 px utvalg av bakgrunnen (. vist) og opprette et nytt lag fra den (Ctrl + J):
På den nye 2x4px lag, la oss legge til en grunnleggende gradient fra Layer Styles panelet (dobbeltklikk på laget, eller høyreklikk den og velg Layer Styles). Stigningen vi skal tilsette vil løpe fra bunn til topp og bruke farger svart (# 000000) på bunnen for å Mørk grå (# 4f4f4f) på toppen:
Denne gradient kommer til å være den grunnlaget for vår karbonfiber ... så kan du alltids gå tilbake til dette skrittet for å endre utfallet av det endelige produktet.
Neste, la oss ta en 1x4 piksel utvalg av gradient lag med Rectangular Marquee verktøyet og opprette et nytt lag ved å klippe den av (Høyreklikk > Layer via Cut)
Nå setter opacity på denne andre lag til 92%
Hvorfor Slå sammen de to 1x4 px lagene sammen (over) og deretter, ved hjelp av bilmerket verktøyet igjen, ta en 2x2 utvalg av toppen av det nye laget: Neste, for å skape vårt mønster effekt, bytte rekkefølgen på de to 2x2 px fliser fra topp til bunn, og vice versa: Vår mønsteret er nå komplett! Enkelt lagre det på bibliotek av mønstre ved hjelp av Rediger > Definer Mønster verktøyet. Gi den et navn som du selv velger, og det vil nå vises når du bruker Layer Styles > Pattern Overlay bibliotek. Alright! Så vi har en veldig grunnleggende karbonfiber komplett ... la oss gå videre til neste trinn, der vi skal lage noen modifikasjoner på denne ideen Den grunnleggende karbon fiber kan manipuleres ganske enkelt. I dette neste kort eksempel, vil vi bruke nøyaktig samme prosess og prinsipper for å lage en litt større fiber tekstur Merk:. Start denne gangen med en 8px av 8px dokumentet. I første karbonfiber mønster som vi opprettet tok vi en snarvei ved å lage et enkelt gradient for hele venstre side av dokumentet. Dette fungerte fordi dokumentet var bare 4x4 og egentlig ikke kunne håndtere noe mer detaljer enn vi gikk over. I denne andre versjonen vi kommer til å få en litt mer grundig med vår form. Begynn på dokumentet ved å legge en 4x4 rektangel: Legg til en annen 4x4 rektangel for bunn plass (jeg har farget det i, slik at du kan se det bedre): Nå må vi legge en subtil gradient til bunnen torget. Husk, nederst til venstre regionen er mørkt ... nesten svart, så bruk en veldig mørk gradient: Gjenta gradient skritt for topp 4x4 lag, men denne gangen vil det være et lys gradient: Duplicate både 4x4 lag og utfører "fliperoo" trick der vi bytter posisjonen til hver rute til motsatte hjørner av dokumentet. Nå har vi vår grunnleggende karbonfiber mønster, men la oss legge til et nivå av tilpasning ved å legge til et Levels justeringslag. Gjøre dette fra Lag-menyen øverst; Du leter etter den "Layer > New Adjustment Layer > Levels" -knappen Levels justeringslag vil tillate oss å tinker med lysstyrken og kontrasten til vår fiber mønster.. Når du er ferdig, Definer Pattern (Edit > Define Pattern), og du vil være klar til start. Her er hva mønsteret ditt vil se ut: Merk: Nå har vi en ny karbonfiber mønster komplett! Du kan bruke den samme grunnleggende prosessen om og om igjen for å lage dine egne varianter. Prøv ulike dokumentstørrelser, legge farge, justere kontrasten på dine gradienter, og alt annet du kan tenke deg å lage unike effekter Ok, ... er slik at du har grunnleggende ned så stor! I dette neste trinn, kommer vi til å skape en diagonal karbonfiber mønster ved hjelp av de samme grunnprinsippene som vi brukte i de to første trinnene - men vi kommer til å bruke en radikal liten vri på rutenettet-oppsettet av vårt mønster for å skape en unik effekt. Start med en 30px av 30px dokument. Når du er ferdig med dette trinnet kan du gjenta prosessen med en annen dokumentstørrelse, men dette bør være et godt utgangspunkt. Vi kommer til å jobbe i cellene "5px" som en generell tommelfingerregel ... så la oss starte vårt mønster ved å opprette et rektangel som er 5px høye med 15px lang Deretter legger du til en gradient over vår første form. Nå kan du legge en 5px av 5px firkantet form med fargen # 191919 rett ved siden av vår rektangel form Tips:. Det vi har her er vår grunnleggende mønster som vi kommer til å gjenta ganske mange ganger ... så la oss konvertere disse to former i et enkelt "Smart Object", slik at vi kan alltid gå tilbake til dem for å redigere gradient. . Merk: Du kan alltid gå tilbake og redigere smarte objekter ved å høyreklikke på laget og velge "Rediger innhold". Dette vil redigere hver forekomst av smart objekt ... som gjør endringer raskt og enkelt når du har 10 eller flere duplikater flyter rundt. Deretter må vi duplisere smart objekt og dytte det ned ved 5px og til venstre ved 5px. Gjenta det samme "Duplicate, deretter Nudge" prosessen om og om igjen til du har dekket dokumentet. Se i screenshot hvis du tapt, men det skal alltid være en 5px måleenhet mellom alle de store delene. Nå la oss legge til en bakgrunnsfarge lag. Jeg brukte en enkel rektangel for dette - sette farge til # 1e1e1e: Til slutt, bare for å være sikker, kan legge til en annen av de trofaste nivå justeringslag, slik at vi kan tinker rundt med mørke og kontrast på fly . Whallah! Du kan nå bruke Define Pattern verktøyet igjen og bruke mønster hvor du vil, som dette: For dette siste trinnet, kommer vi til å bruke de samme grunnleggende prinsippene igjen ... men denne gangen skal vi snu ting ved 45 grader for å lage en annen unik diagonal karbonfiber effekt. Denne endelige mønsteret er faktisk den enkleste av alt å mestre, så dette bør være en cakewalk hvis du har gjort det så langt! Start med en 8x8 dokument og legge en bakgrunnsfarge. Jeg brukte svart (# 000000), kan du bruke hva du vil ... bare holde den eksakte fargen i tankene for neste trinn: Nå kan du legge et rektangel, målt ved 4px bred med 8 piksler høy: Alt skal være kjent nå - legge til en subtil gradient - endelsen fargen skal matche vår bakgrunnsfarge (min gradient her er # 555555 til # 000000). Legg merke til vinkel - vi setter den til å være 135 (eller -45 avhengig av hvordan du vil ha det), slik at det vil matche opp pent når vi roter lag: Bingo! Vi har vår endelige mønster ... justere dokumentstørrelse og gradient farger for å få dine egne varianter: ... og her er det: I de neste delene av denne serien vi skal vise deg hvordan du oppretter noen avanserte strukturelle mønstre, mer form basert mønstre, gjennomsiktige mønstre , og enda mer i fremtiden. Abonner eller sjekk tilbake på området for å se alle oppdateringene til denne serien som de skjer! Anmeldelser
..? Vi prøver å lage svært subtile variasjoner i de grå-toner, slik at karbonfiber synes å ha en troverdig lyskilde. Selvfølgelig, det er ikke en ekte lyskilde og vi kan ikke lage en uten å ha en massiv bilde (som tap poenget med en web-mønster), men små endringer i skyggelegging vil lure øyet til å tro at det er dybde.
Trinn 02:. Endre Basic Carbon Fiber
Jeg målbevisst kommer til å hoppe over noen av de repeterende skjermbilder som vi anmeldt i det siste trinnet, så jeg skal bare fremhever nye teknikker.
Når jeg prøver å bruke Pattern verktøy Define, sørg for at du ikke er valgt på Adjustment Layer ... for noen grunn Photoshop vunnet 't la deg bruke "Define Pattern" når du er på lag som dette (det vil være nedtonet til du velger et annet lag).
Trinn 03:. Får Funky: Diagonal Carbon Fiber
Bruk "Konverter Point Tool" (under Pen Tool panel) i at du må justere eller skjerpe opp noen kanter . Figurer skulle ende nøyaktig på definerte piksler, ikke viser noen uklare "halv piksler".
Høyreklikk på ett av lagene (når du har valgt både ved hjelp av Shift Key) for å åpne opp kontekstmenyen og finne Konverter til smart objekt knappen
Trinn 04: Tar det til neste nivå: Advanced Carbon Fiber
Konklusjon
< p> Alright! Så nå skal du ha en god nok grunnleggende forståelse for å lage dine egne varianter av disse Carbon Fiber mønstre - leke seg med former, farger, dokumentstørrelser, og mer å legge til din egen personlige vri på disse. Pokker, kan du selv invertere skyggelegging for å skape subtile, lyse mønstre.