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 har jeg gleden av å starte en screencast-serie jeg har lyst til å gjøre en stund nå: Hvordan lage webmønstre som fungerer i både Photoshop og på nettet. Vi skal gjøre dette som en serie, med utgangspunkt i de mest grunnleggende mønstrene og flytte opp til noen av de mest avanserte bakgrunnsmønstrene vi kan finne, inkludert komplekse teksturer.
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.
La oss være klare: Ideene bak å lage bakgrunnsmønstre er alle ganske enkle - de fleste mønstre tar bare noen få skritt og kan resultere i bemerkelsesverdig effektive teksturer. Faktisk er de verste mønstrene for nettet vanligvis de som "prøver for hardt" ved å forsøke å passe for mye inn i hver flis.
Hvorfor er det dårlig? Fordi bakgrunnsmønstre (i de fleste tilfeller) skal være subtile og ikke-brennende. Sterke teksturer distrahere brukerens oppmerksomhet vekk fra den virkelige stjernen på ethvert webdesign: innholdet.
Så hvorfor bruke teksturer i det hele tatt? Fordi, brukeren riktig, gir bakgrunnsmønstre et nettsted en følelse av karakter og personlighet som kan blåse bort flade farger. Mønster og teksturer gir innholdsdybde og separasjon, bidrar til å utvikle hierarkiet, og kan gi nettsteder (som er flate av deres natur) en følelse av taktil følelse. De kan gjøre et nettsted føles polert, raffinert og profesjonelt - noe som bidrar til å understreke innholdet og gjøre det minneverdig.
Mens ideene bak å lage mønstre er enkle? få dem til å fungere perfekt kan ofte være vanskelig. Vær sikker på at denne opplæringsserien skal vise deg alle de triksene du noensinne trenger for å lage dine egne tilpassede variasjoner å bruke i dine egne prosjekter. Vi vil til og med gi ut noen freebies underveis!
I dag er det bare dag ett i vår serie - så vi skal begynne med noen uber-enkle mønstre bare for å få hjernen vår i bevegelse. Vi starter med et enkelt nett, flytter til et kryssmønster, viser hvordan du lager et diagonalt mønster, og da får vi litt funky ved å vise deg hvordan du legger til litt subtil farge og tekstur.
Klar? La oss gjøre dette!
Videodelen av denne opplæringen vil bidra til å utjevne alle trinnene du ikke følger med i den skriftlige versjonen (under). I tillegg er det også bare hyggelig å se hvordan noen andre jobber, så nyt!
Fordi noen av disse mønstrene kommer til å være vanskelig å se på en web-oppløsning screencast, gir jeg også en trinnvis skriftlig opplæring. Du kan se videoen eller den skriftlige versjonen (eller begge deler!), Det er ganske mye opp til deg, hvilken måte du lærer best. La oss dykke inn?
Grunnmønsteret er omtrent like enkelt som det blir, så det er et fantastisk utgangspunkt. La oss begynne med å åpne et dokument som er 7px ved 7px.
Hvorfor denne størrelsen? Fordi vi skal lage et rutenettmønster med en 1px linje som går nedover sentrum? og vi vil ha en like stor plass på hver side av nettet. Dette er ikke obligatorisk for dette mønsteret (så lenge nettverket er et perfekt firkant, vil det fortsatt gjenta sømløst), men det er en vane vi vil ha når vi beveger oss inn på de mer avanserte mønstrene senere.
Trinnene er enkle:
Her er skjermbildene:
Når du har mønsteret ditt akkurat der du vil ha det, vil vi lagre det som et mønster. For å gjøre det, velg fra toppmenyen i Photoshop "Rediger> Definer mønster". Dette lagrer automatisk dokumentet ditt som et mønster som kan brukes inne i"Layer Styles> Mønsteroverlegg"bibliotek.
Nå som vi har det grunnleggende gjort, kan du tinker med dette mye. Vi brukte et 7px-dokument, men hvis du ønsket et strammere rutenett, kunne du gå ned til 5px eller 3px. Alternativt kan du bruke en større dokumentstørrelse hvis du ville ha et større åpent rutenett. Linjebredden, avstanden og fargene er helt opp til deg.
Tips: Farge som kan se subtil (lav kontrast) på mønsterdokumentet, kan se altfor intens ut når du bruker dem som et faktisk mønster i et annet større dokument. Trikset her er å:
For dette andre mønsteret skal vi egentlig bare rotere våre linjer med 45 grader. Husk at avstand er avgjørende skjønt - så vi må bruke litt kritisk tenkning for å få mønsteret til å gjenta:
Åpne et nytt dokument på 8px med 8px denne gangen. Hvorfor 8px og ikke 7px som vi gjorde før? Fordi vi vil at våre linjer skal nøyaktig møte hvert hjørne, og hvis vi bruker og hvis vi bruker 7px, vil linjene ikke fungere helt.
Her er skjermbildene:
Vær særlig oppmerksom på det siste skjermbildet, da det illustrerer hvordan du virkelig kan endre hele følelsen av rutenettet ved å plassere den ut eller kutte ned på den. Et tett crosshatch mønster kan gjøre en god tekstur like bra som et stort, saftig mønster. Spill med avstanden og linjebredden til du er fornøyd med resultatene.
Dette neste mønsteret er ganske enkelt, da det egentlig bare bruker krysshalsemønster ideene (bruker bare en linje i stedet for to selvfølgelig!). Enkle diagonale linjemønstre er en fin måte å legge til subtil tekstur bak tekst (for eksempel overskrifter) fordi den legger til tegn uten at teksten blir ulæselig.
For diagonallinjen, fortsett og begynn med et crosshatch-dokument - men denne gangen fjerner du en av linjene før du lagrer mønsteret ditt (Rediger> Definer mønster). Dokumentstørrelsen i dette tilfellet skal være avgjørende, da den direkte korrelerer til hvor tett strikket linjene vil være.
Skjermbildene:
Det andre bildet viser hvordan du kan få et veldig bredt spekter av mønstre ved å justere avstanden mellom dokumentet og linjens vekt og retning. Ikke for vanskelig, huh?
Tips: For puristene der ute, kan du få en mye renere, skarpere linje ved å gå gjennom linjen din - piksel etter pixel - og fjerne noe av "feathering" som vi så fra Photoshops rendering. Dette skjer hovedsakelig fordi Photoshop tegner en anti-aliased linje der vi ideelt sett ønsker en pixelert linje. Pikslene er så små, men i de fleste tilfeller spiller det ingen rolle. Her er bare et skjermbilde av den superskarpe versjonen bare hvis du vil se den.
OK, så vi har det grunnleggende nede! La oss nå legge til litt mer personlighet ved å bruke to hurtigere teknikker: Legge til farge og tekstur.
Fargedelen er sannsynligvis ganske enkel hvis du ikke har funnet ut det enda. Bare legg til farge i bakgrunnen og linjene til du har ønsket effekt. Mine tips: Hold kontrasten lav - det er ikke noe mer motbydelig enn et altfor levende mønster.
Teksturdelen er en wee-bit vanskeligere. Tekstur har alltid vært en notorisk vanskelig ting å mestre på nettet. Hvorfor? Fordi tekstene i de fleste tilfeller gjentar? og de fleste kan se det en kilometer unna. Selv høyoppløselige teksturer vil gjenta og vise ut fliseparametrene, med mindre du bruker store bilder (for eksempel 1920 x 1080)? som ikke alltid er en praktisk løsning.
Trikset med teksturmønstre?
I senere deler av denne opplæringsserien skal vi undersøke hvordan man lager noen avanserte teksturer? men å rulle opp i dag, la oss se på et veldig enkelt mønster med litt grunge til den. Stegene:
Og skjermbildene:
Og sist men ikke minst, la oss ta en siste titt på de fire teksturer vi nettopp har laget:
Bonus Tips 01: Når du lagrer mønsteret ditt (Rediger> Definer mønster), husk å skjule bakgrunnslaget hvis du vil opprette et gjennomsiktig mønster. Noen ganger vil du faktisk lagre bakgrunnsfarge, men andre ganger kan det være veldig praktisk å kunne legge et mønster på en annen farge uten å måtte gå tilbake til den opprinnelige filen og gjøre endringer. Åpenbart, å bruke hvitt eller svart som mønsterfargen er din beste innsats når det gjelder å utvide bruken av disse gjennomsiktige mønstrene.
Bonus Tips 02: Vi har gått over hvordan du kan slå disse mønstrene til "Patterns" som kan brukes av Photoshop (eller Fyrverkeri), men hvordan bruker vi dem på nettet? Enkel faktisk - bare de samme som .GIF, .PNG eller .JPG-filer (jeg anbefaler PNG for gjennomsiktige mønstre). Deretter legger du bare til dem i webmappen din og bruker dem som bakgrunnsbilder via CSS! Husk å sette "repeat" -verdien hvis du vil at de skal flisse seg over hele siden.
Ok! 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 fungerer - og en teknisk forståelse av hvordan man lager og bruker 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 nettopp begynt.
I neste nivå av denne serien viser vi deg hvordan du lager noen "støyende" bakgrunnsmønstre som gjør at du sverger at du kan røre dem. Vi vil også berøre hvordan du lager avanserte tekstmønstre, spa-baserte mønstre, gjennomsiktige mønstre og mer i fremtiden.
Abonner eller sjekk tilbake på nettstedet for å se alle oppdateringene til denne serien når de skjer!
Accentsconagua