Pravokotnik z zaobljenimi vogali. Kako zaobliti vogale na sliki v Photoshopu? Kako narediti zaobljene vogale v CSS


Poskusimo spremeniti polmer zaokrožitve. V zgornji spodnji kot bom vnesel vrednost 20 slikovnih pik in pritisnil Enter. rezultat:

Kot lahko vidite, se je naš pravokotnik iz običajnega (pravokotnik) spremenil v popolnoma drugačno obliko, zaobljen pravokotnik ali "pravokotnik z zaobljenimi vogali".
Vnesem lahko katero koli drugo vrednost radija in polmer se bo spremenil takoj po pritisku Enter.

Toda, kot ste verjetno opazili, v vnosno okno vnesem vrednost za en radij in vsi štirje se spremenijo. To se zgodi, ker je gumb »Vrednost polmera povezave« privzeto aktiven:

Če kliknemo nanj in s tem onemogočimo to možnost, potem vrednosti polmera ne bodo povezane med seboj in lahko dobim na primer to:

Privzeta debelina črte je nastavljena v točkah, vendar lahko to vrednost spremenim v svoje običajne slikovne pike z desnim klikom na okno za vnos:

Zdaj pa si predstavljajmo, da sem nenadoma moral iz pravokotne oblike, ki sem jo pokazal na začetku, ustvariti krog kroga s polmerom 200 slikovnih pik in kotom med polmeri 90° in širino poteze 5 slikovnih pik.

Za širino in višino vnesem vrednost 200 px, spremenim enote širine poteze v slikovne pike in vnesem vrednost 5. Nato vnesem vrednost polmerov treh vogalov, enakih nič, in prilagodim vrednost preostalih kot ročno z uporabo drsnika (običajna formula za izračun dolžine loka L = πRα/360° tukaj ne bo delovalo zaradi posebnosti konstruiranja Bezierovih krivulj). rezultat:

Torej, iz pravokotnika sem dobil krog:

Zdaj pa se pogovorimo o izvozu oblike v kodo CSS. Nič ne more biti preprostejše. Pojdite na Sloji --> Kopiraj CSS in podatki o obliki se kopirajo v odložišče vašega računalnika.

Odprite urejevalnik besedil, na primer Notepad++, ustvarite nov dokument in vanj prilepite kodo.

To je slog SCC te figure, ki mi jo je dal Photoshop:

1 2 3 4 5 6 7 8 9 10 11 12 . Pravokotnik_1 (širina obrobe: 5px; barva obrobe: rgb(0, 0, 255) ; slog obrobe: polna; barva ozadja: rgb(255, 0, 0) ; položaj: absolutno; levo: 15px; zgoraj: 25px; širina: 190px; z-indeks: 2);

Ne samo, da ni popoln in ne optimiziran, tudi ime razreda je v cirilici, kar je velika napaka.

Zato priporočam, da za zdaj odložite izvorni izvoz Photoshop CSS; bolje je, da uporabite brezplačen vtičnik CSS3Ps, je namestitev in uporaba tega vtičnika podrobno opisana, še bolje pa je, da sloge oblikujete sami.

Kako znova odpreti okno z lastnostmi oblike, če ste ga pomotoma zaprli

Odgovarjam na vprašanje bralcev spletnega mesta. Če ste zaprli okno z lastnostmi pravokotnika in ga morate pomotoma odpreti, potem:
Prepričajte se, da je izbrana pravilna oblika. Če oblika ni izbrana, jo lahko izberete z orodjem za izbiro poti.
Odprite zavihek »Okno« v glavnem meniju in kliknite vrstico »Lastnosti«. Posnetek zaslona v angleščini.
Opomba. Naučite se rusificirati vmesnik Photoshop CS6.

Skupina 1 (okno z lastnostmi orodja se prikaže, ko kliknete na akcijsko območje, in sicer tam, kjer naj se začne konstrukcija).

1. Pravokotnik.

Z vlečenjem kazalca nariše pravokotnik.

Če želite narisati kvadrat ali krog, držite tipko Shift in povlecite kazalec diagonalno, dokler ne dobite kvadrata želene velikosti.

Lastnosti pravokotnika (širina in višina) se nastavijo med risanjem in so označene v zgornjem desnem kotu (če je omogočen način Pametna vodila) ali v pogovornem oknu Pravokotnik (na mestu, kjer naj se začne gradnja pravokotnika ).

2. Pravokotnik z zaobljenimi vogali (Rounded Rectangle).

Polmer vogala se določi z zaokroževanjem vogalov pravokotnika.

Privzeti radij zaokroževanja je nastavljen v oknu z nastavitvami: Uredi>Nastavitve>Splošno. Polje kotnega radija.

Interaktivno spremenite polmer zaokrožitve (pri delu z orodjem zaobljenega pravokotnika):

    v oknu Rounded Rectangle (ki se prikaže, ko kliknete v delovnem območju);

    Ko povlečete orodje, pritisnite tipko "Puščica navzgor" ali "Puščica dol" (povečanje ali zmanjšanje polmera zaokroževanja), "Puščica levo" (dobite prave kote), "Puščica desno" (pridobite vogale z največjim zaokroževanjem).

3.Elipsa.

Z vlečenjem kazalca nariše elipso.

4.Poligon.

Nariše mnogokotnik tako, da povleče kazalec diagonalno ali v loku in zasuka obliko.

Lastnosti poligona (polmer in število stranic) nastavimo v pogovornem oknu Poligon, ki se prikaže, ko kliknemo na točko, kjer želimo začeti sestavljati pravokotnik.

Če želite dodati ali odstraniti strani mnogokotnika, pritisnite tipki s puščico navzgor in puščico navzdol.

6. Zvezdica (zvezda) .

Glej poligon.

Lastnosti zvezde: Polmer 1 – razdalja od središča zvezde do točk, ki so ji najbližje; Polmer 2 – razdalja od središča zvezde do najbolj oddaljenih točk od nje; Točke – število točk zvezde.

Skupina 2 (okno z lastnostmi orodja se prikaže, ko kliknete v akcijsko območje, in sicer tam, kjer naj se začne konstrukcija, ali ko dvokliknete na orodje)

1. Odsek črte (LinijaSegment) .

V oknu Možnosti orodja za odsek črte so določeni naslednji parametri: dolžina črte, kot naklona, ​​polnilna črta.

2. Lok (Lok) .

V oknu Možnosti orodja za odsek loka morate najprej določiti točko, iz katere bo narisan lok na lokatorju fiksnih točk.

Lastnosti loka:

    Dolžina X- os(dolžina osi X) – debelina loka.

    Dolžina Y- os(dolžina osi Y) – višina loka.

    Vrsta(Vrsta) - vrsta konture predmeta: odprta ali zaprta.

    Osnova Zraven(Zraven) – smer loka vzdolž osi (X ali Y).

    Naklon(Naklon). Smer nagiba loka: konkavni lok – negativna vrednost; ukrivljeni lok – pozitivna vrednost; ravna črta – vrednost nič.

    Izpolnite Lok(Pobarvaj lok z barvo polnila).

3. Spirala (Spirala) .

V oknu »spirala« so prikazane lastnosti spirale:

    Radij(polmer)– razdalja od središča do najbolj oddaljene točke spirale.

    Razpad(višina)- znesek, za katerega se bo vsak obrat spirale zmanjšal v primerjavi s prejšnjim obratom.

    Segmenti(Število segmentov)– število segmentov v spirali; Vsak celoten obrat spirale je sestavljen iz štirih segmentov.

    Stale(slog)– smer spirale.

Zaobljeni vogali na fotografiji izgledajo precej zanimivo in privlačno. Najpogosteje se takšne slike uporabljajo pri izdelavi kolažev ali ustvarjanju predstavitev. Prav tako lahko slike z zaobljenimi vogali uporabite kot sličice za objave na spletnem mestu. Možnosti uporabe je veliko, do takšne fotografije pa lahko pridete samo na en način (pravilen). V tej vadnici vam bomo pokazali, kako zaokrožite vogale v Photoshopu.

Zaokroževanje vogalov v Photoshopu

Za dosego rezultata uporabimo eno od orodij skupine "Oblike", nato pa samo odstranite vse nepotrebno.

  1. V Photoshopu odprite fotografijo, ki jo boste uredili.

  2. Nato ustvarite kopijo sloja slapa, imenovanega "Ozadje". Če želite prihraniti čas, uporabite hitre tipke CTRL+J. Ustvari se kopija, da izvirna slika ostane nedotaknjena. Če gre (nenadoma) kaj narobe, lahko izbrišete neuspele plasti in začnete znova.

  3. Kar daj. In potem potrebujemo orodje "Pravokotnik z zaobljenimi vogali".

    V tem primeru nas zanima samo ena od nastavitev – radij zaokrožitve. Vrednost tega parametra je odvisna od velikosti slike in potreb. Vrednost bomo nastavili na 30 pikslov, tako bo rezultat bolje viden.

  4. Nato na platno narišite pravokotnik poljubne velikosti (pomanjšali ga bomo kasneje).

  5. Zdaj morate nastalo figuro raztegniti čez celotno platno. Klicanje funkcije "Prosta transformacija" hitre tipke CTRL+T. Na obliki se bo pojavil okvir, ki ga lahko uporabite za premikanje, vrtenje in spreminjanje velikosti predmeta.

  6. Zanima nas skaliranje. Raztegnite figuro z uporabo označevalcev, navedenih na posnetku zaslona. Ko je skaliranje končano, kliknite ENTER.

    Nasvet: da bi merili čim bolj natančno, torej ne da bi presegli platno, morate omogočiti t.i. "Veza". Poglejte posnetek zaslona, ​​kaže kje to funkcijo nahaja. Povzroči, da se predmeti samodejno »prilepijo« na podporne elemente in obrobe platna.

  7. Nato moramo izbrati nastalo sliko. Če želite to narediti, pritisnite tipko CTRL in kliknite na sličico plasti s pravokotnikom.

  8. Kot lahko vidite, se je okoli figure oblikoval izbor. Zdaj pojdite na plast kopiranja in odstranite vidnost plasti z obliko (glejte posnetek zaslona).

  9. Sloj slapa je zdaj aktiven in pripravljen za urejanje. Urejanje je sestavljeno iz odstranjevanja nepotrebnih stvari iz vogalov slike. Obračanje izbora z bližnjičnimi tipkami CTRL+SHIFT+I. Sedaj ostaja izbor samo na vogalih.

Boste potrebovali

  • Fotografija ali druga slika v digitalni obliki;
  • Računalnik z nameščenim licenčnim programom Corel Draw.

Navodila

Razmislimo o metodi, pri kateri morate na različne načine zaokrožiti enega ali več vogalov pravokotnika.
Odprite novo v Corel Draw s kombinacijo tipk CTRL+N ali na spustnem seznamu v meniju »Datoteka« izberite funkcijo »Ustvari«. Nato na istem seznamu izberite operacijo »Uvoz« ali jo pokličite s kombinacijo tipk CTRL+I. Nato v pogovornem oknu določite pot do slikovne datoteke in kliknite gumb »Uvozi«. Vaš bo prikazan na tem listu.

V orodni vrstici poiščite razdelek »Urejevalnik vozlišč« in izberite orodje »Oblika«. To orodje lahko prikličete tudi s pritiskom na tipko F10.

Desno od vogala, ki ga morate zaokrožiti, z levim klikom na rob slike. Na sliki se bo pojavilo novo vozlišče poleg štirih kotnih. Nato izberite možnost Pretvori črto v krivuljo na plošči urejevalnika vozlišč. Na levi strani novo ustvarjenega vozlišča se bodo pojavile okrogle oznake.

Na enaki razdalji od vogala dodajte novo vozlišče na pravokotno stran slike. Ne da bi spremenili orodje Shape, dvokliknite glavno kotno vozlišče, ki bo izbrisano. Zaobljeni vogal slike bo takoj opazen. Za spreminjanje polmera vogala lahko uporabite vodilne oznake za ravne črte.

Zelo na preprost način(z uporabo vektorskega predmeta) lahko hkrati zaokrožite vse vogale pravokotne slike. Ne da bi uporabili zgornji način urejanja vozlišč, narišite pravokotnik enake velikosti poleg uvožene slike z orodjem Rectangle Tool ali pokličite orodje s tipko F6.

Z orodjem »Oblika«, ki ga že poznate, kliknite na pravokotnik in povlecite miško preko katerega koli njegovega vozlišča proti sredini pravokotnika. Vogali bodo zaobljeni. Z istim orodjem lahko nastavite polmer ukrivljenosti.
Označite svojo sliko s puščico orodja za izbiro.
Nato na seznamu glavnega menija poiščite uvedbo »Effects« in na spustnem seznamu izberite možnost »PowerClip« in funkcijo »Place Inside Container«. S široko puščico pokažite na pravokotnik, ki ste ga narisali z zaobljenimi vogali. Postal bo okvir, v katerega bo postavljena vaša slika.

Pravokotnik je najpreprostejša od osnovnih oblik; . Nastavite koordinate x in y zgornjega levega kota pravokotnika, njegovo širino (width) in višino (height). Pravokotnik bo zapolnjen z barvo (lastnostjo polnila), ki jo privzeto določimo, je črna. Barvo polnila lahko nastavite na enak način kot za . Če podate vrednost »brez«, pravokotnik ne bo imel polnila, to je prosojen. Pravila za določanje stopnje prosojnosti polnila pravokotnika (fill-opacity) so podobna pravilom za črto. Tako lastnosti "fill" kot "fill-opacity" sta lastnosti predstavitve in sta opisani znotraj atributa style.

Opomba

Vizualno koordinati x in y v parametrih pravokotnika morda niso zgornji levi kot, če je na primer za obliko uporabljena transformacija.

Obrisi pravokotnika so narisani z istim čopičem kot črte, z enakimi lastnostmi. Privzeto je čopič nastavljen na nič (potez: nič) in ni narisan noben obris. Nekaj ​​primerov:

Rezultat "v živo" ali poglejte sliko:

Opomba

Obris je narisan tako, da je polovica znotraj pravokotnika, druga polovica pa zunaj njega. Poglejmo enega od pravokotnikov v povečanem pogledu:

Če ne nastavite začetne vrednosti za x- ali y-koordinato, bosta nastavljeni na nič. Če nastavite širino ali višino na nič, pravokotnik ne bo prikazan. Uporaba negativnih vrednosti za določitev širine ali višine pravokotnika je napaka.

Zaobljeni pravokotniki

Če želite narisati pravokotnik z zaobljenimi vogali, morate določiti polmere vogalov vzdolž osi x (rx) in y (ry). Največje število za rx je polovica širine pravokotnika. Največja vrednost za ry je polovica višine. Če podate le enega od rx ali ry, bo nedoločeni enak podanemu.