Kaip sukurti 3D mygtukus naudojant „Adobe Photoshop“

Kaip sukurti 3D mygtukus naudojant „Adobe Photoshop“

Yra daug nuostabių dalykų, kuriuos galite sukurti Adobe Photoshop kurie yra naudingi internete - nuo paprastų paveikslų rėmelių iki sudėtingų vartotojo sąsajų. Vienas iš naudingiausių dalykų, kuriuos galite sukurti „Photoshop“, yra 3D mygtukai, kurie pravers, jei kuriate tinklaraštį ar svetainę su pasirinktine sąsaja.





Šiame straipsnyje mes parodysime, kaip sukurti 3D mygtukus naudojant „Photoshop“ kartu su vaizdinėmis „aukštyn“ ir „žemyn“ būsenomis, kad galėtumėte jas animuoti. (Šiame straipsnyje nenagrinėsime pačios animacijos.)



1 žingsnis: Paruoškite dokumentą

Nors 3D mygtukai dažniausiai pasirodo svetainėse, svarbu pažymėti, kad joms yra ir kitų programų, pvz., Animacinių GIF, maketuotų produktų rodinių ir žaidimų mobiliesiems. Priklausomai nuo to, kam kuriate šį mygtuką, galutinis failo formatas ir jo matmenys gali skirtis.





Norėdami sukurti 3D mygtuką „Photoshop“, turėsite sukurti jam pritaikytą dokumentą. Norėdami tai padaryti, atidarykite „Photoshop“ ir spustelėkite Sukurti naują> Pasirinktinis . Pradėkite rašyti savo vertybes.

Norėdami sukurti 3D mygtuką, norėsite horizontalaus dokumento. Mūsų atveju mes naudojome:



  • 900 x 300 pikselių aukščio
  • 300 pikselių/colių
  • RGB spalvų režimas

Nors šios specifikacijos tikrai nėra sunki ir greita taisyklė, tai užtikrins, kad turėsite daugiau nei pakankamai vietos dirbti ir galėsite padidinti ir sumažinti mygtukų dydį, jei reikia.

2 veiksmas: nustatykite stačiakampį savo 3D mygtukui

Nustatę failo specifikacijas, būsite nukreipti į savo darbo sritį. Jūs turėsite horizontalią baltą drobę viename sluoksnyje, ir čia jūs pradėsite kurti savo mygtuką.



Norėdami sukurti 3D mygtuką, spustelėkite Suapvalintas stačiakampis įrankis kairėje ekrano pusėje, čia matoma raudonai. Taip pat galite naudoti nuorodą U prieiti prie jo.

Spustelėkite vieną kartą ant savo balto sluoksnio: tai automatiškai parodys jūsų Sukurkite suapvalintą stačiakampį dėžė. Šį langelį naudosite norėdami nurodyti savo stačiakampio matmenis.



Dėl savo mygtuko mes pasirinkome:

  • 300 pikselių pločio
  • 75 pikselių aukščio

Mes taip pat įsitikinome, kad kampai buvo suapvalinti 10 pikselių. Ne per aukštai ir ne per žemai. Tada spaudėme Gerai .

Pastaba: Mygtukai skiriasi pagal dydį ir formą, todėl nereikia manyti, kad turite naudoti šiuos tikslius matmenis. Be to, jei ieškote daugiau informacijos apie sparčiuosius klavišus, čia yra keletas iš jų naudingiausios „Photoshop“ klaviatūros komandos .

Kai paspausite Gerai , „Photoshop“ sukurs suapvalintą stačiakampį, kurio matmenys bus jūsų sluoksnyje. Galite pakeisti jo Užpildykite ir Insultas spalvas naudodami išskleidžiamuosius meniu viršutiniame kairiajame ekrano kampe.

Šios pamokos tikslais --- ir iliustruoti, kaip gali atrodyti mygtukai „aukštyn“ ir „žemyn“-padarysime mygtuką „žemyn“ raudoną.

3 žingsnis: sukurkite 3D mygtuką

Sukūrę pagrindinį mygtuką ir pasirinkę jo spalvą, norėsite jį koreguoti Sluoksnio stilius dialogo langas. Taip siekiama, kad jis atrodytų labiau 3D.

Norėdami pasiekti savo Sluoksnio stilius dialogo lange, galite eiti Sluoksnis> Sluoksnio stilius iš viršutinio meniu. Taip pat galite dukart spustelėti sluoksnį, kuriame yra jūsų mygtukas, kad jis būtų rodomas automatiškai. Šis būdas yra daug greitesnis ir mums asmeniškai tai labiau patinka.

Kai jūsų sluoksnio stiliaus langelis bus atidarytas, eikite į parinktį Kampas ir reljefas . Įjunkite jį.

Tai greitas ir paprastas būdas suteikti mygtuko kraštams daugiau „3D“ išvaizdos. Šioje pamokoje mes naudojome šiuos nustatymus:

Struktūra

  • Stilius: Vidinis nuožulnumas
  • Technika: Kaltas minkštas
  • Gylis: 605
  • Kryptis: Aukštyn
  • Dydis: 5
  • Minkštinti: 1

Šešėlis

  • Kampas: 90
  • Aukštis: 37
  • Paryškinimo režimas: Spalva Dodge, 55% neskaidrumas
  • Šešėlio režimas: Daugkartinis, 25% nepermatomumas

Apgaulė yra tai, kad nustatymai yra pakankamai aukšti, kad matytumėte tam tikrą skirtumą, bet ne tokie stiprūs, kad jie būtų didžiuliai.

Baigę „Bevel & Emboss“, nuėjome į Kontūras ir tai taip pat įjungė. „Contour“ šiek tiek sustiprina „Bevel & Emboss“ apibrėžimą, todėl šiai pamokai pasirinkome nustatymą Kūgis - apverstas .

Toliau įjunkite Gradiento perdanga . Tai suteikia mygtukui apvalią, šiek tiek „blizgančią“ išvaizdą. Nustatymai yra tokie:

  • Maišymo režimas: Perdanga
  • Neskaidrumas: 90
  • Stilius: Linijinis
  • Kampas: 90
  • Skalė: 100

Galiausiai įsijungėme Mesti šešėlį , kad mygtukas atrodytų šiek tiek „pakeltas“ iš balto svetainės ar tinklaraščio fono. Vėlgi, čia yra nustatymai:

elementai, prisegti prie užduočių juostos, dingsta „Windows 10“

Struktūra

  • Maišymo režimas: Daugkartinis
  • Neskaidrumas: 35
  • Kampas: 90
  • Atstumas: 2
  • Plisti: 6
  • Dydis: 8

Kokybė

  • Kontūras: Linijinis
  • Triukšmas: 0
  • Sluoksnis išmuša „Drop Shadow“: Įjungta

Dabar atėjo laikas išsaugoti šias specifikacijas kaip sluoksnio stilių.

4 veiksmas: išsaugokite kaip sluoksnio stilių

Baigę mygtuko nustatymus, jis pradės atrodyti 3D formatu. Kadangi didelė tikimybė, kad sukursite daugiau nei vieną 3D mygtuką, turime rasti greitą ir paprastą būdą tai padaryti.

Štai kaip.

Prieš spustelėdami Gerai viduje konors Sluoksnio stilius dialogo lange, spustelėkite Naujas Stilius . Kai tai padarysite, „Photoshop“ išsaugos šį sluoksnio stilių, kurį sukūrėte mygtukui.

Jei naudojate „Photoshop CC“, šis naujas stilius bus išsaugotas jūsų Bibliotekos skyriuje, kaip matote aukščiau. Tai labai greitai ir lengvai prieinama.

5 veiksmas: kaip naudoti išsaugotą sluoksnio stilių

Dabar, kai sukūrėte savo mygtuką ir išsaugojote jį kaip sluoksnio stilių, pažiūrėkime, kaip jis veikia jūsų „aukštyn“ būsenai. Nė žodžio melas, tai sumažins jūsų darbo laiką perpus.

Pirmiausia sukurkime kitą mygtuką, esantį tiesiai virš raudono mygtuko sluoksnio. Padarykime žalią, pabrėždami.

Kitas --- vietoj to, kad dukart spustelėtumėte patį sluoksnį, kad būtų parodytas Sluoksnių stiliai dialogo langas --- dukart spustelėkite sluoksnio stilių Bibliotekos skydelis.

Kai tai padarysite, „Photoshop“ automatiškai pritaikys išsaugotą stilių naujam mygtukų sluoksniui, išlaikydamas naują spalvą ir formą. Dabar turite du mygtukus-vieną aukštyn, kitą žemyn-ir tai padaryti taip paprasta. Man patinka ši nuoroda.

6 veiksmas: pridėkite tekstą prie savo mygtuko

Toliau prie mygtuko pridėsime teksto.

Norėdami pridėti tekstą, sukurkite naują sluoksnį virš dviejų mygtukų sluoksnių. Spustelėkite Tipo įrankis pradėti rašyti.

Šioje pamokoje mes parašysime žodį „prenumeruoti“, nes tai gana dažnai matote svetainėse ir socialinės žiniasklaidos platformose.

Taip pat ketiname naudoti žiniatinkliui saugų šriftą „san serif“. Galutinis pasirinkimas, kurį naudoti savo mygtukui, priklauso nuo jūsų. „Montserrat“, „Proxima Nova“, „Arial“ ir „Verdana“ yra plačiai naudojamos alternatyvos ir saugios žiniatinkliui.

Tačiau kai tai bus padaryta, vis tiek turite atlikti keletą subtilesnių pakeitimų, kad šis tekstas būtų „pop“.

Pirmiausia dukart spustelėkite sluoksnį, kuriame yra jūsų tekstas, kad galėtumėte jį įtraukti į savo Sluoksnio stilius dialogo langas.

Toliau spustelėkite Vidinis šešėlis , norėdami pridėti šiek tiek depresijos (arba įdubusios srities) prie savo teksto. Dėl to atrodo, kad raidės buvo išgraviruotos į mygtuką. Tikslūs nustatymai, kuriuos naudojome šioje pamokoje, pateikiami žemiau.

Struktūra

  • Maišymo režimas: Padauginti
  • Neskaidrumas: 35
  • Kampas: 90
  • Atstumas: 2
  • Užspringti: 4
  • Dydis: 1

Kokybė

  • Kontūras: Linijinis
  • Triukšmas: 0

Tada pritaikykite a Gradiento perdanga prie tų raidžių, kad jos lengviau įsilietų į sagą ir neatrodytų plokščios. Vėlgi, mūsų nustatymai yra šie:

  • Maišymo režimas: Spalva Burn
  • Neskaidrumas: 90
  • Stilius: Linijinis
  • Kampas: 90
  • Skalė: 100

7 žingsnis: Baigimas

Sukūrę šį teksto stilių --- ypač jei norite jį vėl naudoti --- eikite į Naujas Stilius ir išsaugokite prieš spustelėdami Gerai .

Užbaigę tai, galite greitai perjungti pirmyn ir atgal matomumą tarp dviejų mygtukų sluoksnių, kad pamatytumėte, kaip atrodo „aukštyn“ ir „žemyn“ būsenos.

Gana šaunu, ane? Norėdami išsaugoti failą, eikite Failas> Išsaugoti kaip ir išsaugokite jį kaip tinkamą failo formatą bet kuriam projektui, prie kurio dirbate.

Tinkinkite savo tinklaraštį naudodami 3D mygtukus ir valdiklius

Dabar, kai žinote, kaip sukurti „3D“ mygtukus „Photoshop“, galite būti kūrybingi, sukurdami savo poreikius atitinkančius 3D mygtukus. Turėdami šiuos įgūdžius savo arsenale, galite sukurti ne tik profesionalų, bet ir asmeniškai atrodantį produktą.

Norite sužinoti apie kitus dalykus, kuriuos galite padaryti naudodami šią programą? Štai kaip pašalinti foną „Photoshop“ .

Dalintis Dalintis „Tweet“ Paštu Kaip pasiekti „Google“ įmontuotą burbulo lygį „Android“

Jei kada nors reikėjo įsitikinti, kad kažkas yra lygiai, dabar galite per kelias sekundes gauti burbulo lygį savo telefone.

Skaityti toliau Susijusios temos
  • Kūrybingas
  • Adobe Photoshop
  • Vaizdo redagavimo patarimai
  • „Photoshop“ pamoka
Apie autorių Shianne Edelmayer(Paskelbti 136 straipsniai)

Shianne turi dizaino bakalauro laipsnį ir podcastingo pagrindus. Dabar ji dirba vyresniąja rašytoja ir 2D iliustratore. Ji apima „MakeUseOf“ kūrybines technologijas, pramogas ir produktyvumą.

Daugiau iš Shianne Edelmayer

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia