Szoftver doboz készítése Photoshopban

Szerző:   |   2010-02-25

Ez a tutorial igen népszerű a neten, úgyhogy elkészítettem a saját verziómat 🙂

A forrás PSD-t itt találod.

1. lépés

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

2. lépés

Hozzunk létre egy új réteget, nevezzük el bg_front-nak és rajzoljunk rá egy 400x600px méretű négyszöget.

3. lépés

Hozzunk létre egy újabb réteget, nevezzük el bg_left_side-nak, majd rajzoljunk rá egy 100x600px méretű négyszöget.

Az alábbi módon helyezzük el őket egymás mellé. Nem kell, hogy szünet legyen köztük, csak a szemléltetés kedvéért hagytam így.

4. lépés

Készítsünk tetszőleges mintát a doboz elejére és oldalára. Arra figyeljünk, hogy a rétegek ne lógjanak egymásra, tehát a doboz oldala és eleje külön rétegekből álljon, mert később külön kell majd alakítanunk rajtuk. A dobozhoz ezt a képet használtam fel háttérnek. A best price plecsnit a beépített Custom Shape-ek között találod, a betűtípus pedig Myriad.

5. lépés

Jelöljük ki először a doboz elejét alkotó összes réteget, és a helyi menüből válasszuk a Convert to Smart Object opciót. Nevezzük el front-nak.

6. lépés

Ismételjük meg a műveletet a doboz oldalával is, a Smart Object neve legyen left_side.

Két Smart Object-ünk van front és left_side néven.

7. lépés

A front réteget kiválasztva válasszuk az Edit -> Transform -> Perspective opciót. A jobb felső sarkot megfogva nyomjuk össze a réteget. Ha kész, nyomjunk entert, majd aktiváljuk a Free Transform opciót a Ctrl +T billentyűkombinációval. A jobb oldalt megfogva nyomjuk össze annyira, hogy a torzítást kiküszöböljük.

8. lépés

Ismételjük meg az előző műveletet a left_side rétegen is.

Ezzel kész is a doboz.

9. lépés

Jelöljük ki mindkét réteget, és a kicsinyítsük le a Free Transform opciót használva (Ctrl+T). A Shift gombot lenyomva tartva húzzuk fel a jobb alsó sarkot.

10. lépés

Duplikáljuk mindkét réteget (Ctrl+J)

11. lépés

Jelöljük ki az eredeti doboz két rétegét, és konvertáljunk belőle egy újabb Smart Object-et. Nevezzük el box-nak.

12. lépés

Jelöljük ki a másolatokat és válasszuk az Edit -> Transform -> Flip vertical opciót.

Ezzel tükröztük a másolatot.

13. lépés

Illesszük a tükörképet a bal alsó saroknál.

14. lépés

A front_copy rétegen válasszuk az Edit -> Transform -> Skew opciót. A jobb felső sarkot húzzuk fel az eredeti doboz bal alsó sarkához.

15. lépés

Csináljuk meg az oldalát is.

16. lépés

Jelöljük ki a másolatokat, egyesítsük a Ctrl+E billentyűkombinációval, és nevezzük el a réteget shadow-nak. Ehhez a réteghez adjunk hozzá egy maszkot, ezt látod a harmadik képen.

17. lépés

Aktiváljuk a maszkot, és rajzoljunk rá fekete ecsettel azon a részen amit szeretnénk eltüntetni. Az ecset mérete legyen jó nagy (2-300px) és a Hardness-t állítsuk nullára.

A layer panelen látjuk a kimaszkolt részeket.

18. lépés

Válasszuk a Filter -> Blur -> Gaussian Blur opciót és mossuk el az árnyékot. Figyeljünk, hogy ne a maszk legyen kijelölve, hanem a kép.

19. lépés

Kattintsunk duplán az alsó rétegen, és nevezzük el bg-nek.

20. lépés

Alkalmazzunk rajta Gradient Overlay-t az alábbi beállításokkal.

21. lépés

Mozgassuk a dobozt és az árnyékot középre.

22. lépés

Duplikáljuk a dobozt, nevezzük el motion_blur-nak és raszterizáljuk a helyi menüből.

23. lépés

Válasszuk a Filter -> Blur -> Motion Blur opciót 900px-es értékkel.

24. lépés

Duplikáljuk ezt a réteget is (Ctrl+J).

25. lépés

A motion_blur rétegen aktiváljuk a Free Transform eszközt (Ctrl+T) és a Shift gombot lenyomva tartva jobb felső sarkot mozgassuk egyet balra.

26. lépés

A motion_blur copy rétegen is végezzük el a fenti műveletet, csak itt jobbra forgassunk.

27. lépés

Maszkoljuk ki a motion_blur és a másolata széleit a korábban ismertetett módon.

28. lépés

Hozzunk létre egy új réteget white néven. Rajzoljunk a tetejére egy jó nagy fehér ecsettel a képen látható módon és az Opacity-t vegyük le 30%-ra.

29. lépés

A box rétegen alkalmazzunk Outer Glow stílust az alábbi beállításokkal.

Elkészültünk.

3 hozzászólás

  1. 2016. május 16. hétfő - 11:33

    Hello!

    Egy pici hiba a képben: a tükörképben a felirat nagyobb a dobozon lévőnél. 🙂

  2. 2011. október 27. csütörtök - 17:13

    Volna egy kis gondom… Amikor az “Edit -> Transform -> Perspective” módot kéne használnom akkor az az opció levan tiltva…miért? Választ előre köszönöm:D

  3. 2011. május 8. vasárnap - 11:16

    Szia! Nagyon király ez a tipp!

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...