Praksa implementacije procesa prilagodbe slike još je u razvoju. Postoji veliki broj ideja i prijedloga kako obraditi slike.

U ovom ćemo vodiču pogledati zgodnu malu biblioteku koja ne samo da vam omogućuje automatsku promjenu veličine slika kada promijenite postavke okvira za prikaz, već i izrezuje slike na temelju dane žarišne točke. Osim toga, sve se radnje izvode u čistom CSS-u.

Upoznajte Focal Point

Focal Point - GitHub projekt i CSS biblioteka? stvorio Adam Bradley. Koncept odziva zahtijeva da slike mijenjaju veličinu i položaj kako bi se postigle optimalne proporcije za trenutni okvir za prikaz. Focal Point ovu ideju ide korak dalje i ne samo da mijenja veličinu slika, već ih i izrezuje.

Problem s ovom idejom je taj što nasumično obrezivanje može ukloniti važne dijelove slike! Na primjer, u gornjem primjeru, važan objekt je na desnoj strani slike. Kako spriječiti da se odsiječe?

Žarišna točka omogućuje vam postavljanje ciljnog područja slike koje bi trebalo ostati netaknuto (žarišna točka). Na ovaj način, kada biblioteka izvrši obrezivanje, same slike će i dalje izgledati sjajno.

Kako radi?

Implementacija Focal Pointa je prilično jedinstven, ali u isto vrijeme jednostavan proces. Prvo raspravimo o tome kako odabrati središnju točku, a zatim zaronimo u implementacijski kod.

Kada umetnete sliku na web stranicu koristeći Focal Point, ona se automatski dijeli na nevidljivu mrežu 12x12. Nije bitno koje je veličine slika, mreža joj se prilagođava.

Sada imamo sustav za dijeljenje slike i možemo odrediti točku na mreži koja će služiti kao žarišna točka. Prilikom izrezivanja slike navedena će se točka koristiti kao središnji dio oko kojeg se odvija izrezivanje. To jest, ako odaberemo muškarčevo lice, tada će ovaj važan aspekt slike ostati nakon promjena.

Morate pronaći važno područje, zatim izbrojati broj jedinica mreže od središta slike do njega. U našem primjeru, lice se nalazi tri jedinice udesno i tri jedinice gore od središta rešetke (engleski nazivi su ostavljeni na slici, jer se podudaraju s radnim parametrima biblioteke).

Kodirati

Sada možemo odrediti središnju točku i vrijeme je da razumijemo implementacijski kod. Za početak preuzmite projekt s GitHuba i povežite CSS datoteku sa svojim HTML dokumentom.

Nakon preliminarnih radnji morate dodati dva elementa div i oznaku img. Da, ispada da je oznaka suvišna za jednu sliku, a ta je činjenica nedostatak biblioteke. Evo tipične oznake:

Kao što vidite, vanjski div element ima klasu " žarište”, a unutarnja sadrži našu sliku bez ikakvih klasa.

Pretvaranje jedinica mreže u klase

Sada trebate usmjeriti fokusnu točku na mjesto gdje je fokus slike. Naša žarišna točka je pomaknuta tri jedinice udesno i tri jedinice gore. Stoga ukazujemo na vanjski element razredi div " desno-3"I" gore-3″.

Implementacija našeg koda dovest će do činjenice da će na velikim zaslonima slike biti prikazane u punoj veličini, a kada se prozor za gledanje smanji, smanjit će se u veličini uz obrezivanje oko žarišne točke.

Imajte na umu da slika s desne strane nije samo manja, već je i obrezana oko važnog dijela. Sve se radi pomoću CSS-a!

Struktura stranice

Kako bismo bolje zamislili kako koristiti knjižnicu u stvarnim aplikacijama, napravimo jednostavnu stranicu.

Definirajmo div element s klasom “ stupac”:

Dodajmo naslov i odlomak da simuliramo sadržaj stranice:

Zatim umetnite sliku kao što je prikazano u prethodnom primjeru (s dva div elementi i klase za središnju točku):

Da bismo dovršili primjer, kopirajmo kôd koristeći drugu sliku i drugu točku fokusa.

Za drugu sliku, žarišna točka je na drugom mjestu:

CSS

Definirajmo stilove za našu stranicu. Prilagodba slika i rad s fokusnom točkom izvan su našeg područja stručnosti. Sve što trebate učiniti je odrediti izgled elementi. Na primjer, stranica je podijeljena u dva stupca i postavljeni su stilovi za tekst.

* ( margina: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; ) .column ( float: lijevo; overflow: auto; padding: 20px; width: 50%; ) h1 (text-transform: uppercase; font: bold 45px/1.5 Helvetica, Verdana, sans-serif; ) p ( margin- dolje: 20px; boja: #888; font: 14px/1.5 Helvetica, Verdana, sans-serif; ) @media all and (max-width: 767px) ( p (font-size: 12px; ) h1 (font-size: 35px; ) ) @media all and (max-width: 550px) ( h1 (font-size: 23px; ) )

Pogledajmo ga na djelu

Sada možete vidjeti kako demo radi. Ako su stranice prikazane u velikom prozoru za gledanje (na primjer, na zaslonu monitora) stolno računalo), tada će slike biti prikazane u cijelosti:

Sada, ako smanjite veličinu okvira za prikaz ili pogledate demo stranicu s mobilni uređaj, možete vidjeti kako se slike prilagođavaju. Kako se prozor smanjuje, slike nisu samo manje, već su i izrezane.

Sa stajališta dizajna, koliko je ova tehnika učinkovita!? Što je slika manja, žarište se više ističe. Uz ovu biblioteku možete biti sigurni da će i na malim ekranima korisnici imati važne informacije.

Kompatibilnost preglednika

Knjižnica radi u svim novim preglednicima. U IE8, slike se mijenjaju u veličini, ali nisu izrezane. Ali u ovom trenutku 99,99% stranica nema takav mehanizam za prilagodbu slike s automatskim obrezivanjem, tako da odgovor IE8 nije kritičan.

Što je unutra?

Sada pogledajmo kako knjižnica funkcionira.

Prvi dio koda je osnovno rješenje CSS za adaptivne slike.

Žarišna točka ( širina: 100%; visina: automatski; preljev: skriven; ) .fokalna točka img ( širina: 100%; maks. širina: 100%; visina: automatski; -ms-interpolation-mode: bicubic; ) .focal-point div ( položaj: relativan; maks. širina: ništa; visina: automatski; )

Sljedeći kod je malo kompliciraniji. Prvo, medijski upit implementiran je na 767px. Zatim se za obrezivanje slike koriste negativne vrijednosti margine za svaku od dostupnih klasa. U tekstu lekcije predstavljamo samo razrede “ gore-3"I" desno-3″ koji su korišteni u demonstraciji.

@media all and (max-width: 767px) ( /* 4x3 Landscape Shape (Default) */ .focal-point div ( margin: -3em -4em; ) /* Landscape up (Ukupno 6em) */ .up-3 div ( margin-top: -1.5em; margin-bottom: -4.5em; ) .right-3 div ( margin-left: -6em; margin-desno: -2em; ) )

Ovdje nema puno koda, ali je prilično elegantan. Negativne margine koriste se s em jedinicama za obrezivanje slika oko određene točke.

Rezanje slike na fragmente i zatim njihovo kombiniranje u jednu cijelu sliku dugogodišnja je tehnika koja je postala dio arsenala izgleda web stranice. Unaprijed pripremljeni crtež reže se na komade grafički urednik, dijelove držite odvojeno grafičke slike, a zatim ih spojite pomoću tablice.

Razmotrimo najprije zašto se koristi rezanje slike i koje prednosti ono u konačnici daje, a zatim kako koristiti tablicu u praksi.

Prednosti rezanja slike

Stvaranje veze

Po potrebi se pojedinačne slike mogu pretvoriti u poveznice, a možete im dodijeliti vlastiti opis ( title attribute ) i alternativni tekst ( alt attribute ), koji je vidljiv kada onemogućite prikaz slika u pregledniku ili kada mišem prijeđete preko slika.

Efekt kotrljanja

Skup pojedinačnih fragmenata omogućuje vam stvaranje efekta kotrljanja - dinamičku promjenu jedne slike u drugu kada lebdite pokazivačem miša iznad nje, i natrag na prethodnu kada se kursor odmakne.

Smanjenje veličine datoteke

Pogodnije je manipulirati pojedinačnim dijelovima slike odabirom grafičkog formata i njegovih parametara za njih tako da veličina datoteke bude minimalna uz održavanje prihvatljive kvalitete slike. Zbog toga će skup grafičkih datoteka zauzeti manje prostora i učitavati se brže od jedne datoteke koja sadrži cijeli crtež.

Animirani GIF

Korištenje animiranog GIF-a za slike velika veličina ispunjen je značajnim povećanjem veličine datoteke. Ali možete upotrijebiti trik i samo dio slike zamijeniti animacijom, a preostale fragmente ostaviti statične. U ovom slučaju, ukupna količina nekoliko datoteka bit će mnogo manja od animacije jedne slike.

Značajke izgleda

Slike na web stranici pravokutne su prirode, ali rezanjem jedne slike na sastavne elemente dobivate konstruktor od kojeg možete izgraditi drugi oblik. Ovo podsjeća na dječje kocke, na čijoj je jednoj strani zalijepljena slika. Takve oblike trebate dodati na web stranicu iz različitih razloga, na primjer, trebate dodati tekst umjesto fragmenta slike. Osim toga, neke se slike mogu zamijeniti njihovim pozadinskim dvojnikom, a tada će konačna slika, zadržavajući svoj integritet, zauzeti cijelo dostupno područje dokumenta.

Psihološki aspekt

Kada se jedna slika sastoji od mnogo fragmenata, preglednik ih preuzima u nekoliko nizova i prikazuje one koji su prvi preuzeti. Stoga se slika pojavljuje kao mozaični elementi. I to odmah privlači pozornost i čini se da se brže učitava. Tako se s tehničke strane jedna slika brže učitava, ali iz perspektive ljudske percepcije čini se da se skup malih slika brže pojavljuje.

Priprema slike

Kao primjer slike gdje je potrebno rezanje, uzmite sl. 2.12. Svaka od tri ikone je poveznica na odgovarajući odjeljak, osim toga, poveznica na glavnu stranicu je slika s nazivom stranice.

Riža. 2.12. Izvorna slika

Teoretski, u ovom slučaju možete bez rezanja ako koristite mapu slike (oznake

Riža. 2.13. Prikaz slike prilikom otvaranja odjeljka

Sada morate odlučiti kako izrezati sliku. Ovdje može biti nekoliko opcija - u konačnici to ovisi o volji autora, namjeni crteža i njegovom sadržaju.

Rezanje slike

Bolje je rezanje i "sastavljanje" crteža povjeriti specijaliziranom programu, posebno, Adobe Photoshop, tako da se sve reference na alate i izbornike odnose posebno na ovaj program.

Da biste olakšali rezanje slike, prvo trebate dodati vodeće linije, duž kojih će se zatim dogoditi podjela na fragmente (slika 2.14). Redak ispod ćemo dodati koristeći stilove kasnije, tako da ne sudjeluje u slici.

Riža. 2.14. Dodavanje vodiča na sliku

Sada koristimo alat Slice (aktiviran tipkom K) i iscrtavamo potrebno pravokutno područje duž vodilica. Označeno područje označeno je plavim okvirom s brojem fragmenta u gornjem lijevom kutu. Veličina područja može se mijenjati pomoću posebnog alata Slice Select. Ovim alatom kliknemo mišem na željeni fragment - boja okvira oko područja postaje žuta, a mijenja se i tonalitet slike. Nakon toga možete koristiti pokazivač miša za pomicanje granica fragmenta pomoću posebnih oznaka na stranama i uglovima područja (slika 2.15).

Riža. 2.15. Promjena područja fragmenta

Za brzo prebacivanje između alata Slice i Slice Select pritisnite i držite tipku Ctrl.

Kada mijenjate veličinu fragmenata, pazite da se područja međusobno ne presijecaju i da između njih nema praznina. Iako sam Photoshop bilježi takve nedostatke i poduzima mjere za njihovo uklanjanje, bolje je sve držati pod svojom kontrolom.

Nakon preliminarne analize i primjene alata Slice, dobivamo 13 fragmenata (sl. 2.16). Fragmenti stvoreni alatom Slice prikazani su plavom bojom, automatski stvoreni fragmenti prikazani su sivom bojom.

Riža. 2.16. Slika izrezana na fragmente

Ne treba se bojati da će biti puno crteža zbog činjenice da većina fragmenata sadrži praznu sliku. Time se smanjuje broj slika jer se neke od njih mogu izbaciti postavljanjem veličine slike za ćeliju tablice.

Korištenje stola za lijepljenje fragmenata

Nakon što su fragmenti označeni, trebate spremiti sve slike na disk. Da biste to učinili, odaberite stavku izbornika Datoteka > Spremi za web i uređaje...(Datoteka > Spremi za web, Alt +Shift +Ctrl +S) za otvaranje ploče za optimizaciju grafike (Slika 2.17).

Riža. 2.17. Ploča za optimizaciju slike

Pomoću alata Slice Select možete odabrati željeni fragment i postaviti osobne parametre za njega, kao što su broj boja, vrijednost gubitak kvalitete, transparentnost itd. Možete odabrati nekoliko fragmenata odjednom držeći pritisnutu tipku Shift, što vam omogućuje postavljanje istih parametara za njih.

Nakon završetka rada s fragmentima, kliknite gumb "Spremi", označite mjesto na disku gdje će se HTML dokument spremiti, njegov naziv, vrstu i postavke (slika 2.18).

Riža. 2.18. Postavke prilikom spremanja datoteke

Slike se automatski spremaju u mapu slika, a njihov naziv se formira od naziva HTML datoteke uz dodatak broja fragmenta. Na primjer, spremljeni naziv bi bio splash.html, tada bi se prvi fragment zvao splash_01.png, a posljednji bi bio splash_13.png. Osim toga, kreira se datoteka spacer.gif, koja je prozirna slika veličine 1x1 piksel. Koristi se za pravilno oblikovanje slika u tablici.

Postavke po kojima se gradi HTML kod i generiraju nazivi slika mogu se promijeniti ako prilikom spremanja datoteke u odjeljku Postavke odaberete Ostalo... U prozoru postavki možete odabrati mapu u koju želite spremati slike, način formiranja naziva datoteka, kao i HTML kod ( sl. 2.19).

Riža. 2.19. Ploča za odabir izlaznih postavki

HTML kod dobiven kao rezultat spremanja datoteka, nakon manjeg uređivanja, prikazan je u primjeru 2.12.

Primjer 2.12. Tablica za spajanje slika

Ovaj kod treba još malo doraditi jer je potrebno da vodoravna siva i bijela traka zauzmu cijelu dostupnu širinu web stranice. Osim toga, neki se fragmenti ponavljaju i mogu se eliminirati.

Da bismo dobili traženi rezultat, uvedimo sloj s pozadinskom slikom i preklopimo našu tablicu na njega. Ova je slika prikazana na sl. 2.20.

Riža. 2.20. Pozadinska slika, okvir oko je radi jasnoće

Sada stvaramo željeni sloj, zovemo ga toplayer i specificiramo njegove parametre u stilovima (primjer 2.13).

Primjer 2.13. Sloj za oblikovanje pruga

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

U u ovom primjeru Parametri pozadine sloja postavljaju se kroz svojstvo univerzalne pozadine, koje određuje put do grafičke datoteke, boju ispune i ponovljivost uzorka. Iako se boja pozadine u takvim slučajevima ne može odrediti jer postoji pozadinska slika, ali u slučaju da je korisnik onemogućio učitavanje slika, bolje je to učiniti. Visina sloja također nije potreban parametar zbog činjenice da tablica unutar sloja ima zadanu visinu.

Sve što ostaje je ukloniti slike s beznačajnim fragmentima, zadržavajući njihove veličine u ćelijama tablice (primjer 2.14).

Primjer 2.14. Konačni kod

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

U ovom primjeru, doctype je promijenjen u strict, što rezultira malim uvlačenjem na dnu slika. Da biste ga uklonili, display : block se dodaje izborniku IMG u stilu.

Osim navedenih prednosti, rezanje slika ima i nedostatke koji su vidljivi u navedenom primjeru. Ispostavilo se da je kôd prilično složen, a budući da su ćelije međusobno povezane, promjena veličine jedne slike podrazumijeva promjenu cijele tablice. Osim toga, nezgodno je uređivati ​​položaj pojedinih crteža. Opet, da biste pomaknuli jedan crtež nekoliko piksela udesno, morat ćete urediti nekoliko ćelija odjednom. Stoga rezanje nije uvijek vrijedno koristiti, pogotovo ako postoji alternativa u obliku korištenja slojeva. Pogledajmo kako pomoću njih napraviti sličan izgled.

Da bismo kontrolirali položaj slika, postavit ćemo relativno pozicioniranje na roditeljsku klasu izbornika, a apsolutno pozicioniranje na slike. Zatim će primjenom svojstava lijevo i gore postaviti koordinate slike u odnosu na njenog roditelja, tj. izbornik slojeva. Sam sloj se može lako pomicati i to ni na koji način neće utjecati na njega. dječji elementi(primjer 2.15).

Primjer 2.15. Raspored pomoću slojeva

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Ovdje se sloj topplayer stvara pomoću pozadinska slika traka zadane visine preko cijele širine prozora. Sloj izbornika definira nadređeni element koji je centriran na vrhu pozadinske trake. Pozicijom slika unutar sloja izbornika upravljaju svojstva top i left. Zbog aktivnog korištenja stilova, HTML kod je znatno smanjen, slike su neovisne jedna o drugoj, lako se mogu premještati, mijenjati u druge i dodavati nove. To je upravo slučaj kada stol nema šanse tijekom postavljanja.

Razmotrimo tri jednostavnih načina, koji se može koristiti za prikaz samo dijela slike na web stranici. Imajte na umu da se uz pomoć ovih metoda slika ne izrezuje na određenu veličinu u doslovnom smislu, već se prikazuje samo dio koji trebamo vidjeti, a nepotrebno područje se sakriva.

Ove metode mogu biti vrlo korisne ako trebate promijeniti veličinu slike ili stvoriti pretpregled, na primjer, u feedu vijesti itd.

1. metoda: korištenje negativnih margina

Slika mora biti postavljena u nadređeni element, u našem slučaju div. Nadređeni element mora biti plutajući element (ili s određenom širinom). Metoda neće raditi na elementima na razini bloka ili punoj širini.

Postavimo negativne margine za sve četiri strane: gore (vrh), desno (desno), dno (dno) i lijevo (lijevo). Negativne margine određuju koliko je slika nadređenog elementa izrezana u svakom smjeru. Zatim ćemo postaviti svojstvo preljeva nadređenog elementa na skriveno kako bismo sakrili margine koje se nalaze iza područja izrezane slike.

<div class = "crop" >

Usjev

plovak: lijevo;

preljev: skriven;

Izreži sliku

margina : -70px -50px -160px -175px ;

Metoda 2: Upotreba apsolutnog pozicioniranja

Pomoću ove metode postavljamo širinu i visinu nadređenog elementa, a svojstvo položaja postavljamo na relativno. Širina i visina određuju dimenzije prikazanog polja. Za sliku unutar nadređenog elementa, postavite svojstvo pozicioniranja na apsolutno. Zatim, koristeći top i left svojstva, postavljamo koji dio slike prikazati.

<div class = "crop" >

Usjev

plovak: lijevo;

preljev: skriven;

položaj: relativan;

širina: 270px;

visina: 260px;

Izreži sliku

pozicija: apsolutna;

gore: -70px;

lijevo: -175px;

Metoda 3: Korištenje svojstva klizanja

Ova metoda je najjednostavnija, budući da svojstvo isječka određuje dio elementa koji treba prikazati. Ali ova metoda ima dva nedostatka.

Prvo, izrezani element mora biti postavljen apsolutno. Stoga ćemo morati dodati dodatni element, izračunajte veličinu vidljivog područja slike, dodajte ovu veličinu i postavite plutajuće svojstvo roditelju.

Drugo, veličina vidljivog područja ne smanjuje se na veličinu izrezanog dijela, već ostaje jednaka veličini cijele slike (područje izvan izrezanog dijela ostaje samo skriveno). Moramo koristiti apsolutno pozicioniranje da pomaknemo vidljivo područje u gornji lijevi kut roditelja.

<div class = "crop" >

Usjev

plovak: lijevo;

položaj: relativan;

U nekim se slučajevima sadržaj bloka pojavljuje izvan granica elementa, preklapajući se s njim. Da biste kontrolirali ponašanje elemenata na razini bloka, upotrijebite svojstvo overflow, koje određuje kako bi sadržaj koji se proteže izvan bloka trebao biti prikazan.

Koristeći svojstvo clip, možete izrezati element na određene dimenzije.

1. Svojstvo preljeva

Sadržaj elemenata bloka može prelijevati blok kada blok ima eksplicitnu visinu i/ili širinu. Bez određivanja visine, blok će se rastegnuti kako bi primio sadržaj osim ako blok nije postavljen na položaj: apsolutni; ili položaj: fiksni; . Tekst može prelaziti blok po visini, slike - po visini i širini.

Vrijednosti:
vidljivo	Zadana vrijednost. Sav sadržaj postaje vidljiv bez obzira na veličinu kontejnerskog bloka. Moguće je preklapanje sadržaja susjednih blokova.
svitak	Dodaje trake za pomicanje unutar područja prikaza elementa koje se pojavljuju čak i kada sadržaj stane unutar bloka. Dimenzije spremnika se ne mijenjaju.
auto	Dodaje trake za pomicanje samo kada je to potrebno.
skriven	Skriva sadržaj koji se proteže izvan granica bloka. Može sakriti dio sadržaja. Koristi se za kontejnerske blokove koji sadrže plutajuće elemente. Također sprječava prikazivanje pozadine ili obruba ispod plutajućih elemenata (koji imaju float: lijevo/desno; postavljeno svojstvo. Time se ne mijenja veličina spremnika.

Riža. 1. Izrežite sadržaj bloka pomoću svojstva overflow Sintaksa: div ( width: 200px; height: 150px; overflow: hidden; )

2. Svojstvo Overflow-x

Svojstvo određuje kako će desni rub sadržaja unutar bloka biti odsječen ako se prekorači.

Sintaksa:

Div (overflow-x: skriveno;)

3. Svojstvo Overflow-y

Svojstvo određuje kako će donji rub sadržaja unutar bloka biti odrezan ako se prelije.

Sintaksa:

Div (overflow-y: skriveno; )

4. Svojstvo isječka

Svojstvo određuje koliko će elementa biti vidljivo. Dio elementa koji ostaje vidljiv nakon skraćivanja naziva se područje izrezivanja. Izrezivanje se primjenjuje na element koji je u početku potpuno vidljiv. Svojstvo se primjenjuje na elemente čije je svojstvo položaja postavljeno na apsolutno ili fiksno.

Prilikom pripreme slika za WEB često je potrebno izrezati ih kako bi se istaknuli potrebni dijelovi slike i odrezali nepotrebni. Osim čisto umjetničkih procjena, takvo obrezivanje ili, kako se još naziva, obrezivanje, potrebno je za smanjenje veličine datoteke. Što je manja slika, to je manja veličina njezine datoteke i brže se učitava na WEB stranicu.

Kako ukloniti nepotrebne dijelove slike

Pogledajmo kako se zapravo radi obrezivanje uklanjanjem uske crne trake na donjem rubu fotografije, što nije bilo moguće u u dovoljnoj mjeri posvijetliti. Obrezivanje se vrši posebnim alatom Crop Tool (C).

Pritisnite gumb Crop Tool (C) na ploči Tools da odaberete ovaj alat.

Postavite pokazivač miša na oblik u gornjem lijevom kutu slike.

pritisnite i držite lijevi gumb miševi.

Bez otpuštanja lijeve tipke miša, pomaknite pokazivač miša na dno desnog ruba fotografije tako da točkasti okvir za odabir koji se pojavi ne uključuje usku crnu prugu na donjem rubu slike.

Otpustite lijevu tipku miša. Okvir će se zaključati, a kvadratne oznake će se pojaviti u njegovim uglovima i sredini stranica. Područje slike izvan okvira za izrezivanje bit će potamnjeno, označavajući tako dio fotografije koji se izrezuje.

Pomoću ovih oznaka možete prilagoditi i rotirati okvir okvira. Za pomicanje okvira za obrezivanje jednostavno postavite pokazivač miša unutar odabranog područja i povucite ga na željeno mjesto. Za promjenu veličine odabranog područja pomaknite jednu od kutnih ručica. Ako tijekom pomicanja držite pritisnutu tipku Shift, očuvat će se proporcije područja. Za rotiranje okvira postavite pokazivač miša, koji će poprimiti oblik zakrivljene strelice, izvan područja odabira i pomicanjem miša dođite do odgovarajućeg položaja za okvir. Za poništavanje izrezivanja jednostavno pritisnite tipku Esc.

Pomicanjem ručica okvira za odabir provjerite uključuje li okvir za obrezivanje cijelu sliku, ne računajući usku crnu prugu na donjem rubu fotografije.

Dvaput kliknite unutar okvira za obrezivanje ili pritisnite Enter. Fotografija će biti izrezana duž postavljenog ruba.

Kako smanjiti veličinu slike

Ali čak i nakon izrezivanja fotografija je prilično velika za WEB stranicu. Uz razlučivost zaslona od 800 x 600 piksela (a uz ovu razlučivost, prema statistici, Trenutno vrijeme većina korisnika weba radi) fotografije zauzimaju značajnu količinu prostora na zaslonu. Osim toga, slikovna datoteka ove veličine bit će prilično velika i dugo će se učitavati. Stoga ćemo smanjiti veličinu slike, što će zauzvrat smanjiti veličinu datoteke.

Odaberite naredbu izbornika Slika - Veličina slike. Na zaslonu se pojavljuje dijaloški okvir Veličina slike.

U najvišem dijelu dijaloga, u grupi kontrolnih dijelova Pixel Dimensions (Dimenzija u pikselima), naznačena je trenutna veličina datoteke u PSD formatu - 400.3K, kao i trenutna širina (Width) i visina (Height) sliku u pikselima. Vaše vrijednosti nakon obrezivanja mogu biti malo drugačije.

U kontrolnoj skupini Veličina dokumenta naznačena je veličina dokumenta u centimetrima i njegova grafička razlučivost (Rezolucija). Kada je postavljena zastavica Ograniči proporcije, program automatski čuva proporcije slike pri promjeni jedne od dimenzija - širine ili visine.

Kada promijenite veličinu slike u grupi kontrolnih dijelova Dimenzije piksela, njezina svojstva za dokument se u skladu s tim mijenjaju - bilo dimenzije ili grafička rezolucija, ovisno o tome je li zastavica Resample Image označena ili poništena. Ako je ova zastavica postavljena, mijenja se veličina dokumenta i, sukladno tome, veličina slikovne datoteke. Ako je zastavica izbrisana, tada se mogu mijenjati samo dimenzije dokumenta. Uz sve to, njegova grafička rezolucija će se promijeniti u skladu s tim, a veličina slike u pikselima i veličina datoteke ostat će bez konfiguracije.

Kada smanjuje dimenziju ili grafičku rezoluciju, Adobe Photoshop uklanja superredundantne informacije sa slike, a kada povećava te karakteristike, formira informacije koje nedostaju na temelju vrijednosti boja postojećih piksela. U oba slučaja, program koristi jednu od 5 metoda interpolacije, koje se mogu odabrati na padajućem popisu Resample Image.

Budući da je fotografija čiju veličinu želimo promijeniti napravljena za prikaz na zaslonu, njezinu grafičku rezoluciju ne treba mijenjati.

Provjerite je li potvrdni okvir Resample Image označen kako biste sačuvali grafičku razlučivost slike i promijenili joj veličinu.

U polje za unos Width grupe kontrolnih dijelova Pixel Dimensions unesite novu vrijednost za širinu slike u pikselima - 300. Automatski će se promijeniti vrijednost visine slike u polju za unos Height, kao i veličina dokumenta u Document Size. skupina kontrolnih dijelova ( Veličina dokumenta). U gornjem dijelu dijaloga također ćete vidjeti novu, smanjenu vrijednost veličine datoteke i pored nje, u zagradama, prethodni volumen.

Zatvorite dijaloški okvir Veličina slike pritiskom na OK. Navedene karakteristike će se koristiti, a veličina slike u prozoru dokumenta će se smanjiti.

Kako izbjeći gubitak svojstava slike prilikom promjene veličine

Kao što je već navedeno, smanjenje dimenzije slike uklanja super-redundantne informacije iz nje, što dovodi do određenog smanjenja oštrine. Korištenje filtra Unsharp Mask može vratiti oštrinu slike u određenoj mjeri.

Odaberite naredbu izbornika Filter - Sharpen - Unsharp Mask (Filter - Oštrina - Oštrina konture). Na zaslonu će se pojaviti dijaloški okvir Unsharp Mask.

Pomaknite klizač za količinu kako biste vratili oštrinu fotografije. Vrijednost ovog parametra trebala bi biti unutar 50-60%.

Pritisnite OK da biste zatvorili dijaloški okvir Urisharp maske. Slika će postati oštrija.

Spremite dokument odabirom naredbe izbornika File - Save.

Budući da prilikom promjene veličine slike njezina kvaliteta opada zbog uklanjanja nepotrebnih informacija, ovu operaciju treba izbjegavati ako je moguće. Ako skenirate sliku, bolje je pronaći njezinu veličinu u ovom koraku i skenirati u razlučivosti koja će pružiti najbolju kvalitetu prikaza.