Photoshop tutorial: Ako vytvoriť vlastný pattern

Chcete na svoju webovú stránku vytvoriť pozadie zložené z viacerých rovnakých obrázkov? Potrebujete tzv. pattern. Zaberie vám iba minimum miesta a vyplní celú plochu ako veľké pozadie. Problém však je s „napasovaním“ tohto obrázka pri opakovaní vedľa seba. Nie vždy to bude sedieť a práve preto vám dnes ukážem ako na to.

Predpokladám, že už máte otvorený Photoshop. Ak nie, tak je na čase ho otvoriť. Vytvorte nový dokument s rozmermi štvorca, ktoré sa nám budú dobre prepočítavať na polovicu. Takže 100,200,300,… V nasledujúcej ukážke som zvolil veľkosť 200 x 200. Farbu pozadia si zvoľte ľubovoľnú. Ďalej si presunieme pomocné čiary na 100 px horizontálnej polohy a takisto na 100 px vo vertikálnom smere.

Vyberiem jeden zo základných ornamentov vo photoshope (Custom Shape -> Ornaments). Môžete si zvoliť iný, ale nezabúdajte, že musí byť symetrický.

Vytvorte si novú vrstvu (Ctrl+Shift+N) a do stredu tohto vzniknutého kríža nakreslíte zvolený ornament. Pri kreslení držte klávesu Shift, aby sa ornament nezdeformoval. Dbajte nato, aby bol umiestnený presne v strede. Pomôžte si (súčasne ako ho kreslíte a držíte Shift) medzerníkom, ktorý keď stračíte môžete voľne presúvať tento ornament. V prípade, že po pustení myšky nie je umiestnený presne v strede, nevadí, môžete ho premiestniť Move Toolom (klávesa V).

Odstránime tie 4 čiary, ktoré nám to celkom rušia. Použijeme základný nástroj na mazanie Gumu (Eraser Tool – E). Pri kliknutí gumou na obrázok vás výzve, že obrázok sa musí zmeniť na Smart Object, aby sa dali jeho časti gumovať – kliknite na Áno/Yes.

Teraz vytvoríme ešte krajší kvet tým, že túto vrstvu zduplikujeme použitím klávesy Ctrl+J. Vytvorí sa vám úplne ten istý kvet na tom istom mieste, tak ho musíte trochu natočiť. Zvolte Edit -> Transform -> Rotate. Pri otáčaní držte Shift a vytvorte následujúci obrázok.

Teraz tieto dve vzniknuté vrstvy spojte, aby sme ich mali akoby v jednom obrázku. Zvýraznite vrstvy pomocou Ctrl a kliknite pravým na Merge Layers

Dôležité je, aby ste teraz vypli pomocného sprievodcu čiar, ktorý by nám výber automaticky umiestňoval, čo si neželáme. Preto klikajte na View -> Snap To -> Guides (odznačte ak je zaznačené). Zvoľte si nástroj na výber obdĺžnika (klávesa M) a pravú hornú časť označte čo najpresnejšie. Kliknite na výber pravým a potom na Layer via Copy.

Tento krok opakujte až kým vám nevznikne následujúci obrazec. Otáčajte a kopírujte, nebojte sa. Nezabudnite však vytvárať nové vrstvy cez spomínaný krok Layer via Copy.

Všetky vrstvy, z ktorých ste poskladali ornament zlúčte rovnako do jednej ako sme si hovorili vyššie.

Teraz máme obrázok, ktorý si môžeme vyfarbiť ak sa nám zvolená farba nepáči, alebo môžme zjemniť jeho farby tým, že zvolíme priesvitnosť na požadované percentná. Ja som dal Opacity slabých 10% čo bude postačovať, aby to na stránke nepôsobilo rušivo. Pozadie nie je to dôležité, čo má lákať na stránke svoju pozornosť.

Tak a vytvorili ste obrázok, ktorý môžete použiť na pozadie vašej webstránky.

Nezabudnite však na CSS kód, ktorý musíte zvoliť, aby sa ornament opakoval.


background-image: url(images/vas-vlastny-pattern.gif);
background-repeat: repeat;


Je veľmi dôležité, aby ste to robili presne, pretože umiestnenia kúska ornamentu o pixel vedľa spôsobí nepekné narušenie zloženého pozadia. Preto si uložte PSD súbor v čase pred spojením všetkých vrstiev. Ups toto som mal asi povedať skôr, ale tento projekt nie je až tak zložitý, aby ste sa nemohli vrátiť späť.

Ak sa vám návod páčil, môžete ohodnotiť článok nižšie hviezdičkami.
Ak máte nejaké otázky, napíšte komentár a pokúsim sa vám pomôcť :)