Sivustojen suunnittelussa käytetään usein kolmiulotteisia navigointielementtejä. Tällaisia painikkeita voidaan tehdä Photoshop-grafiikkaeditorissa simuloimalla äänenvoimakkuutta varjojen ja liukuväritäytön avulla.
Välttämätön
Photoshop-ohjelma
Ohjeet
Vaihe 1
Luo uusi asiakirja graafisessa editorissa käyttämällä Tiedosto-valikon Uusi-vaihtoehtoa. Valitse painikkeelle sopiva uuden asiakirjan koko ja tee tausta läpinäkyväksi.
Vaihe 2
Aktivoi pyöristetyn suorakulmion työkalu. Jos haluat hieman pyöristetyn painikkeen, aseta Työkalu-palkin säde yhdeksi millimetriksi. Piirrä pyöristetty suorakulmio valitulla työkalulla. Tuloksena oleva muoto on painikkeen perusta.
Vaihe 3
Napsauta hiiren kakkospainikkeella tasoa ja valitse Rasterize Layer -vaihtoehto. Lataa valinta valitsemalla Valitse-valikosta Lataa valinta -vaihtoehto.
Vaihe 4
Käytä gradienttityökalua ja täytä painike kaksivärisellä gradientilla valitsemalla sopiva väriyhdistelmä kaltevuuspaletin esiasetuksista. Liukuvärityylin tulee olla lineaarinen, valitse se napsauttamalla päävalikossa olevaa Lineaarinen liukuvärjäys -painiketta. Napin yläosan on täytön jälkeen oltava kevyempi kuin alaosan.
Vaihe 5
Levitä tyyli kerrokseen. Voit tehdä tämän käyttämällä sekoitusasetuksia pikavalikossa. Valitse Drop Shadow -välilehti ja kirjoita kulmaparametrille sata kaksikymmentä astetta. Määritä Koko-parametriksi kolme pikseliä.
Vaihe 6
Aseta Sisäinen varjo -välilehdessä sama arvo Kulma-parametrille ja Koko aseta arvoksi viisi pikseliä. Käytä tyyliä painamalla Enter-näppäintä.
Vaihe 7
Tee napin varjo. Voit tehdä tämän napsauttamalla Luo uusi kerros -painiketta ja täyttämällä uuden tason valitun alueen mustalla. Valitse tälle maalikauhatyökalu. Poista valinta painamalla Ctrl + D.
Vaihe 8
Lisää Gaussian Blur -suodatin Suodatin-valikon Hämärtää-ryhmästä mustaan suorakulmioon. Aseta säde neljään pikseliin. Vedä varjotaso painikekerroksen alle ja nosta varjo kolmesta neljään pikseliin ylöspäin. Tätä varten aktivoi Move Tool ja siirrä varjo kohdistinpainikkeilla. Pienennä tämän kerroksen peittävyys 60 prosenttiin.
Vaihe 9
Tee aktiivinen kerros painikkeella ja lataa valinta siitä. Pienennä valintaa kahdella pikselillä käyttämällä Valinta-valikon Muokkaa-ryhmän Sopimus-vaihtoehtoa.
Vaihe 10
Luo uusi kerros ja täytä saatu valinta lineaarisella gradientilla valkoisesta läpinäkyvään niin, että valkoinen osa on painikkeen alaosassa. Poista valinnan valinta. Käytä Edit-valikon Free Transform -vaihtoehtoa vähentämällä kaltevuuden kattamaa aluetta pystysuunnassa. Käytä muunnosta Enter-näppäimellä.
Vaihe 11
Muuta liukuvärikerroksen sekoitustilaksi Peittokuva. Tämä voidaan tehdä valitsemalla tila avattavasta luettelosta Tyylit-paletin vasemmalla puolella. Pienennä kerroksen peittävyys 60 prosenttiin.
Vaihe 12
Kirjoita Vaakasuora tyyppi -työkalulla teksti, jonka pitäisi olla painikkeessa.
Vaihe 13
Kerää kaikki tasot kansioon käyttämällä Tasot-valikon Ryhmätasot-vaihtoehtoa ja valitse ne pitämällä Ctrl-näppäintä painettuna. Tallenna painike psd-tiedostoon käyttämällä Tiedosto-valikon Tallenna-vaihtoehtoa.
