Paano Lumikha ng mga 3D Buttons Gamit ang Adobe Photoshop

Paano Lumikha ng mga 3D Buttons Gamit ang Adobe Photoshop

Mayroong maraming mga kamangha-manghang mga bagay na maaari kang lumikha Adobe Photoshop na kapaki-pakinabang sa online, mula sa simpleng mga frame ng larawan hanggang sa mga kumplikadong UI. Ang isa sa mga pinaka kapaki-pakinabang na bagay na maaari mong likhain sa Photoshop ay mga pindutan ng 3D, na magagamit nang madali kung nagpapatakbo ka ng isang blog o website na may isang pasadyang interface.





Sa artikulong ito ay ipapakita namin sa iyo kung paano lumikha ng mga pindutan ng 3D gamit ang Photoshop, kasama ang mga visual na 'pataas' at 'pababa' na mga estado, upang maipalabas mo ang mga ito. (Hindi namin sasakupin ang mismong animation sa artikulong ito.)



Hakbang 1: Ihanda ang Iyong Dokumento

Habang ang mga pindutan ng 3D ay madalas na pop up sa mga website, mahalagang tandaan na may iba pang mga application para sa kanila, tulad ng mga animated na GIF, mock-up na pagpapakita ng produkto, at mga mobile game. Nakasalalay sa kung para saan mo nilikha ang pindutang ito, maaaring mag-iba ang iyong pangwakas na format ng file at ang mga sukat nito.





Upang lumikha ng isang pindutan ng 3D sa Photoshop, kakailanganin mong lumikha ng isang pasadyang dokumento para dito. Upang magawa ito, buksan ang Photoshop, at mag-click sa Lumikha ng Bago> Pasadya . Simulang mag-type sa iyong mga halaga.

Upang lumikha ng isang pindutan ng 3D, gugustuhin mo ang isang pahalang na dokumento. Para sa amin, ginamit namin ang:



  • 900 x 300 pixel ang taas
  • 300 Pixel / Inch
  • RGB Color Mode

Habang ang mga spec na ito ay tiyak na hindi isang mahirap at mabilis na panuntunan, titiyakin nito na mayroon kang higit sa sapat na silid upang gumana, at ang kakayahang sukatin ang laki ng iyong pindutan pataas at pababa kung kinakailangan.

Hakbang 2: I-set up ang Iyong Parihaba para sa Iyong 3D Button

Matapos mong i-set up ang mga detalye para sa iyong file, dadalhin ka sa iyong workspace. Magkakaroon ka ng isang pahalang na puting canvas sa isang solong layer, at dito mo magsisimulang buuin ang iyong pindutan.



Upang mabuo ang iyong pindutan ng 3D, mag-click sa Rounded Rectangle Tool sa kaliwang bahagi ng iyong screen, makikita dito sa pula. Maaari mo ring gamitin ang shortcut U upang ma-access ito.

Mag-click nang isang beses sa iyong puting layer: awtomatiko nitong ilalabas ang iyong Lumikha ng Bilugan na Parihaba kahon Gagamitin mo ang kahon na ito upang tukuyin ang mga sukat ng iyong rektanggulo.



Para sa aming pindutan, sumama kami sa:

  • 300 pixel ang lapad
  • 75 pixel ang taas

Natiyak din namin na ang mga sulok ay bilugan ng 10 pixel. Hindi masyadong mataas, at hindi masyadong mababa, alinman. Tapos pinindot namin OK lang .

Tandaan: Ang mga pindutan ay nag-iiba ayon sa laki at hugis, kaya huwag naramdaman na kailangan mong gamitin ang eksaktong mga sukat na ito. Bilang karagdagan, kung naghahanap ka para sa karagdagang impormasyon sa mga shortcut, narito ang ilan sa ang pinaka-kapaki-pakinabang na mga utos ng keyboard ng Photoshop .

Kapag pinindot mo OK lang , Ang Photoshop ay lilikha ng isang bilugan na rektanggulo na may mga sukat sa loob ng iyong layer. Maaari mong baguhin ang nito Punan at Stroke mga kulay sa pamamagitan ng paggamit ng mga dropdown na menu sa tuktok na kaliwang sulok ng iyong screen.

Para sa hangarin ng tutorial na ito --- at upang ilarawan kung ano ang maaaring magmukhang isang pindutan na 'pataas' at 'pababa' --- gagawin naming pula ang aming 'pababa' na pindutan.

Hakbang 3: Gawin ang Iyong Button 3D

Matapos mong likhain ang iyong pangunahing pindutan at piliin ang kulay nito, gugustuhin mong ayusin ito sa Estilo ng Layer dialog box. Ito ay upang magmukhang mas 3D ito.

Upang ma-access ang iyong Estilo ng Layer dialog box, maaari kang pumunta Layer> Estilo ng Layer mula sa tuktok na menu. Maaari ka ring mag-double click sa layer na naglalaman ng iyong pindutan, upang awtomatikong ilabas ito. Ang paraan na ito ay mas mabilis at personal naming ginusto ito.

Kapag natapos na ang iyong kahon ng Layer Style, pumunta sa opsyon Bevel at Emboss . Buksan ito

Ito ay isang mabilis at madaling paraan upang maibigay ang mga gilid ng iyong pindutan ng mas mataas, ang hitsura ng '3D'. Para sa tutorial na ito, ito ang mga setting na ginamit namin:

Istraktura

  • Style: Inner Bevel
  • Pamamaraan: Pait malambot
  • Lalim: 605
  • Direksyon: Pataas
  • Sukat: 5
  • Lumambot: 1

Pag-shade

  • Anggulo: 90
  • Altitude: 37
  • Highlight Mode: Kulay Dodge, 55% Opacity
  • Shadow Mode: Maramihang, 25% Opacity

Ang trick ay upang gawin ang mga setting ng sapat na mataas na maaari mong makita ang ilang mga pagkakaiba, ngunit hindi masyadong malakas na ito ay napakalaki.

Pagkatapos namin sa Bevel & Emboss, nagpunta kami sa Tabas at binuksan din iyon. Ginagawa ng Contour ang kahulugan ng Bevel & Emboss nang medyo malakas, at para sa tutorial na ito pinili namin ang setting Cone - Baligtad .

Susunod, i-on Gradient overlay . Ito ang nagbibigay ng isang pindutan na bilugan, bahagyang 'glossy' na hitsura. Ang mga setting ay ang mga sumusunod:

  • Blend Mode: Overlay
  • Opacity: 90
  • Style: Linear
  • Anggulo: 90
  • Sukat: 100

Sa wakas, nakabukas na kami Drop Shadow , upang ang hitsura ng pindutan ay medyo naitaas mula sa puting background ng isang website o blog. Muli, narito ang mga setting:

cool na bagay na gagawin sa isang panlabas na hard drive

Istraktura

  • Blend Mode: Maramihang
  • Opacity: 35
  • Anggulo: 90
  • Distansya: 2
  • Kumalat: 6
  • Sukat: 8

Kalidad

  • Tabas: Linear
  • Ingay: 0
  • Ang Layer Knocks Out Drop Shadow: Sa

Panahon na upang i-save ang mga spec na ito bilang isang Estilo ng Layer.

Hakbang 4: I-save bilang isang Estilo ng Layer

Kapag natapos mo sa mga setting ng iyong pindutan, magsisimulang magmukhang 3D. Sapagkat mataas ang posibilidad na lumikha ka ng higit sa isang pindutan ng 3D, kailangan naming makahanap ng isang mabilis at madaling paraan upang magawa ito.

Narito kung paano.

Bago mag-click OK lang nasa Estilo ng Layer dialog box, mag-click sa Bagong istilo . Kapag ginawa mo, i-save ng Photoshop ang istilong layer na iyong ginawa para sa iyong pindutan.

Kung gumagamit ka ng Photoshop CC, ang bagong istilong ito ay nai-save sa iyo Mga aklatan seksyon, tulad ng nakikita mo sa itaas. Napakabilis at madaling ma-access.

Hakbang 5: Paano Gumamit ng Naka-save na Estilo ng Layer

Ngayon na dinisenyo mo ang iyong pindutan at nai-save mo ito bilang isang Estilo ng Layer, tingnan natin ito sa pagkilos para sa iyong 'pataas' na estado. Walang salita ng kasinungalingan, puputulin nito ang kalahati ng iyong oras sa pagtatrabaho.

Una, lumikha tayo ng isa pang pindutan nang direkta sa itaas ng pulang layer ng pindutan, tulad nito. Gawin nating berde, para sa diin.

Susunod --- sa halip na pag-double click sa mismong layer upang ilabas ang Mga Estilo ng Layer dialog box --- mag-double click sa layer style sa iyong Mga aklatan panel

Kapag ginawa mo ito, awtomatikong ilalapat ng Photoshop ang iyong naka-save na istilo sa iyong bagong layer ng pindutan, habang pinapanatili ang bagong kulay at hugis nito. Mayroon ka na ngayong dalawang mga pindutan --- isa sa isang pataas na estado, at isa sa isang pababa --- at napakasimpleng gawin. Mahal ko ang shortcut na ito.

Hakbang 6: Magdagdag ng Teksto sa Iyong Button

Susunod, magdaragdag kami ng teksto sa pindutan.

Upang magdagdag ng teksto, lumikha ng isang bagong layer sa itaas ng iyong mga layer ng dalawang pindutan. I-click ang Uri ng tool upang simulan ang pagta-type.

Para sa tutorial na ito, isusulat namin ang salitang 'mag-subscribe' dahil ito ay isang bagay na madalas mong nakikita sa mga website at mga platform ng social media.

Gumagamit din kami ng isang san serif web-safe font. Ang pangwakas na pagpipilian kung alin ang gagamitin mo para sa iyong sariling pindutan ay nasa sa iyo. Ang Montserrat, Proxima Nova, Arial, at Verdana ay pawang malawakang ginagamit na mga kahalili, at ligtas para sa web.

Gayunpaman, matapos itong magawa, mayroon pa ring ilang mga banayad na pagbabago na kailangan mong gawin upang makuha ang text na ito sa 'pop.'

Una, mag-double click sa layer na naglalaman ng iyong teksto upang maiparating mo ito sa iyong Estilo ng Layer dialog box.

Susunod, mag-click sa Inner Shadow , upang magdagdag ng kaunting depression (o lumubog na lugar) sa iyong teksto. Ginagawa nitong mukhang ang mga titik ay nakaukit sa pindutan. Ang eksaktong mga setting na ginamit namin para sa tutorial na ito ay nasa ibaba.

Istraktura

  • Blend Mode: Paramihan
  • Opacity: 35
  • Anggulo: 90
  • Distansya: 2
  • Nasakal: 4
  • Sukat: 1

Kalidad

  • Tabas: Linear
  • Ingay: 0

Susunod, lagyan ng a Gradient Overlay sa mga titik na iyon, upang gawing mas madali ang pagsasama sa mga pindutan nang hindi lumilitaw na patag. Muli, ang mga setting para sa amin ay:

  • Blend Mode: Kulay Burn
  • Opacity: 90
  • Style: Linear
  • Anggulo: 90
  • Sukat: 100

Hakbang 7: Pagtatapos

Matapos mong likhain ang istilong ito ng teksto --- lalo na kung nais mong gamitin itong muli --- pumunta sa Bagong istilo at i-save ito bago ka mag-click OK lang .

Sa balot na iyon, maaari mong mabilis na lumipat pabalik sa kakayahang makita sa pagitan ng iyong dalawang mga layer ng pindutan, upang makita kung ano ang hitsura ng mga 'pataas' at 'pababa' na estado.

Medyo astig, ha? Upang mai-save ang iyong file, pumunta File> I-save Bilang , at i-save ito bilang tamang format ng file para sa anumang proyekto na maaaring iyong pinagtatrabahuhan.

Ipasadya ang Iyong Blog Sa Mga 3D Buttons at Widget

Ngayon na alam mo kung paano lumikha ng mga pindutan ng 3D sa Photoshop, maaari kang maging malikhain kasama nito, na nagdidisenyo ng iyong sariling mga pindutan ng 3D upang umangkop sa iyong mga pangangailangan. At sa mga kasanayang ito sa iyong arsenal maaari kang gumawa ng isang produkto na hindi lamang propesyonal, ngunit personal din ang hitsura.

Nais bang malaman tungkol sa iba pang mga bagay na maaari mong gawin sa program na ito? Narito kung paano alisin ang isang background sa Photoshop .

Magbahagi Magbahagi Mag-tweet Email Paano i-access ang Built-In na Bubble Level ng Google sa Android

Kung sakaling kailanganin mong tiyakin na may antas sa isang kurot, maaari ka na ngayong makakuha ng antas ng bubble sa iyong telepono sa ilang segundo.

Basahin Susunod Mga Kaugnay na Paksa
  • Malikhain
  • Adobe Photoshop
  • Mga Tip sa Pag-edit ng Larawan
  • Tutorial sa Photoshop
Tungkol sa May-akda Shianne Edelmayer(136 Mga Artikulo Na-publish)

Si Shianne ay mayroong Bachelor's Degree in Design at isang background sa podcasting. Ngayon, nagtatrabaho siya bilang isang Senior Writer at 2D Illustrator. Saklaw niya ang malikhaing tech, entertainment, at pagiging produktibo para sa MakeUseOf.

Higit pa Mula kay Shianne Edelmayer

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe