Sfat rapid Proiectați un buton Dropdown destul de bun în Photoshop

Astăzi vă voi arăta cum să creați un buton oarecum diferit, dar foarte frumos în Photoshop. Deși ar putea părea destul de simplu, încă mai are ceva lipsă de alte butoane; este un buton dropdown. Ești gata? Începem!


Pasul 1: Începuturile butonului

Lansați Photoshop. Creați un document nou, voi folosi un document de 600x350px.

Selectați "Instrumentul rotunjit dreptunghi" și utilizați un Radius de 2. Acest lucru va da butonului un aspect ascuțit cu o margine curată. Cât de mare alegeți să faceți acest lucru nu contează cu adevărat, totuși, asigurați-vă că nu aveți prea mare, deoarece s-ar putea să se termine căutarea din loc. Butonul meu are o înălțime de 104px și o înălțime de 30px.


Pasul 2: Adăugarea unui pop

Acum, să adăugăm ceva stil la buton. Vom începe cu "Gradient Overlay" pentru a da o anumită dimensiune. Iată setarea pe care o vom folosi:

Continuați să adăugați un "Accident vascular cerebral" la aceasta, va trebui să-i dăm un fel de cadru care să-l sublinieze. Utilizați aceste setări și culoarea # F8F8F8 pentru a face pop.

Acum vom adăuga o "strălucire interioară" pentru o ușoară lustruire a butonului. Utilizați aceste setări:

Iată cum ar trebui să arate butonul după adăugarea unui text:


Pasul 3: Fila Dropdown

Să aruncăm o privire la fila dropdown albastră, acest pas este mult mai complicat pe măsură ce vom folosi "Pen Tool" pentru a personaliza puțin forma. Dacă nu sunteți familiarizat cu "Pen Tool", citiți cu atenție, astfel încât să nu pierdeți nimic.

Puteți copia stratul butonului sau puteți crea un strat nou. Voi crea un nou strat cu aceeași unealtă ca înainte (Instrumentul Rounded Rectangle Tool). Cu toate acestea, de data aceasta ar trebui să fie un tad mai mic decât înainte, de preferință nu mai mare decât 100px, deoarece dorim ca această formă să se ridice sub butonul în sine. Umpleți acest strat cu culoarea # 57A0FA. Iată ce ar trebui să aveți acum:


Pasul 4: Ghiduri

Să trecem la "Instrumentul Pen" și să personalizăm puțin forma. Asigurați-vă că utilizați instrumentul "Add Anchor Point Tool" și selectați stratul. Pentru a face lucrurile mai ușoare pentru începători, voi folosi ghiduri pentru a obține poziția corectă. Doriți să vă asigurați că aveți un ghid în centrul butonului, apoi plasați un ghid suplimentar pe fiecare parte a acestuia. Iată cum ar trebui să arate:


Pasul 5: Manipulați

Acum măriți și selectați cel mai recent strat cu ajutorul "Add Anchor Point Tool" și plasați punctele de ancorare la ghidaje. Luați ancora centrală și trageți-o până la dimensiunea dorită. Doar câțiva pixeli vor face cum vrem să fie un efect subtil.

Pentru a face fila dropdown chiar mai frumoasă, vom adăuga o gaură în ea (stați mărite, deoarece este mai ușor să vezi unde să pui gaura). Pentru a face acest lucru, faceți clic pe "Adăugați masca strat" ​​la cel mai recent creat strat și selectați "Elliptical Marquee Tool" pentru a face o selecție. Apăsați backspace și ștergeți acea parte din fila. Iată cum ar trebui să arate.


Pasul 6: Stylingul înclinat

Pentru a ajuta tab-ul să arate destul și să se potrivească cu butonul, vom adăuga acum niște stil la el. Începeți cu "Stroke" și utilizați aceste setări:


Deplasați-vă la "Inner Shadow" și folosiți următoarele setări pentru ao curăța puțin și pentru a aduce o anumită adâncime în fila:

Dacă totul se face corect, ar trebui să aveți un rezultat care arată astfel, dacă nu, atunci trebuie să fi făcut ceva greșit!


Pasul 7: Plasați cursorul

Pentru a crea meniul drop down, duplicați starea normală, creșteți înălțimea și utilizați aceleași tehnici ca înainte. Adăugați un text și ați terminat!


Pasul 8: Variații de culoare

Iată cum apare Butonul Dropdown în diferite culori, fă-ți ochii pe aceste bunate!


Concluzie

Rapid și drept înainte, sper că v-ați bucurat de acest tip de Quick Tip!