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