Colțuri rotunjite Photoshop. Cum să rotunjiți colțurile unei imagini folosind CSS fără Photoshop
În acest tutorial rapid, vă voi arăta cum puteți crea colțuri rotunjite în Photoshop folosind tehnici și filtre simple de mascare.
Puteți ajusta raza colțului pentru a rotunji marginea formei, textului etc. Aceasta este o metodă rapidă și ușoară care va crea colțuri rotunjite. Pentru a le crea puteți folosi o mască de strat.
Folosind o serie de pași simpli în Photoshop, puteți crea un dreptunghi rotunjit. Photoshop nu are un filtru sau vreun instrument pentru a face un colț rotunjit imediat, dar o puteți face folosind Illustrator. Vă va permite să creați un efect de colț rotunjit pentru aproape fiecare obiect. În ea trebuie să mergeți la meniu Efecte > Stilizare > Colțuri rotunjite(Efecte > Stilizare > Colțuri rotunjite).
Pasul 1
În acest tutorial rapid, vă voi arăta o metodă simplă de a crea colțuri rotunjite în Photoshop folosind text rasterizat, o formă sau o imagine. Să luăm o imagine vectorială a unei stele cu colțuri ascuțite (această metodă va funcționa bine și cu unghiuri drepte).
Pasul 2
Acum trebuie să rasterizați stratul. Pentru a face acest lucru, faceți clic dreapta pe miniatura stratului stea din paleta de straturi și selectați din meniul contextual Rasterizați stratul(Rasterizare strat). Ar trebui să faceți același lucru dacă utilizați un strat de text.
Pasul 3
Accesați meniu Filtru > Estompare(Filtru > Blur) și selectați estompare gaussiană(Neclaritate Gaussiană). Raza de estompare va depinde de dimensiunea imaginii și de rezultatul pe care doriți să-l obțineți. Voi alege o rază de 5 pixeli.
Pasul 4
Țineți apăsată tasta Ctrl și faceți clic pe miniatura stratului pentru a activa selecția imaginii. Apoi mergem la meniu Selecţieși alegeți Rafinați marginea(Selectați > Rafinați marginea). Puteți experimenta cu parametrii Antialiasing(Neted) și Umbrire(Pene) pentru a selecta efectul dorit. Contrast(Contrast) face 100.
Pasul 5
Luați culoarea formei, în cazul nostru este galbenă și umpleți întreaga selecție cu această culoare. Puteți face acest lucru apăsând combinația de taste „Shift + F5”.
Pasul 6
Fără a elimina selecția, trebuie să adăugați o mască de strat făcând clic pe pictograma care se află în partea de jos a paletei de straturi. Atât, acum vedeta are colțuri rotunjite.
Puteți folosi aceeași metodă pentru a crea text cu colțuri rotunjite, așa cum se arată în imaginea de mai jos. Acum puteți veni cu propriul font.
25.07.2016 27.01.2018
În acest tutorial veți învăța cum să neteziți colțurile ascuțite ale formelor în Photoshop.
Mai întâi, să creăm o formă. Puteți face acest lucru selectând Instrumentul Formă personalizată din bara de instrumente. Tasta rapidă pentru apelarea submeniului de instrumente pentru crearea formelor vectoriale este U.
Există două moduri de a activa acest instrument:
1. În timp ce țineți apăsată tasta Shift, faceți clic pe grupul 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 din panoul de sus și faceți clic pe „roată” 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.
Apăsați tasta Enter 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 cu culoarea dorită, de exemplu, negru, ca în figura originală. Opriți vizibilitatea stratului original cu forma și obțineți această formă cu colțuri 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 stabilește 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
Rezultatul acestui exemplu este 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
Rezultatul acestui exemplu este prezentat în Fig. 2.
Orez. 2. Buton rotund
În browserul Opera, rotunjirea la
Proprietatea border-radius poate fi combinată cu alte proprietăți, de exemplu, adăugarea unei umbre unui element. În exemplul 3, se realizează un set de cercuri, dintre care unul este evidențiat folosind box-shadow . Acest set poate fi folosit pentru a naviga prin pagini sau fotografii.
Exemplul 3. Strălucire
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 3.
Orez. 3. Strălucește în jurul cercului
Folosind raza de margine, puteți crea nu numai un cerc, ci și o elipsă, precum și o rotunjire eliptică pentru un bloc. Pentru a face acest lucru, trebuie să scrieți nu o valoare, ci două, separate printr-o bară oblică. Scrierea 20px/10px înseamnă că raza orizontală a fileului va fi de 20 pixeli, iar raza verticală va fi de 10 pixeli. Exemplul 4 arată cum să creați colțuri eliptice pentru a adăuga o legendă în stil benzi desenate la o fotografie.
Exemplul 4: Elipse
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 4.
Orez. 4. Utilizarea colțurilor eliptice
De asemenea, puteți modifica aspectul colțurilor imaginilor adăugând proprietatea border-radius la selectorul img, așa cum se arată în Exemplul 5.
Exemplul 5: Imagini
HTML5 CSS3 IE 9+ Cr Op Sa Fx
În această secțiune a site-ului meu am decis să plasez lecții de Photoshop, care vă poate fi util atunci când creați un design de site web. Cred că nu ar fi de prisos, din partea mea, înainte de a începe să învăț Photoshop, să vă prezint Taste rapide Photoshop. Folosind Taste rapide Photoshop, îți vei face munca mai ușoară și vei economisi timp. .
Prima mea Lecție de Photoshop iti va spune cum după colțuri fotografie.
Când creați site-uri web, de multe ori trebuie să vă ocupați de problema cum să rotunjiți colțurile unei imagini sau cum să după colțuri fotografie. În această lecție Photoshop Te voi învăța cum după colțuri atrăgând photoshop. De asemenea, acesta Lecție de Photoshop vă va permite după colțuri fotografii. Sper că acest lucru vă este clar. La urma urmei, pentru Photoshop atât poza cât și fotografia sunt toate la fel. În munca mea folosesc Adobe Photoshop SC5, versiunea rusă. Ei bine, nu mă pricep la limbi străine.
Lecția de astăzi este despre rotunjirea colțurilor unei fotografii în Photoshop. Să facem o fotografie împreună cu colțuri rotunjite ca în poza mea.
1. A implementa colțurile rotunjite în Photoshop, deschis cu Photoshop poza (foto) de care avem nevoie. De exemplu, am făcut una dintre fotografiile din arhiva mea foto.
2. Aducem dimensiunile desenului la parametrii de care avem nevoie. Pentru a face acest lucru, apăsați ALT+CTRL+I. Se deschide fereastra Dimensiune imagine. Stabilim dimensiunile de care avem nevoie. Puteți decupa pur și simplu imaginea la dimensiunea dorită.
3. Selectați imaginea (CTRL+A) (va apărea o linie punctată în jurul perimetrului) și copiați-o (CTRL+C); Copiem fotografia, astfel încât imaginea originală să rămână neschimbată după finalizarea colțurile rotunjite în Photoshop. Deși putem lucra la original, când colțurile rotunjite sunt gata, pur și simplu vom salva fotografia ca altă imagine.
4. Deschideți o nouă fereastră (CTRL+N), setați dimensiunile necesare imaginii și faceți clic pe „OK”. Vă rugăm să rețineți că am setat fundalul la „transparent”. Puteți seta imediat fundalul la culoarea dorită;
5. Lipiți imaginea copiată într-o fereastră nouă (CTRL+V) și creați un nou strat (CTRL+SHIFT+N). În acest strat, utilizați instrumentul dreptunghi colturi rotunjite„Desenați un dreptunghi de dimensiunea necesară. Culoarea dreptunghiului nu contează. Instrumentul este selectat făcând clic pe butonul din dreapta al mouse-ului. Sau pur și simplu apăsând tasta (U). Setăm raza de curbură la discreția noastră ( vezi figura de mai jos);
Dacă este necesar, puteți muta forma desenată folosind săgețile de pe tastatură sau folosind mouse-ul în timp ce țineți apăsată tasta din stânga. În primul rând, nu uitați să activați „mutare” pe bara de instrumente (butonul de sus). Poti de asemenea redimensiona cifre. Pentru a face acest lucru, apăsați (CTRL+T) și întindeți forma la dimensiunea dorită folosind mouse-ul în timp ce țineți apăsată tasta din stânga. Dacă doriți să schimbați dimensiunea menținând proporțiile, trebuie să țineți apăsat SHIFT și să trageți de colțul formei.
6. Accesați panoul de straturi. În timp ce țineți apăsat CTRL, faceți clic stânga pe previzualizarea (imaginea) stratului dreptunghi. Apare un contur punctat al formei.
7. Treceți la stratul inferior. Pentru a face acest lucru, faceți clic pe partea dreaptă a imaginii din panoul de straturi. În cazul nostru, stratul 1. Evidențierea albastră va merge la stratul 1.
8. Apăsați CTRL+SHIFT+I. O selecție punctată va apărea de-a lungul marginii acelei părți a imaginii care se află în afara dreptunghiului nostru colturi rotunjite.
9. Apăsați DEL de pe tastatură. Partea imaginii care se află în afara dreptunghiului va fi ștearsă.
10. Reactivați stratul dreptunghi. Ștergeți-l făcând clic pe pictograma coșului de gunoi.
11. Apăsați tasta „M” și faceți clic stânga oriunde în imagine. Selecția a fost eliminată. gata. Puteți salva imaginea pe care am primit-o colțurile rotunjite în Photoshop, în formatul de care avem nevoie.
Dacă o astfel de imagine va fi folosită pentru a crea un site web, salvați-o pentru Web și dispozitive (ALT+SHIFT+CTRL+S).
12. Atentie! Dacă aveți imagini în jurul marginilor cu colturi rotunjite Există încă pixeli transparenți, trebuie să efectuați tăierea. Pentru a face acest lucru, faceți clic pe „Imagine”, selectați „Triming”, în fereastra care apare, setați setările ca în imaginea mea și faceți clic pe „Ok”. Pânza va fi redimensionată la dimensiunea imaginii și orice pixeli transparenți suplimentari vor fi eliminați.
The lecție de Photoshop poate fi folosit atât pentru fotografii ovale, cât și pentru fotografii în formă. Pentru a face acest lucru, la pasul 5, în loc de „dreptunghiul cu colturi rotunjite" selectați instrumentul „elipsă”, „poligon” sau „formă liberă”. Apoi efectuăm aceleași acțiuni ca și pentru a obține colțurile rotunjite.
Toate browserele moderne acceptă standardele de marcare hipertext HTML5 și stilurile de design CCS3. Și dacă site-ul tău (șablonul) acceptă standarde moderne, atunci poți face modificări designului, cum ar fi rotunjirea colțurilor, umbrele, umplerile cu gradient, fără a apela la editori grafici.
Webmasterii de pretutindeni folosesc colțuri rotunjite pe blocuri și cadre pe site-uri web. În acest articol vă voi spune cum să rotunjiți colțurile imaginilor și fotografiilor de pe un site web fără a utiliza programe terțe, doar folosind CSS.
Pentru ca exemplele date în articol să fie afișate corect pe ecran, trebuie să utilizați cele mai recente versiuni de browsere, FireFox, Chrome și cele bazate pe acestea: Yandex.Browser, Amigo și așa mai departe.
Colțurile rotunjite ale blocurilor DIV
Conform standardului CSS3, astfel încât blocul DIV avea colțuri rotunjite, trebuie aranjat hotar-raza, de exemplu astfel:
Chenar-rază: 10px;
Pentru claritate, să desenăm două blocuri cu colțuri drepte și rotunjite:
Bloc cu unghiuri drepte
Bloc cu colțuri rotunjite
Colțurile rotunjite ale imaginilor
Prin analogie cu exemplul de mai sus, puteți rotunji colțurile imaginilor de pe site, de exemplu fotografii. Pentru claritate, să rotunjim colțurile pentru fotografia de pe pagină
Iată imaginea fără procesare CSS
Și acum cu colțuri rotunjite:
Chenar-rază: 10px;
Pentru a o face cu adevărat „frumoasă”, să adăugăm niște margini de la început...
Chenar-rază: 10px; chenar: 5px #ccc solid;
si apoi umbrele:
Chenar-rază: 10px; chenar: 5px #ccc solid; casetă-umbră: 0 0 10px #444;
Opțiunea de mai jos (colțuri rotunjite cu umbră fără chenar) arată foarte asemănătoare cu un mouse pad:
Chenar-rază: 10px; casetă-umbră: 0 0 10px #444;
Și în sfârșit, o batjocură completă a imaginii
Raza de frontieră: 50%; chenar: 5px #cfc solid; casetă-umbră: 0 0 10px #444;
Dacă deschideți imaginea într-o fereastră nouă, veți vedea că aceasta (imaginea) este neschimbată, iar toate colțurile, umbrele și așa mai departe sunt doar rezultatul procesării CSS stiluri de browser.
O mică digresiune lirică
Stil frontieră mărește dimensiunea imaginii cu mărimea marginii. Dacă este specificată o valoare chenar: 5px, apoi imaginea finală va deveni mai lată și mai înaltă cu 10 pixeli. Rețineți acest lucru, în unele cazuri este posibil ca aspectul site-ului să nu funcționeze.
Un stil cutie-umbră nu afectează dimensiunea imaginii, umbra pare să curgă peste elementele învecinate. Când îl utilizați, aspectul site-ului nu are de suferit.
Cum să rotunjiți colțurile imaginilor în WordPress
În toate exemplele de mai sus, am scris stiluri direct în etichetele de cod html. De exemplu, ultimul arată astfel:
Acest lucru este bun atunci când trebuie să rearanjați o fotografie sau o fotografie. Dacă vrei să schimbi totul? Ei bine, nu veți urca pe tot site-ul dvs. pentru a edita afișarea fiecăruia. În majoritatea cazurilor, eticheta WordPress IMG definește mai multe clase de stil. Unul după numele unic al fișierului imagine, altul după dimensiune și altul după aliniere. Puteți completa unul dintre ele cu parametrii de mai sus.
De exemplu, pentru toate imaginile pentru care nu este specificată alinierea, în fișier stil.css Pentru tema dvs. WordPress, introduceți următoarele:
Alignnone ( chenar-rază: 10px; chenar: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Sau metoda cea mai strictă pentru toate pozele de pe site. Să redefinim stilul pentru toate etichetele IMG:
Imag (chenar-rază: 10px; chenar: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Ultima opțiune este potrivită nu numai pentru WordPress, ci și pentru orice CMS. Și chiar și pentru simplu HTML pagini în cazul în care, la afișarea imaginilor, eticheta IMG nu sunt atribuite clase de stil. Dar fii atent. Dacă înlocuiți opțiunile de afișare a etichetelor IMG vei schimba aspectul TOATE pozele de pe site!
În loc de o concluzie
Toate exemplele din articol sunt condiționate și sunt destinate doar să demonstreze unele dintre capacitățile CSS pentru procesarea imaginilor și să arate cât de simplu este.
