Mérei Tamás webdesigner

Tutorial: ikon készítése Photoshopban

Szerző:   |   2010-05-07

Újabb Web 2 mánia 🙂

A forrás PSD fájl innen tölthető le.

1. lépés

Hozzunk létre egy új dokumentumot 600×600-as méretben.

2. lépés

Válasszuk ki az Ellipse Tool-t.

Állítsuk be fixen 500x500 képpontos méretet, a módnál válasszuk Shape Layers-t!

Rajzoljuk meg a kört és nevezzük el a réteget outside-nak.

3. lépés

Alkalmazzuk az alábbi stílusokat rajta. Először Inner Glow.

Gradient Overlay

A Gradient beállításait az alábbi kép mutatja.

Stroke.

Az eredmény.

4. lépés

Rajzoljunk egy újabb kört, a mérete fixen 440x440 képpont.

Helyezzük középre és nevezzük el inside-nak.

5. lépés

Alkalmazzuk a következő stílusokat az inside rétegen. Először Inner Glow.

Bevel and Emboss

Gradient Overlay

Stroke

Az eredmény.

6. lépés

Válasszuk ki a Pen Tool-t.

A mód legyen Shape Layers.

Rajzoljunk a képen láthatóhoz hasonló alakzatot. Nem baj, ha nem követi a kör körvonalát, az a lényeg, hogy fedje a belső kört. Nevezzük el a réteget reflection-nek.

7. lépés

Ctrl billentyűt lenyomva tartva kattintsunk az inside réteg maszkjára, hogy kijelöljük.

Aktiváljuk a reflection réteget, és kattintsunk az Add Layer Mask gombra.

Ezzel kimaszkoltuk a szükségtelen részeket. Vegyük le a reflection réteg Opacity értékét 30%-ra.

8. lépés

Válasszuk a Custom Shape Tool-t.

Válasszunk egy tetszőleges ábrát.

A mód továbbra is Shape Layer.

Rajzoljuk meg az alakzatot fehérben.

Alkalmazzunk rajta Inner Shadow stílust.

Elkészültünk.

Variáljuk a színeket, feliratokat:

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

8 hozzászólás

  1. HendRoox
    2014. május 14. szerda - 18:23

    Honnan lehet ilyen plusz alakzatokat letölteni? Nekem ilyen kis vackok vannak csak. Ilyenek amik neked nem. :=/ Válaszodat előre is köszi. 🙂 Tök jók lettek.

    • cyrex
      2014. május 28. szerda - 19:20

      Guglizz arra, hogy “photoshop custom shapes”.

  2. Csecse
    2013. március 10. vasárnap - 09:04

    Szia. Ezek szabadon felhasználhatók honlaphoz is?

    • cyrex
      2013. március 20. szerda - 12:35

      Persze, arra használod amire csak akarod.

  3. Csecse
    2013. január 18. péntek - 12:41

    Szia, remek munka szép ikonok. Érdeklődni szeretnék hogy weblapra ikont olyat mint pl. az aprod.hu-n találhatóak (a kategóriák megnevezése fölött) azt milyen technológiával csinálják? Fényképből rajzolják át vagy a semmiből kezdik rajzolni?

    • cyrex
      2013. január 19. szombat - 22:15

      Ezek az ikonok szerintem fotókból és vektoros illusztrációkból vannak megcsinálva.

  4. Péter
    2012. december 28. péntek - 09:07

    Na ez kifejezetten tetszett, köszi

  5. Márk
    2012. június 6. szerda - 18:41

    Király

Hozzászólás

Legújabb hozzászólások