Create dine egne Sexy bakgrunnsmønstre (Del 1: Modell Basix)
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 har jeg gleden av å starte en screen serie jeg har lyst til å gjøre for en stund nå: Hvordan lage web mønstre som fungerer i både Photoshop og på nettet. Vi kommer til å gjøre dette som en serie, og starter med de mest grunnleggende mønstre og flytte opp til noen av de mest avanserte bakgrunnsmønstre som vi kan finne, inkludert komplekse teksturer
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
Web Patterns
La det være klart:. Ideene bak skape bakgrunnsmønster er alle ganske enkelt - de fleste mønstre tar bare et par skritt, og kan resultere i bemerkelsesverdig effektive teksturer. Faktisk, de verste mønstre for nettet er som regel de som "prøver for hardt" ved å forsøke å passe for mye på innsiden av hver flis
Her er skjermbilder.
< p> Når du har din mønster akkurat der du ønsker det, vi ønsker å lagre det som et mønster. For å gjøre det, velg fra menyen øverst i Photoshop "Edit > Define Pattern". Dette vil automatisk lagre dokumentet som et mønster som kan brukes inne av "Layer Styles > Pattern Overlay" bibliotek
Nå som vi har det grunnleggende gjort, du kan tinker med dette mye.. Vi brukte en 7px dokument, men hvis du ønsker en strammere rutenett, kan du gå ned til 5px eller 3px. Alternativt, hvis du ønsker en mer vidåpne rutenett, kan du bruke en større dokumentstørrelse. Linjebredde, mellomrom, og farger er helt opp til deg
. Tips: Farge som kan se subtile (lav kontrast) på mønsteret dokumentet kan se altfor intens når du bruker dem som en faktisk mønster i en annen større dokument. Trikset her er å:.
- Åpne et nytt dokument på 8px av 8 piksler.
< li> Zoom inn ved å bruke navigatoren panelet til 800% eller mer.
Tegn to diagonale linjer, hver matche de motsatte hjørnene. Tips: Hold Shift-tasten og trukket diagonalt for en perfekt 45 graders vinkel
Her er skjermbilder.
Vær spesielt oppmerksom på at siste skjermbilde, som det illustrerer hvordan du kan virkelig endre hele følelsen av rutenettet ved avstand den ut eller beskjæring ned på den. Et stramt Crosshatch mønster kan gjøre en flott tekstur like godt som en stor saftig mønster. Spill med mellomrom og linjebredde til du er fornøyd med resultatene
Trinn 03:. Diagonale linjer ... Skalert
Denne neste mønsteret er ganske enkelt som det i hovedsak bare bruker Crosshatch mønster ideer (med bare en linje i stedet for to selvfølgelig!). Enkle diagonale linjer mønstre er en flott måte å legge subtil tekstur bak teksten (for eksempel overskrifter) fordi det legger karakter uten å gjøre teksten uleselig
For den diagonale linjen, gå videre og begynne med ut Crosshatch dokument -. Men denne gangen, fjerner du en av linjene før du har lagret mønster (Edit > Define Pattern). Dokumentet størrelse i denne saken kommer til å være avgjørende, da det korrelerer direkte til hvor tett sammensveiset linjene vil være
skjermbilder.
Det andre bildet viser hvordan, ved å justere avstanden av dokumentet og linjen vekt og retning, kan du få et virkelig bredt spekter av mønstre. Ikke så vanskelig huh
Tips: For puristene der ute, kan du få en mye renere, skarpere linje ved å gå gjennom din linje - piksel for piksel - og fjerne noen av de "faner" som vi så fra? Photoshop gjengivelse. Dette skjer i hovedsak fordi Photoshop er å tegne en anti-alias linje der vi ideelt sett ønsker en pixelated linje. Pikslene er så liten skjønt at i de fleste tilfeller, det spiller ingen rolle uansett. Her er bare et skjermbilde av superskarpe versjon bare i tilfelle du ønsker å se det
Trinn 04:. Legge til farge og tekstur
Alright, så vi har fått grunnleggende ned! Nå la oss legge til bare litt mer personlighet ved hjelp av to raske teknikker. Legge til farge og tekstur
Fargen delen er sannsynligvis ganske enkelt hvis du ikke har funnet det ut ennå. Bare legge farge til din bakgrunn og linjer før du har den ønskede effekt. Mitt tips:. Behold kontrasten lav - det er ingenting mer motbydelige enn en altfor levende mønster
Teksturen delen er en wee-bit vanskeligere. Tekstur har alltid vært en notorisk vanskelig ting å mestre på nettet. Hvorfor? Fordi i de fleste tilfeller, gjentar tekstur ... og folk flest kan få øye på den en mil unna. Selv høyoppløste teksturer vil gjenta og vise frem flisen separasjoner mindre du bruker bilder som er stor (for eksempel 1920 x 1080) ... som ikke alltid er en praktisk løsning.
Trikset med teksturmønster?
Hold flis stor nok til at folk ikke vil være i stand til enkelt å se repetisjon. (Bruk din egen dømmekraft her - åpenbart en flis størrelse som er 1200 x 1200 er virkelig ikke en "tile")
Hold teksturer subtil og lav kontrast slik at tekstur flekker ikke hoppe ut på mennesker .
I senere deler av denne opplæringen serien skal vi undersøke hvordan å lage noen avanserte teksturer ... men å runde opp i dag, la oss se på et veldig enkelt mønster med litt grunge til den. Trinnene.
- Åpne opp et nytt dokument (99 x 99px handler om hva vi brukte ... men leke seg med det basert på din egen grid dimensjonering)
Tegn en rektangel over hele dokumentet.
Bruk din grunnleggende Crosshatch mønster (ved hjelp av hvilken som helst farge combo du ønsker det).
Bruk en lett teksturert pensel på et tomt lag (satt til samme farge som mønsteret er bakgrunn), veldig lett (klikk én gang) male et lite penselstrøk over Crosshatch
Juster posisjonen og opacity til du får ønsket effekt
Og skjermbilder:..
Og sist men ikke minst, la oss ta en siste titt på de fire teksturer vi nettopp opprettet:
Flere tips (og bruke disse på nettet)
Bonus Tips 01: Når du lagrer din mønster (Edit > Define Pattern), må du huske å skjule bakgrunnslaget hvis du ønsker å lage en gjennomsiktig mønster. Noen ganger vil du faktisk ønsker å lagre bakgrunnsfarge, men andre ganger kan det være veldig nyttig å kunne overlappe et mønster til en annen farge uten å måtte gå tilbake til den opprinnelige filen og gjøre endringer. Selvfølgelig, bruker hvit eller svart som mønsteret farge er det beste alternativet når det gjelder å utvide brukbarheten av disse gjennomsiktige mønstre
Bonus Tips 02:. Vi har gått over hvordan du slår disse mønstrene i "Patterns" som kan brukes av Photoshop (eller Fireworks), men hvordan vi bruker dem på nettet? Easy faktisk - akkurat samme dem som GIF, PNG eller JPG-filer (jeg anbefaler PNG for gjennomsiktige mønstre). Så bare legge dem til din web-mappen og bruke dem som bakgrunnsbilder via CSS! Husk å sette "repeat" verdi hvis du vil ha dem til flis seg over hele siden.
Konklusjon
Alright! Så jeg håper du har fått litt noe ut av denne første økten. Nå skal du ha en god forståelse av de teoretiske konseptene bak hvordan mønstre fungere - og en teknisk forståelse av hvordan du kan lage og bruke dem i Photoshop. 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 vil vi vise deg hvordan du oppretter noen "bråkete" bakgrunnsmønstre som gjør at du banne på at du kunne berøre dem. Vi vil også berøre om hvordan du kan lage avanserte tekstur mønstre, spae baserte mønstre, gjennomsiktige mønstre, og mer i fremtiden.
Abonner eller sjekk tilbake på området for å se alle oppdateringene til denne serien som de skjer! Anmeldelser
Bruk mye prøving og feiling - Lagre mønster (Define Pattern) og deretter prøve det ut umiddelbart i et større dokument for å teste for det helhetlige utseendet Anmeldelser
Når du er i tvil, bruk de mest subtile fargekombinasjoner som du muligens kan. Mindre er definitivt mer i dette tilfellet, som du ikke vil at mønsteret å distrahere fra innholdet. Husk at selv svært subtile mønstre kan ha dramatiske effekter
Trinn 02:. Classic Crosshatch
For denne andre mønster, vi egentlig bare skal dreie vår linjer ved 45 grader. Husk at avstanden er avgjørende selv - så vi er nødt til å bruke litt kritisk tenkning for å få mønsteret til å gjenta:
Åpne et nytt dokument på 8px av 8px denne gangen. Hvorfor 8px og ikke 7px som vi gjorde før? Fordi vi ønsker at våre linjer til nøyaktig møte hvert hjørne, og hvis vi bruker, og hvis vi bruker 7px, linjene vil ikke helt fungerer.