3D -painikkeiden luominen Adobe Photoshopilla

3D -painikkeiden luominen Adobe Photoshopilla

Voit luoda monia uskomattomia asioita Adobe Photoshop jotka ovat hyödyllisiä verkossa, yksinkertaisista kuvakehyksistä monimutkaisiin käyttöliittymiin. Yksi hyödyllisimmistä asioista, joita voit luoda Photoshopissa, ovat 3D -painikkeet, jotka ovat hyödyllisiä, jos pidät blogia tai verkkosivustoa mukautetulla käyttöliittymällä.





Tässä artikkelissa näytämme sinulle, miten voit luoda 3D -painikkeita Photoshopilla sekä visuaalisia ylös- ja alas -tiloja, jotta voit animoida ne. (Emme käsittele itse animaatiota tässä artikkelissa.)



Vaihe 1: Valmistele asiakirja

Vaikka 3D-painikkeet näkyvät useimmiten verkkosivustoilla, on tärkeää huomata, että niille on olemassa myös muita sovelluksia, kuten animoituja GIF-tiedostoja, mallituotenäyttöjä ja mobiilipelejä. Lopullinen tiedostomuoto ja sen mitat voivat vaihdella sen mukaan, mihin tarkoitukseen luot tätä painiketta.





Jos haluat luoda 3D -painikkeen Photoshopissa, sinun on luotava sille mukautettu asiakirja. Voit tehdä tämän avaamalla Photoshopin ja napsauttamalla Luo uusi> Mukautettu . Aloita arvojen kirjoittaminen.

Jos haluat luoda 3D -painikkeen, haluat vaakasuuntaisen asiakirjan. Meillä käytettiin:



  • 900 x 300 pikseliä korkea
  • 300 pikseliä/tuumaa
  • RGB -väritila

Vaikka nämä tiedot eivät todellakaan ole kova ja nopea sääntö, tämä varmistaa, että sinulla on enemmän kuin tarpeeksi tilaa työskennellä ja voit skaalata painikkeesi kokoa ylös ja alas tarpeen mukaan.

Vaihe 2: Aseta suorakulmio 3D -painiketta varten

Kun olet määrittänyt tiedostosi tiedot, sinut tuodaan työtilaasi. Sinulla on vaakasuora valkoinen kangas yhdessä kerroksessa, ja tässä aloitat painikkeen rakentamisen.



Voit rakentaa 3D -painikkeen napsauttamalla Pyöristetty suorakaiteen työkalu näytön vasemmalla puolella, näkyy täällä punaisena. Voit myös käyttää pikakuvaketta U päästäksesi siihen käsiksi.

Napsauta kerran valkoista kerrosta: tämä tuo automaattisesti esiin Luo pyöristetty suorakulmio laatikko. Tässä ruudussa määrität suorakulmion mitat.



Nappimme kohdalla valitsimme:

  • 300 pikseliä leveä
  • 75 pikseliä korkea

Varmistimme myös, että kulmat pyöristettiin 10 pikselillä. Ei liian korkea eikä liian matala. Sitten painimme OK .

Huomautus: Painikkeet vaihtelevat koon ja muodon mukaan, joten sinun ei tarvitse käyttää näitä tarkkoja mittoja. Lisäksi, jos haluat lisätietoja pikanäppäimistä, tässä on joitain hyödyllisimmät Photoshop -näppäimistökomennot .

Kun painat OK , Photoshop luo pyöristetyn suorakulmion, jonka mitat ovat kerroksen sisällä. Voit muuttaa sen Täyttää ja Aivohalvaus värit käyttämällä näytön vasemmassa yläkulmassa olevia pudotusvalikoita.

Tätä opetusohjelmaa varten --- ja havainnollistamaan miltä 'ylös' ja 'alas' -painikkeet saattavat näyttää-aiomme tehdä 'alas' -painikkeen punaiseksi.

Vaihe 3: Tee painike 3D: ksi

Kun olet luonut peruspainikkeen ja valinnut sen värin, haluat säätää sitä Tasotyyli valintaikkuna. Tämän tarkoituksena on saada se näyttämään enemmän 3D: ltä.

Päästäksesi käsiksi Tasotyyli valintaikkuna, voit mennä Taso> Tasotyyli ylävalikosta. Voit myös kaksoisnapsauttaa tasoa, joka sisältää painikkeen, jolloin se tulee näkyviin automaattisesti. Tämä tapa on paljon nopeampi ja me henkilökohtaisesti pidämme siitä.

Kun Tasotyyli -ruutu on ylhäällä, siirry vaihtoehtoon Viiste ja kohokuviointi . Käynnistä se.

Tämä on nopea ja helppo tapa antaa painikkeen reunoille korostuneempi 3D -ilme. Tässä opetusohjelmassa käytimme seuraavia asetuksia:

Rakenne

  • Tyyli: Sisäinen viiste
  • Tekniikka: Taltta pehmeä
  • Syvyys: 605
  • Suunta: Ylös
  • Koko: 5
  • Pehmentää: 1

Varjostus

  • Kulma: 90
  • Korkeus: 37
  • Korostustila: Väri Dodge, 55% läpinäkyvyys
  • Varjotila: Useita, 25%: n läpinäkyvyys

Temppu on tehdä asetuksista riittävän korkeat, jotta näet eron, mutta ei niin voimakkaasti, että se olisi ylivoimainen.

Kun lopetimme Bevel & Embossin kanssa, menimme Muoto ja otti senkin käyttöön. Contour tekee Bevel & Embossin määritelmästä hieman vahvemman, ja tässä opetusohjelmassa valitsimme asetuksen Kartio - Käänteinen .

Kytke seuraavaksi päälle Kaltevuuskerros . Tämä antaa painikkeelle pyöristetyn, hieman 'kiiltävän' ilmeen. Asetukset ovat seuraavat:

  • Sekoitustila: Peittokuva
  • Peittävyys: 90
  • Tyyli: Lineaarinen
  • Kulma: 90
  • Asteikko: 100

Lopulta laitoimme päälle Drop Shadow , jotta painike näyttää hieman 'kohotetulta' verkkosivuston tai blogin valkoisesta taustasta. Tässä taas asetukset:

mikä on paras Android -puhdistussovellus

Rakenne

  • Sekoitustila: Useita
  • Peittävyys: 35
  • Kulma: 90
  • Etäisyys: 2
  • Levitän: 6
  • Koko: 8

Laatu

  • Muoto: Lineaarinen
  • Melu: 0
  • Layer Knocks Out Drop Shadow: Päällä

Nyt on aika tallentaa nämä tiedot kerrostyyliksi.

Vaihe 4: Tallenna tasotyylinä

Kun olet suorittanut painikkeen asetukset, se alkaa näyttää 3D: ltä. Koska on todennäköistä, että luot enemmän kuin yhden 3D -painikkeen, meidän on löydettävä nopea ja helppo tapa tehdä tämä.

Näin voit tehdä.

Ennen kuin napsautat OK kohdassa Tasotyyli -valintaikkunassa, napsauta Uusi tyyli . Kun teet niin, Photoshop tallentaa painikkeelle tekemäsi tasotyylin.

Jos käytät Photoshop CC: tä, tämä uusi tyyli tallennetaan Kirjastot osiossa, kuten yllä näet. Se on erittäin nopea ja helppo käyttää.

Vaihe 5: Tallennetun tasotyylin käyttäminen

Nyt kun olet suunnitellut painikkeen ja tallentanut sen tasotyyliksi, katsotaanpa sitä toiminnassa 'ylös' -tilaan. Ei sanaakaan valheesta, tämä lyhentää työaikaasi puoleen.

Luo ensin toinen painike suoraan punaisen painikerroksen yläpuolelle. Tehdään siitä vihreä, korostamiseksi.

Seuraava --- sen sijaan, että kaksoisnapsauta itse kerrosta tuodaksesi esiin Tasotyylit valintaikkuna --- kaksoisnapsauta tasosi tyyliä Kirjastot paneeli.

Kun teet niin, Photoshop soveltaa tallennettua tyyliäsi automaattisesti uuteen painikerrokseen säilyttäen samalla uuden värin ja muodon. Sinulla on nyt kaksi painiketta-yksi ylös-tilassa ja toinen alhaalla-ja se on niin yksinkertaista tehdä. Rakastan tätä pikakuvaketta.

Vaihe 6: Lisää tekstiä painikkeeseesi

Seuraavaksi aiomme lisätä tekstiä painikkeeseen.

Jos haluat lisätä tekstiä, luo uusi kerros kahden painikekerroksen yläpuolelle. Klikkaa Tyyppityökalu aloittaaksesi kirjoittamisen.

Tässä opetusohjelmassa aiomme kirjoittaa sanan 'tilata', koska näet sen melko usein verkkosivustoilla ja sosiaalisen median alustoilla.

Käytämme myös san serif -verkkoturvallista fonttia. Lopullinen valinta siitä, kumpaa käytät omalle painikkeellesi, on sinun tehtäväsi. Montserrat, Proxima Nova, Arial ja Verdana ovat laajalti käytettyjä vaihtoehtoja ja turvallisia verkossa.

Tämän jälkeen on kuitenkin vielä muutamia hienovaraisia ​​muutoksia, jotka sinun on tehtävä saadaksesi tämän tekstin 'popiksi'.

Kaksoisnapsauta ensin tasoa, joka sisältää tekstisi, jotta voit tuoda sen esiin Tasotyyli valintaikkuna.

Napsauta seuraavaksi Sisäinen varjo , lisätäksesi hieman masennusta (tai upotettua aluetta) tekstiin. Näin kirjaimet on kaiverrettu painikkeeseen. Tarkat asetukset, joita käytimme tässä opetusohjelmassa, ovat alla.

Rakenne

  • Sekoitustila: Kerro
  • Peittävyys: 35
  • Kulma: 90
  • Etäisyys: 2
  • Tukehtua: 4
  • Koko: 1

Laatu

  • Muoto: Lineaarinen
  • Melu: 0

Käytä seuraavaksi a Kaltevuuskerros näihin kirjaimiin, jotta ne sulautuvat helpommin painikkeeseen ilman, että ne näyttävät litteiltä. Jälleen asetuksemme ovat:

  • Sekoitustila: Väri Burn
  • Peittävyys: 90
  • Tyyli: Lineaarinen
  • Kulma: 90
  • Asteikko: 100

Vaihe 7: Viimeistely

Kun olet luonut tämän tekstityylin --- varsinkin jos haluat käyttää sitä uudelleen --- siirry kohtaan Uusi tyyli ja tallenna se ennen kuin napsautat OK .

Kun tämä on kääritty, voit nopeasti vaihtaa edestakaisin kahden painikekerroksen välisessä näkyvyydessä nähdäksesi miltä ylös- ja alas -tilat näyttävät.

Aika siistiä, vai mitä? Tallenna tiedosto siirtymällä Tiedosto> Tallenna nimellä ja tallenna se oikeaan tiedostomuotoon projektillesi, jota parhaillaan käsittelet.

Muokkaa blogiasi 3D -painikkeilla ja widgetteillä

Nyt kun tiedät kuinka luoda 3D -painikkeita Photoshopissa, voit olla luova sen avulla ja suunnitella omia 3D -painikkeitasi tarpeidesi mukaan. Ja näiden taitojesi avulla voit tehdä tuotteen, joka on paitsi ammattimainen myös henkilökohtaisen näköinen.

Haluatko tietää muista asioista, joita voit tehdä tällä ohjelmalla? Tässä on kuinka poistaa tausta Photoshopista .

Jaa Jaa Tweet Sähköposti Googlen sisäänrakennetun kuplatason käyttö Androidissa

Jos olet koskaan tarvinnut varmistaa, että jokin on vaakasuorassa, voit nyt saada kuplatason puhelimeesi muutamassa sekunnissa.

Lue seuraava Liittyvät aiheet
  • Luova
  • Adobe Photoshop
  • Vinkkejä kuvankäsittelyyn
  • Photoshop -opetusohjelma
Kirjailijasta Shianne Edelmayer(136 artikkelia julkaistu)

Shiannella on kandidaatin tutkinto suunnittelusta ja tausta podcastingista. Nyt hän työskentelee vanhempi kirjailija ja 2D -kuvittaja. Hän kattaa MakeUseOfin luovan tekniikan, viihteen ja tuottavuuden.

Lisää Shianne Edelmayerilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi