Fotópapír hatás


Ez a technika jól jöhet minden olyan oldalon ahol 3d hatást akarunk elérni. Nem csak papír daraboknál használható, bármilyen formához ami árnyékot vethet.

Készítsünk egy 400×400-as dokumentumot. A háttér színét állítsuk szürkére (ezen jól kivehetőek a grafikák).

Rajzoljunk egy 250 széles és 270 pixel magas téglalapot, az új papír nevű rétegünkre. Az effekteknél adjunk hozzá egy felülről lefelé, fehérből vajszínűbe haladó színátmenetet (gradient overlay). A szerkesztés/alakítás/forgatás paranccsal (edit/transform/rotate) forgassuk el enyhén jobbra a téglalapot, csak hogy ne legyen annyira szabályos a kép.

fotó papír hatás

Menjünk vissza a rétegünk stílus lapjára, és adjunk rá még egy effektet: minta átfedés (pattern overlay). Válasszuk a mellékelt képen látható mintát. Ha nem találjátok, nyomjatok a kis nyílra az ablakban, és válasszátok a minta csoportot, aztán ok gomb. Az áttetszőséget állítsuk 20%-ra. Ezzel piszkos hatást adtunk a papírnak, így reálisabb lesz. Persze elhagyhatjátok ha nem kell kosz rá.

fotó papír hatás

Nyomjunk egy ctrl klikket (macen alma klikk) a papír rétegen, így kijelöljük azt. Hagyjuk aktívan a kijelölést és készítsünk új réteget, képdoboz néven, váltsunk is rá. Most válasszuk a kijelölés/módosítás/zsugorítás parancsot (select/modify/contract), és adjunk meg 5-ös értéket. Így egy ugyanolyan formájú, de 5 pixellel kisebb kijelölést kapunk, a kívül eső rész lesz a fénykép kerete. Töltsük ki tetszőleges színnel. Ez egy segédréteg lesz, ebben fog megjelenni a valódi képünk, amit könnyedén megváltoztathatunk bármikor.

fotó papír hatás

Ehhez egy vágómaszkot kell készítenünk, nézzük hogyan!

Töltsünk be egy képet amit a fényképre szeretnénk tenni. Jelöljük ki az egészet, másoljuk el, aztán illesszük be a sajátunkba. Tegyük legfelülre a réteget, és nevezzük el képnek. Figyeljünk rá hogy biztosan befedje a papírunkat!

Jöhet a trükk! Legyen kijelölve a kép réteg, és ctrl klikkel nyomjunk rá a képdoboz rétegre. A felugró menüben válasszuk a vágómaszk létrehozását (create clipping mask). Ha mindent jól csináltunk akkor a rétegeknek képen láthatóan kell kinézniük.

fotó papír hatás

fotó papír hatás

A lényege az ennek a technikának hogy a kép egy meglévő formán belül fog megjelenni, jelen esetben a képdoboz rétegünkön. Így ha szeretnénk egy másik képünket is átalakítani, egyszerűen betöltjük ide, és rámaszkoljuk a képdobozunkra. Egyébként a kép réteget továbbra is mozgathatjuk, torzíthatjuk, persze csak a képdobozon belül.

Eddig egész jó, jöhetnek a 3d hatások, természetesen mind fénnyel kapcsolatos.

Azt szeretnénk ha a fényképünk 3 helyen felemelkedne egy picit, ehhez árnyékra lesz szükség. Készítsünk másolatot a papír rétegről, nevezzük árnyéknak és tegyük a papír réteg alá. Az rajta lévő effekteket kapcsoljuk ki, és helyettük jöjjön színátfedés (color overlay) feketével. Mossuk el picit, szűrők/életlenítés/gauss életlenítés, (filters/blur/gaussian blur), 4-es értékkel.

Most jön a fontos lépés. Használjuk a szerkesztés/ átalakítás/ hajlítás parancsot (edit/transform/warp). Egy 4×4-es négyzethálót kapunk. 3 sarkot húzzunk kijjebb egy kicsit, a többi pontot pedig kicsit a kép alá. A cél hogy csak a 3 saroknál legyen árnyék, mintha felkunkorodnának. A réteg átlátszóságot 60-ra tegyük, mert 100-on az árnyék túlságosan sötét lenne.

fotó papír hatás

Tartsatok ki, már nincs sok hátra!

Jelöljük ki a papír réteg tartalmát (ctrl vagy alma klikk a rétegen), és hozzunk létre egy újat csillanás néven. Miközben aktív a kijelölés, válasszuk a színátmenet eszközt (gradient tool). Állítsuk fehérből átlátszóba haladónak, és a kép jobb alsó sarkából indulva húzzuk a kép közepe felé egy keveset, kb. az egész kép ötödéig. A réteg 80%-ban legyen átlátszó.

fotó papír hatás

Meg van még a kijelölés? Ha nem akkor jelöljük ki újra. Készítsünk még egy utolsó réteget árnyékolás néven. Ismételjük meg az előbbi lépést, ezúttal a bal felső sarokban és fekete-átlátszó színnel. Egy picivel kisebb volnalat húzzunk, a réteg átlátszóság legyen 25%.

fotó papír hatás

Ezzel készen is vagyunk. Ne feledjétek hogy a vágómaszk technikával cserélhető a fénykép tartalma. További jó kisérletezést!

A példafájl innen letölthető.

fotó papír hatás

Kapcsolódó bejegyzések:
  • Jöjjön egy újabb 3d hatású kivágás effekt, ezúttal egy papírlapból fogunk formát kimetszeni.Készítsünk egy 400×400-as dokumentumot, fehér háttérrel. Adjunk h …

  • Íme egy kis segítség, hogy hogyan lehet egy régi papírt előállítani, ami ráadásul még meg is égett :-)1.) Hozzunk létre egy tetszőleges nagyságú új képet. …

  • Az interneten különösebbnél különösebb menüket láthat az ember. A menüket külünböző programokkal készítik: ezek közé tartozik a photoshop is. A leírásból megtanu …

  • A mini bannerek használata egy elterjedt lehetőség a társoldalság jelzésére. Általában 88x31px a méretük, de a szép háttér készítéséhez nagyobb vászonra van szü …

  • Bárkivel megeshetett az a picike kis probléma, hogy egy mozgó autót, netán motort vagy bármi mást akart lefényképezni úgy,hogy a mozgás egy-két pillanata lát …

A cikket beküldte: Fajt Krisztián (http://fajtbros.blog.hu)

43 hozzászólás

  1. dewark says:

    Király az effekt, egy apró kérdés:
    hogyan lehet megcsinálni, hogy a kép széle recés legyen, ahogy az alulról a harmadik-negyedik képen látható?

  2. Tupacko says:

    Az nem a képen van, hanem a kijelölést látod :) Amúgy a válaszod egy keresésre van, Google: photoshop jagged effect.

  3. dewark says:

    Köszönöm :))

  4. Tcat says:

    Köszi, pont jól jött ez a trükk :)

  5. dd says:

    szia!
    jó a tutorial, de szerintem túl van bonyolítva. elég, ha fogod a képed, új réteget csinálsz alulra, és az új rétegen növeled a canvas size-t, így megkapod a fehér és a szürke háttereket is.
    a kérdésem az lenne, hogy hányas photoshoppal csináltad? nekem nyolcas van, de az edit -> transform menüben nincs olyanom, hogy wrap. a régebbi verzióban lehetett szintén ilyesmi torzítást csinálni, csak nem tudom, hogyan.
    segítenél?

  6. Harder says:

    A wrap inkább a cs3-ban jelenhetett meg, de most nincs előttem a program, úgyhogy nem 100%.

  7. fajtbros says:

    dd: Igazad van, biztos lehet egyszerübben is csinálni, de úgy gondoltam azzal hogy bonyolult, több technikát mutathatok be.
    CS3-ban készült, a régebbi verziókban nincs warp. Próbáld meg úgy, hogy kijelölöd egyenként a sarkokat, és a distort eszközzel húzod ki őket.

  8. Tupacko says:

    A warp tool PS CS2 (vagyis 9es PS) alkalmabol kerult a programba. [tudtommal ez volt az egyik ujdonsag]

  9. dd says:

    köszi szépen a segítséget! gondoltam, hogy csak a technikák miatt írtad így, de így is jó :)

  10. martins says:

    Hello! Cs2 ben nem működik a ctrl klikk kijelölés! 7.0-ban ment, de itt semmi!

  11. Tupacko says:

    Dehogy nem működik. Figyelj arra, hogy nem a rétegre kell kattintani, hanem a rétge nézőképjére (a réteg nevétől balra található négyzet).

  12. kukac says:

    Gyáááj hát ez nagyon jó :-D Óriási nem tudtam hogy mit akarok csinálni a képeimmel :D Köszi mindenki nevében is!

    Üdv: ΚцΚạĆ™

  13. martins says:

    Kösz, tényleg! 7.0 ban lehetett a nevére is, én meg cs2ben is oda próbáltam…

  14. berc says:

    Jó kis tutorial, sokat tanultam belőle. Egy kérdés: a cs2 akkor az most hányas photshop is? a 7.0-nál mennyivel újabb (ha újabb) sry a lámaságért x)

  15. fajtbros says:

    A CS2 volt a 9-es, CS3 pedig a 10.0

  16. orsi998 says:

    szia nagyon tetszik ez az effek csak a baj hogy nem boldogulok egy lépéssel! nekem sincs wrappom és igy meg vagyok lőve mer ezzel a distort-tal nem sikerül olyan hatást elérnem mint neked.Le tudnád irni hogy lehet elérni.
    Előre is köszi!

  17. Harder says:

    Olvasd el mit írtak/írtam fentebb, már volt ez a kérdés és volt rá válasz is.

  18. BonFire says:

    orsi998
    A Warp híján használhatod a Filters/Distort/Shear funkciót. Egy függőleges vonal görbítésével lehet torzítani a képet. Ez egy kicsit nehézkes dolog, mivel ezzel nem lehet vízszintes irányú görbítést egyidejűleg csinálni, és rácsot sem látsz, csak egy vonalat. Viszont egy következő lépésben, ha elforgatod a képet 90 fokkal, ismét elvégezheted ezt a műveletet, majd visszafordítod. Jobb nem lévén ez is megteszi, csak kicsit macerásabb a dolog.

    Még egy tanács. A görbítéssel nagyon finoman kell bánni, mert elég érzékenyen működik. Elsőre úgysem lesz olyan, amilyet szeretnél, de néhány próbálkozással biztos jó lesz. Ha hiányzik valamilyen effekt, próbálkozni kell. Egy kis találékonysággal minden megoldható. Ennek működnie kell, én is ezzel csináltam.

    Hajrá!

  19. fajtbros says:

    A torzitás (distort) parancs is megteszi warp helyett. Az a lényeg hogy az árnyék egyik sarkát jelöld ki, és úgy húzd kifelé. Aztán a többi sarkát ugyanígy. Csak ezután homályosítsd az árnyékot! Itt egy kép segítségül: http://www.winut.hu/blog/torzit.jpg

  20. b says:

    Na, tehát végül is kiderült, hogy csak találékonyságra van szükség, valamint, hogy több szem többet lát! Nekem, pl ez még eszembe sem jutott, de ez is egy jó lehetőség. A hátrányát viszont abban látom, hogy csak egyenesen lehet hajlítani, görbíteni nem. Lehet, hogy még ma kipróbálom a kettőt ötvözni egy mással. Tehát kijelölöm egyik sarkát, majd Distort, aztán a Shear-rel ívelem a sarkot.

    Most jut eszembe, hogy az árnyéknak szánt torzított felületet egy lemásolva készítek egy Clipping maskot (vágómaszk), és csak azt homályosítom, majd belepakolom az árnyék layert. Ennek az az előnye, hogy ha utólag nem tetszik az elmosás, csak a vágómaszkot kell törölni, és újat készíteni. A vágómaszkot és a belehelyezett árnyékot Multiply-ra kell állítani, az Opacity-t ugyanarra a százalékra.

  21. BonFire says:

    (Az előbbi “b” hozzászólás az enyém volt, csak rosszul írtam be a nevet).

    Na, végigjátszottam a lehetőségeket. Tehát akinél hiányzik a Warp torzítás, az figyeljen- Ez a legjobb módszer.

    1. Ha megvan a képkeretünk, kattintsuk körül a négy sarkát Pen Tool-lal. Majd a négyszög olalaira is kattintsunk, görbítő pontok létrehozásához.
    2. Ezután a Pennel létrehozott Path-unk a sarkok kihúzásával ugyanolyan jól alakíthatóak, mint a Warp-pal. (csak négyzetháló nélkül)
    3. Készítsünk új réteget, majd a Path fülön jobb gombbal kattintva a Work Path-ra válasszuk a Fill Path-ot, és töltsük ki feketével.

    A Pen Tool használatához itt lalálsz segítséget.
    http://www.tutorial.hu/kep-atrajzolasa-pen-tool-lal/#more-582

    A Pen Tool eszköznél a meglévő horgonypontokat Ctrl-lal húzhatod arrébb, valamint a görbék segédvonalait is ezzel húzgálhatod. Az Alt-tal a görbe segédvonalai külön-külön hajlíthatóak, valamint a szögletes csúcsokat húzva görvévé alakíthatóak. Vezérllőbillentyűk nélkül a meglévő horgonypontot szüntetheted meg rákattintással, vagy a vonalra kattintva új görbét adhatsz hozzá. Egy kicsit gyakorolni kell, de később nagy hasznodra lesz.

    Remélem ez segít. Jó munkát!

  22. fajtbros says:

    Grat hozzá, azt hiszem ez a tökéletes megoldás :o) Vagy feltenni a CS3-at ;o)

  23. BonFire says:

    Köszi! Ez jólesett!

  24. PiSti says:

    Szia
    Sikerült megcsinálnom, de a leírásod alapján nem volt könnyű menet.
    Lehetne kicsit szájbarágósabb is, hogy az egyszerű emberek is megértsék, mint én.
    Szépen pontról pontra és rétegről rétegre haladva a leírásban.
    Utólag már pár perces dolog megcsinálnom. Elsőre viszont egy órát itt hunyorogtam mire felfogtam mikor mire gondolsz.
    Sok leírást megcsináltam már, hála nektek akik írtok, de ezzel komolyan elment az idő.

  25. BonFire says:

    Sajnos, ez már csak ilyen program, sok türelem és idő kell hozzá. Néhány kép percek alatt elkészíthető, néhányba viszont a gyakorlottaknak is beletörik a bicskája. A különbség csak ott van, hogy egy gyakorlott használó valószínűleg nem adja fel egykönnyen, és általában addig próbálkozik, amíg nem sikerül neki, vagy rá nem jön, hogy a leírásban hiba van, vagy éppen kimaradt belőle egy fontos lépés.

    Ezeket jelezni is kell, mert sok admin, aki mondjuk három napja szerkeszt egy leírást, lehetséges, hogy elsiklik fölötte. Egyszerűen azért, mert ő már milliószor átnézte, mielőtt publikálta volna.

    De egy haladóknak szánt tutorialba kezdőként tényleg nem érdemes belefogni, mert akkor az embert csak sorozatos kudarcok érik, és napirendre tér fölötte, hogy “Ez nekem úgysem fog menni”. Ez nem jó. Többek között azért vannak a tutorok kategóriákra osztva, hogy úgy tanuljunk.

  26. fajtbros says:

    Sajnos nehéz olyan tutort írni ami a profiknak valami újat mutat, és egy kezdő is könnyedén megcsinálja. Úgy gondolom ha nehéz is volt, megoldottad, ezzel is fejlesztetted magad. Csak folytasd így tovább!

  27. orsi998 says:

    BonFire köszi szépen! :) tényleg ügyeskedni kell de rámfér a gyakorlás;)

  28. orsi998 says:

    fajtbros köszi neked is
    végre meg tudtam csinálni huh…:) áhh imádom ezt az oldalt :)

  29. fajtbros says:

    Grat hozzá, csak így tovább!

  30. BonFire says:

    orsi998
    Na látod, ez a jó hozzáállás. Én is imádom ezt az oldalt. Tavaly nyár óta van internetem, és a Photoshop nagy részét innen tanultam meg. És még a mai napig is szívesen látogatom, mert mindig találok rajta újakat. Türelem és kitartás. Ez a két kulcsszó, és nyert ügyed van!

  31. Ferike says:

    hello! nekem enm sikerült a kép megnyitása emrt akkor új lapon jelenik meg:S tuti én vagyok a béna de valaki le tudná irni részletesebben hogy hogy kell? előre köszi
    Csak igy tovább!!

  32. fajtbros says:

    Melyik képről van szó?

  33. DamionKutaeff says:

    Hello everybody, my name is Damion, and I’m glad to join your conmunity,
    and wish to assit as far as possible.

  34. BonFire says:

    All right! But how did you get here?

  35. vizior says:

    Welcome Damion!

    tudja vki, hogy mit jelent az ‘assit’?

  36. fajtbros says:

    Szerintem assist akart írni

  37. evadraga says:

    Hali!
    Megcsináltam, mostmár csak azt nem tudom, hogyan cseréljem ki a képet alatta.
    Próbáltam a FILL parancssal a kép layeren állva, de azzal csak pattern-t tudtam berakni.

    Elmentettem a projectet, és várom a válaszotokat!
    Előre is köszi, üdv: Éva

  38. BonFire says:

    Attól függ, mit akarsz csinálni, mert a posztból nem derül ki egyértelműen. A fill csupán kitölti az adott réteget. Viszont ez a kitöltés nem csak sorminta (pattern) lehet. Lehet szín vagy színátmenetes kitöltés is.

    A “képet alatta” úgy kell kicserélni, hogy megnyitsz egy másik képet, és egyik ablakból egyszerűen áthúzod a tartalmat a másikba a mozgató eszközzel [V], majd megcseréled a rétegeket a Layer palettán ugyancsak vonszolásos módszerrel. Amelyik réteg fölöslegessé vált, szintén vonszolásos módszerrel bele lehet húzni a paletta alján található kukába.

  39. evadraga says:

    Kedves BonFire!

    Köszönöm a válaszod, lehet hogy nem voltam egyértelmű és csak én tudtam, mit akarok, illetve, mit nem tudok? ;)
    Na, gyötörtem magam, mert nem szeretem a megoldatlan helyzetetek, problémákat.
    “Jöhet a trükk! Legyen kijelölve a kép réteg, és ctrl klikkel nyomjunk rá a képdoboz rétegre. A felugró menüben válasszuk a vágómaszk létrehozását (create clipping mask).”
    Ezt csináltam meg az ÚJ képpel, amit be szerettem volna illeszteni a lik-ba :)

    SIKERÜLT, és nagyon örülök ennek! :) Ma is tanultam (megint) valamit.
    Üdv: Éva

  40. BonFire says:

    Örülök, hogy annak ellenére, hogy két malomban őröltünk, sikerült megoldani a feladatot. Ha még mindig nem lenne minden teljesen világos, olvasd el ezt: http://bonfire.blog.hu/2008/05/09/vagomaszk

    Ugyanez történik, csak én egy kicsit szájbarágósabban írtam le.

  41. Sven says:

    Sziasztok!

    A metrón pont van egy Zrínyi Miklós Nemzetvédelmi Egyetem-es reklám, ahol tökéletesen ugyanez az effekt van felhasználva, és pont ezen gondolkodom napok óta, hogy ez így helyes-e. Hisz ha mondjuk egy asztalról “hajlik fel” picit a fotópapír, akkor a felhajlás miatt nem lehet szabályos téglalap a kép, vagyis nem lehetne egyenes a széle, nem?

  42. BonFire says:

    Sven, a szerző részéről ezt hívják művészi szabadságnak, részedről meg szőrszálhasogatásnak. :D Egyébként a szerző nagyon ügyesen eljátszott a fénnyel és az árnyékkal, hogy a végeredmény tökéletes optikai illúziót keltsen. Számomra egyértelműen görbének tűnik, noha tudom, hogy nem az. De szögmérővel még nem mértem.

Szólj hozzá
a Fotópapír hatás c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>