Paano Gumawa Ng Mga 3D Button

Talaan ng mga Nilalaman:

Paano Gumawa Ng Mga 3D Button
Paano Gumawa Ng Mga 3D Button

Video: Paano Gumawa Ng Mga 3D Button

Video: Paano Gumawa Ng Mga 3D Button
Video: 3D Button Made Using HTML u0026 CSS 2024, Setyembre
Anonim

Sa disenyo ng mga site, madalas na ginagamit ang mga three-dimensional na elemento ng nabigasyon. Ang mga nasabing pindutan ay maaaring gawin sa editor ng graphics na Photoshop, na ginagaya ang dami gamit ang mga anino at gradient fill.

Paano gumawa ng mga 3D button
Paano gumawa ng mga 3D button

Kailangan

Programa ng Photoshop

Panuto

Hakbang 1

Lumikha ng isang bagong dokumento sa isang graphic na editor gamit ang Bagong pagpipilian mula sa menu ng File. Piliin ang laki ng bagong dokumento upang magkasya ang pindutan, at gawing transparent ang background.

Hakbang 2

Paganahin ang Rounded Rectangle Tool. Kung nais mo ang isang bahagyang bilugan na pindutan, sa bar ng Mga Pagpipilian sa Tool, itakda ang Radius sa isang millimeter. Gumuhit ng isang bilugan na parihaba gamit ang napiling tool. Ang nagresultang hugis ay magiging batayan para sa pindutan.

Hakbang 3

Mag-right click sa layer at piliin ang pagpipiliang Rasterize Layer. I-load ang pagpipilian gamit ang pagpipilian ng Pagpipilian ng Pag-load mula sa menu na Piliin.

Hakbang 4

Gamitin ang Gradient Tool upang punan ang pindutan ng isang dalawang-kulay na gradient, pagpili ng isang angkop na kumbinasyon ng mga kulay mula sa mga preset sa gradient palette. Ang gradient style ay dapat na linear, piliin ito sa pamamagitan ng pag-click sa Linear Gradient button sa ilalim ng pangunahing menu. Ang itaas na bahagi ng pindutan pagkatapos ng pagpuno ay dapat na mas magaan kaysa sa mas mababang isa.

Hakbang 5

Mag-apply ng isang estilo sa layer. Upang magawa ito, gamitin ang pagpipiliang Blending Opsyon mula sa menu ng konteksto. Piliin ang tab na Drop Shadow at maglagay ng halagang isang daang dalawampung degree para sa parameter ng Angle. Itakda ang sukat ng parameter sa tatlong mga pixel.

Hakbang 6

Sa tab na Inner Shadow itakda ang parehong halaga para sa Angle parameter, at para sa Sukat itakda ang halaga sa limang mga pixel. Ilapat ang istilo sa pamamagitan ng pagpindot sa Enter key.

Hakbang 7

Gumawa ng isang anino para sa pindutan. Upang magawa ito, mag-click sa Lumikha ng isang bagong layer button at punan ng itim ang napiling lugar ng bagong layer. Piliin ang Paint Bucket Tool para dito. Alisin sa pagkakapili sa Ctrl + D.

Hakbang 8

Mag-apply ng isang Gaussian Blur filter mula sa Blur group ng menu ng Filter sa itim na rektanggulo. Itakda ang Radius sa apat na mga pixel. I-drag ang layer ng anino sa ilalim ng layer ng pindutan at itaas ang anino tatlo hanggang apat na mga pixel pataas. Upang magawa ito, buhayin ang Move Tool at ilipat ang anino gamit ang mga cursor button. Bawasan ang Opacity para sa layer na ito hanggang animnapung porsyento.

Hakbang 9

Gawin ang aktibong layer ng pindutan at i-load ang isang pagpipilian mula rito. Bawasan ang pagpipilian sa pamamagitan ng dalawang mga pixel gamit ang pagpipiliang Kontrata mula sa Modify group ng menu ng Selection.

Hakbang 10

Lumikha ng isang bagong layer at punan ang nagresultang pagpipilian na may isang linear gradient mula sa puti hanggang sa transparent upang ang puting bahagi ay nasa ilalim ng pindutan. Alisin sa pagkakapili ang pagpipilian. Gamit ang pagpipiliang Free Transform mula sa menu na I-edit, bawasan ang lugar na sakop ng gradient nang patayo. Ilapat ang pagbabago gamit ang Enter key.

Hakbang 11

Baguhin ang Blend Mode ng gradient layer sa Overlay. Maaari itong magawa sa pamamagitan ng pagpili ng isang mode mula sa drop-down na listahan sa kaliwang bahagi ng palette ng Mga Estilo. Bawasan ang Opacity ng layer hanggang animnapung porsyento.

Hakbang 12

Gamit ang Horizontal Type Tool, isulat ang teksto na dapat ay nasa pindutan.

Hakbang 13

Kolektahin ang lahat ng mga layer sa isang folder gamit ang pagpipiliang Mga Group Layer mula sa menu ng Layer, pipiliin ang mga ito habang pinipigilan ang Ctrl key. I-save ang pindutan sa isang psd file gamit ang pagpipiliang I-save mula sa menu ng File.

Inirerekumendang: