Cum se creează butoane 3D utilizând Adobe Photoshop

Cum se creează butoane 3D utilizând Adobe Photoshop

Există o mulțime de lucruri uimitoare în care puteți crea Adobe Photoshop care sunt utile online, variind de la rame simple la interfețe UI complexe. Unul dintre cele mai utile lucruri pe care le puteți crea în Photoshop sunt butoanele 3D, care vă vor fi utile dacă rulați un blog sau un site web cu o interfață personalizată.





În acest articol vă vom arăta cum să creați butoane 3D folosind Photoshop, împreună cu stările vizuale „sus” și „jos”, astfel încât să le puteți anima. (Nu vom acoperi animația însăși în acest articol.)



Pasul 1: Pregătiți-vă documentul

În timp ce butoanele 3D apar cel mai frecvent pe site-uri web, este important să rețineți că există și alte aplicații pentru acestea, cum ar fi GIF-uri animate, afișaje de machete ale produselor și jocuri mobile. În funcție de ceea ce creați acest buton, formatul de fișier final și dimensiunile acestuia pot varia.





Pentru a crea un buton 3D în Photoshop, va trebui să creați un document personalizat pentru acesta. Pentru a face acest lucru, deschideți Photoshop și faceți clic pe Creați nou> Personalizat . Începeți să tastați valorile.

Pentru a crea un buton 3D, veți dori un document orizontal. Pentru al nostru, am folosit:



  • 900 x 300 pixeli înălțime
  • 300 pixeli / inch
  • Mod culoare RGB

Deși aceste specificații nu sunt cu siguranță o regulă dificilă și rapidă, acest lucru vă va asigura că aveți mai mult decât suficient spațiu cu care să lucrați și posibilitatea de a scala dimensiunea butonului în sus și în jos, după cum este necesar.

Pasul 2: configurați dreptunghiul pentru butonul 3D

După ce configurați specificațiile pentru fișierul dvs., veți fi adus în spațiul de lucru. Veți avea o pânză albă orizontală într-un singur strat și de aici veți începe să construiți butonul.



Pentru a construi butonul 3D, faceți clic pe Instrument de dreptunghi rotunjit în partea stângă a ecranului, văzut aici în roșu. De asemenea, puteți utiliza comanda rapidă U pentru a-l accesa.

Faceți clic o dată pe stratul dvs. alb: acesta vă va afișa automat Creați dreptunghi rotunjit cutie. Veți utiliza această casetă pentru a specifica dimensiunile dreptunghiului.



Pentru butonul nostru, am mers cu:

  • 300 pixeli lățime
  • 75 pixeli înălțime

De asemenea, ne-am asigurat că colțurile erau rotunjite cu 10 pixeli. Nu prea ridicat și nici prea scăzut. Apoi am apăsat Bine .

Notă: Butoanele variază în funcție de dimensiune și formă, deci nu simțiți că trebuie să utilizați aceste dimensiuni exacte. În plus, dacă căutați mai multe informații despre comenzile rapide, iată câteva dintre acestea cele mai utile comenzi de la tastatură Photoshop .

Când apăsați Bine , Photoshop va crea un dreptunghi rotunjit cu aceste dimensiuni în interiorul stratului. Îi poți schimba Completati și Accident vascular cerebral culori folosind meniurile derulante din colțul din stânga sus al ecranului.

În scopul acestui tutorial --- și pentru a ilustra cum ar putea arăta un buton „sus” și „jos” --- vom face butonul nostru „jos” roșu.

Pasul 3: Faceți butonul 3D

După ce creați butonul de bază și alegeți culoarea acestuia, veți dori să îl reglați în Stil stratificat căsuță de dialog. Aceasta este pentru a face să pară mai 3D.

Pentru a accesa Stil stratificat caseta de dialog, puteți merge Strat> Stil strat din meniul de sus. De asemenea, puteți face dublu clic pe stratul care conține butonul dvs. pentru a-l afișa automat. Acest mod este mult mai rapid și personal îl preferăm.

Odată ce caseta Layer Style este activată, accesați opțiunea Bevel & Emboss . Porniți-l.

Acesta este un mod rapid și ușor de a oferi marginilor butonului un aspect mai ridicat, „3D”. Pentru acest tutorial, acestea sunt setările pe care le-am folosit:

Structura

  • Stil: Conicul interior
  • Tehnică: Daltă moale
  • Adâncime: 605
  • Direcţie: Sus
  • Mărimea: 5
  • Înmoaie: 1

Umbrire

  • Unghi: 90
  • Altitudine: 37
  • Mod de evidențiere: Color Dodge, 55% Opacitate
  • Mod umbră: Opacitate multiplă, 25%

Trucul este de a face setările suficient de mari încât să puteți vedea o diferență, dar nu atât de puternice încât să fie copleșitoare.

După ce am terminat cu Bevel & Emboss, am mers la Contur și a activat și asta. Contur face ca definiția Bevel & Emboss să fie puțin mai puternică, iar pentru acest tutorial am ales setarea Con - inversat .

Apoi, porniți Suprapunere de gradient . Iată ce oferă un buton care arată rotunjit, ușor „lucios”. Setările sunt după cum urmează:

  • Mod de amestecare: Acoperire
  • Opacitate: 90
  • Stil: Liniar
  • Unghi: 90
  • Scară: 100

În cele din urmă, am pornit Umbra , pentru a face ca butonul să arate puțin „ridicat” din fundalul alb al unui site web sau blog. Din nou, iată setările:

sunt toate cărțile SD la fel

Structura

  • Mod de amestecare: Multiplu
  • Opacitate: 35
  • Unghi: 90
  • Distanţă: 2
  • Răspândire: 6
  • Mărimea: 8

Calitate

  • Contur: Liniar
  • Zgomot: 0
  • Layer Knocks Out Drop Shadow: Pe

Acum este timpul să salvați aceste specificații ca stil de strat.

Pasul 4: Salvați ca stil de strat

Odată ce ați terminat cu setările butonului, acesta va începe să arate 3D. Deoarece sunt mari șanse să creați mai multe butoane 3D, trebuie să găsim o modalitate rapidă și ușoară de a face acest lucru.

Iată cum.

Înainte de a face clic Bine în Stil stratificat caseta de dialog, faceți clic pe Nou stil . Când o faceți, Photoshop va salva acest stil de strat pe care l-ați creat pentru butonul dvs.

Dacă utilizați Photoshop CC, acest nou stil va fi salvat în Biblioteci secțiunea, așa cum puteți vedea mai sus. Este foarte rapid și ușor de accesat.

Pasul 5: Cum se utilizează un stil de strat salvat

Acum că v-ați proiectat butonul și l-ați salvat ca stil de strat, să-l vedem în acțiune pentru starea dvs. de „sus”. Nici o minciună, acest lucru vă va reduce timpul de lucru la jumătate.

Mai întâi, să creăm un alt buton direct deasupra stratului de butoane roșii, așa. Să-l facem verde, pentru accent.

Următorul --- în loc să faceți dublu clic pe strat în sine pentru a afișa Stiluri de strat casetă de dialog --- faceți dublu clic pe stilul stratului din Biblioteci panou.

Când o faceți, Photoshop va aplica automat stilul salvat noului strat de butoane, păstrând în același timp noua culoare și formă. Acum aveți două butoane --- unul în stare sus și unul în jos --- și este atât de simplu de făcut. Îmi place această comandă rapidă.

Pasul 6: Adăugați text la butonul dvs.

Apoi, vom adăuga text la buton.

Pentru a adăuga text, creați un strat nou deasupra celor două straturi de butoane. Apasă pe Tastați instrumentul pentru a începe tastarea.

Pentru acest tutorial, vom scrie cuvântul „abonați-vă”, deoarece este ceva ce vedeți destul de des pe site-urile web și pe platformele de socializare.

Vom utiliza, de asemenea, un font san serif web-safe. Alegerea finală a celui pe care îl utilizați pentru propriul buton depinde de dvs. Montserrat, Proxima Nova, Arial și Verdana sunt toate alternative utilizate pe scară largă și sigure pentru web.

După ce se face acest lucru, totuși, mai sunt încă câteva modificări subtile pe care trebuie să le faceți pentru a face ca acest text să „apară”.

Mai întâi, faceți dublu clic pe stratul care conține textul dvs., astfel încât să îl puteți afișa în Stil stratificat căsuță de dialog.

Apoi, faceți clic pe Umbra interioara , pentru a adăuga un pic de depresie (sau zonă scufundată) textului. Acest lucru face să pară că literele au fost gravate în buton. Setările exacte pe care le-am folosit pentru acest tutorial sunt mai jos.

Structura

  • Mod de amestecare: Multiplica
  • Opacitate: 35
  • Unghi: 90
  • Distanţă: 2
  • Sufoca: 4
  • Mărimea: 1

Calitate

  • Contur: Liniar
  • Zgomot: 0

Apoi, aplicați un Suprapunere de gradient la acele litere, pentru a le face să se amestece mai ușor în buton fără să pară plate. Din nou, setările pentru ale noastre sunt:

  • Mod de amestecare: Color Burn
  • Opacitate: 90
  • Stil: Liniar
  • Unghi: 90
  • Scară: 100

Pasul 7: Finalizare

După ce creați acest stil de text --- mai ales dacă doriți să-l utilizați din nou --- accesați Nou stil și salvați-l înainte de a face clic Bine .

Cu aceasta înfășurată, puteți comuta rapid înainte și înapoi la vizibilitatea dintre cele două straturi de butoane, pentru a vedea cum arată stările „sus” și „jos”.

Destul de cool, nu? Pentru a vă salva fișierul, mergeți Fișier> Salvare ca , și salvați-l ca format de fișier adecvat pentru orice proiect la care ați putea lucra.

Personalizați-vă blogul cu butoane și widget-uri 3D

Acum că știi cum să creezi butoane 3D în Photoshop, poți deveni creativ cu acesta, proiectându-ți propriile butoane 3D pentru a se potrivi nevoilor tale. Și cu aceste abilități în arsenalul dvs. puteți crea un produs care nu este doar profesional, ci și cu aspect personal.

Doriți să știți despre alte lucruri pe care le puteți face cu acest program? Iată cum să eliminați un fundal în Photoshop .

Acțiune Acțiune Tweet E-mail Cum se accesează nivelul încorporat Google cu bule pe Android

Dacă ați avut vreodată nevoie să vă asigurați că ceva este la nivel într-o ciupire, acum puteți obține un nivel de bule pe telefonul dvs. în câteva secunde.

Citiți în continuare Subiecte asemănătoare
  • Creativ
  • Adobe Photoshop
  • Sfaturi pentru editarea imaginilor
  • Tutorial Photoshop
Despre autor Shianne Edelmayer(136 articole publicate)

Shianne are o diplomă de licență în design și un background în podcasting. Acum lucrează ca scriitor principal și ilustrator 2D. Ea acoperă tehnologia creativă, divertismentul și productivitatea pentru MakeUseOf.

Mai multe de la Shianne Edelmayer

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona