Upeassa web-suunnittelumallissa on tullut tavanomainen käytäntö luoda malleja, joissa hyödynnetään taustamuotoja, jotka eivät kiinnitä huomiota, mutta niissä on vähän vaihtelua. Vaikka et luota verkkosivustojen malleja, pitäisi olla hyvä käytäntö haluta luoda kuvioita, jotka ovat hienovaraisia, mutta kauniita ja helppokäyttöisiä kaikissa tilaisuuksissa.

Tietenkin on helppo löytää tällaisia ​​kuvioita verkossa, joten sinun tarvitsee vain pelastaa ne ja käyttää niitä, mutta et halua rakastaa tietää, miten tehdä ne alusta - lisätä persoonallisuutta verkkoon design? No tänään olemme koonneet 5 lyhyttä oppituntia, joiden avulla voit tehdä viisi erilaista hienovaraista taustaa.

Nämä ovat Photoshop-tutoriaaleja, jotka ovat parasta aloittelijalle välivaiheille käyttäjille - selitän monia vaiheita nopeasti, jos sinulla on jo joitain tietoja Photoshopin lyhytleikkauksista ja lyhytkoodeista. Joko niin, toivon, että voit seurata, löytää jotain, jota et tiennyt aiemmin, ja oppia tekemään viisi hienovaraista ja saumatonta taustakuviota.

Ensimmäinen kuvio

Tätä ensimmäistä mallia halusin jäljitellä jotain, joka oli vähän grungy ja hieman tekstuuri.

Vaihe 1.

Tietenkin ensimmäinen asia, jonka haluat tehdä, on luoda uusi asiakirja. Tällä kertaa aiomme aloittaa asiakirjan koon 100 kuvapistettä 100 kuvapistettä.

Vaihe 2.

Kun teet asiakirjan, haluat valita taustan taustaväri. Voit valita värimallit tai nostaa värivalintasi valintaikkunan. Halusin mennä mukavaan tumman siniseen väriä tällä kertaa.

Vaihe 3.

Ensimmäinen asia, jonka aiomme luoda taustaamme, on lisätä melua. Avaa tämä valintaikkuna valitsemalla Suodatin> Melu> Lisää häiriö. Vaihda määrä (melu) 3 prosenttiin Guassian Distributionilla ja varmista, että Monokromaattinen ruutu on valittuna.

Vaihe 4.

Seuraavaksi aiomme käyttää suodatinta, joka on tarpeen jäljellä olevan grunge-ulkoasun luomisessa. Siirry Suodattimet> Harjanveto> Aksennetut reunat. Suodattimen galleria -valintaikkuna avautuu ja näyttää näin. Haluat pelata asetuksia, kunnes löydät haluamasi. Käyttämiäsi asetuksia: reunan leveys 6, reunan kirkkaus 18 ja tasoituksen 6.

Vaihe 5.

Jotta tämä malli saataisiin saumattomaksi, se, mitä aiomme tehdä, on kääri pikselit reunojen ympärille. Menemällä Suodata> Muu> Offset -toiminto tuodaan esiin valintaikkuna, joka on valmis auttamaan meitä siirtämään pikseleitä. Haluat käyttää määrää, joka on puolet pituudesta ja / tai leveydestäsi. Pituus ja leveys ovat 100px kumpikin, joten haluamme kääriä sen 50 pikselin tarkkuudella.

Vaihe 6.

Kuten vaiheessa 5 näet, kun valitset Offset your pixels, voit itse nähdä missä pikselit alkavat ja pysähtyvät. Voit puhdistaa tämän, haluat tarttua Healing Brush (J) palettiisi, Alt + Left Klikkaa paikalla taustalla ja maalata sen päälle. Kun tasoitat sen parantavalla harjalla, sen pitäisi näyttää paljon kuin edellä oleva kuva.

Vaihe 7.

Viimeinen vaihe kuvion luomisessa on kuvion määrittäminen. Siirry kohtaan Muokkaa> Määritä kuvio ja näyttöön tulee valintaikkuna, jossa pyydetään nimeä kuvio. Nimeä se mitä haluatte. Voit hakea kuvasi tarttumaan maalikauhasi (G) ja varmista, että se on kuviointitilassa. Uusin kuvasi todennäköisesti on viimeinen kuvio. Valitse se ja täytä kangas kuvioinnilla.

Lopullinen kuva

Toinen kuvio

Tämä toinen kuvio antaa meille mahdollisuuden käyttää joitakin geometriaa hienolla grunge-makuilla.

Vaihe 1.

Jälleen luonnollisesti aiomme luoda uuden asiakirjan noudattamalla edellisen lyhyen opetusohjelman vaiheita. Käytämme samaa kankaaseen 100px 100px. Tällä kertaa valitaan kaksi eri harmaa väriä. Ensimmäiselle värille valitaan vaaleanharmaa (# d7d7d7). Täytä kangas vaaleammalla värillä.

Toiselle värille valitaan tummempi harmaa (# c2c1c1). Myöhemmin käytämme tätä väriä riville.

Vaihe 2.

Valitse Line Tool (U), varmista, että olet muodotilassa ja muuta rivin painoa noin 2px.

Vaihe 3.

Luo uusi taso (Ctrl / Cmd + Shift + N). Napsauta hiiren kakkospainikkeella ja vedä linjatyökalu vinosti kulmasta kulmaan (pidä Shift-painiketta, jotta valo on tarkka).

Vaihe 4.

Luo toinen uusi taso. Tee samoin linjan työkalulla toiselle puolelle. Kun päätin linjat ja saitin ne oikein, löysin helpoin yhdistää nämä kaksi kerrosta. Jos olet muodotilassa, sen on oltava yhtä helppoa kuin viimeisimmän (ylätason) kerroksen korostaminen ja sen napsauttaminen Ctrl / Cmd + E yhdistämällä sen alla olevaan kerrokseen.

Vaihe 5.

Jotta asiat olisivat helppoa, haluan käyttää Trim-vaihtoehtoa poistamaan kaikki ylimääräiset tavarat, joita et näe. Voit tehdä tämän siirtymällä Kuva> Trim ja yleensä sinun pitäisi pystyä painamaan OK ja kaikki mitä et näe on poistettu.

Vaihe 6.

Kun linjat yhdistetään, haluat skaalata ne alaspäin, joten X: n ja reunojen välillä on vähän tilaa. Voit tehdä tämän painamalla Control / Cmd + T -painiketta ja pitämällä Shift- ja Alt-näppäimiä pitämällä mittasuhteet ja laskeaksesi sen keskeltä. Laske se alas niin kuin haluat.

Vaihe 7.

Halusin tehdä X-kuvastani hieman kohokuvioidun, joten kopioin kerros (Control + J) ja päätin tehdä siitä kevyemmän siirtymällä kohtaan Kuva> Kuvan säätö> Kirkkaus / Kontrasti. Kääntin kirkkaudeni koko matkan, kunnes se oli mukava vaaleanharmaa / valkoinen väri. Kun olet hyväksynyt värin, paina OK.

Vaihe 8.

Seuraavaksi haluat säätää kevyempää kerrosta haluamallasi tavalla. Tartu nuolipainikkeesi (V) ja nosta ne kerroksittain napsauttamalla nuolipainikkeita. Muutin myös kerrokseni ympäri muuttaa ulkoasua. Pelaa ympärillesi, kunnes saat jotain haluamaasi. (Päätin laittaa kevyemmän "X" kerroksen alle toisen ja nudging sen alas vain kerran).

Vaihe 9.

Kun olet valmis selvittämään, miten haluat sijoittaa kevyemmän ja tummemman "X", lisää kohinaa harmaalle taustalle. Se on liian hieno, joten mene Suodata> Melu> Lisää melu ja lisää vain 1% meluun. Pidä jakelu Gaussista ja varmista, että Monokromaattinen ruutu on valittuna.

Vaihe 10.

Kun olet tehnyt niin, aiot haluta muuttaa kuvasi kokoa. Siirry kohtaan Säädöt> Kuvan koko ja laske se niin pieni kuin haluat. Asetin minulle 75px 75px. Jälleen haluat määritellä kuvasi siirtymällä Muokkaa> Määritä kuvio, nimeämällä kuvio ja painamalla OK. Alla on, mitä lopullinen kuva haluaisi.

Lopullinen kuva

Kolmas kuvio

Tämä kuvio on edelleen hieman geometrinen, jossa on vähemmän havaittavissa olevaa vaihtelua.

Vaihe 1.

Tätä mallia varten aloitin suuremmalla kankaalla 150px 150px, koska aiomme olla hieman tarkempi tässä. Aloita valitsemalla todella tummanharmaa täyttääksesi kangasi.

Vaihe 2.

Kuten edellisessä kuvassa, aiomme käyttää Line Tool (U) -työkalua. Luo linjat vaaleammaksi. Sen ei tarvitse olla täydellinen. Jotain kuin yllä on hieno.

Vaihe 3.

Seuraavaksi halutaan saada harjaustyökalu (B) ja saada pehmeä harja maalata pehmeä harjattu suurempi viiva toisen vaalean harmaan viivan päälle. Käytin tummempia värejä tässä (musta) linjallani. Voit kokeilla erilaisia ​​värejä.

Vaihe 4.

Nyt aiomme pienentää tämän kuvion kokoa siirtymällä Kuva> Kuvan koko; Muutin sen arvoon 10px 10px. Kun olet muuttanut kokoa, haluat siirtyä Muokkaa> Määritä malli> nimeä kuvio ja napsauta sitten OK.

Vaihe 5.

Luo uusi dokumentti - tällä kertaa valitsin koon 615px 450px, vaikka sinun ei tarvitse olla niin suuri. Kaikkien kummankin puolen yli 200px: n pitäisi toimia. Tartu maalikauhasi (G), varmista, että se on kuviointitilassa (pudotusvalikossa on vaihtoehtoja "Etuala" ja "Pattern") ja tartu juuri tekemäsi kuviointiin. Täytä kangas kuvioilla kuten edellä oleva kuva.

Vaihe 6.

Nyt me teemme tavallisesti, mutta haluamme tehdä muutoksia rivien ulkoasuun. Siirry Suodatin> Harjausviivat> Kaltevia lyöntejä saadaksesi vaikutuksen, jota aiomme edetä. Jälleen, kehotan sinua pelaamaan, kunnes löydät jotain, jota käytit, mutta tässä ovat asetukset, joita käytin: Direction Balance of 73, Stroke Length of 6 ja Sharpness of 4. Paina OK saadaksesi muutokset.

Vaihe 7.

Tämä on lopputulos, mutta saumattoman mallin saamiseksi tartuin Crop-työkaluuni (C) ja valitsin neliön alueen (Shift + Left Click), joka tuntui olevan melko johdonmukainen minulle. Se on helppo silmämunalulla näin - haluat vain varmistaa, että vasemmanpuoleinen sivu alkaa, kun oikea puoli päättyy ja alkuun alkaa, kun alareunasi päättyy. Jälleen, kun olet löytänyt sopivan alueen, Muokkaa> Määritä kuvio ja kokeile sitä.

Lopullinen kuva

Neljäs kuvio

Lisää vähän likaa, jolla on johdonmukainen toistuva, mutta hienovarainen arvo.

Vaihe 1.

Neljäs kuvio aiomme käyttää toisen rivin tyyppistä alustaa. Jälleen aiomme aloittaa uudella dokumentilla, jonka koko on 100px 100px. Värille minulla on säännöllinen valkoinen tausta ja valitsin erittäin vaalean harmaan viivan värille. Aion napata Line Tool (U) ja piirtää vaakasuora viiva ylhäältä, sekä linja keskellä.

Vaihe 2.

Nyt tämä tulee olemaan hieman "likainen" kuin muut, joten haluamme lisätä siihen melua. Valitun valkoisen taustakerroksen kohdalla valitse Suodata> Melu> Lisää kohinaa ja muuta määrä 15 prosenttiin, Jakelu Gaussiksi ja tarkista monokromaattinen ruutu.

Vaihe 3.

Tätä varten taas aiomme koon hieman pienemmäksi, joten siirrymme kohtaan Kuva> Kuvan koko ja tätä varten muutin koko 15 pikseliä 15 pikseliä kohti. Kun olet tehnyt niin, luo kuvio Muokkaa> Määritä malli> nimeämällä kuvio ja lähettämällä muutokset. Käytä niin kuin haluat! Muista kuitenkin, että jos haluat, että kuvio näyttää vähemmän toistuvalta, yritä lisätä kankaan kokoa, jotta voit lisätä variaatiota.

Lopullinen kuva

Viides malli

Tämän viimeisen kuvion halusin yrittää jotain tummaa, vain vähän tekstuuria.

Vaihe 1.

Jälleen kerran olen luonut uuden asiakirjan, jonka koko on 100 kuvapistettä 100 kuvapistettä. Tätä viimeistä kuviointia varten aiomme valita hyvin tumman harmaan värin taustallemme.

Vaihe 2.

Hyppäämään oikealle, aiomme lisätä erittäin hyödyllistä melua siirtymällä Suodattimet> Melu> Lisää kohinaa: määrä 5%, yhtenäinen jakelu, kun monokromaattinen on käytössä.

Vaihe 3.

Halutun vaikutuksen luomiseksi täällä ajetaan Suodattimet> Sketch> Halftone Pattern. Voit vapaasti leikkiä täällä, mutta käyttämiäni arvoja olivat: Koko 1, Kontrasti 0, Dot-mallin tyyppi.

Vaihe 4.

Käytimme tätä Offset-ominaisuutta aiemmin, jotta saumamme saumattomasti. Aiomme tehdä saman asian uudelleen. Mene kohtaan Suodatin> Muut> Offset ja anna puolet korkeus- ja leveysarvosta. Varmista, että määrittelemättömät alueet ovat Wrap Around ja paina OK. Kun näin tapahtuu, haluat käyttää uudelleen Healing Brush (J) -painiketta yrittäen tasoittaa vähemmän saumattomia alueita. Kun olet saanut sen haluamaasi paikkaan, siirry kohtaan Muokkaa> Määritä malli> nimeä kuvio, paina OK ja käytä uutta kuvioasi.

Lopullinen kuva

Pitää mielessä…

Kun luot näitä kuvioita, kokeile kokeilemalla niin, että löydät jotain todella miellyttävää ja ainutlaatuinen. Kuten näet, on olemassa useita suodattimia ja suodatinperheitä, jotka voivat todella auttaa sinua luomaan ainutlaatuisia hienovaraisia ​​taustoja seuraavalle web-suunnitteluprojektille. Lisäksi, jos haluat muunnelmia enemmän kuvioihin, käytä suurempia kangaskokoja ja uudestaan, älä pelkää tutustua eri asioihin.

Mitkä ovat tekniikoita, joita haluat käyttää luomaan omaa hienovaraista taustaasi?