Bemutatkozás

blog.profile (1).png

Üdvözlöm! A nevem Turi Tamás. 2007 óta foglalkozom számítógépes képalkotással, Photoshoppal, Illustratorral, tipográfiával. Ezekben a témákban dolgozom, ismereteket terjesztek a blogon. Több mint húsz éven át aktív zenész voltam, így hang- és videoszerkesztésben is jelentős tapasztalattal és múlttal rendelkezem. A blogon a grafikán kívül még hang- és videoszerkesztési tippeket, trükköket sajátíthat el a tanulni vágyó. Szakmai ötleteken kívül néhány személyes bejegyzés is helyet kap a blogon.

• Legfrissebb
• Archívum
• Utolsó kommentek

Támogatás

Ajánlom magamat!

Már kapható!

audacity-ad.png

REGULA!

Hozzászólások

Címkék

3D (2) action (3) adjustment layer (1) adobe (4) alfa csatorna (2) anaglyph (1) animáció (3) áttetszőség (2) audacity (9) audió (1) audition (4) automatizálás (3) az oldalról (5) batch file processing (7) beállítások (3) betűtípus (2) blend tool (1) blog (2) bridge (1) cakewalk sonar (9) camtasia studio (4) cs4 (2) cs5 (2) cs6 (3) definiálás (2) ecsetek (4) egyéb (2) egyedi póló (1) élesítés (1) eszközhasználat (18) fájlműveletek (2) felhívás (2) fontok (5) fontszerkesztés (2) gimp (1) grafikus (1) gyorsmaszk (2) hang (1) hangszerkesztés (13) házi stúdió (3) HDR (1) hibaüzenetek (5) ikon (1) Illustrator (3) illustrator (20) illustrator videó (18) image ready (2) kábelek (1) kellékek (7) kiegészítések (6) kivágás (5) külföldi (1) különleges effektek (32) kütyük (13) látványterv (1) letmicro (1) logó (3) maszkolás (10) match color (1) mikrofon (1) mintázat (2) mockup (1) működési rendellenességek (8) nem működik (3) online eszközök (7) pattern (3) pen tool (4) photoshop (12) photoshop alapok (22) photoshop hibák (4) photoshop videó (38) photo filter (3) pólóminta (1) rajz (3) rendering (3) retusálás (1) Roland (10) speed up videó (2) Steinberg (1) stílusok (1) személyes (50) szimbólumok (1) szöveg (7) szövegszerkesztés (6) textúrák (4) töprengő (38) Trauma (1) troll (3) TRRS (1) tutorial.hu (3) vágómaszk (2) videó (1) videotutorial (6) villámtipp (1) vízjel (3) wacom tábla (3) YouTube (12) zene (31) zenei videó (8) zeneszerkesztés (18) Címkefelhő

Pattern (végtelenített mintázat) készítése fotóból

2010.01.29. 15:33 BonFire

Weboldalaknál viszonylag előnyös a patternek, vagyis végtelenített mintázatok használata, akár háttérként, akár más grafikai elemként. Ez azért jó, mert változó magasságú és szélességű oldalakhoz egyaránt felhasználható; valamint nem szükséges az egész lapméter képet elkészíteni, és azt feltölteni; elég csak a kis pattern elemet, amit aztán végtelenítve feltölthető vele az egész oldal.

 A tutorial elkészítése nem könnyű, de nem is túl bonyolult. Én egy interneten látott technikát fejlesztettem tovább – ugyanis az eredeti megoldás 100%-ig nem nyerte el a tetszésemet –; ezt szeretném most megosztani veletek.

A pattern szerkesztéséhez bármilyen tetszőleges kép felhasználható. Azonban tanácsos egy olyat választani, ahol apró szabálytalan minták sorakoznak, mint például egy virágos bokor, ahol nem tűnnek fel az utólagos manipulációk – lévén szabálytalan alakzatról van szó. Én a Photoshop Textures mappájából választottam a Wild Red Flowers nevű képet, de felhasználható bármilyen füves, kavicsos, kő textúrás, vagy éppen rozsdamarta fémfelületről készült kép, ha valaki a grunge stílust kedvelné. Az említett mappában lévő képekkel érdemes próbálkozni először, ha még sosem csináltunk ilyet. Később, ha már behunyt szemmel is megy, próbát tehetünk a lila százszorszépekkel is.

Ennyi bevezető locsogás után térjünk a lényegre!

1. Nyissuk meg a kiválasztott képet Photoshopban. Én egy 256×256 pixelest választottam. Jó, ha a kép mérete 2-vel osztható. Ha véletlenül nem ilyen lenne, méretezzük át. Egy sornyi vagy oszlopnyi pixelt nyugodtan feláldozhatunk, ha véletlenül páratlan számú lenne.

2. A Backgroundot dupla kattintással alakítsuk réteggé, majd Ctrl+J kombóval másoljuk le. Ezután a másolaton fogunk dolgozni.

3. Most jön a páros szám lényege: Mivel a kép 256×256-os, válasszuk ki a Rectangular Marquee Tool-t (Szögletes Kijelölő Eszköz), és a fenti eszköztárban állítsunk be fix méretet neki, mégpedig a kép dimenzióinak a felét. Esetemben ez 128×128 lett. Így könnyű lesz a kijelöléseket hajszálpontosan megejteni.

 A Photoshop kijelölő eszköztárja

4. Ezek után a Layer 0 copy nevű rétegen állva, kijelöljük a kép egyik szélét a képen látható módon, majd Ctrl+Shift+J-vel új rétegre vágjuk.

 

Ezután a kép másik oldalán készítünk kijelölést, és a fenti módszerrel ezt is új rétegre vágjuk. Figyelem! Az első művelet után automatikusan a Layer 1 réteg lesz az aktív. A következő kivágás előtt vissza kell állnunk a Layer 0 copy rétegre, hiszen csak abból tudunk kivágni. Ha nem így teszünk, egy hibaüzenetet kapunk a Photoshoptól, miszerint a réteg, amiből éppen ki akarunk vágni, történetesen üres! Tehát a kivágás és az új kijelölés között mindig álljunk vissza az eredeti rétegre.

 
A kép negyedrészén készítünk kivágást

Így szép sorban elvégezzük a 3 kivágást. Azért csak hármat, mert a negyedikre nincs szükség. Az eredeti rétegen csupán egyetlen képrészlet maradt.

 

5. A következő feladat, hogy a kivágásokat meg kell csereberélnünk. Mégpedig úgy, hogy amelyik a bal felső sarokban van, az átkerül a jobb alsóba átlósan, és viszont. A jobb alsó kerül a bal felső helyére. Majd a másik kettőt is felcseréljük. A jobb felső kerül a bal alsóba, a bal alsó pedig a jobb felsőbe. Átlósan.

Remélem, érthető. :)

Az ellenkező kivágásokat megcseréljük

 

6. Íme a felcserélt képrészletek. Ez nagyon jól prezentálja, hogy mutatna ez a kép, ha patternnek szeretnénk felhasználni. Ordít a képről, hol van összeillesztve. Ezt kell kiküszöbölnünk.

A következő feladat az lesz, hogy az eredeti képréteg középső részével kitakarjuk a középen látható csúnya illeszkedést.
 
A felcserélt részletek

7. Fogjuk meg a Layer palettánkon a Layer 0 nevű réteget, és húzzuk az összes többi réteg fölé.

8. Most pedig egy kijelölést fogunk festeni gyorsmaszk üzemmódban az ecset eszköz segítségével. Nyomjunk Q-t, majd kezdjük a kép középső részét vízszintesen és függőlegesen lefesteni feketével. Próbáljuk meg festés közben követni a levelek és virágok formáját.

A Photoshop Layer palettája legfelül az eredeti réteggel


Ha lehet, ne nagyon vágjunk ketté leveleket, hiszen annál hitelesebb lesz az egész, minél jobban sikerül ezeket kijelölni.

 

9. Amint az ábra is mutatja, festés közben a széle felé haladva egyre vékonyítjuk a vonalat. Mégpedig azért, mert ha nem ezt tesszük, akkor a végső képen pont ezek fognak kiugrani a képből a rossz illesztés miatt.
A kép közepén bármilyen vastag lehet, a széle felé pedig ügyeljünk a fokozatos elvékonyításra. A széleken szép lekerekítéssel oldjuk meg a festést.

Ha nagyjából elkészültünk a festéssel (úgyis kell még rajta utólag igazítani), akkor nyomjunk újra Q-t, kilépve a gyorsmaszk üzemmódból, majd invertáljuk a kijelölésünket Ctrl+Shift+I-vel. Ezután pedig a Layer paletta Add layer mask ikonjára kattintva adjunk hozzá egy rétegmaszkot. Így a kijelölésen kívül eső területek eltűnnek. A CS4-ben a Maszkok panelen a maszk szélein egy kis Featherrel (lágy perem) lágyíthatunk. De nem feltétlenül szükséges.

Photoshop gyorsmaszk üzemmód: így festjük meg a kijelölésünk körvonalait ecsettel

10. Íme a letakart terület, az alatta lévő felszabdalt és átcsereberélt rétegekkel. (A képen a szétvagdalt rétegek szándékosan áttetszőek, a jobb szemléltetés kedvéért, különben máris majdnem elkészültünk a patternnel.) Viszont a felső réteg maszkja még némi korrektúrára szorul. A fent említett szempontok figyelembevételével szépen kerekítsük le a látható részeket a széleken. Ha úgy kényelmesebb, váltogathatunk a maszk képének nézete és a normál nézet között, a Shift lenyomása mellett a maszk bélyegképére való kattintással. Visszavátás ugyanaz.

 A Photoshop Layer palettája a kimaszkolt területekkel

 

11. Elkészültünk a képpel. Már csak annyi a teendő, hogy összeolvasszuk a rétegeket és patternként elmentsük a Photoshopba.

Layer menü –>Flatten Image

12. Edit menü–>Define Pattern... A felugró ablakban megadhatunk neki egy szimpatikus nevet, vagy elfogadhatjuk, amit a Photoshop felkínál. Okézzuk le. Ezzel a pattern bekerült a többi patternünk közé.

Az elkészült pattern

A pattern definiálása Photoshopban

A biztonság kedvéért az utolsó lépést (Flatten Image) vonjuk vissza, és mentsük el a fájlt psd dokumentumban, ha esetleg később szerkeszteni valónk támadna rajta.

Ezek után nincs más dolgunk, mint leellenőrizni, jól dolgoztunk-e. Nyissunk egy nagyobb méretű dokumentumot, majd töltsük fel ezzel a mintázattal. Ha jól dolgoztunk, a szabályszerűségeket láthatjuk ugyan, de az összeillesztések helyét nem. (Klikk a képre a nagyobb mérethez.)

Természetesen a pattern – akárcsak az összes többi gyári – a rétegstílusokban is használható, ott még méretezni is tudjuk.

Remélem, nem volt túl nehéz ez a tutorial. Kellemes gyakorlást hozzá!

7 komment

Címkék: definiálás pattern textúrák

A bejegyzés trackback címe:

https://bonfire.blog.hu/api/trackback/id/tr161712706

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

pufancska 2010.01.31. 13:13:40

Egy újabb dolog amiről nem tudtam, de lehet, azért, mert a webszerkesztés nem az én művészetem. Én fogom magam, veszek egy oldalt, ahol minden megvan szerkesztve beledobálom a képeimet és kész. Lásd. egy ilyen oldalam. www.dddfoto.co.cc (na milyen kis reklámot csináltam magamnak, hú de szégyellem magam). Viccet félre téve köszönöm a tutorialt, tényleg nem tudtam, hogy mi az a pattern. Amúgy nem volt bonyolult megcsinálni. Még1szer köszi.

BonFire 2010.01.31. 14:02:21

@pufancska: És sem szerkesztek weboldalakat, azonban vannak helyek, ahol személyre szabottan lehet alakítani a profilodat. Ilyen a MySpace, ilyen a YouTube, és a közösségi oldalak nagy része.

Sokan már ott baxszák el, hogy beraknak egy 1280×4800 pixeles háttérképet, amire ugye legtöbb esetben nem is nagyon lenne szükség, hiszen az érdemi infó a dobozokban van. A háttér csak arra való, hogy mégse pucér fehér maradjon, ami a dobozokon kívül esik.

A pattern nagyon jó az ilyesmire, mert elég egy db jól optimalizált 256×256-os képet feltenni, és azt végteleníteni, máris kész a háttér. Ami ugye dinamikusan kő a tartalommal együtt, míg a fent említett 1280×4000 pixeles nem, hacsak nem kapcsolja azt is ismétlésre, de ha nem pattern, akkor bizony ott csúnya lesz az illeszkedés.

Azzal sincs semmi baj, ha kész sablonnal dolgozik az ember. Legtöbben nem tudnak vagy nem akarnak elmerülni a weboldalkészítés rejtelmeibe, de ez nem baj. Én is blogot használok, és az itt található sablont átírva alakítottam ki a saját elképzelésem szerint.

Ha a te oldalad nem is szól másról, mint a képek megmutatásáról, akkor tökéletesen elég egy flash slideshow az oldalra.

CSS-3 blogger · http://www.css-3.hu/ 2010.02.05. 18:33:05

Hasznos kis tutorial, mindig kíváncsi voltam, hogy lehet majdnem tetszőleges képből ilyen hátteret készíteni. Köszi.

pixmac3Cmanager · http://www.pixmac.hu 2010.02.06. 11:22:41

Es tök jó tutorial. Köszi szépen !

Üdv. István

Csabosz · http://bibliaprogramok.blog.hu 2010.02.23. 14:01:34

Köszönöm én is, alkalmazni fogom több helyen is!

bencekristof · http://indafoto.hu/bencen/image/7008711-69648486 2010.03.08. 20:18:21

Wow! Alig látszódik az illesztés (vagy semennyire)? Ezt a trükköt már ismertem, de nem ennyire kidolgozva! Nagyon jó!

BonFire 2010.03.08. 20:53:26

Közben valaki már felhívta rá a figyelmemet, hogy túlbonyolítottam ezzel a felszabdalással és csereberélgetéssel, mert egy egyszerű offset (eltolás) effekt ugyanerre az eredményre vezet. Igaza is van, de az a jó a Ps-ben, hogy egyvalamit többféleképpen is meg lehet csinálni.