Ikon készítése Photoshopban

Szerző:   |   2010-05-07

Ikonok rajzolása vektoros alakzatokból.

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:

8 hozzászólás

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

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

      Guglizz arra, hogy “photoshop custom shapes”.

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

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

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

      Persze, arra használod amire csak akarod.

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

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

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

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

    Na ez kifejezetten tetszett, köszi

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

    Király

Hozzászólás mégsem

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A villanyszerelés örömei panelben

    Nem mert, ez már 3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezet...

  • Az Axure használata

    Ertem, koszonom!...

  • Az Axure használata

    Magyarországon nem szokása a cégeknek kiírni a fizetést az álláshirdetésekben, hanem neked kell fizetési igényt megjelölni az önéletrajzodban. Ha tége...

  • Az Axure használata

    Értem. Köszi a választ megint. És egyébként általában az ilyen munkahelyek mennyit adnak kezdö fizetésnek? Csak mert sehol sem irnak konkrétat, csak a...

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