Post-it készítése Photoshopban

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
  • A villanyszerelés örömei panelben

    Gratulálok! Szép leírás! Azt szeretném kérdezni, hogy nálam 3×32 amper lessz, bővítés után. Laikusként kérdem, így három Fi-relé kell? És mekkorát, é...

  • A villanyszerelés örömei panelben

    @Utolsó hozzászóló: Szia, olyan nincs, hogy 3 fázis érkezik be 3 külön vezetéken. Vagy 1 fázis 1, vagy 3 fázis 3 vezetéken. (+ a nulla) Ha az óráná...

  • A Pico CMS

    pico-release-v2.1.0, nincs benne content-samle, a content üres, nincs benne php nincs sub mappa és fájl sem, mégis ott van a subindex a menunuben...

  • CSS transition

    Köszönöm a válaszod! Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effek...

  • CSS transition

    z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....

  • CSS transition

    Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...

  • A villanyszerelés örömei panelben

    Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...

  • A villanyszerelés örömei panelben

    Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...

  • A shape-outside CSS property

    Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......

  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....