Csillogó gomb


A most következő tutorial olyanoknak szól akik tisztában vannak a photoshop alap szintű kezelésével. Azért megpróbálom úgy bemutatni hogy bárki megértse, képekkel illusztrálva. Angol nyelvű programot használok, de magyarul is leírom az eszközök neveit.

web 2 gomb tutorial

Ezt a gombot fogjuk elkészíteni, elég divatosak mostanában az ilyenek az ún. “webkettes” oldalakon, és egész egyszerűen kivitelezhetőek. Készítsünk egy 500×500-as, fehér hátterű dokumentumot. A meglévő background layerhez adjunk hozzá egy újat, nevezzük gombnak, és váltsunk rá.

Válasszuk ki az eszköztárból a lekerekített téglalap eszközt (1), a lekerekítés radius-át állítsuk 30 pixelre (2). Készítsünk egy 200×200 pixel méretű téglalapot. Nyomjuk meg rajta az egér jobb gombját, és válasszuk a görbe kitöltését (3). Itt bármilyen színt adhatunk neki. Ha kész, válasszuk a szerkesztés menü törlés almenüjét, így törlődik a téglalapunk, de a kitöltés megmarad.

web 2 gomb tutorial

Akkor alakítsunk a téglalapunkon. Kattintsunk duplán a gomb nevű rétegünkre (a rétegek eszköztáron), így megnyílik a rétegstílus ablak. Itt 3 dolgot kapcsolunk be, a belső árnyékot, a bevésés és domborítást, és a színátfedést. Állítsuk őket a képen látható értékekre (kép). A színátfedés adja meg a gombunk színét, én sötét szürkét választottam (színkód: 505050), de bármire állíthatjuk. A belső árnyékkal belső mélységet adunk a gombunknak, ezáltal üveglap hatása lesz. A domborítás pedig 3d hatást ad a gombnak.

web 2 gomb tutorial

Most így néz ki a gombunk. Mi hiányzik a valódi üveg hatáshoz? A csillogás. Segítsünk rajta:

web 2 gomb tutorial

Készítsünk egy újabb réteget, a neve legyen csillogás, váltsunk rá. Rajzoljunk a téglalapunk felső harmadába egy újabb téglalapot (kicsi peremet hagyjunk), a radius maradjon 30-on (1). Válasszuk a toll eszköz szerkesztőpont hozzáadását (2), és a téglalapunk alső vonalán, középen, adjunk hozzá egy pontot (3). Most válasszuk a görbe választó eszközből a közvetlen kijelölést (4). Fogjuk az alulra hozzáadott szerkesztőpontunkat, és húzzuk kb. a téglalap negyedével nagyobbra (5). A két oldalán lévő szomszéd pontok iránypontját pedig alakítsuk úgy, hogy szép ívet kapjunk (5). A kész formán nyomjunk jobb gombot, és válasszuk a kijelölés létrehozása almenüt. Ezáltal kijelöléssé alakult a görbénk. Vigyázzunk hogy ne nyomjunk rá újra a képre, mert akkor elveszik a kijelölésünk! Ha mégis megtörténne, válasszuk a szerkesztés menü visszavonás parancsát.

web 2 gomb tutorial

Válasszuk ki a színátmenet eszközt (1), állítsuk a színét fehérre (a kép tetején lévő menüben), a másik végét pedig átlátszóra. Ezután nyomjunk rá egyet, így szerkeszthetjük a színátmenetet (2). Nyomjunk bal gombbal a színátmenet felső peremére, így létrehozunk egy újabb színt az átmenetben. Hagyjuk fehéren, a hely rublikába írjunk 21-et (2). Ezáltal a színátmenetünk eleje tömör marad, és csak utána kezd halványodni.
Menjünk az egérrel kicsivel a kijelölésünk felső pereme alá, nyomjuk le a bal gombot, és húzzuk az egeret egyenesen lefelé, a nagy téglalapunk közepéig (3), és engedjük fel a gombot. Így a kijelölésen belülre került a színátmenet (4). A réteg átlátszóságát állítsuk 85-re (a rétegek eszköztáron találjuk).

web 2 gomb tutorial

Kész a felső csillanás, tegyünk egyet az aljára is, de ezúttal másmilyet készítünk:
Új réteget készítünk alsó csillogás néven. Rajzoljunk 2 téglalapot a gombunk bal alsó harmadában (1). Válasszuk az előzőekben már használt görbe kitöltése parancsot (2), töröljük ki a görbét (szerkesztés/törlés) és vágjuk le a a létrehozott forma felesleges részét a polygon kijelölővel (3). Ezután radírral halványítsuk és vékonyítsuk el a vonal széleit (4). Homályosítsunk kicsit a rétegen, a szűrők menüben lévő életlenítés almenü, gauss életlenítés parancsával, az értéke 0.7 legyen.

web 2 gomb tutorial

Készen is vagyunk a csillogással, finomítsunk a gombunkon.

web 2 gomb tutorial

Ehhez 2 újabb réteg stílust adunk a gomb rétegünkhöz: a vetett árnyék térbeli mélységet ad a gombnak (1), a belső ragyogás pedig fényessé teszi (2).

web 2 gomb tutorial

Befejezésül töltsük meg a gombunkat tartalommal:
Készítsünk egy új réteget, belső néven. Tegyük a gomb és a csillogás rétegek közé, így olyan hatást kapunk, mintha a gomb belsejében lenne a tartalom. Az alakzat menüből válasszunk egy nekünk tetsző formát, tegyük a gomb közepébe, és használjuk újra a görbe kitöltést (a görbét törölhetjük utána). A réteg átlátszóságát állítsuk 80-ra, és adjunk egy kis árnyékot neki (kép). Ezzel a forma picit beleolvad a gombunkba.

web 2 gomb tutorial

Ha mindent jól csináltunk, ezt az eredményt kapjuk. A gomb réteg színátfedését állítgatva, bármilyen színű gomb készíthető. Használhatunk színátmenetet is (4. példa).

web 2 gomb tutorial

Remélem érthető volt a leírás, segítségül itt letölthetitek a kész psd fájlt. Ha kérdésetek van írjatok bátran.

Kapcsolódó bejegyzések:
  • Jöjjön egy újabb 3d hatású kivágás effekt, ezúttal egy papírlapból fogunk formát kimetszeni.Készítsünk egy 400×400-as dokumentumot, fehér háttérrel. Adjunk 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 …

  • Ez a technika jól jöhet minden olyan oldalon ahol 3d hatást akarunk elérni. Nem csak papír daraboknál használható, bármilyen formához ami árnyékot vethet.Kés …

  • 1. Gomb alakjának és színének előkészítéseCsináljunk egy új képet 240×240 pixel méretben fehér háttérrel. Az Ellipszis kijelölése (E) eszközzel csináljun …

  • Következzen egy érdekes 3d hatású effekt, amely remekül néz ki, és kivitelezni sem nehéz.Ebből a képből indítunk, talán a legjobb nektek is ezzel kez …

A cikket beküldte: Fajt Krisztián (http://fajtbros.blog.hu)

26 hozzászólás

  1. Garai Gergő says:

    nincsnenek benne azok az eszközök meg a filter is hiányos ez az adobe phoshop 8,9 vagy 10-es??

  2. Garai Gergő says:

    nincsnenek benne azok az eszközök meg a filter is hiányos ez az adobe phoshop 8,9 vagy 10-es?

  3. Fefy says:

    Gergő: szerintem már mondtam, hogy teljesen mindegy, hogy melyik verzió, mert ezek a filterek benne vannak mindegyik photoshopban (a 7-es verziónál korábbi verziókban nem tudom, de a 8(cs)-9(cs2)-10(cs3)-ben biztos benne van). Valamint ha ennyire hiányos a progid, akkor inkább töltsd le a legújabb trial-t, az adobe honlapjáról és akkor biztos működik minden…

    A letöltési link benne van a szabályzatban, így ha nem baj, akkor nem írnám ki itt újból, mert könnyen meg lehet keresni. De egy kis segítséget azért adok a kereséshez. Ha megkeresed a szabályzatban ezt a pontot: “Ingyen letölthető Photoshop”, akkor a link is ott lesz alatta.

  4. Garai Gergő says:

    köszike a 7-ben tutti nincs benne

  5. Garai Gergő says:

    kezdő vagyok

  6. Fiddi says:

    Nagyon tetszik ez a gomb, köszi a leírást. Érthető volt, és már csináltam is vagy 100-at. :)

  7. Liafen says:

    Hmm… Szép, igényesen készített tutorial. Köszi :)

  8. balázs says:

    nagyon jó, kösz…

  9. Krisztian says:

    Hello, egy ideje barátkozom a PS-el, és minden tutorial ment eddig gond nélkül, de nekem a jobb klikkre nem jön elő ilyen menü, nincs ötlet, hogy miért nem? Nincs kitöltés…

    Köszi

  10. fajtbros says:

    A görbe kijelölő eszköz (direct selection tool) legyen kiválaszva, jelöld ki vele a görbét és utána jobb gomb.

  11. Krisztian says:

    Köszönöm a gyors választ, menü már van, de a fent említett opció nem válaszható, azaz szürke…

  12. fajtbros says:

    Kijelölted a görbét? Létrehoztál egy üres réteget neki? Esetleg nem zárt a görbéd?

  13. Krisztian says:

    Minden stimmel, nem értem a dolgot…

  14. Szandra says:

    tudom hogy nem ide tartozik csak megszeretném kérdezni hogy hol találhatok olyan segítséget ahol kb. leírják hogy hogy kell ilyen álomszerű hatású képet elérni?
    vagy esetleg ilyen fényes vidám?

  15. BonFire says:

    Kereső!!! Van róla tutorial az oldalon.

  16. rhenrik says:

    Sziasztok! Nekem a kijelölés feltöltése után nem egy határozott körvonalú terület keletkezik mint a fenti képen. Széles sávon átmenet lesz a kijelölt terület körül (kicsit belül is). Talán valamilyen alap beállításon kellene módosítanom? Tud segíteni valaki?

  17. BonFire says:

    A kijelölésnek lágy a pereme! A kijelöléskor a fenti eszköztáron látható egy Feather (lágy perem) nevű textbox. Abban egy szám van, mondjuk: 30 px. Ezt alapértelmezésben még a kijelölés készítése előtt írd át nullára. Nincs értelme a lágy peremet előre meghatározni; ezt inkább a kijelölés elvégzése után kell megcsinálni. Főleg, hogy segítségünkre van ebben a Select (kijelölés) menüben a Refine Edge (kijelölés szélének finomítása) menüpont, ahol ezeket a lágyításokat utólag el tudjuk végezni, méghozzá úgy, hogy látjuk is, milyen lesz a végeredmény.

    Tehát a Feather ablakban a szám mindig 0 pixel legyen, amikor kijelölsz.

  18. rhenrik says:

    Ez aztán gyors volt! Nagyon köszönöm! :D

  19. Jancsi says:

    Gergőéhez hasonló problémám van de annyi külöbséggel, hogy haveromnak teljesen ugyan ez a photoshop verzió van meg /Photoshop CS3 Extended HUN Portable/ és neki teljes a menüje nekem a szűrőknél/filter/ pl nincs torzítás stb…csak élesítés,életlenítés,képpontosítás,stilizált,zaj,egyéb. lehet hogy valami beállítás miatt?

  20. BonFire says:

    Lehet néhány menüpont el van rejtve. Nézd meg a beállításokon belül a menüket (Alt+Shift+Ctrl+M)!

    Kép: hxxp://lh5.ggpht.com/_GMOy6F6pgIE/SyfzUcl8YOI/AAAAAAAAAMQ/JaPzsNUYxAo/rejtett_menupontok.png

    Azt mondja, hogy a szemre kattintva kikapcsolhatod egyes menüpontokat. Aztán meg azt, hogy a Minden menüpont mutatása meg fog jelenni azon menük alján, amelyikben ki van kapcsolva egy-egy menüpont.

    Ha itt nincs kikapcsolva, és a menü alján sem jelenik meg a minden menüpont mutatása, akkor valószínűleg hiányzik belőle egy-két plugin. Egyszer valaki hasonlót kérdezett, és akkor belinkelték neki az Adobe által ismert problémát, ami szerint csak egy hiányzó plugint kellett letölteni hozzá. Ezek .dll fájlokként vannak jelen a PS megfelelő mappáiban. Ezeket akár el is lehetne küldözgetni egymásnak, ha éppen nem volna a te PS-ed magyar nyelvű, ugyanis a program összes hivatkozása angol, így nem találná meg a dll fájlt akkor sem, ha elküldeném neked és beraknád a megfelelő mappába, mert ha jól tudom a magyarított Photoshopnak még a mappáit is átnevezték magyarra. Tehát pl nem “Plug-ins” mappa van, hanem “Beépülők”. Innentől borul minden sajnos. Hogy ezt miért kellett, nem tudom.

  21. Jancsi says:

    Hát sajnons nem sikerült megoldani, de azért köszimindent.A windows-omtól nem lehet? .Sp2.

  22. BonFire says:

    Nem a Windowstól van. Ahogy mondtam, valószínűleg hiányzik néhány plugin a program mappájából. Ellenőrizd le! Ezeknek a 8BF kiterjesztésű fájloknak a Photoshop->Plug-ins->Filters mappában kellene lenniük, ahogy itt látod:

    hxxp://lh5.ggpht.com/_GMOy6F6pgIE/SygTq7-NF-I/AAAAAAAAAMY/ZebXdnIBdx8/ps_plugins.png

    Ezek között van a Displace, a Lens Correction stb, amiknek a Distort menüben kéne lenniük, ami neked hiányzik. Ha csak ennyi kell a boldogságához, akár el is küldhetem neked őket, hiszen nem többek 12 Megánál, aztán berakod őket a megfelelő mappába.

  23. ViZion says:

    A Portable változatok butítottak… melyik mennyire, az a “fejlesztőtől” függ.
    Nekem is van CS3 portable, ami unusable is :)

  24. BonFire says:

    Tegnap(előtt?) rákerestem egy kicsit a témára, és találtam egy érdekes fórumhszt, amit nem akartam beidézni, de ha már úgyis ez a téma, akkor itt van: “Portable??? Does Adobe know about this or did you mean PIRATED????” Link: hxxp://www.dtg-forums.com/forum/showthread.php?p=5190#post5190

    Szóval állítólag hivatalosan nem is létezik portable PS. Mondjuk engem nem érdekel, kinek honnan van, mit használ, ettől függetlenül annyival hozzá tudok járulni a “javításához”, amit fentebb ígértem.

    Ja, és amit soxor kihangsúlyoztam: sajnos tapasztalataim szerint attól, hogy egy fórumban angolul beszélnek, még nem biztos, hogy nem ugyanolyan zöldségeket, mint a magyar fórumban. Csak éppen abból több van, és a nagy számok törvénye alapján is igazuk lehet, ha sokan állítják. (És itt most nem feltétlenül kell felhozni az egymillió légy esetét :DD)

  25. Mesi says:

    Helló nekem akad egy-két gondom a szerkesztésnél.. Photoshop CS3-am van,és amikor megcsináltam a keverési beárrlításokat, nekem nem a kijelölt színes rész lett olyan, hanem az egész 500×550-as kép… tehát a bevetés és domborításbál a fehér terülte is olyan lett nem csak amit kijelöltem. talán valami alapbeállítás nincs beállítva?

  26. BonFire says:

    Akkor kezdd elölről az egészet, és a téglalapot új rétegen hozd létre. Ha ez az alapvető dolog ilyen nehézségeket okoz, akkor valami könnyebbel indíts. „A most következő tutorial olyanoknak szól akik tisztában vannak a photoshop alap szintű kezelésével.” – így kezdődik a tutorial, és ezért nincs minden nyilvánvalóság leírva benne.

Szólj hozzá
a Csillogó gomb 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>