Photoshop Loo Web 2.0 nupp
Nupud Photoshopi õpetused on tõenäoliselt üks Photoshopi õpetuste saidi üks kuumimaid kategooriaid ja kuna Web 2.0 on sellised kuumad teemad, võimaldab see teha lihtsa nupu, mis sobib veebisaitide mis tahes Web 2.0 rakendamiseks. Õpetus pärast hüpata.
Nupu kujunduse alustamiseks looge umbes 500 px (laius) x 400px (kõrgus) tühi lõuend. Loo uus kihi kõnebg01". Valige Ümardatud ristkülikukujuline tööriist, hoidke SHIFT-i ja joonistage keskel ümmargune ruut. Iga värv on praeguses etapis hea.
Helista üles Segamisvalikud kohtabg01"ja kohandage järgmisi stiile:
Drop Shadow
- Läbipaistmatus: 40%
- Kaugus: 0px
- Spread: 0%
- Suurus: 6tk
Gradiant Overlay
- Värvipeatus: 0%, # d00031
- Värvipeatus: 100%, # ff2b5d
Hoidke CTRL-i, vasakklõps 'bg01'Kihi pisipilt selle kuju valimiseks. Mine Valige -> Muutma -> Leping ja sisestage väärtus '2tk". See vähendab valitud ala 2 pikslit.
Loo uus kihi kõnebg02'ja täitis esiletõstetud (pärast kahanemist) ala mis tahes värvi. Ma kasutan siin # 000000 musta. Topeltklõpsake 'bg02', et käivitada Segamisvõimalus ja näpistage järgmine stiil.
Gradiant Overlay
- Värvipeatus: 0%, # c6002f
- Värvipeatus: 100%, # c6002f
Loo tekstile uus uus kiht, kutsuge sedatxt". Sisestage nupu tekst. Ma esindan tähestikku. Siin kasutatavad fontid on järgmised:
- Ümardatud Arial Bold
- 150tk
Sama, pärast teksti valimist topeltklõpsake 'txt', et käivitada Segamisvalikud ja näpistama järgmisi stiile.
Drop Shadow
- Läbipaistmatus: 25%
- Kaugus: 0px
- Spread: 0px
- Suurus: 5tk
Sisemine vari
- Läbipaistmatus: 10%
- Kaugus: 0px
- Choke: 0
- Suurus: 10tk
Bevel Emboss
- Sügavus: 1tk
- Suund: alla
- Suurus: 0px
- Softten: 0px
- Esiletõstmise režiimi läbipaistmatus: 32%
- Varju režiimi läbipaistmatus: 32%
Gradiant Overlay
- Värvipeatus: 0% # d2d2d2
- Värvipeatus: 100% # f0efef
Nupp on peaaegu valmis. Anname talle ülemise osa veidi kuma. Hoidke CTRL, vasakklõps 'bg02'Kihi pisipilt välimise kuju tõstmiseks; valida Eclipse Marquee tööriist. Nüüd hoidke ALT, Kui valitud on Eclipse Marquee tööriist, tõmmake see üle, et miinus välja valitud ala alumine pool. Vaadake ülaltoodud pilti.
Kui ülemine osa on esile tõstetud ja Eclipse Marquee tööriist ikka valitud, paremklõpsake ja valige Suled; sisenema 15px raadiuses.
Loo uus kiht, helista sellelekuma'ja täitke esiletõstetud osa valge [#ffffff]. See peaks lisama teie nupu ülemisele osale sära. Lõpptoode peaks nägema allpool olevat pilti.
Download Tutorial
Midagi ekstra…
Nihutage segamissuvandeidbg01"ja"bg02'annab sulle rohkem huvitavaid nuppe. Siin on veel üks Photoshopi õpetus nupust, mida olen varem teinud - Loo Web 2.0 jaoks läikiv nupp
Proovi allalaadimine