A következő tanfolyam indul

2017. július 20.
farmer felirat

Photoshop pattern avagy a végtelenített Photoshop mintázat

Úgy gondolom, kicsit méltatlanul keveset beszélünk a patternekről, úgyhogy itt az idő kicsit körbejárni a témát.

A pattern gyakorlatilag egy végtelenített kép, mintázat, amit elsősorban hátterek kitöltésére használunk. Ez lehet egy teljes weboldal háttér, vagy akár csak egy grafika, szórólap, névjegykártya, logó. Azért előnyös a használata, mert így különböző méreteken, szélességekben, magasságokban is ugyanolyan eredményt garantál, nem kell a háttérkép méretezésével bajlódni – ez főleg a responsive webdesign elterjedésével egyre fontosabb szerepet kap, ráadásul a teljes weboldal háttere esetén nem kell egy óriási méretű képfájlt használni, hanem csak egy kis méretű (pl 250*250 pixel) képet kell végteleníteni.

A webdesignban patternek PNG fájlokat szoktunk használni. Ilyenkor a következő definíciót használjuk a css-ben:

body.custom-background { background-image: url(‘http://tedomainneved.hu/wp-content/uploads/2013/01/pattern.png’); background-repeat: repeat; background-position: top left; background-attachment: scroll; }

így megadjuk a forrást (url), a repeat-tel megadjuk, hogy ismétlődjön, a position-nal megadjuk a kezdőpontját, illetve a scroll-lal adjuk meg, hogy görgetés közben a háttár is mozduljon.

Patternt azonban nem csak a weboldal háttereként használhatjuk, hanem a weboldal különböző elemeinek is adhatunk mintázatot, például csak a wrapper-nek, header-nek, footer-nek, sidebar-nak…csak a képzeletünk szab határt J

Ne féljünk a különböző minták keverésétől sem, persze ezzel azért óvatosan kell bánni, hogy az eredmény ne legyen zsúfolt és ízléstelen. Nézzétek csak! Egy oldalamon 3 különböző patternt használtam: egyet a háttérnem, egyet a wrappernek és van egy harmadik a boxoknak. Csak kicsi a különbség a minták között, de harmónikusak és ezzel nagyon elegáns hatást érhetünk el.

 

A patterneket, mint már említettem más grafikai területen is használhatjuk – mégpedig a Photoshopban. A PS alaphelyzetben is tartalmaz patteneket, de ezek tetszés szerint bővíthetőek is. PS-ben a patterneket nem PNG hanem PAT formátumként használjuk. Egy korábbi bejegyzésben belinkeltem egy oldalt, ahonnan rengeteg csodaszép és elegáns pattern letölthető PAT formátumban, itt megtaláljátok.

Patternt (mintázatot) úgy adhatunk egy elemnek (réteg, mappa…), hogy a kívánt rétegre állunk, majd megnyomjuk a rétegstílus hozzáadása (fx – rétegek alatt) és ott kiválasztjuk a Mintaátfedés funkciót. Itt  kiválaszthatjuk a patternt, amit szeretnénk használni, sőt méretezhetjük is és az átlátszóságát is állíthatjuk. És ami még fontos, hogy itt a keverési módot változtatva további hatásokat érhetünk el (pl átfedés…).

TUDTAD? A patterneket nem csak a Mintaátfedésnél használhatjuk, hanem a bevésés és domborítás rétegstílusnál is, ha nem kontúrt, hanem a textúra bevésését választjuk. Próbáld ki, nagyon érdekes hatásokat lehet elérni így J

Nézzétek csak milyen jó kis anyag effektet lehet készíteni pár perc alatt:

A pattern fülét lenyitva találunk egy ki fogaskerék ikont, ha ezt megnyitjuk, további alap patterneket adhatunk a készletünkhöz, illetve a Minták betöltése funkcióval tölthetünk fel újakat is.

Igen ám, de mi van, ha a pattern amit találunk nem PAT  formátum, hanem PNG, vagy esetleg egy JPG képből mi magunk szeretnénk patternt készíteni?

A dolog nagyon egyszerű! Nyissuk meg PS-ben a patternt az eredeti PNG formátumban, majd kattintsunk a Szerkesztés/Mintázat meghatározása sorra. Adjunk nevet a mintának és mentsük. Ezek után már meg is találhatjuk a rétegstílusok között.

Arra még egy pár szóban kitérnék, hogy hogy is tudjuk átszínezni a patterneket. A patternek alaphelyzetben már színezettek, ezeket simán átszínezni nem tudjuk, ha például egy kék felületet szeretnénk mintázattal fedni, akkor a minta színe is át fogja fedni a kék színt, ezért a színezést utólag végezzük. Photoshopban erre az egyik legegyszerűbb mód a színezet/telítettség rétegkorrekció hozzáadása. Itt pipáljuk ki a színezés funkciót és már választhatunk is színt. Ha csak egy elemet szeretnénk színezni, akkor a rétegkorrekciót adjuk hozzá az elemhez, mégpedig úgy, hogy az elem rétege (mappája – vagy akár inteligens objektummá is alakíthatjuk) fölt tesszük a rétegkorrekció rétegét, és vágómaszkkal hozzáadjuk (a két rétegközzé kattintunk, miközben az Alt gombot nyomva tartjuk – ugyanígy oldható fel – amikor jó helyen állunk az egérmutató is megváltozik).

Csináltam néhány példát arra, hogy néz ki az átszínezés:

Azzal is lehet gond, hogy egy pattern mintázata túl világos, sötét, nem elégé látszik, ilyenkor a Szintek rétegkorrekcióval tudunk mélyíteni a sötét és világos színeket.

 

Végül íme néhány remek példa a patternek használatára weboldalakon:

 

 

Hozzászólások