Kā izveidot 3D pogas, izmantojot Adobe Photoshop

Kā izveidot 3D pogas, izmantojot Adobe Photoshop

Ir daudz pārsteidzošu lietu, kurās varat izveidot Adobe Photoshop kas ir noderīgi tiešsaistē, sākot no vienkāršiem attēlu rāmjiem līdz sarežģītiem lietotāja interfeisiem. Viena no visnoderīgākajām lietām, ko varat izveidot Photoshop, ir 3D pogas, kas noderēs, ja vadīsit emuāru vai vietni ar pielāgotu interfeisu.





Šajā rakstā mēs parādīsim, kā izveidot 3D pogas, izmantojot Photoshop, kā arī vizuālos augšup un lejup vērstos stāvokļus, lai jūs varētu tos animēt. (Šajā rakstā mēs neaptversim pašu animāciju.)



1. darbība: sagatavojiet dokumentu

Lai gan 3D pogas visbiežāk parādās vietnēs, ir svarīgi atzīmēt, ka tām ir arī citas lietojumprogrammas, piemēram, animēti GIF attēli, maketētu produktu displeji un mobilās spēles. Atkarībā no tā, kam jūs veidojat šo pogu, jūsu galīgais faila formāts un tā izmēri var atšķirties.





Lai Photoshop izveidotu 3D pogu, jums tai jāizveido pielāgots dokuments. Lai to izdarītu, atveriet Photoshop un noklikšķiniet uz Izveidot jaunu> Pielāgots . Sāciet rakstīt savas vērtības.

Lai izveidotu 3D pogu, jūs vēlaties horizontālu dokumentu. Mūsējiem mēs izmantojām:



  • 900 x 300 pikseļu augsts
  • 300 pikseļi/collas
  • RGB krāsu režīms

Lai gan šīs specifikācijas noteikti nav grūts un ātrs noteikums, tas nodrošinās, ka jums ir vairāk nekā pietiekami daudz vietas darbam un iespēju nepieciešamības gadījumā palielināt un samazināt pogas izmēru.

2. darbība. Iestatiet taisnstūri savai 3D pogai

Pēc faila specifikāciju iestatīšanas jūs tiksit novirzīts uz savu darbvietu. Jums būs horizontāls balts audekls vienā slānī, un šeit jūs sāksit veidot savu pogu.



Lai izveidotu savu 3D pogu, noklikšķiniet uz Noapaļots taisnstūra rīks ekrāna kreisajā pusē, šeit redzams sarkanā krāsā. Varat arī izmantot saīsni U lai tai piekļūtu.

Vienreiz noklikšķiniet uz sava baltā slāņa: tas automātiski parādīs jūsu Izveidojiet noapaļotu taisnstūri kaste. Šo lodziņu izmantosit, lai norādītu taisnstūra izmērus.



Mūsu pogai mēs devāmies ar:

  • 300 pikseļu platumā
  • 75 pikseļi augsts

Mēs arī pārliecinājāmies, ka stūri ir noapaļoti par 10 pikseļiem. Ne pārāk augsts un ne pārāk zems. Tad mēs nospiedām labi .

Piezīme: Pogas atšķiras pēc izmēra un formas, tāpēc jums nav jāizmanto šie precīzi izmēri. Turklāt, ja meklējat vairāk informācijas par īsinājumtaustiņiem, šeit ir daži no tiem visnoderīgākās Photoshop tastatūras komandas .

Nospiežot labi , Photoshop izveidos noapaļotu taisnstūri ar šiem izmēriem jūsu slāņa iekšpusē. Jūs varat to mainīt Aizpildīt un Insults krāsas, izmantojot nolaižamās izvēlnes ekrāna augšējā kreisajā stūrī.

Šīs apmācības nolūkā-un lai ilustrētu, kā varētu izskatīties pogas “augšup” un “uz leju”-mēs padarīsim pogu “uz leju” sarkanu.

3. darbība: izveidojiet pogu 3D

Kad esat izveidojis savu pamata pogu un izvēlējies tās krāsu, jūs vēlaties to pielāgot Slāņa stils dialoglodziņš. Tas jādara, lai tas izskatītos vairāk 3D.

Lai piekļūtu jūsu Slāņa stils dialoglodziņš, varat doties Slānis> Slāņa stils no augšējās izvēlnes. Varat arī divreiz noklikšķināt uz slāņa, kurā ir jūsu poga, lai to automātiski parādītu. Šis veids ir daudz ātrāks, un mēs personīgi tam dodam priekšroku.

Kad slāņa stila lodziņš ir izveidots, dodieties uz opciju Slīpums un reljefs . Ieslēdziet to.

Tas ir ātrs un vienkāršs veids, kā pogas malām piešķirt augstāku “3D” izskatu. Šajā apmācībā mēs izmantojām šādus iestatījumus:

Struktūra

  • Stils: Iekšējais slīpums
  • Tehnika: Kalts mīksts
  • Dziļums: 605
  • Virziens: Uz augšu
  • Izmērs: 5
  • Mīkstināt: 1

Ēnojums

  • Leņķis: 90
  • Augstums: 37
  • Izcelšanas režīms: Krāsu Dodge, 55% necaurredzamība
  • Ēnu režīms: Vairākas, 25% necaurredzamība

Viltība ir padarīt iestatījumus pietiekami augstus, lai varētu redzēt dažas atšķirības, bet ne tik spēcīgus, lai tas būtu milzīgs.

Pabeidzot darbu ar Bevel & Emboss, mēs devāmies uz Kontūra un ieslēdza arī to. Kontūra padara Bevel & Emboss definīciju nedaudz spēcīgāku, un šai apmācībai mēs izvēlējāmies iestatījumu Konuss - apgriezts .

Tālāk ieslēdziet Gradienta pārklājums . Tas dod pogai noapaļotu, nedaudz “spīdīgu” izskatu. Iestatījumi ir šādi:

  • Sajaukšanas režīms: Pārklājums
  • Necaurredzamība: 90
  • Stils: Lineāra
  • Leņķis: 90
  • Mērogs: 100

Visbeidzot, mēs ieslēdzāmies Drop Shadow , lai poga no vietnes vai emuāra baltā fona izskatītos nedaudz “pacelta”. Atkal šeit ir iestatījumi:

kurš ražo labākos cietos diskus

Struktūra

  • Sajaukšanas režīms: Vairāki
  • Necaurredzamība: 35
  • Leņķis: 90
  • Attālums: 2
  • Izplatība: 6
  • Izmērs: 8

Kvalitāte

  • Kontūra: Lineāra
  • Troksnis: 0
  • Layer Knocks Out Drop Shadow: Ieslēgts

Tagad ir pienācis laiks saglabāt šīs specifikācijas kā slāņa stilu.

4. darbība. Saglabājiet kā slāņa stilu

Kad būsit pabeidzis pogas iestatījumus, tā sāks izskatīties 3D formātā. Tā kā pastāv liela iespēja, ka izveidosit vairāk nekā vienu 3D pogu, mums ir jāatrod ātrs un vienkāršs veids, kā to izdarīt.

Lūk, kā.

Pirms noklikšķināšanas labi iekš Slāņa stils dialoglodziņā, noklikšķiniet uz Jauns stils . To darot, Photoshop saglabās šo pogas veidoto slāņa stilu.

Ja izmantojat Photoshop CC, šis jaunais stils tiks saglabāts jūsu Bibliotēkas sadaļā, kā redzat iepriekš. Tas ir ļoti ātri un viegli pieejams.

5. darbība. Kā izmantot saglabāto slāņu stilu

Tagad, kad esat izstrādājis savu pogu un saglabājis to kā slāņa stilu, redzēsim, kā tā darbojas jūsu augšējā stāvoklī. Nav vārdu par meliem, tas samazinās jūsu darba laiku uz pusi.

Vispirms izveidosim citu pogu tieši virs sarkanās pogas slāņa, piemēram. Padarīsim to zaļu, uzsvaram.

Tālāk --- tā vietā, lai divreiz noklikšķinātu uz paša slāņa, lai parādītu Slāņu stili dialoglodziņš --- veiciet dubultklikšķi uz slāņa stila Bibliotēkas panelis.

To darot, Photoshop automātiski piemēros jūsu saglabāto stilu jaunajam pogas slānim, saglabājot tā jauno krāsu un formu. Tagad jums ir divas pogas-viena augšup un otra lejup-un to ir tik vienkārši izdarīt. Man patīk šī saīsne.

6. darbība: pievienojiet pogai tekstu

Tālāk pogai pievienosim tekstu.

Lai pievienotu tekstu, izveidojiet jaunu slāni virs diviem pogu slāņiem. Noklikšķiniet uz Tipa rīks lai sāktu rakstīt.

Šajā apmācībā mēs rakstīsim vārdu “abonēt”, jo tas ir kaut kas, ko jūs bieži redzat vietnēs un sociālo mediju platformās.

Mēs arī izmantosim tīmekļa drošo fontu san serif. Galīgā izvēle, kuru lietot savai pogai, ir jūsu ziņā. Monserata, Proxima Nova, Arial un Verdana ir plaši izmantotas alternatīvas un drošas tīmeklim.

Pēc tam, kad tas ir izdarīts, ir vēl dažas smalkas izmaiņas, kas jums jāveic, lai šis teksts tiktu “pop”.

Vispirms veiciet dubultklikšķi uz slāņa, kurā ir jūsu teksts, lai to varētu atvērt savā Slāņa stils dialoglodziņš.

Tālāk noklikšķiniet uz Iekšējā ēna , lai tekstam pievienotu nelielu depresiju (vai iegrimušu laukumu). Tas liek izskatīties tā, it kā burti būtu iegravēti pogā. Precīzi iestatījumi, kurus mēs izmantojām šajā apmācībā, ir norādīti zemāk.

Struktūra

  • Sajaukšanas režīms: Reizināt
  • Necaurredzamība: 35
  • Leņķis: 90
  • Attālums: 2
  • Aizrīties: 4
  • Izmērs: 1

Kvalitāte

  • Kontūra: Lineāra
  • Troksnis: 0

Tālāk piemēro a Gradienta pārklājums uz šiem burtiem, lai tie vieglāk iekļautos pogā, neizskatoties līdzeni. Atkal mūsu iestatījumi ir šādi:

  • Sajaukšanas režīms: Krāsas apdegums
  • Necaurredzamība: 90
  • Stils: Lineāra
  • Leņķis: 90
  • Mērogs: 100

7. solis: pabeigšana

Pēc šī teksta stila izveides --- it īpaši, ja vēlaties to izmantot vēlreiz-dodieties uz Jauns stils un saglabājiet to pirms noklikšķināšanas labi .

Kad tas ir iesaiņots, jūs varat ātri pārslēgties uz priekšu un atpakaļ uz redzamību starp diviem pogu slāņiem, lai redzētu, kā izskatās augšup un lejup esošie stāvokļi.

Diezgan forši, ja? Lai saglabātu failu, dodieties uz Fails> Saglabāt kā un saglabājiet to kā pareizo faila formātu jebkuram projektam, pie kura strādājat.

Pielāgojiet savu emuāru, izmantojot 3D pogas un logrīkus

Tagad, kad jūs zināt, kā izveidot 3D pogas programmā Photoshop, ar to varat kļūt radošs, izstrādājot savas 3D pogas atbilstoši savām vajadzībām. Izmantojot šīs prasmes savā arsenālā, jūs varat izveidot produktu, kas ir ne tikai profesionāls, bet arī personisks.

Vai vēlaties uzzināt par citām lietām, ko varat darīt ar šo programmu? Lūk kā noņemt fonu Photoshop .

Kopīgot Kopīgot Čivināt E -pasts Kā piekļūt Google iebūvētajam burbuļa līmenim operētājsistēmā Android

Ja jums kādreiz ir bijis jāpārliecinās, ka kaut kas ir vienā līmenī, tagad tālrunī varat iegūt burbuļa līmeni dažu sekunžu laikā.

Lasīt Tālāk Saistītās tēmas
  • Radošs
  • Adobe Photoshop
  • Padomi attēlu rediģēšanai
  • Photoshop apmācība
Par autoru Šīne Edelmajere(Publicēti 136 raksti)

Šiannai ir bakalaura grāds dizainā un podcast apraides pieredze. Tagad viņa strādā par vecāko rakstnieci un 2D ilustratoru. Viņa aptver MakeUseOf radošās tehnoloģijas, izklaidi un produktivitāti.

Vairāk no Shianne Edelmayer

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu