Margini rotunjite în Photoshop. Cum să rotunjiți marginile în Photoshop - modalitatea ușoară
Toate browsere moderne acceptă standardele de marcare hipertext HTML5 și stilurile de design CCS3. Și dacă site-ul dvs. (șablonul) acceptă standarde moderne, apoi puteți face modificări de design, cum ar fi rotunjirea colțurilor, umbrele, umplere 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 site fără a le folosi programe de la terți, folosind doar CSS.
Pentru ca exemplele date în articol să fie afișate corect pe ecranul tău, trebuie să folosești cel mai mult ultimele versiuni browsere, FireFox, Chrome și cele realizate pe baza lor: 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 o umbră fără margine) este 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ă se deplaseze elemente adiacente. 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 etichete 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 câte unul nume unic fișier cu o imagine, diferită ca dimensiune și, de asemenea, aliniată. 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 a ta Teme WordPress scrie urmatoarele:
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 te vei schimba aspect 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.
O zi bună, dragi dezvoltatori de site-uri web începători. În cele din urmă, trec la a vorbi despre ce metode să folosesc pentru a crea site-uri web interesante. Astăzi vă voi spune cum să procesați o fotografie în câteva minute și, astfel, să faceți portalul mai frumos, iar durata vizitelor este semnificativ mai lungă. Nu mă crezi? Dar degeaba...
De la apariția site-urilor de vânzare companii mari Am început să studiem îndeaproape gusturile publicului. Ei încearcă cu grijă să ascundă unele dintre descoperirile lor, deoarece tehnicile funcționează prea bine, în timp ce altele sunt destul de greu de ascuns, sunt folosite prea des.
Toată lumea a fost de mult obișnuită cu fotografiile netede, dreptunghiulare. Sunt folosite când despre care vorbim despre o afacere serioasă care face lucruri responsabile.
Când o companie sau un serviciu este mai simplu, atunci imagini de la tranziții netede poate fi văzut mult mai des. Puteți verifica acest lucru pe orice pagină de vânzări bună, care va fi o colecție cele mai bune practici jurnalism, marketing și psihologie.
Astăzi veți învăța toate metodele despre cum să rotunjiți colțurile în Photoshop. Dacă te gândești să păstrezi atenția și să câștigi, atunci folosește forme simplificate și dacă faci un portal serios și vrei să creezi un fel de barieră între tine și cititor, atunci este mai bine să folosești imagini dreptunghiulare: „Suntem baieti seriosi, daca vreti calitate - la noi."
O modalitate rapidă de a completa o fotografie
Deci, vom lucra în Photoshop. Deschide imaginea.
Găsiți instrumentul Dreptunghi rotunjit.
Dacă nu îl găsiți, țineți apăsat butonul stâng al mouse-ului de pe butoanele de meniu timp de câteva secunde pentru a deschide opțiuni suplimentare.
Nu contează ce culoare alegi. Trageți obiectul peste imagine, astfel încât zona de care aveți nevoie să fie în interiorul formei.
Acordați atenție proprietăților. Vă puteți „juca” cu indicatorii indicați în imagine și puteți îndoi mai mult marginile. Introduceți numărul dvs. și apăsați enter pentru a vedea rezultatul. Când sunteți mulțumit de el, apăsați din nou pe Enter.
Acum, în timp ce țineți apăsat butonul CTRL, faceți clic pe centrul stratului care conține dreptunghiul pe care tocmai l-ați desenat. Atenție, dacă dați clic pe text, nu se va întâmpla nimic. Trebuie să faceți clic exact pe centrul pictogramei cu o imagine în miniatură.
Acum eliminăm vizibilitatea. Pentru a face acest lucru, faceți clic pe „ochiul” de lângă strat.
Să trecem la lucrul cu stratul, selectați-l: faceți clic fie pe text, fie pe pictogramă. Nu contează. Nu sări peste acest pas sau magia nu se va întâmpla.
Gata. Dacă aveți de gând să afișați o imagine pe site, o puteți salva, principalul lucru este să nu faceți o greșeală cu formatul.
Ai nevoie exact de png.
În acest caz, marginile cu checker vor fi transparente. Selectați jpeg și acestea vor fi înlocuite cu un chenar alb neatractiv.
De asemenea, puteți adăuga această imagine la fotografia dvs. În acest caz, salvarea și deschiderea din nou nu este necesară.
Doar selectați-l (Ctrl+A), apoi copiați (Ctrl+C) și lipiți-l într-o altă imagine (Ctrl+V).
Rotunjire pentru designeri, accelerarea procesului de lucru la un proiect
Să presupunem că lucrați la un proiect important. Totul este aproape gata și vrei să vezi cum va arăta cu colțurile rotunjite. Nu este necesar să deschideți o sută de mii de file: tăiați, lipiți și așa mai departe. Totul se poate face mult mai repede și mai ușor.
Iată o privire la exemplul meu. Apropo, dacă doriți, puteți descărca asta fisier PSD, deschideți-l în Photoshop și exersați ( descărcare ).
Selectați stratul de care avem nevoie. Voi lucra cu o imagine mare a unei bufnițe. Prin urmare, țin apăsat Ctrl și dau clic pe centrul imaginii în miniatură a acestui strat. Nu prin text sau ochi. Conform poza cu poza. Scuze pentru tautologie.
În primul rând, bifați caseta de lângă „aplicați efect asupra granițelor”. Apoi setăm raza.
Din păcate, trebuie să alegi cu ochii. Aici, de regulă, l-au stabilit la 15. Acesta este standardul, dar, după cum înțelegeți, vă puteți abate de la acesta.
Alegem varianta ideala.
Apoi, în fila „Selectare” găsim „Inversie”.
Apăsați butonul „del” de pe tastatură și ați terminat.
Pentru a elimina furnicile care se târăsc de-a lungul marginilor, trebuie să apăsați Ctrl și D în același timp.
Dacă ți-au plăcut aceste lecții, poți găsi mai multe. Pentru a face acest lucru, nu trebuie să căutați pe Youtube orice vă vine în minte. Poate fi studiat toate jetoanele „de la A la Z” conform lecțiilor video. Obțineți o prezentare gratuită ultima versiune curs despre Photoshop rusesc. În acest caz, nu vei putea doar să faci lucruri de bază, ci și să înveți cum să faci o muncă complexă, să vezi cum specialiștii adevărați folosesc abilități simple și ce rezultă din acestea.
Uite, de exemplu, ceea ce ai învățat astăzi poate fi aplicat nu numai pentru tăierea colțurilor.
Știi deja să faci o imagine în triunghiuri. nu intelegi? Este foarte simplu.
Luați ca bază prima metodă de decupare din acest articol, dar în loc să lucrați cu un dreptunghi, alegeți un poligon.
Nu uitați să setați „trei laturi” în panoul din partea de sus pentru a nu vă păcăli cu transformarea figurii.
Și, dacă nu doriți ca colțurile să fie la fel de ascuțite ca ale mele, trebuie doar să setați anti-aliasing în setări.
Acest desen format psd puteți descărca direct de pe blogul meu și puteți lucra cu el ( descărcare ). Cred că îmbunătățirea acestuia nu este o problemă.
Dacă acest articol a fost util, vă rugăm să vă abonați la newsletter-ul meu de pe blog. Sunt încă o mulțime de lucruri interesante care te așteaptă! Și, în sfârșit, un videoclip despre cum o fată poate fi transformată într-o pizza folosind Photoshop. Urmărește până la sfârșit, e amuzant.
Caut de multă vreme cum să rotunjesc colțurile când Ajutor Adobe Photoshop, dar totul este omis undeva sau este scris incorect. După cum se dovedește, rotunjirea colțurilor oricărei imagini nu va dura mai mult de 30 de secunde, desigur, după ce înveți cum să o faci.
Și astfel, pentru a efectua o operație atât de simplă, trebuie să lansați aplicația și să aruncați imaginea de care avem nevoie în program, sau să folosiți Meniu->Fișier->Deschidere->Imagine obligatorie.jpg Voi folosi o imagine obișnuită a naturii.
Atenție la colțul din dreapta jos, în „Straturi” a apărut imagine de fundal, trebuie convertit într-un strat. Pentru a face acest lucru, faceți clic pe fundal clic dreapta mouse-ul și selectați „Strat din fundal”.
Ca urmare a acestei actiuni, fundalul nostru va fi convertit într-un strat.
Creați un duplicat al imaginii făcând clic dreapta pe Stratul 0 și selectând „Creați un strat duplicat”.
Figura 2
Ascunde-te cu zona de lucru„Stratul 0”. Pentru a ascunde un strat, faceți clic pe pictograma OCHI de lângă numele stratului.
Selectați partea dorită a imaginii.
După ce ați marcat partea dorită a imaginii cu un dreptunghi, faceți clic dreapta în interiorul selecției și selectați „Creați zona selectată”.
În caseta de dialog, faceți clic pe butonul OK, dar nu atingeți pene.
Foarte punct important! Selectați Stratul 0 (Copiere), apoi apăsați butonul DELETE de pe tastatură. Stratul 0 (copie) trebuie selectat cu un clic obișnuit al mouse-ului.
Dacă totul este făcut corect, în Photoshop veți vedea așa ceva. Acum puteți salva imaginea, de exemplu, în format pngși bucurați-vă de opera de artă.
Mai este un punct, dacă bucata tăiată este de două sau chiar de 3 ori mai mică imaginea originală, va ramane cu o suprafata mare goala, trebuie indepartat. Pentru a face acest lucru, selectați instrumentul de tăiere și selectați zona imaginii fără zona goală.
Apoi accesați meniul Editare->Copiere.
Accesați meniul Fișier->Nou și faceți clic pe OK. Programul va ajusta automat lățimea și înălțimea pânzei zonei selectate a imaginii.
În noul proiect „Unnamed 1”, și ne vom găsi automat în el, mergeți la meniul Editare->Inserare.
Cel mai bun mod de a salva o imagine este să utilizați opțiunea „Salvare pentru Web”. În primul rând, puteți selecta manual calitatea imaginii ca procent, iar în al doilea rând, dimensiunea imaginii va fi de câteva ori mai mică decât dacă este salvată. în mod obişnuit.
Și ce am obținut ca rezultat?
Pentru cei care nu înțeleg cum am reușit să rotunjesc colțurile, am înregistrat special un videoclip care vă va ajuta cu această sarcină simplă.
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 dat cantități diferite valorile ș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
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 se creează buton rotund cu un desen.
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 browser Opera rotunjire 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 rază-chenar la selectorul img, așa cum se arată în Exemplul 5.
Exemplul 5: Imagini
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Această lecție este destul de simplă, dar rezultatul va fi plăcut ochiului - colțuri rotunjite și îngrijite ale fotografiilor tale. Și acest lucru este foarte ușor de realizat dacă ai în arsenalul tău Adobe Photoshop orice versiune și imaginea care trebuie procesată.
Rotunjirea colțurilor unei imagini are loc în mai multe etape:
1. Deschideți imaginea în Photoshop. Pentru a face acest lucru, faceți clic pe „Fișier” și „Deschidere” sau pe comanda rapidă de la tastatură Ctrl+O. 
2. Creați un nou strat făcând clic pe „Straturi”, apoi pe „ Strat nou». 
3. În partea stângă a programului există o bară de instrumente verticală. În el veți găsi instrumentul dreptunghi. ÎN în acest moment Nu avem nevoie de el, așa că faceți clic dreapta pe el și selectați instrumentul „Dreptunghi rotunjit”. 
4. Un panou de setări va apărea în partea de sus a programului a acestui instrument. Aici puteți seta raza de colț dorită, de ex. puteți crește sau micșora rotunjirea. Valoarea implicită este de 10 pixeli. Vă rugăm să rețineți că pentru a utiliza instrumentul, trebuie să aveți activată opțiunea „Contururi”, care se află și în panoul de setări. 
5. Selectați întreaga imagine, începând din colțul din stânga sus și terminând în colțul din dreapta jos. 
6. Faceți clic dreapta pe imagine și selectați opțiunea „Creare Selection”. Va apărea o linie de selecție punctată. 
7. Acum accesați bara de instrumente orizontală și deschideți fila „Selectare” și apoi selectați „Inversare”. 
8. Acum totul este invers - nu imaginea în sine este selectată, ci colțurile inutile. Pentru a le elimina, pur și simplu apăsați combinația de taste Ctrl+Delete de pe tastatură. 
9. Acum deselectați-l apăsând Ctrl+D pe tastatură. Bucurați-vă de rezultat! 
Nu uitați să salvați fotografia finalizată pe computer.
