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 tredje utgave: Carbon Fiber Textures. Vi skal se på hvordan du lager slanke, profesjonelle karbonfibermønstre ved å starte med en vanlig vanilje-tilnærming, og deretter ta de samme prinsippene for å lage 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 det første innlegget i serien hvis du savnet det!
I dag er dag tre 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 "karbonfibertekstur" 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!
Den grunnleggende karbonfiber tekstur er faktisk ganske darned enkel å lage. Det er mange tutorials for dette grunnleggende mønsteret der ute på nettet, så vi vil ikke bryte noe nytt grunnlag her. Det som er viktig i dette første trinnet er at du tar opp de grunnleggende prinsippene som vi skal bruke i mer avanserte stadier. De viktigste triksene er:
La oss starte vår grunnleggende versjon ved å lage et 4x4-dokument:
Deretter tar du et 2x4 px utvalg av bakgrunnen (vist) og lager et nytt lag fra det (Ctrl + J):
På det nye 2x4px-laget, la oss legge til en grunnleggende gradient fra panelet Layer Styles (dobbeltklikk laget, eller høyreklikk det og velg Lagstilter). Graden vi legger til, går fra bunnen til toppen og bruker fargene svart (# 000000) på bunnen til mørkegrå (# 4f4f4f) på toppen:
Denne gradienten skal være grunnlaget for vår karbonfiber? slik at du alltid kan gå tilbake til dette trinnet for å endre utfallet av sluttproduktet.
Deretter la vi ta et 1x4 pixelvalg av gradientlaget ved hjelp av Rectangular Marquee-verktøyet og opprett et nytt lag ved å kutte det av (Høyreklikk> Lag via kutt).
Sett nå opaciteten på dette andre laget til 92%.
Hvorfor? Vi prøver å skape svært subtile variasjoner i gråtoner slik at karbonfiber ser ut til å ha en troverdig lyskilde. Det er åpenbart at det ikke er en ekte lyskilde, og vi kan ikke lage en uten å ha et massivt bilde (som besvinner poenget med et webmønster), men små endringer i skyggelegging vil lure øyet til å tro at det er dybde.
Slå sammen de to 1x4 px-lagene sammen (over), og bruk deretter markørverktøyet igjen, ta et 2x2-utvalg fra toppen av det nye laget:
For å skape vår mønstereffekt, bytt bestilling av de to 2x2 px-fliserne fra topp til bunn, og omvendt:
Vårt mønster er nå fullført! Enkelt lagre det i mønsterbiblioteket ditt ved å bruke Rediger> Definer mønster verktøy. Gi det navnet du velger, og det vises nå når du bruker Layer Styles> Mønsteroverlegg bibliotek.
Ok! Så har vi en veldig enkel karbonfiber komplett? la oss gå videre til neste trinn, der vi lager noen endringer på denne ideen.
Den grunnleggende karbonfiberen kan manipuleres ganske enkelt. I dette neste korte eksempelet bruker vi nøyaktig samme prosess og prinsipper for å lage en litt større fibertekstur.
Merk: Jeg vil forsiktig hoppe over noen av de repeterende skjermbildene som vi har vurdert i det siste trinnet, så jeg vil bare fremheve nye teknikker.
Start denne gangen med et 8px med 8px-dokument.
I det første karbonfibermønsteret som vi opprettet, tok vi en snarvei ved å lage en enkelt gradient for hele venstre side av dokumentet. Dette virket fordi dokumentet var bare 4x4 og virkelig ikke kunne håndtere mer detalj enn vi gikk over.
I denne andre versjonen skal vi få litt mer forsiktig med vår form. Begynn på dokumentet ditt ved å legge til et 4x4-rektangel:
Legg til et annet 4x4-rektangel for det nederste rommet (jeg har farget det slik at du kan se det bedre):
Nå må vi legge til en subtil gradient til bunnfeltet. Husk at den nederste venstre regionen er mørk? nesten svart, så bruk en veldig mørk gradient:
Gjenta gradientstrinnet for topp 4x4-laget, men denne gangen blir det en lett gradient:
Dupliser begge 4x4-lagene og utfør "fliperoo" -tricket der vi bytter posisjonen til hver firkant i motsatte hjørner av dokumentet.
Nå har vi vårt grunnleggende karbonfibermønster, men la oss legge til et nivå av tilpasning ved å legge til et nivåjusteringslag. Gjør dette fra Lag-menyen øverst; Du leter etter knappen "Layer> New Adjustment Layer> Levels".
Nivåjusteringslaget vil tillate oss å tinker med lysstyrken og kontrasten til vårt fibermønster. Når du er ferdig, definer mønsteret (Rediger> Definer mønster), og du blir satt til å gå. Her ser du hvordan mønsteret ditt ser ut:
Merk: Når du prøver å bruke Definer mønsterverktøyet, må du kontrollere at du ikke er valgt på Justeringslaget? av en eller annen grunn vil Photoshop ikke la deg bruke "Definer mønster" når du er på lag som denne (den blir grået til du velger et annet lag).
Nå har vi et andre karbonfibermønster komplett! Du kan bruke denne samme grunnleggende prosessen om og om for å lage dine egne variasjoner. Prøv forskjellige dokumentstørrelser, legg til farge, juster kontrasten på gradienter, og alt annet du kan tenke på for å skape unike effekter.
Ok, så har du det grunnleggende nede? det er flott! I dette neste trinnet skal vi lage et diagonalt karbonfibermønster ved hjelp av de samme grunnleggende prinsippene som vi brukte i de to første trinnene - men vi vil bruke en radikal liten vri på gridoppsettet for mønsteret vårt for å skape en unik effekt.
Start med et 30px med 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 skal jobbe i celler av "5px" som en generell tommelfingerregel? så la oss starte vårt mønster ved å lage et rektangel som er 5px høyt med 15px lang.
Deretter legger du til en gradient i vår første form:
Legg nå en 5px med 5px firkantet form med fargen på # 191919 rett ved siden av rektangelformen.
Tips: Bruk "Konverter punktverktøyet" (under pennverktøyspanelet) for å justere eller skarpe opp kanter. Dine figurer bør ende nøyaktig på definerte piksler, ikke vise noen uskarpe "halvpiksler".
Hva vi har her er vårt grunnleggende mønster som vi skal gjenta ganske mange ganger? så la oss konvertere disse to figurene til et enkelt "Smart Object", slik at vi alltid kan komme tilbake til dem for å redigere gradienten.
Merk: Du kan alltid gå tilbake og redigere dine 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 som flyter rundt.
Deretter må vi duplisere det smarte objektet og kutte det ned med 5px og til venstre ved 5px.
Gjenta det samme "Duplicate, then Nudge" prosessen igjen og igjen til du har dekket dokumentet ditt. Se skjermbildet hvis du går seg vill, men det skal alltid være en 5px måleenhet mellom alle hoveddelene.
La oss nå legge til et bakgrunnsfargelag. Jeg brukte et enkelt rektangel for dette - sett fargen til # 1e1e1e:
Til slutt, for å være trygg, la vi legge til en av disse pålitelige nivåjusteringslagene slik at vi kan tinker rundt med mørket og kontrasten på fluen.
Whallah! Du kan nå bruke Definer mønsterverktøyet igjen og bruke mønsteret hvor du vil, slik:
For dette siste trinnet, skal vi bruke de samme grunnleggende prinsippene igjen? men denne gangen vil vi snu ting med 45 grader for å skape en annen unik diagonal karbonfiber effekt.
Dette siste mønsteret er faktisk det enkleste av alt å mestre, så dette burde være en cakewalk hvis du har gjort det så langt!
Start med et 8x8-dokument og legg til en bakgrunnsfarge. Jeg brukte Black (# 000000), kan du bruke det du vil? bare hold den nøyaktige fargen i tankene for neste trinn:
Legg nå et rektangel, målt til 4px bredt ved 8px høyt:
Alt skal være kjent nå - legg til en subtil gradient - sluttfarge skal samsvare med vår bakgrunnsfarge (min gradient her er # 555555 til # 000000). Legg merke til vinkelen - vi angir at den skal være 135 (eller -45 avhengig av hvordan du vil ha det) slik at det vil samsvare pent når vi roterer laget:
Bingo! Vi har vårt siste mønster? juster dokumentstørrelsen og gradientfarger for å få dine egne tilpassede variasjoner:
? og her er det:
Ok! Så nå bør du ha en god nok grunnleggende forståelse for å skape dine egne tilpassede variasjoner av disse karbonfibermønstrene - lek med former, 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 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