Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Itt van, ugyanazt a fényes gomb, mi lesz a vége:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Most nyílt Photoshop és kap kész!

Új dokumentum létrehozása méretű 800x500px.

Először meg kell határozni az alak a jövőben egy gombot. Ezek fog tenni. Azt kell mondanom - a bemutató fogok beszélni meglehetősen nehéz utat létrehozni formák. Ha nem szeretné, hogy működjön együtt a Pen Tool (Pen eszköz), vagy ha van, amíg nehéz ugorjon a 2. fejezetben, az ott bemutatott egyszerűbb módon.

Nos 1. fejezet azok számára, akik valami újat tanulni.

1. fejezet létrehozása gomb alakú Pen Tool

Ami a jövőt illeti előírják milyen előnyei vannak folyamatban a Toll eszköz. Először is, a rugalmasságot, hogy hozzon létre formákat. Akkor „farag” semmit. Persze, eszközök, mint a téglalap eszköz (téglalap) ezt nem teszik lehetővé, így kapsz egy nagyon általános gombra.

1. Tehát elég fecsegés. Folytassuk. Vegyük a Toll eszköz (P), és hozzon létre egy ilyen alak:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Ha szeretne többet megtudni a Pen Tool, olvassa el a megfelelő tanulságokat.

2. Az alakja a gomb nagyon görbe és hozzávetőleges. Most érintse egy nagyon fontos téma - munka futók. Az útmutatók nagy segítséget jelent a tervező munkáját. A tapintható mérni a távolságot. Most te magad fogod érteni. Már a kezdet kezdetén jobb kitölteni háttér más színű, mint a fehér. Legyen ez egy szürke (# d9d9d9). Vegye eszköz Paint Bucket Tool (Fill) és menj a réteg háttér, akkor töltse ki a kiválasztott szín:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

3. Ok, most meg a vezetők, majd igazítsa őket egy gomb alakú. A telepítéshez a vezető megy a Nézet menü (View) -> New Guide (New Guide). Tick ​​Vertikális (függőleges) és adjon meg egy értéket a 200px:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Mint látható, a kalauz meg összesen 200px balról szélén a vásznon. Most, ha megnyomja a Ctrl + H a vezető eltűnik. Ha megnyomja ezt a kombinációt cserébe küld vissza.

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

5. Helyezze még egy útmutató a helyzet Függőleges 600px:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

6. További lesz szükség pozíciók 4 függőleges vezetékeket 160 és 640px, 150 és horizontális és 350px. Meg kell kinéznie:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

7. Itt az ideje, hogy összehangolják az űrlapot. Ehhez, hogy a Direct Selection Tool (irányított szelekció):

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Aztán, a nettó munka formájában. Ha nincs útmutató, nyugodtan adjunk hozzá. Az útmutató is hozzá egy sort (úgynevezett a Ctrl + R). Ehhez kattintson a sorban a kockázat és hogyan kell „húzni” az ő útmutatók. A működés során az egyszerűség kedvéért használjuk a nagyítás, és hozza közel a vászon (Ctrl + egérgörgő).

Tehát, akkor kap ez üres jövőbeli szép gombokat:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Mint látható, kellett hozzá egy pár útmutatók. Az űrlap kész, akkor lépni.

2. fejezet Forma gomb egyszerű eszközökkel.

8. Ahogy ígértem, most megmondani, hogyan lehet egy gomb alakú szó 20 másodperc. Válassza ki a Lekerekített téglalap eszközt Tool (téglalap ferde)

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Állítsa 90px letörés sugár:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Minden készen áll forma

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

3. fejezet: Fényes gomb

9. Tehát megvan, hogy hozzon létre saját hatások gombokat. Nem számít, milyen módon teszel az alapokat gombok (alak) - az elv ugyanaz. Nézzük először alkalmazza a szövegre gombra. Hozzon létre egy új réteget (Shift + Ctrl + N), és írjon szöveget:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Szöveg, hogy a színe sötétebb, mint a gomb is. By the way, az alak használtam a szín # 3e7bab, az # 183e5b gombra.

10. Készítsen egy másolatot a réteg a forma (Ctrl + J). Állítsa be a fehérre a Ctrl + T (Free deformáció), és ezáltal csökkenti formában:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

11. Alsó opacitás 35%:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Mint azt bizonyára kitalálta, mi csak tett egy fénypont a gyönyörű gombokkal.

12. Készítsen egy réteg maszkot a hollandi:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

13. Most, hogy egy puha, fekete ecset méretét 400px:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Séta ezt az ecsetet alján a fáklyát. Meg kell kinéznie:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

14. Készítsen másolatot a fáklyát, és a réteg maszk „wipe” fekete kefe minden tér belsejében a fáklyát, így csak a felső részt. keverési mód Lágy fény (Soft fény) és 100% opacitás beállítva:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

15. Hozzon létre egy új réteget, hogy puha, fehér ecsettel átmérője 8 képpont, és felhívni a tetején egy flare csík (szalag, hogy tartsa fordult tökéletesen egyenes Shift billentyűt):

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

16. létrehozása maszk ezt a réteget, és törli a csík szélei mentén:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

17. Ismétlődő réteg a szalag és alkalmazni szűrő (filter) -> Blur (elmosódott) -> Gaussian Blur (Gauss), 4,6px sugara:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

18. A Ctrl + kattintás a áttekintő, hogy az első vakító réteget, választás megjelenik. A réteget a szalag nyomjuk meg a Töröl, majd menj a réteg az újonnan alkalmazott elmosódás és Hit törlése:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

E művelet megszabadulni fölösleges részeket a szalag, felmászni az egyéb elemek (by the way, akkor egyszerűen törölje a fölösleges részeket a radír, de azáltal, pontosabban).

19. Kapcsolódó csinálnak az alakjának. Ctrl + kattintás gombok a fő hurok, akkor a Ctrl + Shift + I megfordítani a kiválasztási és nyomja meg a Delete mindkét réteg egy csík. Most már a gomb így kell kinéznie:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

20. Most, a rétegeket össze lehet vonalak (Ctrl + E) és állítsa be a átlátszóságát 80%, kölcsönöz természetesség vakító.

21. továbbra is együttműködik a fényt. Hozzon létre egy új réteget, és egy puha fehér ecsettel kell felhívni egy ilyen helyszínen:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

22. Ez most egy ismerős művelet gomb kiosztás áramkör (Ctrl + klikk a formában rétegek gombok), majd megfordítjuk a Shift + Ctrl + I és törlése. A keverési mód Lágy fény, 70% -ra:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

23. Másolja a réteg, tegyük alatt a fő, a szín egy kicsit könnyebb gombot (I # 79afdb) és mozog ez a réteg 1px le. Kapjuk domborítás hatás:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

24. A Pen Tool, hogy egyfajta ragyogás mindkét oldalán a gombot, és csökkenti a homály, hogy 10-20%:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

25. Ez a gomb tűnt, túl magas, ezért választottam az összes réteget kivéve a szöveget, nyomja meg a Ctrl + T és csökkent a magassága a gomb:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

26. Lehetséges, hogy adjunk még egy kis fáklyát alján. Ön már tudja, hogyan kell csinálni. Most a gomb így néz ki:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Most, a maszk réteg törli az alsó része a reflexió:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

28. Nos, a gomb most igazán szép marad csak azért, hogy egy árnyék. Készítsen egy réteg fölött a háttér, és minden, a többit, és egy szilárd fekete kefe, húzzon egy vonalat:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

29. Alkalmazás Gauss-féle életlen sugarú 8 px, opacitást 46px réteg. Módosítása az árnyékban, amíg nem tetszik:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

30. Valójában ez az, professzionális fényes gomb kész. Most akkor távolítsa el a háttérben, változtatni a méretét, hogy az egyik, hogy szüksége lesz a helyszínen (Kép -> képméret), és használja az öröm maguk és a felhasználók.

A lecke egy nagyon hosszú, de remélem, hogy sokat tanultam, és ha te magad mentek végig a lépéseket, akkor most tudja, hogy könnyen teremt szép gomb a webhelyen.

És itt van a végeredmény, tettem hozzá egy kicsit elegáns zaj:

Gyönyörű gomb a helyén, a levont photoshop (Photoshop) - video tutorials Photoshop, design, a fényképezés

Oszd meg barátaiddal