CTRL + N ili odaberite funkciju "Kreiraj" u padajućem izborniku "Datoteka" liste. Zatim s iste liste odaberite operaciju "Uvoz" ili je pozovite kombinacijom tipki CTRL + I. Zatim odredite putanju do datoteke slike u dijaloškom okviru i kliknite na dugme Uvezi. Vaš će biti prikazan na ovom.
Na traci sa alatkama pronađite uvodni program Node Editor i izaberite alat Shape. Također, ovaj alat se može pozvati pritiskom na tipku F10.
Desno od ugla koji želite zaokružiti, kliknite lijevom tipkom miša na ivicu slike. Novi čvor će se pojaviti na slici, pored četiri ugla. Zatim odaberite opciju Pretvori liniju u krivu na panelu uređivača čvorova. Okrugle oznake se pojavljuju lijevo od novonastalog detalja.
Na istoj udaljenosti od ugla dodajte novi čvor na okomitoj strani slike. Bez promjene alata Shape, dvaput kliknite na glavni kutni čvor, on će biti izbrisan. Zaobljeni ugao slike odmah će postati vidljiv. Možete promijeniti radijus ugla pomoću oznaka linije vodilice.
Na vrlo jednostavan način (koji uključuje vektorski objekat) sve je moguće uglovi imaju pravougaonu sliku. Bez pribjegavanja gornjoj metodi uređivanja čvorova, nacrtajte pored uvezene slike pravougaonik iste veličine pomoću Rectangle Tool ili pozovite alat pomoću tipke F6.
Pomoću alata "Shape" koji vam je već poznat, kliknite na pravougaonik i povucite bilo koji njegov čvor na pravougaonik pomoću miša. Uglovi će biti zaobljeni. Radijus zaokruživanja može se podesiti istim alatom.
Označite svoju sliku strelicom Pick Tool.
Zatim na listi glavnog menija pronađite „Efekti“ i izaberite opciju „PowerClip“ i sa padajuće liste funkciju „Postavi u kontejner“. Koristite široku strelicu da pokažete na zaobljeni pravougaonik koji ste nacrtali. Postat će okvir u koji će se smjestiti vaša slika.
Bilješka
Imajte na umu da uvoz slike u Corel Draw dokument ne mijenja originalnu datoteku slike, tako da je možete koristiti u originalnom obliku ako niste zadovoljni rezultatom sa zaobljenim uglovima.
Koristan savjet
Pomoću funkcije "PowerClip" možete postaviti slike u razne okvire najbizarnijih oblika.
Izvori:
- Službeni vodič za rad s Corel Draw, M. Matthews, C. Mathews, 1997.
- Kako ispeglati oštre uglove?
Trebaće ti
- - kompjuter
- - Adobe Photoshop program
- - slika
Instrukcije
Desnom tipkom miša kliknite na pozadinski sloj, odaberite Duplicate Layer i kliknite na OK (ili Ctrl + J). Zatim kreirajte novi sloj (Ctrl + Shift + N), postavite ga između pozadine i njegove kopije kao što je prikazano na snimku ekrana (možete ga ispuniti nekom bojom, na primjer bijelom). Isključite zaključani sloj (kliknite na "oko" lijevo) ili izbrišite.
Pronađite alat Rectangle Tool u paleti alata i držite ga pritisnutim lijevom tipkom miša. Dodatni meni će se pojaviti tamo gde je potrebno (Alat zaobljeni pravougaonik). Postavite postavke u gornjem dijelu isto kao na snimku ekrana i promijenite polje Radius po svom ukusu (što je veće, to će uglovi biti zaobljeniji, a slika će biti izrezana.
Zatim na fotografiji odaberite fragment koji želite koristiti (na primjer, kao avatar). Ako ste pogriješili, pritisnite Esc i ponovite odabir. Nakon što je željeni fragment odabran, kliknite desnim tasterom miša na njega i odaberite Make Selection... i kliknite OK.
Gotovo, sada imate foto sloj sa zaobljenim uglovima. Sada sloj Layer 2 (onaj koji služi kao pozadina) može se popuniti bilo kojom bojom ili ostaviti transparentnim.
Povezani video zapisi
Bilješka
Transparentne png datoteke su odličan format, ali ne podržavaju sve online usluge (društvene mreže, blogovi itd.) transparentne png datoteke. Ako efekat zaobljenih uglova ne radi, postoji još jedan izlaz.
Odaberite boju pozadine (Sloj 2) koja je najbliža onoj postavljenoj na stranici na kojoj objavljujete fotografiju. Zatim sačuvajte datoteku u jpg formatu.
Dobro jutro, popodne, veče ili noć, svima. Dmitry Kostin je sa vama iznova i iznova. Jednom sam pregledao različite slike i onda su mi se neke od njih svidjele. I svidjela mu se činjenica da imaju zaobljene ivice. Odmah izgleda nekako zanimljivije. zar ne? I zato bih vam u današnjoj lekciji želio reći kako zaokružiti uglove u Photoshopu da bi fotografija izgledala zanimljivije.
Ono što volim kod Photoshopa je to što se u mnogim slučajevima ista stvar može uraditi na nekoliko načina. Tako je i ovdje. Prijeđimo na naš photoshop.
Anti-aliasing korištenjem ivica
Ova metoda je slična prethodnoj, ali i dalje vrlo različita. Sve ćemo raditi sa istom slikom.
Kreiranjem oblika
Evo i treća metoda se već radikalno razlikuje od prethodne dvije. Zato napravite pauzu od nekoliko sekundi i nastavite dalje. Neću mijenjati sliku i ponovo ću učitati ovaj auto u Photoshop.
Vidite li šta ste na kraju uradili? Slika je postala sa zaobljenim rubovima, a sve zbog činjenice da je prikazana samo na način na kojem je naš nacrtani zaobljeni pravougaonik. Ali sada možete izrezati dodatnu fotografiju pomoću alata "Frame" ili odmah spremiti sliku i već ćete imati zasebnu sliku sa zaobljenim uglovima.
Pokušajte sve učiniti sami, a istovremeno mi recite koja vam je od predstavljenih metoda poželjnija.
I usput, ako imate rupe u Photoshopu ili samo želite da ga u potpunosti proučite u što kraćem vremenu, onda vam toplo preporučujem da pogledate jedan divan kurs photoshopa za početnike... Kurs je odlično odrađen, sve je lepo ispričano i prikazano, a svaki materijal je detaljno analiziran.
Pa, za danas završavam svoju lekciju. Ne zaboravite se pretplatiti na nove članke i podijeliti ovo sa svojim prijateljima. Bilo mi je drago vidjeti te na mom blogu. Jedva čekam da te ponovo vidim. Ćao ćao.
Srdačan pozdrav, Dmitry Kostin
Greetings Friends. Ovaj je članak posvećen prilično popularnoj temi među početnicima webmasterima - zaobljeni uglovi CSS... Pitanja koja ću pokušati da otkrijem odnosiće se na to kako napraviti zaobljene uglove elemenata sajta koristeći samo CSS bez upotrebe bilo kakvih slika.
Ova metoda ima i prednosti i nedostatke. Prednosti su, naravno, to što nema potrebe da kreirate slike pomoću bilo kog grafičkog uređivača, da ih otpremate na server, a zatim ih pomoću CSS-a rasporedite na potrebna mesta da biste stvorili željeni efekat. U tom slučaju potrebno je kreirati dodatne elemente u HTML kodu, kao i napisati posebna svojstva za svaki od njih.
Što se tiče nedostataka, ovdje se može primijetiti jedan problem - to ne podržavaju svi web pretraživači, posebno zastarjele verzije raznih pretraživača.
Međutim, zaokruživanje uglova pomoću CSS-a postaje sve popularnije. Kao što ste možda već shvatili, u ovom članku ćemo koristiti svojstvo dostupno u CSS 3.
Zaobljeni uglovi sa CSS-om.
Dakle, kao primjer, uzet ćemo blok DIV element i učiniti njegove uglove zaobljenim. Na primjer, napravimo blok, a pravo u HTML kodu ćemo mu dodijeliti svojstva pomoću atributa style. Prvo, imamo blok element ispunjen pozadinom bilo koje boje:
Usput, ako trebate saznati koji kod boja imate na svojoj web stranici ili na bilo kojoj drugoj, dobro će vam doći.
A evo kako ćemo to vidjeti u web pretraživaču:
Sada, da bismo zaokružili uglove, koristićemo svojstvo "border-radius", koje se može prevesti kao radijus granice. Da, samo tako, a ne kako bi mnogi pomislili da je ovo radijus okvira ili kako se već zove (bord). Ovo svojstvo je odgovorno za radijus granica elementa, a ne za njegove granice ili granice, kojih možda nema. Međutim, svojstvo će i dalje raditi bez ivice elementa. Nadam se da razumete šta mislim. Vrijednost za ovo svojstvo je bilo koja numerička vrijednost koja je primjenjiva u CSS-u, kao što su procenti, pikseli (px), bodovi (pt) i tako dalje. Da, i treba imati na umu da ovo svojstvo radi na sva četiri ugla elementa odjednom, osim toga, možete odrediti drugačiji radijus za svaki ugao, ali o tome kasnije. Prvo, postavimo radijus uglova našeg pravougaonika. Neka bude 5 piksela:
Tada će element izgledati ovako:
Sada predlažem da smislimo kako dodati vlastiti radijus za svaki ugao posebno. Da bismo to učinili, možemo koristiti svojstvo koje se može primijeniti na svaki kut posebno. Ako govorimo o prethodnom primjeru, tada bi u punom obliku svojstva za element izgledala ovako:
Border-top-left-radius: 5px; / * gornji lijevi ugao * / border-top-right-radius: 5px; / * gornji desni ugao * / border-bottom-right-radius: 5px; / * donji desni ugao * / border-bottom-left-radius: 5px; / * donji lijevi kut * /
Odnosno, ako želimo da svaki ugao postavimo svoju vrijednost, imamo takvu priliku, a da bismo se u to uvjerili uzimamo sljedeći kod:
I tada dobijamo sljedeći rezultat:
Kao što vidimo, različita vrijednost radijusa je postavljena za ivicu svakog ugla.
Osim toga, CSS nam omogućava da postavimo vrijednost za granicu svakog ugla kao skraćenicu, koja će izgledati ovako:
Gdje će vrijednosti slijediti ovim redoslijedom:
Border-radijus: 5px / * gornji lijevi ugao * / 10px / * gornji desni ugao * / 15px / * donji desni ugao * / 20px / * donji lijevi ugao * /;
Shodno tome, na osnovu gore navedenog, postaje jasno da na isti način možemo postaviti granicu radijusa samo za tri (jedan ili dva) ugla:
Ovako to izgleda u web pretraživaču:
Ako još niste potpuno zbunjeni, onda ćemo nastaviti. Činjenica je da se radijus za svaku granicu ugla može odrediti ne u jednoj vrijednosti, kao što smo gore razmotrili, već u dvije vrijednosti. To jest, dvije vrijednosti za svaki ugao. U ovom slučaju, prva vrijednost će postaviti radijus za ugao horizontalno, a druga okomito. Krenimo prvo od jednog ugla:
U ovom primjeru utjecali smo samo na gornji lijevi ugao elementa:
Ako postavite vrijednosti obrnuto, tada će element izgledati ovako:
Na ovome bi, čini se, bilo moguće i završiti, ali ne. Postoji još jedan trik. U vrijednosti svojstva možemo koristiti kosu crtu (/) između vrijednosti. Slash nam može pomoći da uskladimo značenja s drugim značenjima. Općenito, lakše je pokazati nego ispričati. Počnimo jednostavno. Pretpostavimo da želimo da horizontalni radijus bude 35 piksela, a vertikalni radijus 5. U isto vrijeme, tako da se ove vrijednosti odnose na sve uglove. Tada možemo pisati ovako:
I dobijete sljedeći rezultat:
Pogledajmo sada složeniji primjer:
U ovom slučaju, vrijednost prije znaka kose crte (/) odnosit će se na horizontalni polumjer ugla, a nakon znaka na vertikalni. U ovom slučaju, vrijednosti će biti međusobno povezane na ovaj način:
Border-top-left-radius: 20px 15px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 40px 15px; border-bottom-left-radius: 10px 25px;
A rezultat će biti ovakav:
I na kraju članka, hajde da pričamo o podršci ovog svojstva od strane različitih pretraživača.
Zaokruživanje uglova u raznim web pretraživačima.
Ovdje treba napomenuti da ovo svojstvo nije podržano u svim verzijama pretraživača. Svojstvo je podržano u IE9 +, Firefoxu 4+, Chromeu, Safariju 5+ i Operi.
Ali za neke verzije pretraživača koje ne podržavaju ovo svojstvo, postoje nestandardna svojstva koja dodaju takozvani prefiks ili prefiks svojstvu.
Chrome prije 4.0, Safari prije 5.0, iOS koriste nestandardno svojstvo -webkit-border-bottom-left-radius.
Firefox prije 4.0 koristi nestandardno svojstvo -moz-border-radius-bottomleft.
U ovom slučaju, morat ćemo duplicirati svojstvo koristeći ove prefikse. Na primjer, ako smo svojstvo za ivicu gornjeg lijevog ugla postavili na vrijednost od pet piksela:
Border-top-left-radius: 5px;
Tada će svojstvo koje ga duplira pomoću prefiksa izgledati ovako:
Webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px;
Zaista se nadam da sam uspio sve jasno objasniti i sada razumijete kako napraviti zaobljene uglove koristeći samo CSS.
Sretno ti!
CSS3 okvir proširuje mogućnosti oblikovanja granica elementa svojstvima koja to dozvoljavaju okrugli uglovi elementa i također korištenje Slike za ukrašavanje ivica elementa.
Zaobljeni uglovi i okviri za slike
1. Zaokruživanje uglova sa graničnim radijusom
Podrška za pretraživač
IE: 9.0
Firefox: 4.0
Chrome: 4.0
safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android pretraživač: 4.1
Chrome za Android: 44
Svojstvo omogućava zaokruživanje uglova inline i blok elemenata. Kriva za svaki ugao je definirana s jednim ili dva radijusa koji definiraju njegov oblik - krug ili elipsa... Radijus se proteže na cijelu pozadinu, čak i ako element nema granice, tačan položaj sekante se određuje korištenjem svojstva background-clip.
Svojstvo border-radius vam omogućava da zaokružite sve uglove u isto vrijeme, i koristeći radijus border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radijus nekretnine možete zaokružiti svaki ugao posebno...
Ako postavite dvije vrijednosti za svojstvo radijusa granice, tada će prva vrijednost biti zaokružena na vrhu lijevo i donji desni ugao a drugi je gore desno i dolje lijevo.
Vrijednosti date kroz / određuju horizontalno i vertikalni radijusi... Imovina se ne nasljeđuje.
Varijante
Div (širina: 100px; visina: 100px; granica: 5px čvrsta;) .r1 (radijus granice: 0 0 20px 20px;) .r2 (radijus granice: 0 10px 20px;) .r3 (radijus granice: 10px 20px ;) .r4 (radijus granice: 10px / 20px;) .r5 (radijus granice: 5px 10px 15px 30px / 30px 15px 10px 5px;) .r6 (radijus granice: 10px 20px 303px 40px;) border-radius: 50%;) .r8 (border-top: nema; border-bottom: none; border-radijus: 30px / 90px;) .r9 (border-bottom-left-radius: 100px;) .r10 (border -radijus: 0 100%;) .r11 (granični radijus: 0 50% 50% 50%;) .r12 (polumjer granice-gore-lijevo: 100% 20px; ivica-dolje desno-radijus: 100% 20px ;) 
Rice. 1. Primjeri različitih opcija za zaokruživanje uglova bloka
2. Granica-slika
Podrška za pretraživač
IE: 11.0
Firefox: 15,0, 3,5 -moz-
Chrome: 16.0, 7.0 -webkit-
safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android pretraživač: 4.4, 4.1 -webkit-
Chrome za Android: 42
Svojstvo vam omogućava da postavite sliku kao ivicu elementa. Glavni zahtjev za sliku je da mora biti simetrična. Svojstvo uključuje sljedeće vrijednosti: (border-image: širina izvora slice ponavlja početak;).
Sa tako jednostavnom slikom možete dobiti takav okvir za element.
/ * Primjer 1 * / div (širina: 260px; visina: 100px; border-style: čvrsta; border-image-width: 15px; border-image-source: url (border_round.png); border-image-slice: 30 ; border-image-repeat: stretch;) / * Primjer 2 * / div (širina: 260px; visina: 100px; border-style: čvrsta; border-image-width: 15px; border-image-source: url (border_round. png); border-image-slice: 30; border-image-repeat: okrugli;) 
Rice. 2. Primjer ukrašavanja granica bloka pomoću slike
Isječci A - B - C - D formiraju uglove ivice, a dio slike između njih ispunjava preostali prostor ivice prema navedenoj vrijednosti svojstva border-image-repeat. Veličina ugla (u ovom primjeru, broj 30) se postavlja pomoću vrijednosti svojstva border-image-slice.
2.1. Border-image-width
Svojstvo postavlja širinu slike za ivicu elementa. Ako širina nije navedena, ona je zadana na 1.
| granica-slike-širina | |
|---|---|
| vrijednosti: | |
| dužina | Postavlja širinu ivice u jedinicama dužine - px / em. Možete postaviti od jedne do četiri vrijednosti u isto vrijeme. Ako je data jedna vrijednost, onda je širina svih strana okvira ista, dvije vrijednosti postavljaju širinu odozgo-dolje i desno-lijevo, itd. |
| broj | Numerička vrijednost kojom se množi vrijednost širine granice. |
| % | Širina ivice elementa izračunava se u odnosu na veličinu slike. Horizontalno u odnosu na širinu, vertikalno - u odnosu na visinu. |
| auto | Odgovara granici-slici-slice. |
| početni | |
| nasljediti | |
Sintaksa
Div (širina-obrubica: 30px;) Fig. 3. Primjer postavljanja širine okvira slike korištenjem različitih tipova vrijednosti
2.2. Resurs izvorne slike granice
Svojstvo postavlja putanju do slike koja će se koristiti za ukrašavanje granica bloka.
Sintaksa
Div (border-image-source: url (border.png);)
2.3. Elementi granične slike-slice
Svojstvo određuje veličinu dijelova slike koji se koriste za ukrašavanje ivica elementa i dijeli sliku na devet dijelova: četiri ugla, četiri ruba između uglova i središnji dio.
| vrijednosti: | |
| broj | Veličina dijelova okvira može se podesiti pomoću jedne, dvije, tri ili četiri vrijednosti. Jedna vrijednost postavlja granice na istu veličinu za svaku stranu elementa. Dvije vrijednosti: prva određuje veličinu gornje i donje granice, druga - desne i lijeve. Tri vrijednosti: prva određuje veličinu gornje granice, druga - desne i lijeve, a treća - donje granice. Četiri vrijednosti: Određuje veličinu gornjeg, desnog, donjeg i lijevog ruba. Numerička vrijednost predstavlja broj px. |
| % | Veličina ivica se izračunava u odnosu na veličinu slike. Horizontalno u odnosu na širinu, vertikalno - u odnosu na visinu. |
| ispuniti | Vrijednost je naznačena zajedno sa brojem ili postotkom. Ako je navedeno, slika se ne izrezuje sa unutrašnjom ivicom okvira, već ispunjava i područje unutar okvira. |
| početni | Postavlja ovo svojstvo na njegovu zadanu vrijednost. |
| nasljediti | Nasljeđuje vrijednost ovog svojstva od svog roditelja. |
Sintaksa
Div (border-image-slice: 50 20;) 
Rice. 4. Primjer postavljanja kriški okvira slike
2.4. Border-image-repeat
Svojstvo kontrolira popunjavanje prostora između uglova okvira pozadinskom slikom. Može se postaviti pomoću jedne vrijednosti ili pomoću para vrijednosti.
Sintaksa
Div (obrub-slika-ponavljanje: ponavljanje;) Fig. 5. Primjer ponavljanja središnjeg dijela okvira slike korištenjem različitih tipova vrijednosti
2.5. Offset border-image-outset
Svojstvo vam omogućava da pomerite sliku okvira izvan granica elementa za određenu dužinu. Može se podesiti pomoću jedne ili četiri vrijednosti.
Sintaksa
Div (border-image-outset: 10px;) 
Rice. 6. Primjer pomaka okvira slike korištenjem različitih tipova vrijednosti
3. Pomak vanjske konture okvira-offset
Svojstvo postavlja udaljenost između ivice elementa ivice i vanjske granice kreirane sa svojstvom outline.
/ * Slika 1: * / img (ivica: 1px puna ružičasta; kontura: 1px isprekidana siva; outline-offset: 3px;) / * Slika 2: * / img (širina ivice: 1px 10px; ivica: čvrsta; border-color: ružičasta; obris: 1px isprekidano siva; outline-offset: 3px;) / * Slika 3: * / img (bord: 3px umetnuti ružičasti; kontura: 1px isprekidano siva; outline-offset: 1px;)
Rice. 7. Primjer dekoracije slike s vanjskim okvirom 4. Gradijentni okvir
Vrijednost granice-slike može biti ne samo slika, već i popuna gradijenta.
Proziran okvir
Transparent je jedna od boja. Na ovaj način možete postaviti granice za sve strane elementa odjednom ili zasebno za svaku stranu. Širina ivice je kontrolirana svojstvom border-width.
Poštanska koverta
Zaobljeni uglovi na fotografiji izgledaju prilično zanimljivo i atraktivno. Najčešće se takve slike koriste pri sastavljanju kolaža ili kreiranju prezentacija. Takođe, slike sa zaobljenim uglovima mogu se koristiti kao sličice za objave na sajtu.
Postoji mnogo slučajeva upotrebe, ali postoji samo jedan (ispravan) način da dobijete takvu fotografiju. U ovom tutorijalu pokazat ću vam kako zaokružiti uglove u Photoshopu.
Otvorite fotografiju koju ćemo urediti u Photoshopu.
Zatim kreirajte kopiju sloja vodopada pod nazivom "Pozadina"... Da uštedimo vreme, koristićemo prečice CTRL + J.
Kopija se kreira kako bi originalna slika ostala netaknuta. Ako (iznenada) nešto pođe po zlu, možete ukloniti loše slojeve i početi ispočetka.
U ovom slučaju nas zanima samo jedno od postavki - radijus zaokruživanja. Vrijednost ovog parametra ovisi o veličini slike i potrebama.
Postavit ću vrijednost na 30 piksela, tako da će se bolje vidjeti rezultat.
Sada moramo rastegnuti rezultirajući oblik da ispunimo cijelo platno. Pozivanje funkcije "slobodna transformacija" vruće tipke CTRL + T... Na obliku se pojavljuje okvir koji možete koristiti za pomicanje, rotiranje i promjenu veličine objekta.
Zainteresovani smo za skaliranje. Rastegnite oblik koristeći ručke prikazane na snimku ekrana. Nakon što je skaliranje završeno, kliknite ENTER.
Savjet: da bi skaliranje bilo što preciznije, odnosno da ne ide dalje od platna, potrebno je omogućiti tzv. "Snap" Pogledajte ekran, gde je naznačeno gde se nalazi ova funkcija.
Funkcija uzrokuje da se objekti automatski "prikače" za elemente konstrukcije i ivice platna.
Kao što vidite, oko oblika je formiran izbor. Sada idite na sloj za kopiranje i uklonite vidljivost sa sloja oblika (pogledajte snimak ekrana).
Sloj vodopada je sada aktivan i spreman za uređivanje. Uređivanje se sastoji u uklanjanju nepotrebnog iz uglova slike.
Preokrenite odabir pomoću prečaca CTRL + SHIFT + I... Sada odabir ostaje samo na uglovima.
