Zašto neudane djevojke ne bi trebale spavati ispred ogledala. Zašto ne možete spavati ispred ogledala: zastrašujući razlozi

1 glas

Dobar dan, dragi početnici programeri web stranica. Napokon počinjem govoriti o tehnikama koje treba koristiti za stvaranje izvrsnih web stranica. Danas ću vam reći kako fotografiju obraditi u nekoliko minuta i time portal učiniti ljepšim, a trajanje posjeta znatno dužim. Ne vjeruješ mi? Ali uzalud...

Od pojave prodajnih web stranica, velike tvrtke počele su pomno proučavati ukuse svoje publike. Pažljivo pokušavaju sakriti neka od svojih otkrića, jer tehnike rade previše dobro, dok je druga prilično teško prikriti, koriste se prečesto.

Svi su odavno navikli na glatke, pravokutne fotografije. Koriste se kada su u pitanju ozbiljni poslovi koji se bave odgovornim poslovima.

Kada je tvrtka ili usluga jednostavnija, slike s glatkim prijelazima možete vidjeti mnogo češće. To možete vidjeti na bilo kojoj dobroj prodajnoj stranici, koja će biti zbirka najboljih tehnika novinarstva, marketinga i psihologije.

Danas ćete naučiti sve metode zaokruživanja kutova u Photoshopu. Ako razmišljate o zadržavanju pažnje i osvajanju, onda koristite aerodinamične oblike, a ako radite ozbiljan portal i želite napraviti neku vrstu barijere između sebe i čitatelja, onda je bolje koristiti pravokutne slike: “Mi smo ozbiljni dečki, ako hoćete kvalitetu – nama“.

Brz način da zaokružite fotografiju

Dakle, radit ćemo u Photoshopu. Otvorite sliku.

Pronađite alat Rounded Rectangle.

Ako ga ne možete pronaći, držite lijevu tipku miša na gumbima izbornika nekoliko sekundi kako biste otvorili dodatne opcije.

Nije važno koju boju odaberete. Povucite objekt preko slike tako da područje koje vam je potrebno bude unutar oblika.

Obratite pozornost na svojstva. Možete se "igrati" s indikatorima prikazanim na slici i više saviti rubove. Unesite svoj broj i pritisnite enter da vidite rezultat. Kada budete zadovoljni, ponovno pritisnite enter.

Sada, dok držite pritisnut gumb CTRL, kliknite na središte sloja koji sadrži pravokutnik koji ste upravo nacrtali. Budite oprezni, ako kliknete na tekst, ništa se neće dogoditi. Morate kliknuti točno na središte ikone s minijaturnom slikom.

Sada uklanjamo vidljivost. Da biste to učinili, kliknite na "oko" pored sloja.

Prijeđimo na rad sa slojem, odaberite ga: kliknite ili na tekst ili na ikonu. Nije važno. Nemojte preskočiti ovaj korak ili se magija neće dogoditi.

Spreman. Ako ćete prikazati sliku na web mjestu, možete je spremiti, glavna stvar je da ne pogriješite s formatom.

Trebate točno png.

U tom će slučaju rubovi s cekerom biti prozirni. Odaberite jpeg i oni će biti zamijenjeni neprivlačnim bijelim rubom.

Ovu sliku također možete dodati svojoj fotografiji. U tom slučaju spremanje i ponovno otvaranje nije potrebno.

Samo je odaberite (Ctrl+A), zatim kopirajte (Ctrl+C) i zalijepite na drugu sliku (Ctrl+V).

Zaokruživanje za dizajnere, ubrzanje procesa rada na projektu

Recimo da radite na nekom važnom cool projektu. Sve je gotovo spremno i želite vidjeti kako će izgledati sa zaobljenim kutovima. Nije potrebno otvoriti sto tisuća kartica: izrezati, zalijepiti i tako dalje. Sve se može napraviti mnogo brže i lakše.

Evo pogleda na moj primjer. Usput, ako želite, možete preuzeti ovu psd datoteku, otvoriti je u Photoshopu i vježbati ( preuzimanje datoteka ).

Odaberite sloj koji nam je potreban. Radit ću s velikom slikom sove. Stoga, držim pritisnutu tipku Ctrl i kliknem na središte minijature ovog sloja. Ne tekstom ili okom. Prema slici sa slikom. Oprostite na tautologiji.

Prije svega, potvrdite okvir pored "primijeni efekt na obrube". Zatim postavljamo radijus.

Nažalost, morate birati na oko. Ovdje ga u pravilu postavljaju na 15. Ovo je standard, ali, kao što razumijete, možete odstupiti od njega.

Odabiremo idealnu opciju.

Zatim u kartici "Odabir" nalazimo "Inverzija".

Pritisnite tipku "del" na tipkovnici i gotovi ste.

Da biste uklonili mrave koji gmižu po rubovima, morate istovremeno pritisnuti Ctrl i D.

Ako su vam se svidjele ove lekcije, možete ih pronaći još. Da biste to učinili, ne morate tražiti na Youtubeu što god vam padne na pamet. Može se proučavati svi čipovi "od A do Ž" prema video lekcijama. Dobijte besplatnu prezentaciju najnovije verzije tečaja ruskog Photoshopa. U ovom slučaju nećete moći samo raditi osnovne stvari, već i naučiti kako raditi složen posao, vidjeti kako pravi stručnjaci koriste jednostavne vještine i što iz toga proizlazi.

Pogledajte, na primjer, ono što ste danas naučili može se primijeniti ne samo na obrezivanje kutova.

Već znate kako napraviti sliku u trokutima. Ne razumijem? Sve je vrlo jednostavno.

Kao osnovu uzmite prvu metodu izrezivanja iz ovog članka, ali umjesto da radite s pravokutnikom, odaberite poligon.

Ne zaboravite postaviti "tri strane" na ploči na vrhu kako se ne biste zavaravali transformacijom figure.

I, ako ne želite da kutovi budu oštri kao moji, samo postavite anti-aliasing u postavkama.

Možete preuzeti ovaj crtež u psd formatu izravno s mog bloga i raditi s njim ( preuzimanje datoteka ). Mislim da poboljšanje nije problem.

Ako je ovaj članak bio od pomoći, pretplatite se na bilten mog bloga. Čeka vas još puno zanimljivih stvari! I za kraj, video o tome kako se djevojka pomoću Photoshopa može pretvoriti u pizzu. Pogledajte do kraja, smiješno je.

Zaobljeni kutovi na fotografiji izgledaju prilično zanimljivo i privlačno. Najčešće se takve slike koriste pri izradi kolaža ili izradi prezentacija. Također, slike sa zaobljenim uglovima mogu se koristiti kao sličice za postove na stranici. Postoji mnogo opcija za korištenje, ali postoji samo jedan način (ispravan) da dobijete takvu fotografiju. U ovom vodiču ćemo vam pokazati kako zaobliti kutove u Photoshopu.

Zaokruživanje uglova u Photoshopu

Da bismo postigli rezultat, koristimo se jednim od alata grupe "Oblici", a zatim samo uklonite sve nepotrebno.

Otvorite fotografiju u Photoshopu koju ćete urediti.
Zatim izradite kopiju sloja vodopada tzv "Pozadina". Da biste uštedjeli vrijeme, koristite prečace CTRL+J. Kopija se stvara kako bi izvorna slika ostala netaknuta. Ako (iznenada) nešto pođe po zlu, možete izbrisati neuspjele slojeve i početi ispočetka.
Samo naprijed. A onda nam treba alat "Pravokutnik sa zaobljenim kutovima".

U ovom slučaju zanima nas samo jedna od postavki - radijus zaokruživanja. Vrijednost ovog parametra ovisi o veličini slike i potrebama. Postavit ćemo vrijednost na 30 piksela, tako da će rezultat biti bolje vidljiv.
Zatim nacrtajte pravokutnik bilo koje veličine na platnu (kasnije ćemo ga skalirati).
Sada morate rastegnuti dobivenu figuru preko cijelog platna. Pozivanje funkcije "Slobodna transformacija" prečace CTRL+T. Na obliku će se pojaviti okvir koji možete koristiti za pomicanje, rotiranje i promjenu veličine objekta.
Zanima nas skaliranje. Razvucite figuru pomoću markera navedenih na snimci zaslona. Nakon dovršetka skaliranja kliknite UNESI.

Savjet: kako biste skalirali što točnije, odnosno bez odlaska izvan platna, potrebno je omogućiti tzv. "Uvezivanje". Pogledajte snimak zaslona, pokazuje gdje se ova funkcija nalazi. Uzrokuje da se objekti automatski "lijepe" za potporne elemente i obrube platna.
Zatim moramo odabrati rezultirajuću figuru. Da biste to učinili, držite pritisnutu tipku CTRL i kliknite na sličicu sloja s pravokutnikom.
Kao što vidite, oko figure se stvorio odabir. Sada idite na sloj za kopiranje i uklonite vidljivost sa sloja s oblikom (pogledajte snimak zaslona).
Sloj vodopada sada je aktivan i spreman za uređivanje. Uređivanje se sastoji od uklanjanja nepotrebnih stvari iz uglova slike. Okretanje odabira pomoću tipki prečaca CTRL+SHIFT+I. Sada odabir ostaje samo na uglovima.

U ovom dijelu moje stranice odlučio sam smjestiti Photoshop lekcije, što vam može biti od koristi prilikom izrade dizajna web stranice. Mislim da ne bi bilo suvišno, s moje strane, prije nego što počnem učiti Photoshop, da vas upoznam Photoshop prečaci. Korištenje Photoshop prečaci, olakšat ćete si posao i uštedjeti vrijeme. .

Moj prvi Photoshop lekcija reći će vam kako zaokružite uglove fotografija.

Prilikom izrade web stranica često se morate nositi s problemom kako zaokružiti kutove slike ili kako zaokružite uglove fotografija. U ovoj lekciji Photoshop Naučit ću te kako zaokružite uglove uvlačeći se photoshop. Također i ovaj Photoshop lekcija omogućit će vam zaokružite uglove fotografije. Nadam se da vam je ovo jasno. Uostalom, za Photoshop i slika i fotografija su sve iste. U svom radu koristim Adobe Photoshop SC5, ruska verzija. Pa, nisam dobar u jezicima.

Današnja lekcija govori o zaokruživanju kutova fotografije u Photoshopu. Snimimo zajedničku fotografiju sa zaobljenim kutovima kao na mojoj slici.

1. Provesti zaokruživanje uglova u Photoshopu, otvoriti sa Photoshop slika (fotografija) koja nam je potrebna. Kao primjer, uzeo sam jednu od fotografija iz svoje arhive fotografija.

2. Donosimo dimenzije crteža na parametre koji su nam potrebni. Da biste to učinili, pritisnite ALT+CTRL+I. Otvara se prozor Veličina slike. Postavljamo potrebne dimenzije. Možete jednostavno izrezati sliku na željenu veličinu.

3. Odaberite sliku (CTRL+A) (pojavit će se točkasta linija oko perimetra) i kopirajte je (CTRL+C); Kopiramo fotografiju tako da izvorna slika ostane nepromijenjena nakon što završimo zaokruživanje uglova u Photoshopu. Iako možemo raditi na originalu, kada su zaobljeni kutovi spremni, jednostavno ćemo spremiti fotografiju kao drugu sliku.

4. Otvorite novi prozor (CTRL+N), postavite potrebne dimenzije slike i kliknite “OK”. Imajte na umu da sam pozadinu postavio na "transparentno". Možete odmah postaviti pozadinu na željenu boju;

5. Zalijepite kopiranu sliku u novi prozor (CTRL+V) i izradite novi sloj (CTRL+SHIFT+N). U ovom sloju koristite Rectangle Tool zaobljeni kutovi"Nacrtajte pravokutnik potrebne veličine. Boja pravokutnika nije bitna. Alat se odabire klikom na desnu tipku miša. Ili jednostavnim pritiskom na tipku (U). Radijus zakrivljenosti postavljamo po vlastitom nahođenju ( pogledajte sliku ispod);

Ako je potrebno, nacrtani oblik možete pomicati pomoću strelica na tipkovnici ili pomoću miša dok držite pritisnutu lijevu tipku. Prvo, ne zaboravite aktivirati "pomakni" na alatnoj traci (gornji gumb). Također možete promijeniti veličinu figure. Da biste to učinili, pritisnite (CTRL+T) i razvucite oblik na željenu veličinu pomoću miša dok držite pritisnutu lijevu tipku. Ako želite promijeniti veličinu uz zadržavanje proporcija, trebate držati SHIFT i povlačiti za kut oblika.

6. Idite na ploču slojeva. Dok držite CTRL, kliknite lijevom tipkom miša na pretpregled (sliku) sloja pravokutnika. Pojavljuje se točkasti obris oblika.

7. Prijeđite na donji sloj. Da biste to učinili, kliknite na desnu stranu slike na ploči slojeva. U našem slučaju, sloj 1. Plavo isticanje će prijeći na sloj 1.

8. Pritisnite CTRL+ SHIFT+I. Točkasta selekcija pojavit će se duž ruba onog dijela slike koji se nalazi izvan našeg pravokutnika zaobljeni kutovi.

9. Pritisnite DEL na tipkovnici. Dio slike koji je izvan pravokutnika bit će izbrisan.

10. Ponovno aktivirajte sloj pravokutnika. Izbrišite ga klikom na ikonu kante za smeće.

11. Pritisnite tipku "M" i kliknite lijevom tipkom miša bilo gdje na slici. Odabir je uklonjen. spreman. Možete spremiti sliku koju smo primili zaokruživanje uglova u Photoshopu, u formatu koji nam je potreban.

Ako će se takva slika koristiti za izradu dizajna web stranice, spremite je za web i uređaje (ALT+SHIFT+CTRL+S).

12. Pažnja! Ako imate slike oko rubova s zaobljeni kutovi Još uvijek postoje prozirni pikseli, morate izvršiti obrezivanje. Da biste to učinili, kliknite "Slika", odaberite "Skraćivanje", u prozoru koji se pojavi postavite postavke kao na mojoj slici i kliknite "U redu". Veličina platna bit će promijenjena na veličinu slike i svi dodatni prozirni pikseli bit će uklonjeni.

The photoshop lekcija može se koristiti i za ovalne i za oblikovane fotografije. Da biste to učinili, u koraku 5, umjesto "pravokutnika s zaobljeni kutovi" odaberite alat "elipsa", "poligon" ili "slobodni oblik". Zatim izvodimo sve iste radnje koje smo učinili da dobijemo zaokruživanje uglova.

Svi moderni preglednici podržavaju standarde označavanja hiperteksta HTML5 i CCS3 stilove dizajna. A ako vaše web mjesto (predložak) podržava moderne standarde, tada možete napraviti promjene u dizajnu, kao što su zaokruživanje kutova, sjene, ispune gradijenta, bez pribjegavanja grafičkim uređivačima.

Webmasteri posvuda koriste zaobljene kutove na blokovima i okvirima na web stranicama. U ovom ću vam članku reći kako zaokružiti kutove slika i fotografija na web stranici bez korištenja programa trećih strana, samo pomoću CSS-a.

Kako bi se primjeri navedeni u članku pravilno prikazali na vašem ekranu, morate koristiti najnovije verzije preglednika, FireFox, Chrome i one temeljene na njima: Yandex.Browser, Amigo i tako dalje.

Zaokruživanje uglova DIV blokova

Prema standardu CSS3, tako da blok DIV imao zaobljene kutove, potrebno ga je stilizirati granični radijus, na primjer ovako:

Polumjer ruba: 10px;

Radi jasnoće, nacrtajmo dva bloka s ravnim i zaobljenim kutovima:

Blok s pravim kutovima

Blok sa zaobljenim kutovima

Zaokruživanje uglova slika

Po analogiji s gornjim primjerom, možete zaokružiti kutove slika na web mjestu, na primjer fotografije. Radi jasnoće, zaokružimo kutove za fotografiju sa stranice

Ovdje je slika bez CSS obrade

A sada sa zaobljenim kutovima:

Polumjer ruba: 10px;

Da bi bilo stvarno "lijepo", dodajmo malo rubova od početka...

Polumjer ruba: 10px; granica: 5px #ccc čvrsta;

a zatim sjene:

Polumjer ruba: 10px; granica: 5px #ccc čvrsta; okvir-sjena: 0 0 10px #444;

Opcija u nastavku (zaobljeni kutovi sa sjenom bez obruba) izgleda vrlo slično podlozi za miša:

Polumjer ruba: 10px; okvir-sjena: 0 0 10px #444;

I na kraju potpuno ismijavanje slike

Polumjer granice: 50%; obrub: 5px #cfc solid; okvir-sjena: 0 0 10px #444;

Otvorite li sliku u novom prozoru, vidjet ćete da je ona (slika) nepromijenjena, a svi kutovi, sjene i ostalo samo su rezultat obrade CSS stilove u vašem pregledniku.

Mala lirska digresija

Stil granica povećava veličinu slike za iznos obruba. Ako je određena vrijednost granica: 5px, tada će konačna slika postati šira i viša za 10 piksela. Imajte to na umu, u nekim slučajevima izgled stranice možda neće funkcionirati.

Stil kutija-sjena ne utječe na veličinu slike, čini se da sjena prelazi preko susjednih elemenata. Kada ga koristite, izgled stranice ne trpi.

Kako zaokružiti kutove slika u WordPressu

U svim gornjim primjerima napisao sam stilove izravno u oznakama html koda. Na primjer, posljednji izgleda ovako:

Ovo je dobro kada trebate preurediti jednu sliku ili fotografiju. Što ako želite promijeniti sve? Pa, nećete se penjati po cijeloj web stranici kako biste uredili prikaz svake od njih. U većini slučajeva WordPress oznaka IMG definira nekoliko stilskih klasa. Jedan po jedinstvenom nazivu slikovne datoteke, drugi po veličini i treći po poravnanju. Možete nadopuniti jedan od njih s gornjim parametrima.

Na primjer, za sve slike za koje nije navedeno poravnanje, u datoteci stil.css Za svoju WordPress temu unesite sljedeće:

Poravnaj (radijus granice: 10px; granica: 5px #cfc čvrsta; sjena okvira: 0 0 10px #444; )

Ili najstroža metoda za sve slike na web mjestu. Redefinirajmo stil za sve oznake IMG:

Img (radijus granice: 10px; granica: 5px #cfc čvrsta; sjena okvira: 0 0 10px #444; )

Posljednja opcija je prikladna ne samo za WordPress, već i za bilo koji CMS. Pa čak i za jednostavno HTML stranice u slučaju kada se, prilikom prikaza slika, oznaka IMG ne dodjeljuju se stilske klase. Ali budi pažljiv. Ako nadjačate opcije prikaza oznake IMG promijenit ćeš se izgled SVE slike na stranici!

Umjesto zaključka

Svi primjeri u članku su uvjetni i namijenjeni su samo za demonstraciju nekih mogućnosti CSS-a za obradu slika i pokazivanje koliko je jednostavan.

Svi su odavno umorni od tradicionalnih pravokutnih kutova u dizajnu web stranica. Zaobljeni uglovi su u modi, koji se izrađuju ne pomoću slika, već kroz stilove, za koje se koristi svojstvo border-radius. Ovo svojstvo može imati jednu, dvije, tri ili četiri vrijednosti odvojene razmakom, koje određuju radijus svih uglova ili svakog pojedinačno.

U tablici 1 prikazuje različiti broj vrijednosti i tip bloka koji se dobiva u ovom slučaju.

Kodirati	Opis	Pogled
div (radijus granice: 10px;)	Radijus zaobljenja za sve kutove odjednom.
div (radijus granice: 0 10px;)	Prva vrijednost postavlja radijus gornjeg lijevog i donjeg desnog kuta, druga vrijednost postavlja radijus za gornji desni i donji lijevi kut.
div (radijus granice: 20px 10px 0;)	Prva vrijednost postavlja radijus gornjeg lijevog kuta, druga - i gornji desni i donji lijevi, a treća vrijednost - donji desni.
div (radijus granice: 20px 10px 5px 0;)	Redom postavlja radijus gornjeg lijevog, gornjeg desnog, donjeg desnog i donjeg lijevog kuta.

Primjer 1 pokazuje kako stvoriti blok sa zaobljenim kutovima.

Primjer 1. Kutovi bloka

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Radius

Me je supletivni oblik akuzativa od I.

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Blok sa zaobljenim kutovima

Zanimljiv učinak može se dobiti ako radijus zaobljenja postavite na veći od polovice visine i širine elementa. U ovom slučaju dobit ćete krug. Primjer 2 pokazuje kako napraviti okrugli gumb sa slikom.

Primjer 2: Okrugli gumb

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Dugme

Rezultat ovog primjera prikazan je na sl. 2.

Riža. 2. Okrugli gumb

U pregledniku Opera, zaokruživanje na