U ovom članku ćemo pogledati kako napraviti dugmad za izgled auto stranice iz članka "Kreiranje izgleda stranice automobila u Photoshop CS6" .

Kreiranje velikih dugmadi

Prvo, napravimo velika dugmad poput "Detalji" .

Počnimo. Napravite novi dokument veličine 121 x 34 px s prozirnom pozadinom, a zatim ga popunite crnom bojom. Kasnije ćemo izbrisati pozadinski sloj, ali sada nam je potreban radi jasnoće.

U paleti alata odaberite alat za zaobljeni pravougaonik:

Na panelu sa opcijama navedite tip obrisa - "Oblik" (Oblik) i radijus zaokruživanja - 2 piksela, boju ispune - bilo koja, u ovom primjeru imam svijetlo sivu. Zatim kreiramo oblik veličine našeg dokumenta, 121 x 34 piksela, radi jasnoće možete povećati skalu prikaza:

Ovo će biti osnova dugmeta. Sada treba da izgleda kao dugme, tj.Zapravo, Photoshop CS6 vam omogućava da kreirate složenu ili čak gradijentnu ispunu, kao i potez pomoću opcija oblika, ali u ovom slučaju ćemo koristiti stare dobre stilove slojeva tako da ovaj materijal nije relevantan samo za CS6, ali i za verzije ispod.

Dakle, dajmo sloju oblika stilove "Stroke" (Stroke)" i "Gradient overlay" ; (Gradient Overlay) sa sljedećim postavkama:

Zapravo, dugme je skoro spremno:

Sada ostaje samo dodati željeni tekst. Za tekst sam koristio font Arial Regular 14 pt u bijeloj boji:

Ne zaboravite da obrišete pozadinski sloj!

Kreiranje dugmadi za dodavanje na društvene mreže

Kreirajte novi dokument veličine 95 x 17 px sa bijelom pozadinom, a zatim ga popunite crnom bojom. Kao iu prvom slučaju, sloj pozadine je potreban radi jasnoće, a zatim ćemo ga izbrisati.

Izaberite ponovo „Alat zaobljeni pravougaonik“, u panelu sa opcijama, odredite tip konture - „Oblik“ (Oblik) i radijus zaokruživanja - 8 piksela, boja ispune - bilo koja. Zatim kreiramo oblik veličine dokumenta, 95 x 17 piksela, radi jasnoće možete povećati razmjer prikaza:

Primijenite iste stilove slojeva na sloj oblika kao na prvo dugme, dobićemo sljedeći rezultat:

Sada treba da preuzmete logo društvene mreže odgovarajućih veličina, ima mnogo toga na internetu.Za moj primjer, preuzeo sam Twitter logo 24px x 24px, prevukao ga na naš dokument i malo ga smanjio koristeći alat Free Transform. Opet sam zumirao:

Kao što vidite, desni uglovi logotipa vire iza zaobljenih uglova dugmeta, što nije dobro. Da biste popravili ovaj nedostatak, prvo rasterizirajte stilove slojeva oblika. Da biste to učinili, desnom tipkom miša kliknite sloj s oblikom u paleti slojeva i odaberite stavku Rasterize Layer Style iz kontekstnog izbornika koji se otvori. Sada primenite masku za odsecanje na sloj logotipa:

Kao što vidite, sada logo ne viri preko ivica dugmeta:

Ostaje samo dodati tekst veličine 12 pt, font Myriad Pro, boja - bijela:

I izbrišite pozadinski sloj.

Kategorija: