Ikon készítése Photoshopban

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
  • A villanyszerelés örömei panelben

    Gratulálok! Szép leírás! Azt szeretném kérdezni, hogy nálam 3×32 amper lessz, bővítés után. Laikusként kérdem, így három Fi-relé kell? És mekkorát, é...

  • A villanyszerelés örömei panelben

    @Utolsó hozzászóló: Szia, olyan nincs, hogy 3 fázis érkezik be 3 külön vezetéken. Vagy 1 fázis 1, vagy 3 fázis 3 vezetéken. (+ a nulla) Ha az óráná...

  • A Pico CMS

    pico-release-v2.1.0, nincs benne content-samle, a content üres, nincs benne php nincs sub mappa és fájl sem, mégis ott van a subindex a menunuben...

  • CSS transition

    Köszönöm a válaszod! Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effek...

  • CSS transition

    z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....

  • CSS transition

    Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...

  • A villanyszerelés örömei panelben

    Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...

  • A villanyszerelés örömei panelben

    Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...

  • A shape-outside CSS property

    Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......

  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....