Post-it készítése Photoshopban

Szerző:   |   2010-03-01

A forrás PSD-t, a háttér mintázatot és a betűtípust innen tudod letölteni ZIP-ben.

1. lépés

Hozzunk létre egy új dokumentumot 800×800-as méretben fehér háttérrel.

2. lépés

Válasszuk ki az alábbi menüt: Edit -> Preset Manager. Ezen belül válasszuk a Patterns-t a legördülőből, majd kattintsunk a Load gombra és tallózzuk be a wood_pattern.pat fájlt, amit a ZIP-ben találsz. Kattintsunk a Done gombra.

3. lépés

Konvertáljuk réteggé a hátteret dupla kattintással és nevezzük el bg-nek. Alkalmazzunk rajta Pattern Overlay-t, válasszuk ki az imént betöltött fa mintázatot.

Az eredmény.

4. lépés

A Rectangle Tool-t kiválasztva állítsuk be a Shape Layers opciót felül, illetve állítsuk be a méretét fixen 600x600px-re. Rajzoljunk egy négyzetet!

Nevezzük el post-it-nek és állítsuk be a színét: #fee948

5. lépés

A post-it réteget kiválasztva aktiváljuk a Free Transform eszközt (Ctrl+T), majd jobb klikk, és a helyi menüből válasszuk a Warp opciót.

A sarkokat megragadva alakítsunk raja egy kicsit, hogy ne legyen annyira szabályos.

6. lépés

Ha végeztük, a rétegen jobb klikk és Rasterize Layer.

7. lépés

Válasszuk ki az alábbi szűrőt: Filters -> Texture -> Grain. A Grain Type-ot állítsuk regular-ra, az Intensity értékét 15-re, a Contrast-ot pedig 50-re. Ezzel létrehoztunk egy papírra emlékeztető szemcsés felületet.

8. lépés

Rajzoljunk egy szamárfület a képen látható módon a Pen Tool-al.

9. lépés

Alkalmazzunk rajta Drop Shadow-t és Gradient Overlay-t az alábbi beállításokkal.

10. lépés

Hozzunk létre egy maszkot a rétegen, majd fekete Brush-al fessük ki azokat a részeket a maszkon amiket szeretnénk eltüntetni.

11. lépés

Aktiváljuk a post-it réteget ügyelve arra, hogy ne a maszk legyen aktív, hanem maga a rajz! Válasszuk ki a Dodge Tool-t.

Jobb klikkre felugrik a Brush beállítása, válasszunk 600px-es méretet és a Hardness-t vegyük nullára. Húzzunk néhány ecsetvonást és látni fogjuk, hogy foltokban kivilágosodik a kép. Ha sötétíteni is szeretnénk, akkor a művelet ugyanez, csak a Burn Tool-al.

12. lépés

Alkalmazzunk Drop Shadow-t a post-it rétegen.

13. lépés

Rajzoljunk egy szürke csíkot a Rectangle Tool-al, a színe legyen #e4e4e4. Forgassuk el a Free Transform Tool-al (Ctrl+T), majd jobb gomb és Rasterize Layer. Nevezzük el a réteget ragaszto-nak.

14. lépés

A ragaszto régeten Filter -> Texture -> Grain. A Gain Type legyen Sprinkles, az Intensity 50, a Contrast pedig 40.

15. lépés

Adjunk hozzá egy maszkot a ragaszto réteghez. Aktiváljuk  a Brush Tool-t (B), jobb klikk, és a jobb felső lenyílóból válasszuk ki a Calligraphic Brushes-t.

Kis méretű Brush-al közepes Hardness-el, rajzoljunk a maszkra kis csíkokat, mintha be lenne szakadva a ragasztó széle.

16. lépés

Ha kész, az Opacity-t állítsuk 90%-ra, majd alkalmazzunk rajta Drop Shadow-t.

17. lépés

Duplikáljuk a ragaszto réteget (Ctrl+J), mozgassuk a cetli jobb felső sarkához, és forgassuk el a Free Transform Tool-al (Ctrl+T)

18. lépés

Írjunk szöveget. Én az Angelina nevű betűtípust használtam, amit megtalálsz a ZIP-ben, illetve innen is le tudod tölteni. A betű színe egyébként: #003b7d.

19. lépés

Válasszuk ki a Pen Tool-t, állítsuk be a Paths opciót és rajzoljunk egy szabadkézi aláhúzásra emlékeztető vonalat. Aktiváljuk a Paths panelt (Window -> Paths).

20. lépés

Válasszuk a Brush Tool-t és állítsuk be 4px-es méretet és 80%-os Hardness-t. A Foreground Color-t állítsuk olyan színűre, amilyenre az aláhúzást szeretnénk majd. Nálam ugyanaz, mint a szövegé: #003b7d.

21. lépés

Hozzunk létre egy új réteget underline néven. Kattintsunk a Paths panelen a Work Path-ra, ezzel kijelöltük a görbét, majd jobb gomb és Stroke Path. A felugró ablakban válasszuk a Brush-t.

Ezzel létrejött egy festés az underline rétegen az általunk kiválasztott Brush-al a görbe mentén.

Elkészültünk.

Kísérletezzünk a színekkel kedvünk szerint!

1 hozzászólás

  1. 2013. április 27. szombat - 18:09

    Én ugyan nem photoshoppal hanem gimppel dolgozok nagyjából minden funkció megtalálható rajta

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...

  • A Bootstrap 4 grid használata

    Azt használsz ami tetszik. A CSS reset cuccok többsége lassan 10 éves, ma már nem nagyon van rájuk szükség. Bootstrap akkor kell, ha az adott projekth...

  • A Bootstrap 4 grid használata

    Szia! Nem rég kezdtem tanulni, kis segítséggel õssze tudok rakni egy oldalt Html+css a többivel még most ismerkednek. Nem nagyon vagyok vele tisztába ...

  • A villanyszerelés örömei panelben

    Nem, én B-t raktam mindenhova és most már ötödik éve nincs vele gondom....

  • A villanyszerelés örömei panelben

    Szia Jövő héten kezdek bele, egy ugyan ilyen projectbe. Még mindig tartod azt az állítást, hogy jó a C karakterisztikájú kismegszakító? És mé...

  • ActionScript 3 eseménykezelés

    Sima CSS animációt....

  • ActionScript 3 eseménykezelés

    Helló! Kiváló a "Banner mutációk" -ról szóló videód. A legnagyobb erénye számomra, hogy a hatékony munkavégzést is bemutattad. Amiért a flash témakor...

  • Egyszerű tükröződés készítése Photoshopban

    Koszi:)...

  • Bootstrap carousel

    Nem találkoztam még ilyennel, ezt a két linket találtam hozzá: https://stackoverflow.com/questions/16244306/single-picture-displaying-upside-down-in-b...