Garfield mintás háttér készítése Photoshopban

Szerző:   |   2010-02-22

Garfield minden idők egyik legjobb képregénye, gyerek korom óta rendszeresen olvasom. A figura alig néhány vonalból áll össze, mégis tökéletes. Mi most ezt az egyszerűséget kihasználva fogjuk őt Photoshopban megrajzolni.

1. lépés

Aki nem akar a vesződni a toll eszközzel, vagy túl bonyolultnak találja a használatát, az hagyja ki ezt a lépést. A letölthető PSD-ben, benne van az általam vektorizált kép Smart Object-ként, azt is lehet használni a feladathoz.

Először is keressünk egy nagy felbontású képet kedvencünkről. Nem muszáj Garfield, lehet másik képregényfigura is, lehetőség szerint olyan ami kevés alakzattal leírható, így egyszerűbb lesz a dolgunk. Töltsük be a képet Photoshopban és kezdjük el körberajzolni a Pen Tool-al. A műveletet korábban részletesen bemutattam egy videó keretében, úgyhogy most csak nagy vonalakban lássuk a főbb lépéseket.

Válasszuk ki a Pen Tool-t! Lenyomva tartva látjuk a további eszközöket is, később szükségünk lesz még a Convert Point Tool-ra is.

Válasszuk ki felül a Shape Layers módot.

Kezdjünk el csomópontokat lerakni az alakzatot követve. Célszerű legalulról indulni, először a fekete hátteret rajzoljuk meg.

Ha körbeértünk, az utolsó csomópontunk ugyanaz legyen, mint az első, ezáltal egy zárt görbét hoztunk létre ami egyelőre szögletes. Válasszuk most a Convert Point Toolt és az egyes csomópontokat szerkesztve alakítsuk az alakzatot. Ezt a lépést elég nehéz lenne leírni, ezért készítettem korábban ezt a videót.

Hasonló eredményt kell kapjunk.

Ezzel a módszerrel rajzoljuk meg a többi alakzatot is. Nekem összesen 40 alakzatból jött ki a teljes rajz.

Az eredmény a háttér eltüntetése után az eredeti kép vektoros másolata.

Dobjunk Gradient Overlay-t a narancssárga részekre az alábbi beállítással.

2. lépés

Ha végeztünk a vektorizálással, konvertáljuk belőle Smart Object-et. Jelöljük ki az összes rétegünket, majd a jobb gombra kattintva a helyi menüből válasszuk a Convert to Smart Object lehetőséget.

A Smart Object neve legyen Garfield. A Smart Object később bármikor módosítható, ha duplán kattintunk a rétegen.

Ezzel a munka neheze el is készült. Mentsük el a fájlt.

3. lépés

Hozzunk létre egy új dokumentumot akkora felbontásban amekkora hátteret szeretnénk.

4. lépés

Konvertáljuk a background-ot réteggé dupla kattintással, nevezzük el bg-nek, majd alkalmazzunk rajta Gradient Overlay-t a saját ízlésünk szerint.

A Gradient Editor-t én így állítottam be. Használd a Randomize gombot, ha nincs konkrét elképzelésed 🙂

Van egy bg nevű rétegünk egy színátmenettel. Ezt a réteget zárolhatjuk is, többet nem fogunk rajta módosítani.

5. lépés

Hozzunk létre egy új réteget, nevezzük el sunlight-nak. A vonalzó segítségével helyezzünk el 100 pixelenként segédvonalakat, majd rajzoljunk 50pixel széles fekete csíkokat. A View -> Snap to -> Guides opciót aktiváljuk, hogy a csíkok "tapadjanak" a segédvonalakhoz. Ha végeztünk a segédvonalak törölhetők.

6. lépés

Válasszuk ki a sunlight réteget és alkalmazzuk rajta a Filter -> Distort -> Polar Coordinates szűrőt.

7. lépés

A blending mode-ot állítsuk Overlay-re, az Opacity-t 30%-ra.

8. lépés

Nyissuk meg a vektoros rajzunkat, és húzzuk át ebbe a dokumentumba a Smart Object-ünket! Kicsinyítsük / nagyítsuk tetszés szerint, mivel vektoros rajzról van szó, nem fog romlani a minősége.

Tegyük legfelülre a rétegek között, és alkalmazzunk rajta Outer Glow-t!

9. lépés

Kattintsunk duplán a Smart Object-re, ekkor megnyílik külön ablakban. A legalsó réteget, mely Garfield fejének alapja, húzzuk át a készülő dokumentumunkba a sunlight réteg fölé. Nagyítsuk fel, igazítsuk középre, az Opacity-t pedig állítsuk 10%-ra. A Smart Object-et bezárhatjuk.

10. lépés

Hozzunk létre egy új réteget Garfield alatt shadow néven. Egy finomabb ecsettel mázoljunk egy fekete csíkot.

11. lépés

A shadow réteget kiválasztva Filter -> Blur -> Gaussian Blur 50 pixeles értékkel.

Az eredménytől függően átmehetünk még rajta lágy radírral, állíthatjuk az Opacity-t tetszés szerint.

12. lépés

Már csak a felirat maradt hátra. Én a Cooper nevű betűtípust használtam, ami kicsit képregényes stílusú. Színt, méretet mindenki kedve szerint. Íme az én variációm stílusai.

Elsőként Drop Shadow.

Majd Stroke.

És készen is vagyunk. A forrás PSD-t innen tudod letölteni.

Váltogassuk a hátteret és az elrendezést kedvünk szerint!

1 hozzászólás

  1. 2010. november 30. kedd - 18:10

    Köszi, kitettem háttérnek 😀

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...