Photoshopin luominen Web 2.0 -painike

Painikkeet Photoshop-opetusohjelmat ovat luultavasti yksi kuumimmista kategorioista kaikissa Photoshop-opetusohjelmien sivustoissa, ja koska Web 2.0 on niin kuumia aiheita, voit tehdä yksinkertaisen painikkeen, joka soveltuu Web-sivustojen Web 2.0 -sovelluksiin. Opetusohjelma hyppyn jälkeen.

Luo tyhjä kankaalle noin 500 pikseliä (leveys) x 400px (korkeus) aloittaaksesi painikkeen suunnittelun. Luo uusi kerrospuhelubg01'. Valitse Pyöristetty suorakulmainen työkalu, pidä SHIFT-painiketta ja piirrä pyöreä sivukulma keskelle. Kaikki värit ovat hienoja nykyisessä vaiheessa.

Soita Sekoitusasetukset of 'bg01"ja säädä seuraavia tyylejä:

Pudota varjo

Läpinäkyvyys: 40%
Etäisyys: 0px
Levitä: 0%
Koko: 6px

Gradiant Overlay

Värin pysäytys: 0%, # d00031
Väri pysähtyy: 100%, # ff2b5d

Pidä CTRL-näppäintä painettuna, vasemmalla painikkeella.bg01'Tason pikkukuva valitaksesi sen muodon. Mennä valita -> Muuttaa -> sopimus ja anna arvo ”2px'. Tämä kutistaa valitun alueen 2 pikselillä.

Luo uusi kerrospuhelubg02'ja täytti korostetun (kutistumisen jälkeen) alueen millä tahansa värillä. Käytän # 000000 mustaa. Kaksoisnapsauta "bg02" käynnistääksesi Sekoitusvaihtoehto ja muokkaa seuraavaa tyyliä.

Gradiant Overlay

Värin pysäytys: 0%, # c6002f
Väri pysähtyy: 100%, # c6002f

Luo uusi uusi kerros tekstille, soita se "txt'. Aseta painikkeen teksti. Käytän aakkoset edustamaan. Käytetyt fonttityylit ovat seuraavat:

Pyöristetty Arial Bold
150pt

Samoin, kun olet tehnyt tekstin, kaksoisnapsauta "txt" käynnistääksesi Sekoitusasetukset ja muokkaa seuraavia tyylejä.

Pudota varjo

Läpinäkyvyys: 25%
Etäisyys: 0px
Levitä: 0px
Koko: 5px

Sisäinen varjo

Läpinäkyvyys: 10%
Etäisyys: 0px
Kuristin: 0
Koko: 10px

Bevel Emboss

Syvyys: 1px
Suunta: Alas
Koko: 0px
Softten: 0px
Korosta tilan läpinäkyvyys: 32%
Varjostustila: 32%

Gradiant Overlay

Värin pysäytys: 0% # d2d2d2
Väri pysähtyy: 100% # f0efef

Painike on melkein valmis. Anna sen hieman hehkua yläosassa. pitää CTRL, vasen painallus 'bg02'Layer Thumbnail, joka korostaa ulkomuotoa; valita Eclipse Marquee -työkalu. Pidä nyt kiinni ALT, Kun Eclipse Marquee Tool -työkalu on valittuna, vedä on poissa korostetun alueen alaosasta. Katso yllä oleva kuva.

Kun yläosa on korostettu ja Eclipse Marquee Tool on edelleen valittuna, napsauta hiiren kakkospainikkeella ja valitse Sulka; tulla sisään 15px säteelle.

Luo uusi kerros, soita sehehku'ja täytä korostettu osa valkoisella [#ffffff]. Tämän pitäisi lisätä hohtava vaikutus painikkeen yläosaan. Lopputuotteen tulisi näyttää alla olevasta kuvasta.

Lataa opetusohjelma

Jotain ylimääräistä…

Paranna sekoitusasetuksiabg01'ja'bg02'antaa sinulle enemmän mielenkiintoisia painikkeita. Tässä on toinen Photoshop-opetusohjelma painikkeella, jonka olen tehnyt aiemmin - Luo kiiltävä painike Web 2.0: lle

Lataa näyte