Kako ustvariti gumbe 3D s programom Adobe Photoshop

Kako ustvariti gumbe 3D s programom Adobe Photoshop

Obstaja veliko neverjetnih stvari, ki jih lahko ustvarite Adobe Photoshop ki so uporabne na spletu, od preprostih okvirjev za slike do zapletenih uporabniških vmesnikov. Ena najbolj uporabnih stvari, ki jih lahko ustvarite v Photoshopu, so gumbi 3D, ki vam bodo prišli še kako prav, če zaženete blog ali spletno mesto s vmesnikom po meri.





V tem članku vam bomo pokazali, kako ustvariti 3D gumbe s programom Photoshop, skupaj z vizualnimi stanji 'gor' in 'dol', tako da jih lahko animirate. (V tem članku ne bomo obravnavali same animacije.)



1. korak: Pripravite dokument

Medtem ko se gumbi 3D najpogosteje pojavljajo na spletnih mestih, je pomembno omeniti, da zanje obstajajo tudi druge aplikacije, na primer animirani GIF-i, makete zaslonov izdelkov in igre za mobilne naprave. Odvisno od tega, za kaj ustvarjate ta gumb, se lahko vaša končna oblika datoteke in njene dimenzije razlikujejo.





Če želite v Photoshopu ustvariti gumb 3D, morate zanj ustvariti dokument po meri. Če želite to narediti, odprite Photoshop in kliknite Ustvari novo> Po meri . Začnite vnašati svoje vrednosti.

Če želite ustvariti gumb 3D, boste želeli vodoravni dokument. Za naše smo uporabili:



  • 900 x 300 slikovnih pik v višino
  • 300 slikovnih pik/palec
  • Barvni način RGB

Čeprav te specifikacije vsekakor niso trdo in hitro pravilo, bo to zagotovilo, da imate več kot dovolj prostora za delo in možnost, da velikost gumbov po potrebi povečate navzgor in navzdol.

2. korak: Nastavite pravokotnik za gumb 3D

Ko nastavite specifikacije za svojo datoteko, boste preusmerjeni v delovni prostor. V enem sloju boste imeli vodoravno belo platno in tu boste začeli graditi svoj gumb.



Če želite sestaviti gumb 3D, kliknite gumb Orodje za zaokrožene pravokotnike na levi strani zaslona, ​​prikazano tukaj v rdeči barvi. Uporabite lahko tudi bližnjico U do nje dostopati.

Enkrat kliknite na svojo belo plast: to bo samodejno prikazalo vašo Ustvarite zaokrožen pravokotnik škatla. To polje boste uporabili za določitev dimenzij vašega pravokotnika.



Za naš gumb smo šli z:

  • 300 slikovnih pik v širino
  • 75 pikslov visoko

Poskrbeli smo tudi, da so vogali zaokroženi za 10 slikovnih pik. Tudi ne previsoko in ne prenizko. Nato smo pritisnili v redu .

Opomba: Gumbi se razlikujejo glede na velikost in obliko, zato ne čutite, da morate uporabiti te natančne dimenzije. Če iščete več informacij o bližnjicah, je tu še nekaj najbolj uporabni ukazi za tipkovnico Photoshop .

Ko pritisnete v redu , Photoshop bo v vaši plasti ustvaril zaokrožen pravokotnik s temi dimenzijami. Lahko ga spremenite Izpolnite in Možganska kap barve z uporabo spustnih menijev v zgornjem levem kotu zaslona.

Za namen te vadnice --- in za ponazoritev, kako bi lahko izgledali gumb 'gor' in 'dol'-bomo gumb 'navzdol' obarvali rdeče.

3. korak: naredite svoj gumb 3D

Ko ustvarite svoj osnovni gumb in izberete njegovo barvo, ga boste želeli prilagoditi v Slog sloja pogovorno okno. To je zato, da izgleda bolj 3D.

Za dostop do vašega Slog sloja pogovorno okno, lahko greste Layer> Layer Style iz zgornjega menija. Dvokliknite lahko tudi plast, ki vsebuje vaš gumb, da se samodejno prikaže. Ta način je veliko hitrejši in osebno ga imamo raje.

Ko je polje za slog sloja odprto, pojdite na možnost Bevel & Emboss . Ga vklopite.

To je hiter in enostaven način, da robom gumba dodate bolj dvignjen, '3D' videz. Za to vadnico smo uporabili te nastavitve:

Struktura

  • Slog: Notranja poševnina
  • Tehnika: Mehko dleto
  • Globina: 605
  • Smer: Gor
  • Velikost: 5
  • Zmehčati: 1

Senčenje

  • Kot: 90
  • Nadmorska višina: 37
  • Način označevanja: Barvni Dodge, 55% motnost
  • Senčni način: Več, 25% motnost

Trik je v tem, da nastavitve nastavite dovolj visoko, da vidite razliko, vendar ne tako močne, da bi bile velike.

Ko smo končali z Bevel & Embossom, smo šli na Obris in vklopil tudi to. Contour naredi definicijo Bevel & Emboss nekoliko močnejšo in za to vadnico smo izbrali nastavitev Stožec - obrnjen .

Nato vklopite Gradient prekrivanje . To daje gumbu zaokrožen, rahlo 'sijajen' videz. Nastavitve so naslednje:

  • Način mešanja: Prekrivanje
  • Motnost: 90
  • Slog: Linearno
  • Kot: 90
  • Lestvica: 100

Končno smo vklopili Drop Shadow , da bi bil gumb nekoliko „dvignjen“ od belega ozadja spletnega mesta ali spletnega dnevnika. Še enkrat, tukaj so nastavitve:

kar od naslednjega velja za večino novejših pogonov sata

Struktura

  • Način mešanja: Večkraten
  • Motnost: 35
  • Kot: 90
  • Razdalja: 2
  • Širjenje: 6
  • Velikost: 8

Kakovost

  • Obris: Linearno
  • Hrup: 0
  • Layer Knocks Out Drop Shadow: Vklopljeno

Zdaj je čas, da te specifikacije shranite kot slog sloja.

4. korak: Shranite kot slog sloja

Ko končate z nastavitvami gumba, bo videti 3D. Ker obstaja velika verjetnost, da boste ustvarili več kot en gumb 3D, moramo najti hiter in enostaven način za to.

Evo kako.

Pred klikom v redu v Slog sloja pogovorno okno, kliknite na Nov slog . Ko to storite, bo Photoshop shranil ta slog sloja, ki ste ga ustvarili za svoj gumb.

Če uporabljate Photoshop CC, bo ta novi slog shranjen v vašo Knjižnice razdelku, kot lahko vidite zgoraj. Dostop je zelo hiter in enostaven.

5. korak: Kako uporabiti shranjeni slog sloja

Zdaj, ko ste oblikovali svoj gumb in ga shranili kot slog sloja, ga poglejmo v akciji za stanje 'gor'. Nobene laži, to vam bo skrajšalo delovni čas na pol.

Najprej ustvarimo drug gumb neposredno nad plastjo rdečega gumba. Za poudarjanje naredimo zeleno.

Naprej --- namesto da dvakrat kliknete na samo plast, da prikažete Slogi slojev pogovorno okno --- dvokliknite slog sloja v svojem Knjižnice ploščo.

Ko to storite, Photoshop samodejno uporabi shranjeni slog za vašo novo plast gumba, pri tem pa ohrani novo barvo in obliko. Zdaj imate dva gumba-enega v stanju navzgor in enega v navzdol-in to je tako preprosto narediti. Všeč mi je ta bližnjica.

6. korak: gumbu dodajte besedilo

Nato bomo gumbu dodali besedilo.

Če želite dodati besedilo, ustvarite novo plast nad plastema dveh gumbov. Kliknite na Vnesite orodje da začnete tipkati.

Za to vadnico bomo napisali besedo 'naročite se', ker je to nekaj, kar pogosto vidite na spletnih mestih in platformah družbenih medijev.

Uporabili bomo tudi pisavo, varno za splet san serif. Končna izbira, katero boste uporabili za svoj gumb, je vaša. Montserrat, Proxima Nova, Arial in Verdana so široko uporabljene alternative in varne za splet.

Ko to storite, pa morate narediti še nekaj subtilnih sprememb, da bo to besedilo 'pop'.

Najprej dvokliknite plast, ki vsebuje vaše besedilo, da ga lahko prikažete v svojem Slog sloja pogovorno okno.

Nato kliknite na Notranja senca , če želite besedilu dodati malo vdolbine (ali potopljenega območja). Zaradi tega je videti, kot da so črke vgravirane v gumb. Natančne nastavitve, ki smo jih uporabili za to vadnico, so spodaj.

Struktura

  • Način mešanja: Pomnožite
  • Motnost: 35
  • Kot: 90
  • Razdalja: 2
  • Dušitev: 4
  • Velikost: 1

Kakovost

  • Obris: Linearno
  • Hrup: 0

Nato uporabite a Gradient Overlay na te črke, da se lažje zlijejo v gumb, ne da bi bile videti ravne. Tudi pri nas so nastavitve:

  • Način mešanja: Barvna opeklina
  • Motnost: 90
  • Slog: Linearno
  • Kot: 90
  • Lestvica: 100

7. korak: Dokončanje

Ko ustvarite ta slog besedila-še posebej, če ga želite znova uporabiti-pojdite na Nov slog in ga shranite, preden kliknete v redu .

Ko je to zavito, lahko hitro preklapljate med obema plastema gumbov naprej in nazaj, da vidite, kako izgledata stanja 'gor' in 'dol'.

Precej kul, kajne? Če želite shraniti datoteko, pojdite Datoteka> Shrani kot in ga shranite kot ustrezno obliko datoteke za kateri koli projekt, na katerem delate.

Prilagodite svoj blog s 3D gumbi in pripomočki

Zdaj, ko veste, kako ustvariti 3D gumbe v Photoshopu, lahko z njim ustvarjate in oblikujete lastne 3D gumbe, ki ustrezajo vašim potrebam. S temi veščinami v svojem arzenalu lahko naredite izdelek, ki ni samo profesionalen, ampak tudi osebnega videza.

Želite vedeti o drugih stvareh, ki jih lahko počnete s tem programom? Tukaj je kako odstraniti ozadje v Photoshopu .

Deliti Deliti Cvrkutati E-naslov Kako dostopati do Googlove vgrajene ravni mehurčkov v sistemu Android

Če ste se kdaj morali prepričati, da je nekaj na nivoju, lahko zdaj v nekaj sekundah v telefonu dobite raven mehurčkov.

Preberite Naprej Sorodne teme
  • Ustvarjalno
  • Adobe Photoshop
  • Nasveti za urejanje slik
  • Vadnica za Photoshop
O avtorju Shianne Edelmayer(136 objavljenih člankov)

Shianne je diplomirala iz oblikovanja in se ukvarjala s podcastingom. Zdaj dela kot višja pisateljica in 2D ilustratorka. Zajema kreativno tehnologijo, zabavo in produktivnost za MakeUseOf.

Več od Shianne Edelmayer

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite