Cum să rotunjiți marginile unui desen în Photoshop. Realizarea colțurilor rotunjite ale imaginilor în Photoshop

Am ieșit din nou în afara programului! Eh... Ei bine, eliberez lecțiile cu câteva ore întârziere, sper că acest lucru nu este atât de critic. Astăzi, în lecția noastră, vom vorbi despre cum să rotunjiți marginile în Photoshop. Totul ar fi bine, iar lecția nu ar fi diferită de cele pe care le-ați văzut pe alte site-uri, dar eu însumi mai căutasem și știu ce metode oferă acolo. Nu-i asculta! Prea plictisitor, prea lung. Îți ofer o modalitate de cum colțuri rotunjite în photoshop literalmente în câteva clicuri!

Să o luăm fotografie de stoc Apropo, fac asta pe un telefon bun. Nu o reclamă :D
Să folosim selecția ca în captura mea de ecran:

Accesați fila ( Selectați > Modificare > Netezire). Atenţie! Acest lucru poate fi dificil pentru unii. În unele versiuni de Photoshop nu există „Smooth”, adică „Optimize”. Deci, nu vă alarmați dacă nu găsiți Smooth. Este la fel.

Aici am selectat raza de curbură.

Acum, după cum puteți vedea, zona dvs. de selecție are deja colțuri rotunjite.

Tot ce rămâne este să tăiați imaginea.

Si acum . Mărimea este setată acolo automat. Și acum pur și simplu introducem imaginea într-un fișier nou.

În acest scurt articol ne vom uita Un exemplu de creare a unui cadru „subțire” cu grosimea de 1 - 2 pixeli cu margini rotunjite în Photoshop. Aceste cadre (și fragmentele lor) sunt utilizate pe scară largă de designeri și webmasteri atunci când creează machete și creează șabloane pentru site-uri web. Folosit pentru a încadra articole, meniuri, butoane etc.

Asadar, haideti sa începem:

1. Să creăm document nou(Meniul de sus „Fișier” - „Nou”) cu dimensiuni, de exemplu, 500 pe 500 pixeli. Conținut de fundal: transparent.

2. Accesați Bara de instrumente (situată în stânga), selectați instrumentul „Marcă dreptunghiulară” (M). Pe documentul nostru desenăm o zonă dreptunghiulară. Opțiuni pentru instrumentul „Zona dreptunghiulară”: „Selectare nouă”, „Pene: 0 px.”, „Stil: Normal” (Fig. 1).

3. B meniul de sus selectați fila „Selectare” - „Modificare” - „Optimizare” (Fig. 2). Să luăm valoarea razei, de exemplu, egală cu 20 de pixeli. Faceți clic pe „Da”. Vedem că colțurile dreptunghiului nostru selectat au fost rotunjite cu valoarea selectată (20 pixeli) (Fig. 3).

4. În meniul de sus, selectați „Edit” - „Stroke”. Setați parametrii cursei. Latime: 2 px. (pentru claritate). Să luăm niște culoare roșie. În aceeași filă, setați: „Poziție față de chenar: centru (puteți selecta valorile „înăuntru” și „exterior”)”, „Suprapunere: mod normal”, „Opacitate: 100%”, „Salvați transparență : gol”. apasa butonul„Da” (Fig. 4) . Eliminam selecția folosind comanda rapidă de la tastatură „Ctrl + D” și obținem cadrul de care avem nevoie, 2 pixeli grosime în roșu cu margini rotunjite (Fig. 5). Acum fragmentele sale sau întregul cadru pot fi folosite pentru a proiecta orice șablon, banner etc.


Orez. 1	Orez. 2

Orez. 3	Orez. 4

Orez. 5	Orez. 6

De exemplu, și pentru o mai bună vizualizare, am creat un nou strat umplut cu alb, l-am mutat sub stratul cu cadrul nostru și am creat mai multe cadre similare cu grosime neclară, culori și colțuri rotunjite (Fig. 6).

25.07.2016 27.01.2018

În acest tutorial veți învăța cum să neteziți în Photoshop colțuri ascuțite la cifre.

Mai întâi, să creăm o formă. Puteți face acest lucru selectând instrumentul din bara de instrumente Figura liberă(Instrument de formă personalizată). Tasta rapidă apelarea submeniului de instrumente pentru creare forme vectoriale- U.

Există două moduri de a activa acest instrument:

1. Cu prins Tasta Shift Faceți clic pe un grup de instrumente și se va deschide un submeniu pentru a selecta instrumentul dorit;

2. Făcând clic lung pe butonul stâng al mouse-ului pe un grup de instrumente, se va deschide și un submeniu.

Încărcați toate formele disponibile în Photoshop (faceți clic pe miniatura formei în panoul de susși faceți clic pe „roata” din dreapta pentru a deschide setări suplimentare):

Din lista derulantă, selectați o formă cu colțuri ascuțite, de exemplu, această stea cu 10 colțuri:

Când creați o figură, nu uitați să țineți cheieSchimb- acest lucru va ajuta la menținerea proporțiilor.

Acum trebuie să rasterizați figura - Faceți clic dreapta pe stratul cu forma - Rasterizare strat.

Selectăm raza în funcție de dimensiunea pânzei și de rezultatul dorit, am ales 6 pixeli.

Acum trebuie să încărcăm selecția stratului cu forma, pentru a face acest lucru, țineți apăsat cheieCtrlfaceți clic pe miniatura stratului cu o siluetă pe Panoul Straturi.

Când selecția este activă, apăsați butonul „Rafinați marginea” (Rafinați Edge):

Se va deschide un meniu de setări în care avem nevoie de parametru Pană lăsa pe 0 , și parametrul Contrast creste la maxim 100%. Parametru Neted personalizați-l după gustul dvs., vă va ajuta să rotunjiți colțurile figurii. În cazul stelei cu 10 fețe, am setat-o la maxim, dar este posibil să aveți setări complet diferite.

În parametru Ieșire către... lăsați setarea implicită - alocare.

Clic Introduce cheia pentru a aplica setările. Creați un nou strat și utilizați Instrument pentru găleată de vopsea sau mergând la meniu Editare-Umplere completați selecția în culoarea potrivită, De exemplu, negru, ca în figura originală. Opriți vizibilitatea stratului original cu forma și obțineți această formă cu colturi rotunjite:

Asta e tot. În acest tutorial am învățat cum să rotunjim colțurile formelor în Photoshop. Sper că lecția ți-a fost de folos.

Toată lumea s-a săturat de mult de colțurile dreptunghiulare tradiționale în designul site-urilor web. La modă sunt colțurile rotunjite, care sunt realizate nu folosind imagini, ci prin stiluri, pentru care se folosește proprietatea border-radius. Această proprietate poate avea una, două, trei sau patru valori separate printr-un spațiu, care determină raza tuturor colțurilor sau fiecare în parte.

În tabel 1 arată un număr diferit de valori și tipul de bloc care se obține în acest caz.

Cod	Descriere	Vedere
div ( chenar-rază: 10px; )	Raza de rotunjire pentru toate colțurile simultan.
div ( chenar-rază: 0 10px; )	Prima valoare setează raza colțurilor din stânga sus și din dreapta jos, a doua valoare setează raza din dreapta sus și din stânga jos.
div ( chenar-rază: 20px 10px 0; )	Prima valoare stabilește raza colțului din stânga sus, a doua - atât dreapta sus, cât și stânga jos, iar a treia valoare - dreapta jos.
div ( chenar-rază: 20px 10px 5px 0; )	Setează secvenţial raza colţurilor din stânga sus, din dreapta sus, din dreapta jos şi din stânga jos.

Exemplul 1 arată cum să creați un bloc cu colțuri rotunjite.

Exemplul 1. Colțurile unui bloc

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rază

Me este forma supletivă a cazului acuzativ al lui I.

Rezultat acest exemplu prezentată în fig. 1.

Orez. 1. Bloc cu colțuri rotunjite

Un efect interesant poate fi obținut dacă setați raza de rotunjire mai mare de jumătate din înălțimea și lățimea elementului. În acest caz, veți obține un cerc. Exemplul 2 arată cum să creați un buton rotund cu o imagine.

Exemplul 2: Buton rotund

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Buton

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Buton rotund

ÎN browser Opera rotunjire la