A gombok létrehozása az egyik alapvető feladat a grafikai tervezésben, különösen webdesign és felhasználói felületek esetében. A lenyűgöző és funkcionális gombok elkészítése nem csupán esztétikai kérdés, hanem a felhasználói élmény javításának is fontos része. Ebben az útmutatóban részletesen bemutatjuk, hogyan hozhatunk létre különböző típusú gombokat a Photoshop segítségével, a klasszikus "webkettes" stílusú üveggomboktól kezdve a fejlettebb 3D effektekkel rendelkező változatokig. Megvizsgáljuk a Photoshop beépített funkcióit, mint a műveletek, rétegstílusok, és a 3D képességek, valamint külső eszközökkel való integrációt is érintünk.
Alapvető gomb létrehozása Photoshopban
Az alábbiakban egy lépésről lépésre bemutatott folyamat segítségével hozhatunk létre egy divatos "webkettes" stílusú gombot, amely tökéletes weboldalakhoz és applikációkhoz.
Kezdésként hozzunk létre egy új dokumentumot 500x500 pixeles méretben, fehér háttérrel.
Ezután válasszuk ki az eszköztárból a lekerekített téglalap eszközt. Állítsuk be a lekerekítés sugarát 30 pixelre. Hozzunk létre egy 200x200 pixeles téglalapot.
A téglalapon jobb egérgombbal kattintva válasszuk a "görbe kitöltése" opciót. Itt tetszőleges színt adhatunk meg a gombnak. Én sötétszürkét választottam (színkód: #505050), de bármilyen más színt is használhatunk.
Ezt követően duplán kattintsunk a "gomb" nevű rétegre a rétegpalettán, hogy megnyissuk a rétegstílusok ablakot. Itt három fő funkciót kapcsolunk be: "Belső árnyék", "Bevésés és domborítás", valamint "Színátfedés". Állítsuk be ezeket a beállításokat a képen látható értékekre.
A "Színátfedés" adja meg a gombunk alapszínét. Az "Belső árnyék" funkcióval mélységet adunk a gombnak, így üveglapos hatást érünk el.
Most a gombunk már kezd formát ölteni. A valódi üveg hatás eléréséhez azonban szükségünk van egy csillogásra.
Csillogás hozzáadása a gombhoz
Hozzáadunk egy új réteget, amit nevezzünk "Csillogás"-nak, és váltsunk rá. Rajzoljunk egy újabb téglalapot a gombunk felső harmadába, kis peremet hagyva az éleknél. A lekerekítés sugara maradjon 30 pixel.
Válasszuk a toll eszköz "szerkesztőpont hozzáadása" funkcióját, és adjunk hozzá egy pontot a téglalap alsó vonalának közepéhez. Ezután a "közvetlen kijelölés" eszközzel fogjuk meg az alul hozzáadott pontot, és húzzuk nagyobbra (körülbelül a téglalap negyedével). A két szomszédos pont iránypontjait úgy alakítsuk, hogy szép ívet kapjunk.
A kész formán jobb gombbal kattintva válasszuk a "Kijelölés létrehozása" opciót. Ezáltal a görbénk kijelöléssé alakul.
Válasszuk ki a színátmenet eszközt. Állítsuk a színátmenet színét fehérre, a másik végét pedig átlátszóra. A színátmenet szerkesztésénél a felső peremen hozzunk létre egy újabb színt, amit hagyjunk fehérnek, a hely rublikába írjunk 21-et. Ezután kattintsunk a kijelölés felső pereme alá, húzzuk az egeret egyenesen lefelé a nagy téglalap közepéig, és engedjük fel a gombot. Ezzel a színátmenet a kijelölésen belülre kerül.
További részletek és effektek
Készítsünk egy új réteget "Alsó csillogás" néven. Rajzoljunk két téglalapot a gombunk bal alsó harmadában. Használjuk a "görbe kitöltése" parancsot, majd töröljük ki a görbét, és vágjuk le a létrehozott forma felesleges részét a polygon kijelölővel. Ezután radírral halványítsuk és vékonyítsuk el a vonal széleit.
Hozzáadhatunk egy "Belső" réteget a gomb és a csillogás rétegek közé. Ez olyan hatást kelt, mintha a tartalom a gomb belsejében lenne. Az alakzat menüből válasszunk egy tetszőleges formát, helyezzük a gomb közepébe, és használjuk újra a görbe kitöltést. A réteg átlátszóságát állítsuk 80%-ra, és adjunk hozzá egy kis árnyékot.
Ha mindent jól csináltunk, megkapjuk a kívánt eredményt. A gomb réteg színátfedésének beállításait módosítva bármilyen színű gombot készíthetünk. Használhatunk színátmenetet is a még változatosabb hatások eléréséhez.
Műveletek használata a Photoshopban
A műveletek (Actions) lehetővé teszik ismétlődő feladatok automatizálását. A Photoshop bétaverziója tesztelés és visszajelzés céljából is használható, és a műveletek segítségével automatizálhatjuk az ismétlődő munkát egy fájlon vagy fájlkötegen belül.
A műveletek menüparancsokat, panelbeállításokat és eszközműveleteket tartalmazhatnak. Például műveletekkel átméretezhetünk képeket, effekteket alkalmazhatunk, vagy fájlokat menthetünk a kívánt formátumban.
A Műveletek panelen a művelet lejátszása és dokumentumelőzményekben való véglegesítése előtt megtekinthetjük annak előnézetét. Keresse meg a listában szereplő műveletek melletti előnézeti ikont, és az egérrel mutasson a műveletre a listában, hogy megjelenjen az előnézet.
A Műveletek panelen található keresőmezővel egyszerűen megtalálhatjuk a Photoshopban elérhető számos művelet bármelyikét, illetve a saját magunk által létrehozott vagy telepített egyéni műveleteket.
Az Ablak > Műveletek menüből elérhető "Klasszikus műveletek" segítségével műveleteket rögzíthetünk, lejátszhatunk, szerkeszthetünk és törölhetünk.
3D funkciók használata diszkógömb létrehozásához
A Photoshop 3D funkciói lehetővé teszik komplexebb, térbeli hatások elérését, mint például egy diszkógömb létrehozása.
1. Módszer: Illusztratív diszkógömb 3D funkciók nélkül
Ez a módszer azoknak szól, akik régebbi Photoshop verziót használnak, vagy nem rendelkeznek 3D képességekkel.
1. Lépés: Új dokumentum létrehozásaLétrehozunk egy új, 800x800 pixeles dokumentumot fehér háttérrel. Ez lesz a diszkógömbünk alapja.
2. Lépés: Minta létrehozása pöttyöző hatáshozHozzáadunk egy újabb, 40x40 pixeles dokumentumot átlátszó háttérrel. Itt fogjuk létrehozni a diszkógömbünk pöttyeit.
3. Lépés: Pöttyök rajzolása és mintává mentéseAz Ellipszis eszközzel, a Shift billentyűt nyomva tartva, rajzolunk egy kört. A pontok rétege alá új átlátszó réteget hozunk létre. A fehér háttérréteg törölhető. Ezután a "Szerkesztés > Mintát rögzít" menüpont segítségével rögzítjük a mintánkat.
4. Lépés: Több minta létrehozásaÉrdemes több mintát létrehozni különböző pontméretekkel, hogy változatosabb legyen a végeredmény.
5. Lépés: Mintázat teljes kitöltéseAz első dokumentumban, egy új rétegen a Kitöltőeszközzel kitöltjük a mintát. Három új réteget hozunk létre, mindegyiket egy-egy pöttyös mintához.
6. Lépés: Elfolyás maszk hozzáadásaEgy új rétegen tetszőleges elfolyást húzunk, például sugárzással körkörös elfolyást. Az elfolyás réteget a pontok rétege mellé helyezzük, mint maszkot (Alt gombbal kattintva a két réteg között).
7. Lépés: Konvertálás Okos objektummáKijelöljük mindkét réteget (Shift billentyűvel) és okos objektummá konvertáljuk. Ez lehetővé teszi a későbbi minőségvesztés nélküli módosítást.
8. Lépés: Domborítószűrő alkalmazásaAlkalmazzuk a "Domborítószűrő"-t 100%-os erővel.
9. Lépés: Belső terület kiválasztásaAz ellipszis kijelölő eszközzel húzunk egy kör alakú kijelölést, hogy a gömb belső területét elérjük.
10. Lépés: Saját rétegként használásA kijelölést Ctrl+C gombbal másoljuk, majd Ctrl+V gombbal új rétegen illesszük be. Ezzel elkészült a szemléletes diszkógömbünk.
11. Lépés: Egyszínű szíppontok fokozásaHa egyszínűvé akarjuk tenni a pontokat vagy fokozatot adni nekik, megnyithatjuk az okos objektum eredeti fájlját (PSB fájl). Itt a színátmeneti réteget aktiválva a "Szűrő > Megcsúfító szűrő" menüponton keresztül hívhatjuk meg a "Mozaikhatszejtő szűrő"-t. Ezzel mozaikba szedhetjük a színátmenetet, ami szép, szemléletes átmenetet alkot a pontokban.
2. Módszer: Diszkógömb készítése Photoshop 3D funkcióival
A 3D funkciók segítségével a diszkógömbünk merevsége áthidalható, és a gömböt a megfelelő látószöggel helyezhetjük el a tervezésünkben.
1. Lépés: Minta réteg átmenettel készítéseLétrehozunk egy új csoportot a 3D funkciókkal való szerkesztéshez. Ebben egy új réteget hozunk létre, amelyet az előzőleg elkészített mintával töltünk ki. A mintát átlós maszkként egy átmeneti réteghez rendeljük.
2. Lépés: Mintaréteg átmenet 3D réteggé alakításaA mintaréteget éldynyomással együtt alakítjuk át okos objektummá, majd ezt az okos objektumot alakítjuk át 3D réteggé a "3D > Új forma rétegből > Gömbpanoráma" menüpont segítségével.
3. Lépés: PozicionálásA 3D Tárgyeszközökkel kicsit kizoomolunk és elforgatjuk a diszkógömböt a kívánt pozícióba. A 3D technika előnye, hogy könnyen és intuitívan beállíthatjuk a gömb fókusztávolságát és nézőszögét.
4. Lépés: RenderelésHa megtaláltuk a megfelelő pozíciót, csak annyi a dolgunk, hogy rendereljük az eredményt. Ez finomítja a széleket és szép szemléletes megjelenést kölcsönöz a diszkógömbnek. A rendereléshez választhatunk a "Vázlat" (gyorsabb, szerkesztési fázisban) vagy a "Sugárkövető" (végső beállítások, hosszabb számítási idő) minőség közül.
5. Lépés: VáltoztatásokHa meg akarjuk változtatni a mintát, azt könnyen megtehetjük a 3D rétegnél az eredeti rétegre kattintva. A PSB fájl mentésével a változtatások azonnal megjelennek a 3D diszkógömbön.
6. Lépés: Változat az illusztratív megjelenésbenHa lapos diszkógömbtextúrát szeretnénk az illusztratív pont helyett, elő kell készítenünk a mintát vagy a textúrát ennek megfelelően. Ezt követően a mintát a Smart-Object-ben hívhatjuk meg, és a pöttyös mintánk helyett a négyzetmintánkat használhatjuk, ami egy új, nagyon szép illusztratív megjelenést eredményez.
Photoshop’s New Tool Lets You Rotate Any Photo in 3D
Gomb létrehozása PanelBuilder32 szoftverben
A PanelBuilder32 (PB32) egy régebbi Allen-Bradley HMI konfigurációs szoftver, amely egyéni bitmap gombokat támogat. Bár harmadik féltől származó szoftverek, mint a Photoshop, létrehozhatják ezeket a gombokat, ingyenes eszközök, mint a Microsoft Paint vagy a Paint.net is azonos eredményt érhetnek el.
A PanelBuilder32 gombstruktúrák megértése
A PanelBuilder32 három gombimplementációt támogat:
- Teljes Bitmap: Teljes gomb, beleértve a szöveget egyetlen .bmp fájlként. (Legmagasabb RAM használat)
- 3D keret + szöveg: Keret bitmapként, szöveg PB32 objektumként. (Közepes RAM használat)
- Minta-alapú: Monokróm keret PB32 színbeállításokkal. (Legalacsonyabb RAM használat)
A 3D keretek megközelítés jobb eredményt ad, mert a szöveg szerkeszthető marad a PanelBuilder32-ben.
Gomb létrehozása és szerkesztése
1. módszer: Exportálás, szerkesztés és visszaimportálás
- Exportálás: A PanelBuilder32-ben kattintson a jobb gombbal a gombobjektumra → Exportálás grafikaként → mentés .bmp-ként.
- Szerkesztés: Nyissa meg a képet Paint.net-ben vagy MS Paint-ben. Használja a Kitöltő eszközt ditherelt mintákkal 3D élhatás létrehozásához.
- Visszaimportálás: A PanelBuilder32-ben hozzon létre új Nyomógomb objektumot → Grafika fül → Importálás.
Fontos: A PanelBuilder32 megköveteli, hogy a bitmap méretek pontosan megegyezzenek a meglévő gombgrafikák cseréjekor. Először exportálja az eredetit a pontos méretek rögzítéséhez.
2. módszer: 3D gombállapotok létrehozása
A lenyomott/nem lenyomott állapotok létrehozásához:
- Vegye le az alapszínt a Pipetta eszközzel.
- Állítsa be a hátteret, töltse ki a vásznat a vett színnel.
- Válassza ki és vágja ki a szöveget.
- Fordítsa el az ellenkező állapothoz (Kép → Vízszintes tükrözés).
- Hozza létre a második állapotot ismételt fordított tájolással.
- Mentse el mindkettőt "button_up.bmp" és "button_down.bmp" néven.
- Rendelje hozzá ezeket a Nyomógomb objektum Állapot fülén a Grafikus állapot 0 és Grafikus állapot 1 alatt.
3. módszer: Bitmapek konvertálása natív PB32 objektumokká
Ha a jelenlegi gombjai teljes bitmapek, amelyek szöveget tartalmaznak, konvertálja őket a RAM használat csökkentéséhez:
- Exportálja a bitmapet a PanelBuilder32-ből.
- Nyissa meg a Paint.net-ben, és izolálja csak a gombkeretet (távolítsa el a szöveget).
- Importálja a keretet Grafika objektumként.
- Adjon hozzá külön Szöveg objektumot a gomb fölé pozicionálva.
- Konfigurálja mindkettőt Nyomógomb csoportként.
Kompatibilitás: Ehhez a módszerhez PanelBuilder32 2.0-s vagy újabb verzió szükséges.
Műszaki specifikációk és tippek
Támogatott formátumok: .bmp (monokróm, 16 színű, 256 színű, 24 bites)
Maximális felbontás: 640 x 480 (PanelView Standard); 320 x 240 (PanelView Plus 6xx)
Színmélység 3D keretekhez: Minimum 256 szín
Ajánlott gombméret: 64 x 32, 80 x 40 vagy 96 x 48 pixel
Gyakori problémák és megoldások
- Probléma: A gomb torzul. Ok: Oldalarány eltérés. Megoldás: Az exportálási méretek pontos összehangolása.
- Probléma: A szöveg pixelezettnek tűnik. Ok: Alacsony felbontású forrás. Megoldás: Újra létrehozás Paint-ben 96x48-as vagy nagyobb méretben.
- Probléma: A gomb nem reagál. Ok: Hiányzó lenyomott-állapotú grafika. Megoldás: Rendeljen hozzá mindkét 0. és 1. állapotú grafikát.
Ajánlások
Új PanelBuilder32 projektekhez használja a minta-alapú 3D keretek megközelítést: Importálja a 3dbutton.bmp-t a mintakönyvtárból, konfigurálja a gomb színét a Nyomógomb tulajdonságaiban, és adjon hozzá szöveget külön PB32 Szöveg objektumként. Ez a megközelítés lehetővé teszi a futásidejű színváltoztatást a bitmapek módosítása nélkül, csökkenti a projektfájl méretét és javítja a karbantarthatóságot.
tags: #photoshop #gomb #letrehozasa