Ovo dugme će se koristiti u android aplikaciji za uključivanje/isključivanje LED-a, tako da mora imati dva stanja - UKLJUČENO i ISKLJUČENO.

U prethodnoj lekciji smo crtali osnova površine dugmeta i tela. Sada kreirajmo ikonu za isticanje koja predstavlja stanje dugmeta.

Ovo je slika koju bismo trebali dobiti kao rezultat lekcije:

Ovako izgleda prazno dugme u ovom trenutku na osnovu rezultata prethodne lekcije, radi jasnoće, stavio sam dugme na crnu pozadinu:

Napravićemo standardnu ikonu, otprilike ovako:

Napravićemo ikonu koja izgleda ovako.

A pošto android aplikacija zahteva nekoliko identičnih slika, ali različite veličine (to je zato što ekrani android gadžeta imaju različite rezolucije i proporcije), moraću da radim sa vektorskim oblicima kako bi veličina izvora mogla biti promijenjen bez gubitka kvaliteta .

Počnimo.

Kreirajmo novi dokument 500 x 500 piksela. Postavite vodilice u sredinu dokumenta. Uzmite Ellipse Tool, odaberite mod oblika (Snape),
uvjerite se da su operacije putanje u poziciji “Novi sloj” (više ovdje) i napravite geometrijski ispravan krug od centra, kao na početku zadnje lekcije, nakon riječi "počnimo." Boja ispune nije bitna. Rezultat:

Oblik elipse za praznu značku.

Sada treba da napravimo još jedan krug, ali na način da se sadržaj ovog kruga oduzme od sadržaja prvog kruga. Da biste to učinili, odaberite operaciju “Oduzmi od područja oblika” na traci sa opcijama:

Odaberi operacijuOduzmi prednji oblik (Oduzmi od površine oblika).

I pravimo još jedan pravilan krug iz centra, veličina novog kruga je manja od prvog. Jer drugi oblik je napravljen u načinu oduzimanja, pikseli prvog oblika će biti oduzeti od drugog:

Sadržaj drugog kruga se oduzima od prvog kruga.

Napomena: Kada radim sa vektorskim oblicima u nekim verzijama Photoshopa, nailazim na pogrešno ponašanje programa prilikom prebacivanja režima rada putanje, to se trenutno dešava u Photoshopu CC 2017.Stoga, nakon prebacivanja načina rada, jednostavno pritisnem otkazivanje prethodnog koraka Crtl + Alt + Z, a zatim napravim drugu figuru. Više detalja u videu.

Kao rezultat, imamo krug ispunjen pikselima. Ali za naš zadatak nije potreban cijeli krug, već polukrug, odnosno "dvije trećine krug)))" . Oduzmite segment od rezultirajućeg kruga. Da bi segment bio geometrijski ispravan, postavite horizontalnu vodilicu na visinu od tri četvrtine kruga:

Horizontalna vodilica za izrezivanje dijela kruga.

Sada uzmite alatku Pen Toll, još uvijek imamo mod Subtract Front Shape za rad sa putanjama, tako da će sadržaj oblika nacrtanog olovkom također biti oduzet od glavnog sadržaja. Nacrtajte trokut alatom Pen, jedan vrh na križanju središnjih vodilica. dvije strane moraju proći kroz sjecište gornje horizontalne vodilice i vanjskog obrisa kruga:

Uz pomoć trougla kreiranog alatom olovka, uklonili smo dio kruga. Obratite pažnju da su sve staze na istom sloju.

Sada trebamo obojiti okomiti štap, ovaj put nam je potreban mod "Dodaj u područje oblika" :

Odabir načina "Spajanje oblika" .

Kada pređem na ovaj mod (a trebalo bi da deluje na sledeći dodani oblik), moj Photoshop ponovo greši, trougao nacrtan olovkom se spaja sa krugom, pa pritisnem Cancel Crtl+Alt+Z, greška je uklonjen, dok ostaje način spajanja oblika.

Uzmite alatku Pravougaonik i napravite vertikalni pravougaonik koji završava ikonu UKLJUČENO/ISKLJUČENO:

Ikona ON/OFF je napravljena. Ali, kao što vidite, debljina linija ne odgovara jedna drugoj. Ovo je lako popraviti.

Dakle, generalno, ikona je spremna. Ako ste zbunjeni načinom na koji se obrisi oblika pojavljuju u vašem dokumentu, ne brinite. Prilikom snimanja dokumenta u bilo kojem standardnom grafičkom formatu, obrisi neće biti vidljivi. Mogu se sakriti čak iu Photoshop dokumentu, za to samo trebate odabrati bilo koji drugi alat, osim vektorskih, na primjer, "Alat za pomicanje" .

Ali možda nam se neće dopasti širina linije polukruga ili pravougaonika, prečnik i veličina, njihov odnos itd. Nisam uzalud koristio vektorske oblike za gradnju, jer u svakom trenutku, čak i nakon snimanja dokumenta. možemo ih promijeniti bez gubitka kvalitete i poštovanja relativne geometrije. Na primjer, nakon što sam nacrtao pravougaonik, čini mi se da je širina polukruga premala u odnosu na pravougaonik. Ovo mogu lako popraviti smanjenjem prečnika unutrašnjeg kruga.
Uzmite alatku za direktnu selekciju, držite pritisnut taster Ctrl i kliknite jednu po jednu na sve tačke sidrišta na obrisu kruga.Zatim primijenite naredbu „Slobodna transformacija“, držite pritisnute tipke Shift + Alt i, povlačeći prema unutra u bilo kojem kutu kutije za transformaciju, smanjite promjer unutrašnjeg kruga kako biste povećali širinu polukružne trake. Na ovaj način možemo promijeniti veličinu i poziciju bilo kojeg elementa ikone:

Odabrane su četiri tačke sidrišta, samo će unutrašnji krug biti pogođen prilikom transformacije.

Ali najvažnije je da možemo promijeniti geometriju ikone na potpuno isti način, već preklapajući je na ciljni dokument.

Zapravo, pošto je ikona spremna, vreme je da je prevučemo u dokument pomoću dugmeta, možemo to uraditi pomoću alatke "Premesti" . Ovako izgleda dokument:

Prikaz dokumenta sa dodanom vektorskom ikonom.

Trenutno se ikona nalazi u sredini dugmeta, ali ne izgleda kako treba. Činjenica je da je krug ikone ispod središta, ali ako podignete lik, pravougaonik će biti previsok.Stoga prvo trebate spustiti obris pravokutnika u odnosu na ikonu, a zatim cijelu ikonu pomaknuti prema gore. Put se lako može spustiti pomoću alata za odabir putanje:

Pomeri pravougaonik malo dole.

Sa izborom sidrišnih tačaka putanja i alatom Free Transform, možemo promijeniti veličinu ikone.

Pored toga, odabirom željenih sidrišta pomoću alata za direktnu selekciju, možemo ne samo da transformišemo veličinu, već i pomeramo tačke da promenimo oblik ikone. Ovdje ću promijeniti veličinu ikone (odabrane su sve tačke sidrišta) da stane na dugme:

Koristite slobodnu transformaciju da prilagodite veličinu vektorskog oblika.

Preimenujte sloj sa ikonama uon.

Prvo, hajde da stavimo ikonu u stanje UKLJUČENO. U ovom slučaju, ograničit ćemo se na dodavanje stilova slojeva Outer Glow i Color Overlay sa sljedećim postavkama:

Rezultat:

Prikaz dugmeta u "uključenom" stanju.

Sada napravimo stanje OFF. Duplirajte slojon, preimenujte ga uoff i dodajte stil sloja Inner Shadow i Color Overlay sa sljedećim postavkama:

Rezultat:

Prikaz dugmeta u "isključenom" stanju.

Da biste dugmetu dali sjajni metalni efekat, označite kućište. Kreirajte novi sloj iznad svih ostalih slojeva. Uzmite alat "Četka" , učinite tvrdoću jednakom nuli, boja je bijela, veličina je nešto veća od trake tijela. Kliknite četkom u gornjem lijevom kutu. Trebalo bi izgledati otprilike ovako:

Završen crtež, radi jasnoće dodao sam crnu pozadinu.

I zadnje. Ponekad, da bi se dao tehno stil, površina dugmadi ima teksturu koncentričnih krugova, za to morate prekriti sliku poput ove na površinski sloj:

Moja slika sa koncentričnim krugovima na transparentnoj pozadini.

Takva slika se jednostavno kreira u bilo kojem uređivaču vektorske grafike, na primjer, CorelDRAW, ali u Photoshopu, uz korištenje standardnih alata, čak i uz korištenje akcija, nije moguće napraviti je. Samo ručno, kreiranjem obrisa u obliku kruga, nakon čega slijedi potez debljine 1 piksel, zatim stvaranje sljedećeg kruga većeg promjera, itd., općenito, ovo je dugo i dosadno. Ali pošto Ne tražim lake načine, čisto iz principa, kodirao sam JS skriptu za Photoshop da dobijem koncentrične krugove sa jednakim uvlačenjem jedan od drugog, neću ovdje opisivati, ova uska tema je interesantna samo za ljude koji rade u CAD-u programe.Predlažem da preuzmete crtež krugova zajedno sa gotovim PSD-om sa linkova na dnu stranice.

Postavite sliku sa krugovima preko sloja oblika sa osnovom dugmeta, promenite režim mešanja, najbolje je da sami izaberete režim kucanjem, ovde sam koristio režim "Preklapanje" .

Ako se kružići previše jasno ističu, smanjite neprozirnost sloja, osim toga, dodao sam masku sloja i na nekim mjestima preslikao krugove poluprovidnim crnim kistom.

Završi rezultat:

Preuzmite materijale za lekciju(PSD, 1 PNG, 1,54 Mb)Preuzmite sa Yandex-a

Kategorija: