Gomb készítése


Az elkövetkezőkben megtanulhatod egy szép 3d-s gomb elkészítését.
1.) Hozz létre egy új dokumentumot és készíts egy új réteget, majd azon helyezz el egy kör kijelölést az Elliptical Marquee Tool segítségével. Majd a Gradient tool-t használva töltsd ki a következőképpen:

2.) Most jelölj ki a kép közepén egy kisebb kört, majd 180 fokkal forgasd el, Edit / Transform / Rotate 180

3.) A kijelölést most kicsinyitsd le par pixellel (pl. 2px), Select / Modify / Contract, majd forgasd vissza.

4.) A gomb kiszínezéséhez használd a Hue/Saturation opciót, Image / Adjust / Hue / Saturation. Pipáld ki a “colorize” boxot, majd a csuszkákat használva színezd ki neked megfelelően.

A kép PSD forrása letölthető innen: gomb.rar

Kapcsolódó bejegyzések:
  • Az interneten különösebbnél különösebb menüket láthat az ember. A menüket külünböző programokkal készítik: ezek közé tartozik a photoshop is. A leírásból megtanu …

  • Honlapon használható egyszerű és modern gomb készítését mutatja be a leírás.1.LépésHozz létre egy új dokumentumot 130x80px-es mérettel, fehér há …

  • Na a következő tutoriálban, egy szép kis gombot készítünk, ami weboldalakon tehet jó szolgálatot. Lényegében akármilyen gomb készülhet belőle, mert akármilyen fi …

  • A “Windows XP stílus I.” c. cikk folytatása, hisz többféle módszer is létezik :)1. Hozz létre egy új képet, majd a SELECTION TOOL-lal jelölj ki egy 159px …

  • Tribal art. Érdekes képek vannak benne az biztos. A következő leírás bemutatja, hogyan lehet photoshoppal könnyedén tribal artot készíteni.1. Válasszunk …

A cikket beküldte: Tupacko (http://webpillango.org)

9 hozzászólás

  1. Sypy says:

    Mindig a legegyszerűbb dolgok a legjobbak,ez erre is érvényes.

  2. Brest says:

    Köszönöm szépen :) Nagyon tetszenek ezek a gombócok, ikonként is 100%osan teljesítenének, mert van dizájnjuk :)

  3. Tupacko says:

    Nagyon szivesen. Orulok, hogy tetszik!

  4. Krissz says:

    Sziasztok!
    Elkészítettem a gombot, nagyon tetszik, jól mutat az oldalon, csak az a nagy bajom, hogy nem bírok rá feliratot elhelyezni. 5 gombot raktam egymás mellé, mindegyiknek más lesz a neve, de nem tudok ráírni. Próbáltam külön “div”-be elhelyezni a feliratokat, de ha fölé viszem az egeret, akkor a gomb visszatér eredeti állapotba, és nem lehet ráklikkelni. Kérlek segítsetek!

  5. Tupacko says:

    Szia!

    Ez egy Photoshop tutorial, nem HTML. Amit te akarsz, azt a legegyszerubben ugy tudod elerni, hogy a gomb kepet megadod annak a linknek/gombnak a hatterenek, amit kattinthatonak akarsz. A felirat a linken/gombon lesz. A kep csupan hatter.

    Udv,
    Tupacko

  6. Krissz says:

    Köszönöm gyors válaszod, hasznos volt.
    Sikerült az előtérbe hoznom a szöveget, de nem tudom behelyezni a gomb közepére. “Text-align: center”- el beillesztettem vízszintesen a közepére, de függőlegesen nem megy a pozicionálás.

  7. Tupacko says:

    Szia!

    A hatter kepet igy tudod pozicionalni:

    background: url(gomb-kep.png) no-repeat center center;

    Lasd: http://www.w3schools.com/css/pr_background-position.asp

    Udv,
    Tupacko

  8. Krissz says:

    Köszönöm! Sikerült! :)

  9. Tupacko says:

    Orulok neki! :)

Szólj hozzá
a Gomb készítése c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>