Hogyan készíts graffitit Photoshop-ban? (közép szintű Photoshop tutorial)

Szunyogh Krisztina képe



A graffiti gyökerei a hatvanas évekre nyúlnak vissza. A New York-i fekete negyedben élő fiatalok festék spray-vel firkáltak vagonokra, kirakatokra, metró szerelvényekre.
Kezdetben monogramokat firkáltak, mely legtöbbször területkijelölésre szolgált, később sajátos önkifejezési mód vált belőle. Egy még markánsabb képet választottak ebben a Photoshop graffiti tutorial-ban a hatás bemutatására.

A webdesign területén leginkább a grunge stílusba illeszkedik. Kötődik hozzá egyfajta nagyvárosi gettó érzés, piszkosság, szubkultúra lázadás.



A fenti kép elkészítéséhez az alábbi két fotót használtunk fel.



A téglafal fotót a Freepik-ről szereztük be, letölthető innen




Ma már street art-ról és vagy urban art-ról is beszélhetünk. Művészi utcai falfestmények születnek világszerte. Ezek a bámulatos alkotások a városképet színesítik és az omladozó tűzfalak látványán is sokat javítanak.


A photoshopos graffiti hatáshoz a háttér omladozó téglafal, tűzfal, garázsfal legyen. A portréhoz pedig mindenképpen valamilyen dögös, vagány, lázadó stílusú karaktert keress. A lány fotóját egy divattal foglalkozó oldalon találtuk.

1 A fénytörési térkép elkészítése

1. lépés


Nyisd meg a Téglafal fotót a Photoshopban, készíts belőle másolatot (Ctrl + J).

2. lépés


A másolt rétegen állva jobb klikk és válaszd a Réteg másolása (Copy layer) opciót. A felugró ablakban a legördülő menüben keresd meg az Új lehetőséget. Kattints rá és nyomd meg az OK gombot.

3. lépés


Így létrehoztunk egy új Photoshop dokumentumot.Ezen dolgozunk tovább.
Lépj a menüsorról a Szűrő>Életlenítés>Gauss-életlenítés… (Filter>Blur>Gaussian Blur…) parancsra és egy 3 px sugarú életlenítést alkalmazz.

4. lépés


Ezután lépj a Kép>Korrekciók>Telítettség csökkentése (Image>Adjustments>Desaturate) opcióra a menüsoron. Ezzel a paranccsal szürkeárnyalat-értékekre alakítja át a színes képet

5. lépés


Ha ezzel készen vagy, lépj a Kép>Korrekció>Szintek (Image>Adjustmenst>Levels) lehetőségre és állítsd be a következőket.

6. lépés


Az eredmény a következő:

7. lépés


Most elmentjük ezt a dokumentumot. Kattints a menüsoron a Fáj>Mentés másként (File>Save as) opcióra és mentsd el PSD fájlként. Nevezd el Fénytörési térképnek. Ha elkészültél bezárhatod ezt a Photoshop dokumentumot.

2 A graffiti kép előkészítése

1. lépés


Nyisd meg a lány fotóját, előkészítjük a graffiti hatáshoz. A lányt kivágjuk a háttérből és ehhez az eszköztárról válaszd a Gyors kijelölés eszközt (Quick Selection Tool). Jelöld ki a lányt.

2. lépés


Ezután kattints a menüsoron a Kijelölés>Szegély finomítása (Select>Refine edge) parancsra. A felugró ablakban javítható a kijelölés szegélyeinek minősége. Igazíts a kijelölésen és OK gombbal fejezd be a finomítást.

3. lépés


Ezután Ctrl + C gombbal másold és egy Ctrl+V gombbal illeszd be egy új rétegre a kijelölt terület. Majd húzd és fogd módszerrel tedd át a kivágott lány rétegét a téglafalas dokumentumba. A lányt helyezd el bal oldalon.

4. lépés


A lány rétegen állva jobb klikk és alakítsd át Intelligens Objektummá (Convert to Smart Object. Ezután a Ctrl+T gombbal hívd elő a Szabad átalakítást és nagyítsd meg a lány fotóját

3 A graffiti effekt

A lány rétegén állva Rétegsílust adunk hozzá (Add layer style).
A Körvonalazás (Stroke) stílust állítsd be a következőképpen.

  • Méret (Size): 2 px
  • Poziciója (Position:) Kívül (Outside)
  • Szín (Color): fekete
Körvonalazás



Ezután válaszd a menüsorról a Szűrő>Szűrőgaléria (Filter>Filter Gallery) parancsot. Keresd meg a Művészi hatások (Artistic) között a Freskó (Fresco) hatást. Az alábbi paramétereket állítsd be.

  • Ecsetméret (Brush size): 1
  • Részletesség (Brush detail): 10
  • Textúra (Texture): 1
Szűrő alkalmazása



Ha ezzel elkészültél, kattints jobb klikkel a rétegen, és alakítsd át Intelligens Objektummá (Convert to Smart Object).
A réteg Keverési módját (Blend mode) állítsd át Átfedésre (Overlay), a Fedettséget (Opacity) pedig 80%-ra.

Az eredmény a következő






Most válaszd a menüsorról a Szűrő>Torzítás>Fénytörés (Filter>Distort>Displace) parancsot. A felugró ablakban állítsd be a következő paramétereket.

  • Vízszintes skála (Horizontal scale): 5
  • Függöleges skála (Vertical scale): 5
  • Méretre nyújtás (Strech to Fit)
  • Szegélyképpontok megismétlése (Repeat Edge pixels)

Kattints az OK gombra. Megnyílik a fájlkezelőd, ahol keresd meg a korábban fénytörési térképként elmentett Psd fájlt. Jelöld ki és kattints a Megnyitásra. Ekkor a program alkalmazza a torzítást.
Ha ezzel elkészültél, készíts egy másolatot a rétegből. A másolaton állítsd át a Keverési módot (Blend mode): Lágy fényre (Soft light). A Fedettséget (Opacity) itt is vedd vissza 80%-ra.

A fénytörés alkalmazása után duplikáljuk a réteget és keverési módot lágy fényre állítjuk



Nyomd meg egyszerre a Ctrl+Shift+Alt+E gombokat. Ezzel egyesítjük az összes eddig rétegünket és létrejön legfelülre egy új réteg. Az összes eddigi réteg viszont érintetlenül megmarad. (Ez nagyon praktikus, mert visszatérhetünk az előző rétegekre, ha módosítani akarjuk őket.)


Ezen az új egyesített legfelső rétegen állva előhívjuk a Szerkesztés>Átalakítás>Perspektíva (Edit>Transform>Perspective) parancsot. A bal alsó fogantyút húzd el, hogy perspektívát adj a képnek.

Perspektívát adunk a képnek







Egy kis árnyékot hozunk létre. Készíts egy új réteget.

Az eszköztárról válaszd a Színátmenet eszközt(Gradient Tool). Legyen Lineáris színátmenet (Linear Gradient). A színátmenet készletből válaszd a Fekete/fehér (Black/White) színátmenetet. Állítsd át a fekete színt szürkére (#808080), a másik maradjon fehér.

Húzd a színátmenetet úgy, hogy a kezdőpont jobb középen van, a végpont pedig a kép közepén. Ha Shift gombot közben lenyomva tartod, akkor egyenes vonalat húz.

Alkalmazzuk a színátmenetet



Állítsd át a színátmenetes réteg Keverési módját (Blend mode) Lineáris égetésre (Linear Burn) és a Fedettséget (Opacity) 40%-ra.

Az árnyékot véglegesítjük a keverési mód beállításával



Ezzel elkészült az árnyékunk és digitális graffiti képünk is.



4 A graffiti szöveg

A szöveget egy kicsit más módszerrel készítjük el. Keress a neten egy szép graffiti fontot. Rengeteg graffiti betűcsaládot találsz ezen a linken. Mi a Sprite graffiti fontot választottuk.





A realisztikus ábrázolás kedvéért a szöveget úgy hozd létre, hogy minden egyes betűt külön rétegre írj. Majd egyenként (a Ctrl+T gombbal előhívott Szabad átalakítással) alakíts egy kicsit minden egyes betű méretén, dőlésszögén, helyzetén. Kicsit told őket egymásra.

Amikor készen vagy, jelöld ki az összes betű rétegedet (Shift gombot lenyomva tartva kattints rá mindegyikre). A menüsoron lépj a Réteg>Réteget egyesítése (Layer>Merge Layer) parancsra.


Add hozzá az alábbi Rétegstílusokat (Add layer style).




Körvonalazás (Stroke)

  • Méret (Size): 9 px
  • Pozíció (Position): Kívül (Outside, Color)
  • Keverési mód (Blend mode): Normál, Opacitás: 100%
  • Szín: fehér

Színátmenet átfedés (Gradient Overlay)

  • Blend mode: normál
  • Opacity: 100 %
  • Lineáris.
  • Gradient színek (a képről vettem két színt), egy sötétbarnát #3f0907 és egy vöröses barnát # 760d0c



Külső ragyogás (Outer glow)

  • Keverési mód (Blend mode): Normál
  • Opacitás: 100%
  • Szín: #dd7338 (A képről vettem egy világos barnát.)
  • Technika: Pontos! (Precise)
  • Szórás (Spread): 100%
  • Méret: 30 px



Belső árnyék (Inner shadow)

  • Keverési mód (Blend mode): Többszörözés (Multiply)
  • Szín: fekete
  • Távolság (Distance): 30 px
Fázisok képekben (körvonalazás, színátmenet, külső ragyogás, belső árnyék).



5 A szöveg fénytörése

A szöveg rétegen jobb klikk, és konvertáld Intelligens Objektummá (Convert to Smart Object).




A szöveges rétegen is alkalmaznunk kell a fénytörést. Ugyanazokat a lépéseket tesszük meg, mint amikor a lány képét torzítottuk és ugyanazt az elmentett fénytörési térképet használjuk ehhez.
Tehát válaszd a menüsorról a Szűrő>Torzítás>Fénytörés (Filter>Distort>Displace) parancsot. A felugró ablakban állítsd be ugyanazzal a paraméterekkel a fénytörést, mint a korábbi lépésben.

  • Vízszintes skála (Horizontal scale): 5
  • Függöleges skála (Vertical scale): 5
  • Méretre nyújtás (Strech to Fit)
  • Szegélyképpontok megismétlése (Repeat Edge pixels)

Kattints az OK gombra.
Ekkor megnyílik a fájlkezelőd, ahol keresd meg a korábban fénytörési térképként elmentett PSD fájlt. Jelöld ki és kattints a Megnyitásra. Ekkor a program alkalmazza a szöveges intelligens objektumon torzítást.

Az eredmény a következő.



A szöveg még nem realisztikus, ezért van egy fontos teendőnk. Kattints rá a Rétegstílus hozzáadása ikonra (fx) és válaszd a Keverési beállításokat legfölül (Blending options). Az alábbi képen látod, hogy hol is vagyunk.

Először is állítsd az Opacitást kb. 65%-ra. A panelen alul találod az Összeolvasztás ha….. (Blend if….) csúszkákat. Válaszd a Lejjebb lévő réteg (Underlying Layer) csúszkát.

Ha az ALT gombot lenyomva tartva kattintatsz a csúszkára, (először az egyikre, mondjuk a feketére), akkor két részre vágod a csúszkát. Majd ugyanígy vágd ketté a másik csúszkát, a fehéret. Tologasd őket és közben figyeld, hogyan alakul a szövegünk áttetszősége. Nagyon valósághű hatást lehet elérni, mert szépen átsejlik a téglafal.

A fenti beállításokkal ilyen eredmény született



Utolsó lépésként válaszd a Szerkesztés>Átalakítás>Perspektíva(Edit>Transform>Perspective) parancsot. A bal alsó fogantyút húzd el, hogy perspektívát adj a szövegnek is. Ezzel elkészült a graffiti hatásunk Photoshop-ban.

Utolsó lépésként adj perspektívát a szövegnek is



A displacement szűrő alkalmazására ezekben a tutorialok-ban is találtok további tippeket.

Ha szeretnél videós példát is látni arra, hogyan lehet graffitit csinálni Photoshop-ban, kattints ide a tutorial-ért.

További posztok a sorozatban: 

Új hozzászólás

CAPTCHA
Bizonyítsd be, hogy nem vagy robot!
  _____            ___            _      _____ 
| ____| _ __ / _ \ __ __ | | __ | ___|
| _| | '_ \ | | | | \ \ / / | |/ / | |_
| |___ | | | | | |_| | \ V / | < | _|
|_____| |_| |_| \__\_\ \_/ |_|\_\ |_|
Enter the code depicted in ASCII art style.

Kocsis Kata

programtervező matematikus, webdesign oktató
Kocsis Kata, programtervező matematikus, webdesign oktató

Életem legfantasztikusabb döntése volt a sok kompromisszummal terhelt alkalmazotti lét feladása. Nagyon büszke vagyok négy éve alapított saját cégünkre, ami az én szememben életforma, hivatás, közösség és gyönyörű célok együttese. A Kreatív Webdesign Tanfolyamok nem egyszerűen online tanfolyami termékek a számomra. A szaktudáson, a tapasztalaton túl olyan értékeket is szeretnék közvetíteni, amelyek a mai társadalomban hiánycikknek számítanak. A vizuális kultúra és igényesség fejlesztése, a művészet és az alkotás becsempészése a hétköznapokba, az együttműködésben rejlő erő megtapasztalása azoknak a hallgatóknak is nagyon sokat adhat, akikből végül nem is lesz webdesigner.

Melyik témák érdekelnek a legjobban?

* kötelező mezők



Ezek a témák érdekelnek

Go to top