Kako izraditi 3D gumbe pomoću programa Adobe Photoshop

Kako izraditi 3D gumbe pomoću programa Adobe Photoshop

Postoji mnogo nevjerojatnih stvari u kojima možete stvoriti Adobe Photoshop koji su korisni na mreži, u rasponu od jednostavnih okvira za slike do složenih korisničkih sučelja. Jedna od najkorisnijih stvari koje možete stvoriti u Photoshopu su 3D gumbi koji će vam dobro doći ako pokrenete blog ili web stranicu s prilagođenim sučeljem.





U ovom članku pokazat ćemo vam kako stvoriti 3D gumbe pomoću Photoshopa, zajedno s vizualnim 'gore' i 'dolje' stanjima, tako da ih možete animirati. (U ovom članku nećemo govoriti o samoj animaciji.)



Korak 1: Pripremite dokument

Iako se 3D gumbi najčešće pojavljuju na web stranicama, važno je napomenuti da za njih postoje i druge aplikacije, poput animiranih GIF-ova, lažnih prikaza proizvoda i mobilnih igara. Ovisno o tome za što stvarate ovaj gumb, vaš konačni format datoteke i njegove dimenzije mogu se razlikovati.





Da biste stvorili 3D gumb u Photoshopu, morat ćete za njega izraditi prilagođeni dokument. Da biste to učinili, otvorite Photoshop i kliknite na Izradi novo> Prilagođeno . Počnite upisivati ​​svoje vrijednosti.

Da biste stvorili 3D gumb, poželjet ćete vodoravni dokument. Za naše smo koristili:



  • 900 x 300 piksela visine
  • 300 piksela/inč
  • RGB način rada u boji

Iako ove specifikacije definitivno nisu čvrsto i brzo pravilo, to će osigurati da imate više nego dovoljno prostora za rad i mogućnost povećavanja veličine gumba prema gore i prema dolje.

Korak 2: Postavite svoj pravokutnik za 3D gumb

Nakon što postavite specifikacije za svoju datoteku, bit ćete prebačeni u svoj radni prostor. Imat ćete vodoravno bijelo platno u jednom sloju i tu ćete početi graditi svoj gumb.



Za izradu 3D gumba kliknite na Alat za zaobljene pravokutnike s lijeve strane zaslona, ​​ovdje prikazano crvenom bojom. Također možete koristiti prečac U kako bi mu pristupili.

Jednom kliknite na svoj bijeli sloj: to će automatski prikazati vaš Napravite zaobljeni pravokutnik kutija. Pomoću ovog okvira ćete odrediti dimenzije pravokutnika.



Za naš gumb otišli smo sa:

  • 300 piksela širine
  • 75 piksela visine

Također smo se pobrinuli da su uglovi zaobljeni za 10 piksela. Ni previsoko, ni prenisko. Zatim smo pritisnuli u redu .

Bilješka: Gumbi se razlikuju ovisno o veličini i obliku pa nema potrebe da koristite baš te dimenzije. Osim toga, ako tražite više informacija o prečicama, evo nekih od njih najkorisnije naredbe tipkovnice Photoshopa .

Kad pritisnete u redu , Photoshop će unutar vašeg sloja stvoriti zaobljeni pravokutnik s ovim dimenzijama. Možete ga promijeniti Ispunite i Moždani udar boje pomoću padajućih izbornika u gornjem lijevom kutu zaslona.

Za potrebe ovog vodiča --- i za ilustraciju kako bi gumbi 'gore' i 'dolje' mogli izgledati --- mi ćemo gumb 'dolje' učiniti crvenim.

Korak 3: Učinite svoje dugme 3D

Nakon što izradite svoj osnovni gumb i odaberete njegovu boju, htjet ćete ga prilagoditi u Stil sloja dijaloški okvir. To je kako bi izgledalo 3D.

Za pristup vašem Stil sloja dijaloški okvir, možete ići Sloj> Stil sloja s gornjeg izbornika. Također možete dvaput kliknuti na sloj koji sadrži vaš gumb kako biste ga automatski otvorili. Ovaj način je mnogo brži i osobno ga preferiramo.

Kad se podigne okvir Stil sloja, prijeđite na opciju Bevel & Emboss . Uključite ga.

Ovo je brz i jednostavan način da rubovima gumba date podignutiji, '3D' izgled. Za ovaj vodič ovo su postavke koje smo koristili:

Struktura

  • Stil: Unutarnja kosina
  • Tehnika: Dlijeto mekano
  • Dubina: 605
  • Smjer: Gore
  • Veličina: 5
  • Ublažiti: 1

Sjenčanje

  • Kut: 90
  • Visina: 37
  • Način isticanja: Dodge u boji, neprozirnost 55%
  • Način sjene: Višestruka, 25% neprozirnost

Trik je u tome da postavke budu dovoljno visoke da vidite neku razliku, ali ne toliko da budu ogromne.

Nakon što smo završili s Bevel & Embossom, otišli smo na Kontura i uključio i to. Contour čini definiciju Bevel & Emboss malo jačom, a za ovaj smo vodič odabrali postavku Konus - obrnuto .

Zatim uključite Gradijentni sloj . To je ono što gumbu daje zaobljeni, blago 'sjajni' izgled. Postavke su sljedeće:

  • Način miješanja: Preklapanje
  • Neprozirnost: 90
  • Stil: Linearno
  • Kut: 90
  • Skala: 100

Konačno smo se uključili Sjenilo , kako bi gumb izgledao 'podignuto' s bijele pozadine web stranice ili bloga. Evo opet postavki:

kako zamijeniti pozadinu u Photoshopu

Struktura

  • Način miješanja: Višestruki
  • Neprozirnost: 35
  • Kut: 90
  • Udaljenost: 2
  • Širenje: 6
  • Veličina: 8

Kvaliteta

  • Kontura: Linearno
  • Buka: 0
  • Sloj izbacuje sjenu: Na

Sada je vrijeme za spremanje ovih specifikacija kao stila sloja.

Korak 4: Spremite kao stil sloja

Kada završite s postavkama gumba, počet će izgledati 3D. Budući da su velike šanse da ćete stvoriti više od jednog 3D gumba, moramo pronaći brz i jednostavan način za to.

Evo kako.

Prije klikanja u redu u Stil sloja dijaloški okvir, kliknite na Novi stil . Kada to učinite, Photoshop će spremiti ovaj stil sloja koji ste napravili za svoj gumb.

Ako koristite Photoshop CC, ovaj novi stil bit će spremljen u vaš Knjižnice odjeljak, kao što možete vidjeti gore. Pristup je vrlo brz i jednostavan.

5. korak: Kako koristiti spremljeni stil sloja

Sada kada ste dizajnirali svoj gumb i spremili ga kao stil sloja, pogledajmo ga na djelu za vaše stanje 'gore'. Nema riječi o laži, ovo će vam prepoloviti radno vrijeme.

Prvo, napravimo drugi gumb izravno iznad sloja crvenog gumba, na taj način. Neka bude zelena, za naglasak.

Dalje --- umjesto dvostrukog klika na sam sloj za prikaz Stilovi slojeva dijaloški okvir --- dvaput kliknite na stil sloja u vašem Knjižnice ploča.

Kada to učinite, Photoshop će automatski primijeniti vaš spremljeni stil na novi sloj gumba, zadržavajući novu boju i oblik. Sada imate dva gumba-jedan u gore, a jedan u dolje-i to je tako jednostavno učiniti. Obožavam ovaj prečac.

Korak 6: Dodajte tekst svom gumbu

Zatim ćemo gumbu dodati tekst.

Da biste dodali tekst, stvorite novi sloj iznad dva sloja gumba. Kliknite na Upišite alat za početak tipkanja.

U ovom ćemo vodiču napisati riječ 'pretplati se' jer je to nešto što često vidite na web stranicama i platformama društvenih medija.

Također ćemo upotrijebiti san serif font siguran za web. Konačni izbor kojeg ćete koristiti za svoj gumb je na vama. Montserrat, Proxima Nova, Arial i Verdana sve su široko korištene alternative i sigurne za web.

Međutim, nakon što to učinite, morate napraviti još nekoliko suptilnih promjena kako biste ovaj tekst 'iskočili'.

Prvo dvaput kliknite na sloj koji sadrži vaš tekst kako biste ga mogli unijeti u svoj Stil sloja dijaloški okvir.

Zatim kliknite na Unutarnja sjena , kako biste tekstu dodali malo udubljenja (ili utonulog područja). Zbog toga izgleda kao da su slova ugravirana u gumb. Točne postavke koje smo koristili za ovaj vodič nalaze se u nastavku.

Struktura

  • Način miješanja: Pomnožiti
  • Neprozirnost: 35
  • Kut: 90
  • Udaljenost: 2
  • Gušiti: 4
  • Veličina: 1

Kvaliteta

  • Kontura: Linearno
  • Buka: 0

Zatim primijenite a Gradient Overlay na ta slova, kako bi se lakše uklopili u gumb, a da ne izgledaju ravno. Opet, naše postavke su:

  • Način miješanja: Izgaranje u boji
  • Neprozirnost: 90
  • Stil: Linearno
  • Kut: 90
  • Skala: 100

Korak 7: Dovršavanje

Nakon što stvorite ovaj stil teksta --- pogotovo ako ga želite ponovno koristiti --- idite na Novi stil i spremite ga prije nego kliknete u redu .

S ovim zaključanom, možete se brzo prebacivati ​​naprijed -natrag na vidljivost između dva sloja gumba kako biste vidjeli kako izgledaju stanja 'gore' i 'dolje'.

Prilično cool, ha? Idite da biste spremili datoteku Datoteka> Spremi kao i spremite ga kao odgovarajući format datoteke za bilo koji projekt na kojem radite.

Prilagodite svoj blog pomoću 3D gumba i widgeta

Sada kada znate stvoriti 3D gumbe u Photoshopu, možete postati kreativni s tim, dizajnirajući vlastite 3D gumbe koji odgovaraju vašim potrebama. S ovim vještinama u svom arsenalu možete napraviti proizvod ne samo profesionalnog, već i osobnog izgleda.

Želite li znati o drugim stvarima koje možete učiniti s ovim programom? Evo kako ukloniti pozadinu u Photoshopu .

Udio Udio Cvrkut E -pošta Kako pristupiti Googleovoj ugrađenoj razini mjehurića na Androidu

Ako ste se ikada trebali uvjeriti da je nešto na razini, sada možete dobiti razinu mjehurića na telefonu u nekoliko sekundi.

Pročitajte Dalje Povezane teme
  • Kreativno
  • Adobe Photoshop
  • Savjeti za uređivanje slika
  • Vodič za Photoshop
O autoru Shianne Edelmayer(136 objavljenih članaka)

Shianne ima diplomu dizajna i iskustvo u podcastingu. Sada radi kao viši pisac i 2D ilustrator. Ona pokriva kreativnu tehnologiju, zabavu i produktivnost za MakeUseOf.

Više od Shianne Edelmayer

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu