3D -nuppude loomine Adobe Photoshopi abil

3D -nuppude loomine Adobe Photoshopi abil

Saate luua palju hämmastavaid asju Adobe Photoshop mis on veebis kasulikud, alates lihtsatest pildiraamidest kuni keerukate kasutajaliideseteni. Üks kasulikumaid asju, mida saate Photoshopis luua, on 3D -nupud, mis tulevad kasuks, kui haldate kohandatud liidesega ajaveebi või veebisaiti.





Selles artiklis näitame teile, kuidas luua Photoshopi abil 3D -nuppe koos visuaalsete üles- ja alla -olekutega, et saaksite neid animeerida. (Me ei käsitle selles artiklis animatsiooni ennast.)



Samm: valmistage dokument ette

Kuigi 3D-nupud ilmuvad veebisaitidel kõige sagedamini, on oluline märkida, et nende jaoks on ka muid rakendusi, nagu animeeritud GIF-id, makettoodete kuvamised ja mobiilimängud. Sõltuvalt sellest, mille jaoks selle nupu loote, võib teie lõplik failivorming ja selle mõõtmed erineda.





Photoshopis 3D -nupu loomiseks peate looma selle jaoks kohandatud dokumendi. Selleks avage Photoshop ja klõpsake nuppu Loo uus> Kohandatud . Alustage oma väärtuste sisestamist.

3D -nupu loomiseks soovite horisontaalset dokumenti. Meie jaoks kasutasime:



  • Kõrgus 900 x 300 pikslit
  • 300 pikslit/tolli
  • RGB värvirežiim

Kuigi need spetsifikatsioonid ei ole kindlasti karm ja kiire reegel, tagab see, et teil on töötamiseks rohkem kui piisavalt ruumi ja võimalus oma nuppude suurust vastavalt vajadusele üles -alla skaleerida.

2. samm: seadistage oma 3D -nupu ristkülik

Pärast faili spetsifikatsioonide seadistamist suunatakse teid oma tööruumi. Teil on ühes kihis horisontaalne valge lõuend ja siin hakkate oma nuppu ehitama.



3D -nupu loomiseks klõpsake nuppu Ümardatud ristküliku tööriist ekraani vasakus servas, siin punasena näha. Võite kasutada ka otseteed U sellele juurde pääseda.

Klõpsake üks kord oma valgel kihil: see avab automaatselt teie Loo ümardatud ristkülik kast. Kasutate seda kasti oma ristküliku mõõtmete määramiseks.



Nupu jaoks läksime järgmiselt:

  • 300 pikslit lai
  • 75 pikslit kõrge

Samuti veendusime, et nurgad on ümardatud 10 piksliga. Mitte liiga kõrge ja mitte liiga madal. Siis vajutasime Okei .

Märge: Nupud erinevad suuruse ja kuju poolest, nii et ärge tundke, et peate neid täpseid mõõtmeid kasutama. Lisaks, kui otsite otseteede kohta lisateavet, on siin mõned neist kõige kasulikumad Photoshopi klaviatuuri käsud .

Kui vajutate Okei , Photoshop loob nende mõõtmetega ümardatud ristküliku teie kihi sees. Saate seda muuta Täida ja Insult värvi, kasutades ekraani vasakus ülanurgas olevaid rippmenüüsid.

Selle õpetuse jaoks-ja näitlikustamiseks, kuidas nupud „üles” ja „alla” välja näevad-muudame oma nupu „alla” punaseks.

Samm: tehke oma nupp 3D -vormingus

Pärast põhinupu loomist ja selle värvi valimist soovite seda kaustas kohandada Kihi stiil Dialoogikast. Seda selleks, et see näeks rohkem 3D välja.

Oma juurdepääsuks Kihi stiil dialoogiboksis, võite minna Kiht> Kihistiil ülemisest menüüst. Samuti saate topeltklõpsata kihti, mis sisaldab teie nuppu, et see automaatselt esile tuua. See viis on palju kiirem ja me isiklikult eelistame seda.

Kui teie kihistiili kast on üleval, minge valiku juurde Kaldus ja reljeefne . Lülita sisse.

See on kiire ja lihtne viis anda oma nupu servadele kõrgem, „3D” välimus. Selle õpetuse jaoks kasutasime järgmisi seadeid:

Struktuur

  • Stiil: Sisemine kaldus
  • Tehnika: Peitel pehme
  • Sügavus: 605
  • Suund: Üles
  • Suurus: 5
  • Pehmendamine: 1

Varjutamine

  • Nurk: 90
  • Kõrgus: 37
  • Esiletõstmisrežiim: Värviline Dodge, läbipaistmatus 55%
  • Varirežiim: Mitmekordne, 25% läbipaistmatus

Trikk on teha seaded piisavalt kõrgeks, et näeksite mõningast erinevust, kuid mitte nii tugevat, et see oleks üle jõu käiv.

Pärast Bevel & Embossiga lõpetamist läksime aadressile Kontuur ja lülitas selle ka sisse. Contour muudab Bevel & Emboss'i määratluse natuke tugevamaks ja selle õpetuse jaoks valisime selle seade Koonus - ümberpööratud .

Seejärel lülitage sisse Gradiendi ülekate . See annab nupule ümara, kergelt läikiva välimuse. Seaded on järgmised.

  • Segamisrežiim: Ülekate
  • Läbipaistmatus: 90
  • Stiil: Lineaarne
  • Nurk: 90
  • Kaal: 100

Lõpuks lülitasime sisse Drop Shadow , et nupp näeks veebisaidi või ajaveebi valgel taustal pisut 'kõrgendatud'. Siin on jälle seaded:

kuidas ma saan snapchati filtri?

Struktuur

  • Segamisrežiim: Mitmekordne
  • Läbipaistmatus: 35
  • Nurk: 90
  • Kaugus: 2
  • Levik: 6
  • Suurus: 8

Kvaliteet

  • Kontuur: Lineaarne
  • Müra: 0
  • Layer Knocks Out Drop Shadow: Peal

Nüüd on aeg salvestada need andmed kihilise stiilina.

4. samm: salvestage kihistiilina

Kui olete nupu seadetega lõpetanud, hakkab see 3D -vormingus välja nägema. Kuna suure tõenäosusega loote rohkem kui ühe 3D -nupu, peame leidma selle kiire ja lihtsa viisi.

Siin on, kuidas seda teha.

Enne klõpsamist Okei aastal Kihi stiil dialoogiboksis, klõpsake nuppu Uus stiil . Kui te seda teete, salvestab Photoshop selle nupu jaoks loodud kihi stiili.

Kui kasutate Photoshop CC -d, salvestatakse see uus stiil teie Raamatukogud jaotis, nagu näete ülalpool. See on väga kiire ja lihtne juurde pääseda.

Samm: salvestatud kihi stiili kasutamine

Nüüd, kui olete oma nupu kujundanud ja salvestanud selle kihilise stiilina, vaatame, kuidas see teie 'üleval' olekus toimib. Pole sõnagi valet, see lühendab teie tööaega poole võrra.

Esiteks loome teise nupu otse punase nupukihi kohale. Teeme selle roheliseks, rõhutuseks.

Järgmine --- selle asemel, et topeltklõpsata kihil, et avada Kihistiilid dialoogiboks --- topeltklõpsake oma kihi stiili Raamatukogud paneel.

Kui te seda teete, rakendab Photoshop teie salvestatud stiili automaatselt uuele nupukihile, säilitades selle uue värvi ja kuju. Nüüd on teil kaks nuppu-üks üleval ja teine ​​all-ja seda on nii lihtne teha. Ma armastan seda otseteed.

Samm: lisage oma nupule tekst

Järgmisena lisame nupule teksti.

Teksti lisamiseks looge oma kahe nupukihi kohale uus kiht. Klõpsake Tüüpi tööriist kirjutama hakata.

Selle õpetuse jaoks kirjutame sõna 'tellida', sest seda näete veebisaitidel ja sotsiaalmeedia platvormidel üsna sageli.

Kasutame ka veebi turvalist fonti san serif. Lõplik valik, millist oma nupu jaoks kasutada, on teie otsustada. Montserrat, Proxima Nova, Arial ja Verdana on laialt levinud alternatiivid ja veebis ohutud.

Pärast seda on aga veel mõned peened muudatused, mida peate tegema, et see tekst popiks saada.

Esiteks topeltklõpsake kihti, mis sisaldab teie teksti, et saaksite selle oma kaustas esile tuua Kihi stiil Dialoogikast.

Järgmisena klõpsake nuppu Sisemine vari , et lisada oma tekstile natuke depressiooni (või vajunud ala). Nii jääb mulje, nagu oleks tähed nööbi sisse graveeritud. Täpsed seaded, mida me selle õpetuse jaoks kasutasime, on allpool.

Struktuur

  • Segamisrežiim: Korruta
  • Läbipaistmatus: 35
  • Nurk: 90
  • Kaugus: 2
  • Lämbumine: 4
  • Suurus: 1

Kvaliteet

  • Kontuur: Lineaarne
  • Müra: 0

Seejärel rakendage a Gradiendi ülekate nende tähtedega, et need hõlpsamini sulanduksid nupule, ilma et need näeksid lamedad. Jällegi on meie seaded järgmised:

  • Segamisrežiim: Värvipõletus
  • Läbipaistmatus: 90
  • Stiil: Lineaarne
  • Nurk: 90
  • Kaal: 100

Samm: viimistlus

Pärast selle tekstistiili loomist --- eriti kui soovite seda uuesti kasutada --- minge aadressile Uus stiil ja salvestage see enne klõpsamist Okei .

Kui see on kokku pakitud, saate oma kahe nupukihi vahelise nähtavuse osas kiiresti edasi -tagasi lülituda, et näha, kuidas olekud „üles” ja „alla” välja näevad.

Päris lahe, mis? Faili salvestamiseks minge Fail> Salvesta nimega ja salvestage see sobiva failivorminguna mis tahes projekti jaoks, millega te töötate.

Kohandage oma ajaveebi 3D -nuppude ja vidinatega

Nüüd, kui teate, kuidas Photoshopis 3D -nuppe luua, saate sellega loominguliseks muutuda, kujundades oma vajadustele vastavad 3D -nupud. Ja nende oskustega oma arsenalis saate valmistada toote, mis pole mitte ainult professionaalne, vaid ka isikupärane.

Kas soovite teada muid asju, mida saate selle programmiga teha? Siin on kuidas Photoshopis tausta eemaldada .

Jaga Jaga Piiksuma E -post Kuidas Google'i sisseehitatud mullitasemele Androidis juurde pääseda

Kui teil on kunagi olnud vaja veenduda, et midagi on näpuotsaga tasemel, saate nüüd mõne sekundiga oma telefoni mullitaseme.

Loe edasi Seotud teemad
  • Loominguline
  • Adobe Photoshop
  • Näpunäiteid pildi redigeerimiseks
  • Photoshopi õpetus
Autori kohta Shianne Edelmayer(136 artiklit avaldatud)

Shianne'il on disaini bakalaureusekraad ja podcastimise taust. Nüüd töötab ta vanemkirjaniku ja 2D -illustraatorina. Ta hõlmab MakeUseOfi loomingulist tehnoloogiat, meelelahutust ja tootlikkust.

Veel Shianne Edelmayerilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin