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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...