Gombok készítése Photoshopban: Lépésről lépésre útmutató

A Photoshop egy rendkívül sokoldalú képszerkesztő szoftver, amely lehetővé teszi lenyűgöző vizuális elemek létrehozását, beleértve a weboldalakon és egyéb digitális projektekben gyakran használt gombokat is. Ez az útmutató részletesen bemutatja, hogyan hozhat létre különböző típusú gombokat a Photoshopban, a legegyszerűbbektől a csillogó, üvegszerű effektekkel ellátottakig.

Az alapok: Gombok létrehozása egyszerű beállításokkal

Kezdjük a legegyszerűbb gomb létrehozásával, amely ideális kezdők számára. Ez a módszer gyors és hatékony, és alapvető Photoshop ismereteket igényel.

1. Hozzon létre egy új dokumentumot, amelynek mérete például 200x30 pixel (vagy akkora, amekkorára a gombot szeretné). CTRL+N (vagy CMD+N Macen) paranccsal nyissa meg az új dokumentum párbeszédablakot.

2. Öntse ki a vásznat egy tetszőleges színnel, amely a gomb alapja lesz. Ehhez használja a festékesbödön eszközt (G).

3. Kattintson duplán a "Background" feliratra a Rétegek panelen, majd kattintson az OK gombra. Ezzel a hátteret fóliává alakítottuk, ami lehetővé teszi további effektusok alkalmazását.

4. Kattintson az "f" ikonra a Rétegek panel alján, és válassza a "Bevel & Emboss" (Hajlítás és domborítás) opciót. Állítsa be a "Size" (Méret) értéket tetszés szerint, majd kattintson az OK gombra.

5. Most jöhet a felirat a gombra. Válassza a "Text tool" (Szöveg eszköz) (T) opciót. Állítsa be a betűméretet, a simítást, a középre igazítást és a kívánt színt (például fehéret).

6. Kattintson a kép közepére, és írja be a kívánt szöveget. A Photoshop automatikusan új fóliára helyezi a szöveget, így könnyen mozgathatja és effekteket alkalmazhat rajta.

7. Kattintson újra az "f" ikonra a Rétegek panelen, és válassza a "Drop Shadow" (Lecsúszó árnyék) opciót. Állítsa a "Distance" (Távolság) értéket például 2-re, majd kattintson az OK gombra.

8. A szöveg könnyen átírható, ha szükséges. Mentsje el a munkáját .psd formátumban (CTRL+S vagy CMD+S Macen), hogy később szerkeszthesse.

Csillogó, üvegszerű gombok létrehozása

Ez a részletesebb útmutató olyan felhasználók számára készült, akik már rendelkeznek alapvető Photoshop ismeretekkel. Bemutatjuk, hogyan hozhat létre csillogó, üvegszerű gombokat, amelyek látványosak lehetnek weboldalakon vagy bannereken.

1. módszer: Téglalapok és színátmenetek használata

1. Készítsen egy új dokumentumot (például 500x500 pixeles, fehér háttérrel). Válassza ki a lekerekített téglalap eszközt az eszköztárból, és állítsa be a lekerekítés sugarát 30 pixelre. Hozzon létre egy 200x200 pixel méretű téglalapot.

2. Másolja le a téglalapot az Alt (vagy Option Macen) billentyű lenyomva tartásával, és húzza lefelé, hogy a teteje kb. az eredeti téglalap közepéig érjen. Ez lesz a gomb felső csillogó része.

3. Jelölje ki a felső téglalapot, és az Alt (vagy Option Macen) billentyű lenyomva tartásával mozgassa balra egy egységgel a nyílbillentyűk segítségével. Ezután nyomjon egy jobbra nyilat, hogy a másolat visszakerüljön az eredeti helyére.

4. Jelölje ki a fenti és az alsó téglalapot is. A jobb oldali panelen található "Pathfinder" (Útválasztó) résznél kattintson a "Divide" (Felosztás) gombra. Ez több részre bontja az objektumot. Ha a Pathfinder panel nem látható, keresse meg a "Window -> Pathfinder" (Ablak -> Útválasztó) menüpontban, vagy használja a Shift+Ctrl+F9 (Shift+Cmd+F9 Macen) gyorsbillentyűt.

5. Ez már közelít a gombformához. Jelölje ki a téglalap alsó részét (ez lesz maga a gomb), majd a jobb oldali panelen található "Gradient" (Színátmenet) fülön kattintson egy színátmenetre.

6. Kétféle színátmenet alkalmazható: "Linear" (Lineáris) vagy "Radial" (Radiális).

7. Meg kell jelennie a "Gradient Annotator"-nak a téglalapon. Ha nem, kapcsolja be a "View -> Show Gradient Annotator" (Nézet -> Gradient Annotator megjelenítése) opcióval, vagy használja a Ctrl+Alt+G (Cmd+Alt+G Macen) gyorsbillentyűt. Ezzel az eszközzel beállíthatja a színátmenet nagyságát és elhelyezkedését.

8. A gomb elkészült. A csillogás elővarázslásához vigye a felső fehér téglalap átlátszóságát ("Opacity") 7%-ra a "Transparency" (Átlátszóság) fülön.

2. módszer: Rétegstílusok és egyedi formák használata

Ez a módszer a rétegstílusok és egyedi formák kombinációját használja a látványos gombok létrehozásához.

1. Készítsen egy 500x500 pixeles, fehér hátterű dokumentumot. Válassza ki a lekerekített téglalap eszközt, és állítsa be a lekerekítés sugarát 30 pixelre. Készítsen egy 200x200 pixeles téglalapot.

2. Kattintson duplán a téglalap réteg nevére a Rétegek panelen, hogy megnyissa a rétegstílus ablakot. Kapcsoljon be három effektust: "Inner Shadow" (Belső árnyék), "Bevel & Emboss" (Hajlítás és domborítás), és "Gradient Overlay" (Színátmenet átfedés). Állítsa be az értékeket a képen látható módon.

3. A "Gradient Overlay" adja meg a gomb színét. Válasszon egy tetszőleges színt (például sötétszürke: #505050). Az "Inner Shadow" belső mélységet ad, üveglap hatást keltve.

4. Most jöhet a csillogás. Készítsen egy új réteget "csillogás" néven. Rajzoljon egy újabb téglalapot a gomb felső harmadába (kis peremet hagyva), a lekerekítés sugara maradjon 30 pixel.

5. Válassza a "Add Anchor Point tool" (Hozzáadás szerkesztőponthoz eszköz) opciót, és adjon hozzá egy pontot a téglalap alsó vonalának közepére. Ezután válassza a "Direct Selection tool" (Közvetlen kijelölés eszköz) opciót, fogja meg az alulra hozzáadott pontot, és húzza kb. a téglalap negyedével nagyobbra. Alakítsa át a szomszédos pontok iránypontjait, hogy szép ívet kapjon.

6. A kész formán kattintson jobb egérgombbal, és válassza a "Make Selection" (Kijelölés létrehozása) almenüt. Ezáltal a görbe kijelöléssé alakul.

7. Válassza a "Gradient tool" (Színátmenet eszköz) opciót. Állítsa be a színátmenet színét fehérre, a másik végét pedig átlátszóra. Kattintson a kijelölés felső peremére, és húzza az egeret egyenesen lefelé a nagy téglalap közepéig. Ezáltal a színátmenet a kijelölésen belülre kerül.

8. Készítsen egy új réteget "alsó csillogás" néven. Rajzoljon két téglalapot a gomb bal alsó harmadában. Használja a "Fill Path" (Útvonal kitöltése) parancsot, törölje ki a görbét, és vágja le a felesleges részeket a "Polygon Lasso tool" (Sokszög kijelölő) segítségével. Radírral halványítsa és vékonyítsa el a vonal széleit.

9. Készítsen egy új réteget "belső" néven, és helyezze a gomb és a csillogás rétegek közé. Az alakzatok menüből válasszon egy tetszőleges formát, helyezze a gomb közepébe, és használja újra a "Fill Path" parancsot (a görbét utána törölheti).

10. Állítsa a réteg átlátszóságát 80%-ra, és adjon hozzá egy kis árnyékot. A gomb réteg színátfedésének módosításával bármilyen színű gomb készíthető. Használhat színátmenetet is.

Gombok testreszabása és mentése

A Photoshop számos lehetőséget kínál a gombok testreszabására és a stílusok mentésére, hogy később könnyen újra felhasználhassa őket.

Legördülő panelek használata

A legördülő panelek gyors hozzáférést biztosítanak az ecsetekhez, színtárakhoz, színátmenetekhez, stílusokhoz, mintákhoz, kontúrokhoz és alakzatokhoz. Elemet átnevezhet, törölhet, tárakat tölthet be, menthet vagy írhat felül. Megváltoztathatja a legördülő panelek megjelenítési módját is: névvel, bélyegképként vagy névvel és ikonnal.

Az eszköztáron lévő eszköz bélyegképére kattintva megjeleníthető az eszköz legördülő panelje.

• Eszközkészlet visszaállítása: Visszatérés az alapértelmezett gyűjteményhez.
• Eszközkészlet betöltése: Gyűjtemény hozzáadása az aktuális listához.
• Eszközkészlet cseréje: Az aktuális lista felülírása egy másik gyűjteménnyel.
• Eszközkészletek mentése: Az aktuális lista mentése gyűjteményként későbbi használatra.

Menük testreszabása és mentése

A menük testreszabásával elrejthet vagy megjeleníthet menüelemeket, valamint színeket adhat hozzájuk.

1. Kattintson a "Szerkesztés -> Menük" parancsra.

2. Mutasson az "Ablak -> Munkaterület -> Billentyűparancsok és menük" pontra, majd kattintson a "Menük" fülre.

3. Válasszon egy menükészletet a "Készlet" legördülő menüből.

4. Menüelem elrejtéséhez kattintson a "Láthatóság" gombra. Egy menüelem megjelenítéséhez kattintson a "Láthatóság" gomb üres négyzetére.

5. Szín hozzáadásához kattintson a színtárra, és válasszon ki egy színt.

6. Az összes módosítás mentéséhez kattintson a "Készlet mentése" gombra. Ha a módosításokat a Photoshop alapértelmezések készletébe menti, megnyílik a "Mentés" párbeszédpanel. Írja be az új készlet nevét, majd kattintson a "Mentés" gombra.

7. Új készlet létrehozásához az aktuális menükészlet alapján kattintson a "Készlet mentése másként" gombra.

A menükben elrejtett elemek ideiglenesen megjeleníthetők a "Összes menüelem megjelenítése" parancs kiválasztásával.

Stílusok mentése

Ha elkészített egy tetszőleges gombot, annak rétegstílusait elmentheti egy új stílus létrehozásával. Ezt követően egyetlen kattintással alkalmazhatja ezt a stílust más objektumokra.

1. Nyissa meg a "Window -> Styles" (Ablak -> Stílusok) panelt.

2. Kattintson az új stílus létrehozása ikonra (általában egy kis négyzet a panel alján).

3. Adjon nevet az új stílusnak, és kattintson az OK gombra.

Mostantól az elkészített stílus megjelenik a Stílusok panelen, és bármikor alkalmazhatja más rétegekre.

tags: #gomb #keszitese #photoshop