Practica implementării procesului de adaptare a imaginii este încă în curs de dezvoltare. Există un număr mare de idei și sugestii despre modul de procesare a imaginilor.

În acest tutorial ne vom uita la o mică bibliotecă îngrijită care nu numai că vă permite să redimensionați automat imaginile atunci când schimbați setările ferestrei de vizualizare, dar și să decupați imaginile pe baza unui punct focal dat. În plus, toate acțiunile sunt efectuate în CSS pur.

Faceți cunoștință cu punctul focal

Focal Point - proiect GitHub și bibliotecă CSS? creat de Adam Bradley. Conceptul de receptivitate necesită ca imaginile să își schimbe dimensiunea și poziția pentru a obține proporții optime pentru fereastra curentă. Focal Point duce această idee cu un pas mai departe și nu numai că redimensionează imaginile, ci și le decupează.

Problema cu această idee este că decuparea aleatorie poate elimina părți importante ale imaginii! De exemplu, în exemplul de mai sus, obiectul important se află în partea dreaptă a imaginii. Cum să preveniți să fie tăiat?

Punctul focal vă permite să setați zona țintă a imaginii care ar trebui să rămână intactă (punctul focal). În acest fel, atunci când biblioteca efectuează decuparea, imaginile în sine vor arăta în continuare grozav.

Cum functioneaza?

Implementarea punctului focal este un proces unic, dar în același timp simplu. Să discutăm mai întâi cum să selectăm punctul focal și apoi să ne aprofundăm în codul de implementare.

Când inserați o imagine într-o pagină web folosind Focal Point, aceasta este împărțită automat într-o grilă invizibilă de 12x12. Nu contează ce dimensiune are imaginea, grila se adaptează la ea.

Acum avem un sistem de împărțire a imaginii și putem determina un punct pe grilă care va servi drept punct focal. Când decupați o imagine, punctul specificat va fi folosit ca parte centrală în jurul căreia are loc decuparea. Adică dacă selectăm chipul bărbatului, atunci acest aspect important al imaginii va rămâne după efectuarea modificărilor.

Trebuie să găsiți zona importantă, apoi să numărați numărul de unități de grilă de la centrul imaginii până la ea. În exemplul nostru, fața este situată la trei unități la dreapta și la trei unități în sus de centrul grilei (numele englezești sunt lăsate în figură, deoarece coincid cu parametrii de lucru ai bibliotecii).

Cod

Acum putem specifica punctul focal și este timpul să înțelegem codul de implementare. Pentru a începe, descărcați proiectul din GitHub și conectați fișierul CSS la documentul dvs. HTML.

După operațiunile preliminare, trebuie să adăugați două elemente div și o etichetă img. Da, marcajul se dovedește a fi redundant pentru o imagine, iar acest fapt este un dezavantaj al bibliotecii. Iată un marcaj tipic:

După cum puteți vedea, elementul div exterior are clasa „ punct focal”, iar cel interior conține imaginea noastră fără clase.

Conversia unităților de grilă în clase

Acum trebuie să îndreptați punctul focal către locul unde se află focalizarea imaginii. Punctul nostru focal este deplasat cu trei unități la dreapta și trei unități în sus. Prin urmare, indicăm pentru element exterior cursuri div” dreapta-3" Și " sus-3″.

Implementarea codului nostru va duce la faptul că pe ecrane mari imaginile vor fi afișate la dimensiune completă, iar atunci când fereastra de vizualizare este redusă, acestea vor fi reduse în dimensiune cu decuparea în jurul punctului focal.

Rețineți că imaginea din dreapta nu este doar mai mică, ci și decupată în jurul unei părți importante. Totul se face folosind CSS!

Structura paginii

Pentru a ne imagina mai bine cum să folosiți biblioteca în aplicații reale, să construim o pagină simplă.

Să definim un element div cu clasa „ coloană”:

Să adăugăm un titlu și un paragraf pentru a simula conținutul paginii:

Apoi inserați imaginea așa cum se arată în exemplul anterior (cu două elemente divși cursuri pentru punctul focal):

Pentru a finaliza exemplul, să copiem codul folosind o imagine diferită și un punct de focalizare diferit.

Pentru a doua imagine, punctul focal este într-o locație diferită:

CSS

Să definim stiluri pentru pagina noastră. Adaptarea imaginilor și lucrul cu un punct focal sunt în afara ariei noastre de expertiză. Tot ce trebuie să faceți este să determinați aspect elemente. De exemplu, pagina este împărțită în două coloane și stilurile sunt setate pentru text.

* ( margine: 0; umplutură: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; ) .coloană ( float: stânga; overflow: automat; padding: 20px; width: 50%; ) h1 ( text-transform: majuscule; font: bold 45px/1.5 Helvetica, Verdana, sans-serif; ) p ( margin- jos: 20px; culoare: #888; font: 14px/1.5 Helvetica, Verdana, sans-serif; ) @media all și (max-width: 767px) ( p ( font-size: 12px; ) h1 ( font-size: 35px; ) ) @media all and (max-width: 550px) ( h1 ( font-size: 23px; ) )

Să-l vedem în acțiune

Acum puteți vedea cum funcționează demonstrația. Dacă paginile sunt afișate într-o fereastră mare de vizualizare (de exemplu, pe un ecran de monitor) calculator desktop), atunci imaginile vor fi afișate integral:

Acum, dacă reduceți dimensiunea ferestrei de vizualizare sau vizionați pagina demo cu dispozitiv mobil, puteți vedea cum se adaptează imaginile. Pe măsură ce fereastra se micșorează, imaginile nu sunt doar mai mici, ci și decupate.

Din punct de vedere al designului, cât de eficientă este această tehnică!? Cu cât imaginea devine mai mică, cu atât punctul focal iese în evidență. Cu această bibliotecă poți fi sigur că și pe ecrane mici utilizatorii vor avea informații importante.

Compatibilitate browser

Biblioteca funcționează în toate browserele noi. În IE8, imaginile sunt redimensionate, dar nu decupate. Dar, în acest moment, 99,99% dintre site-uri nu au un astfel de mecanism de adaptare a imaginii cu tăiere automată, așa că răspunsul IE8 nu este critic.

Ce e inauntru?

Acum să vedem cum funcționează biblioteca.

Prima parte a codului este solutie de baza CSS pentru imagini adaptive.

Focal-point ( lățime: 100%; înălțime: automat; overflow: ascuns; ) .focal-point img ( lățime: 100%; max-width: 100%; înălțime: automat; -ms-interpolation-mode: bicubic; ) .div-punct focal (poziție: relativă; lățime maximă: niciuna; înălțime: automat; )

Următorul cod este puțin mai complicat. În primul rând, interogarea media este implementată la 767px. Apoi, valorile marjelor negative pentru fiecare dintre clasele disponibile sunt folosite pentru a decupa imaginea. În textul lecției prezentăm doar clasele „ sus-3" Și " dreapta-3″ care au fost folosite în demonstrație.

@media all and (max-width: 767px) ( /* 4x3 Landscape Shape (Implicit) */ .focal-point div ( margin: -3em -4em; ) /* Landscape up (Total 6em) */ .up-3 div ( margin-sus: -1.5em; margin-bottom: -4.5em; ) .right-3 div (marja-stânga: -6em; margin-dreapta: -2em; ) )

Nu există prea mult cod aici, dar este destul de elegant. Marginile negative sunt folosite cu unități em pentru a decupa imagini în jurul unui punct dat.

Tăierea unei imagini în fragmente și apoi combinarea lor într-o singură imagine este o tehnică de lungă durată care a devenit parte din arsenalul de aspect al paginii web. Desenul pregătit în prealabil este tăiat în bucăți editor grafic, păstrați părțile separat imagini grafice, apoi conectați-le împreună folosind o masă.

Să ne gândim mai întâi de ce se utilizează tăierea imaginii și ce avantaje oferă în cele din urmă, apoi cum să folosiți tabelul în practică.

Avantajele tăierii imaginilor

Creare link

Dacă este necesar, imaginile individuale pot fi transformate în link-uri și le puteți atribui propria descriere ( atribut titlu ) și text alternativ ( atribut alt ), care este vizibil atunci când dezactivați afișarea imaginilor în browser sau când treceți mouse-ul peste imaginea.

Efect de rulare

Un set de fragmente individuale vă permite să creați un efect de rulare - schimbând dinamic o imagine cu alta atunci când treceți cursorul mouse-ului peste ea și înapoi la cea anterioară când cursorul se îndepărtează.

Reducerea dimensiunii fișierului

Este mai convenabil să manipulați părți individuale ale imaginii selectând un format grafic și parametrii acestuia pentru acestea, astfel încât dimensiunea fișierului să fie minimă, menținând în același timp o calitate acceptabilă a imaginii. Ca rezultat, un set de fișiere grafice va ocupa mai puțin spațiu și se va încărca mai repede decât un fișier care conține un desen întreg.

GIF animat

Utilizarea GIF animat pentru imagini marime mare este plin de o creștere semnificativă a dimensiunii fișierului. Dar puteți folosi un truc și puteți înlocui doar o parte a imaginii cu animație și lăsați fragmentele rămase statice. În acest caz, volumul total al mai multor fișiere va fi mult mai mic decât animația unei imagini.

Caracteristici de aspect

Imaginile de pe o pagină web sunt de natură dreptunghiulară, dar prin tăierea unei imagini în elementele sale componente, obțineți un constructor din care puteți construi o altă formă. Aceasta amintește de blocurile pentru copii, pe o parte din care este lipită o imagine. Trebuie să adăugați astfel de forme pe o pagină web din diverse motive, de exemplu, trebuie să adăugați text în loc de un fragment de imagine. În plus, unele imagini pot fi înlocuite cu omologul lor de fundal, iar apoi imaginea finală, păstrându-și integritatea, va ocupa întreaga zonă disponibilă a documentului.

Aspect psihologic

Când o imagine este formată din mai multe fragmente, browserul le descarcă în mai multe fire și le arată pe cele care au descărcat primul. Prin urmare, imaginea apare ca elemente de mozaic. Și acest lucru atrage imediat atenția și pare să se încarce mai repede. Deci, din punct de vedere tehnic, o poză se încarcă mai repede, dar din perspectiva percepției umane, se pare că un set de imagini mici apare mai repede.

Pregătirea imaginii

Ca exemplu de imagine în care este necesară tăierea, luați Fig. 2.12. Fiecare dintre cele trei pictograme este un link către secțiunea corespunzătoare, în plus, un link către pagina principală este o imagine cu numele site-ului.

Orez. 2.12. Imagine originală

Teoretic, în acest caz, puteți face fără tăiere dacă utilizați o hartă imagine (tags

Orez. 2.13. Vizualizare imagine la deschiderea unei secțiuni

Acum trebuie să decideți cum să tăiați imaginea. Aici pot exista mai multe opțiuni - în cele din urmă depinde de voința autorului, de scopul desenului și de conținutul acestuia.

Tăierea imaginii

Este mai bine să încredințați tăierea și „asamblarea” desenului unui program specializat, în special, Adobe Photoshop, deci toate referințele la instrumente și meniuri se referă în mod specific la acest program.

Pentru a ușura tăierea imaginii, ar trebui să adăugați mai întâi linii de ghidare, de-a lungul cărora va avea loc apoi împărțirea în fragmente (Fig. 2.14). Vom adăuga linia de mai jos folosind stiluri mai târziu, astfel încât să nu participe la imagine.

Orez. 2.14. Adăugarea de ghiduri la imagine

Acum folosim instrumentul Slice (activat de tasta K) și trasăm zona dreptunghiulară necesară de-a lungul ghidajelor. Zona desemnată este marcată cu un cadru albastru cu numărul fragmentului în colțul din stânga sus. Mărimea zonelor poate fi modificată utilizând instrumentul special Selectare felii. Facem clic cu mouse-ul cu acest instrument pe fragmentul dorit - culoarea cadrului din jurul zonei devine galbenă, iar tonalitatea imaginii se schimbă și ea. După aceea, puteți folosi cursorul mouse-ului pentru a muta granițele fragmentului folosind markeri speciali pe părțile laterale și colțurile zonei (Fig. 2.15).

Orez. 2.15. Schimbarea zonei fragmentului

Pentru a comuta rapid între instrumentele Slice și Slice Select, apăsați și mențineți apăsată tasta Ctrl.

Când redimensionați fragmente, asigurați-vă că zonele nu se intersectează unele cu altele și că nu există goluri între ele. Deși Photoshop însuși constată astfel de deficiențe și ia măsuri pentru a le elimina, este mai bine să ții totul sub control.

După analiza preliminară și aplicarea instrumentului Slice, obținem 13 fragmente (Fig. 2.16). Fragmentele create de instrumentul Slice sunt afișate cu albastru, fragmentele create automat sunt afișate cu gri.

Orez. 2.16. Imagine tăiată în fragmente

Nu trebuie să vă temeți că vor exista o mulțime de desene datorită faptului că majoritatea fragmentelor conțin o imagine goală. Astfel, numărul de imagini este redus, deoarece unele dintre ele pot fi aruncate prin setarea dimensiunii imaginii pentru celula tabelului.

Folosind o masă pentru a lipi fragmentele împreună

După ce fragmentele sunt desemnate, trebuie să salvați toate imaginile pe disc. Pentru a face acest lucru, selectați elementul de meniu Fișier > Salvare pentru web și dispozitive...(Fișier > Salvare pentru Web, Alt + Shift + Ctrl + S) pentru a deschide panoul de optimizare grafică (Fig. 2.17).

Orez. 2.17. Panoul de optimizare a imaginii

Folosind instrumentul Slice Select, puteți selecta fragmentul dorit și setați parametri personali pentru acesta, cum ar fi numărul de culori, valoarea pierdere de calitate, transparență etc. Puteți selecta mai multe fragmente simultan ținând apăsată tasta Shift, ceea ce vă permite să setați aceiași parametri pentru ele.

După ce ați terminat de lucrat cu fragmente, faceți clic pe butonul „Salvare”, indicați locația de pe disc în care va fi salvat documentul HTML, numele, tipul și setările acestuia (Fig. 2.18).

Orez. 2.18. Setări la salvarea unui fișier

Imaginile sunt salvate automat în folderul imagini, iar numele lor este format din numele fișierului HTML cu adăugarea numărului fragmentului. De exemplu, numele salvat ar fi splash.html, apoi primul fragment ar fi numit splash_01.png iar ultimul ar fi splash_13.png. În plus, este creat un fișier spacer.gif, care este o imagine transparentă cu dimensiunea de 1x1 pixel. Este folosit pentru a forma corect imagini în tabel.

Setările prin care se construiește codul HTML și se generează numele imaginilor pot fi modificate dacă, la salvarea unui fișier, în secțiunea Setări, selectați Altele... În fereastra de setări, puteți selecta folderul în care să salvați imaginile, metoda de formare a numelor de fișiere, precum și codul HTML ( Fig. 2.19).

Orez. 2.19. Panou pentru selectarea setărilor de ieșire

Codul HTML obținut în urma salvării fișierelor, după o editare minoră, este prezentat în exemplul 2.12.

Exemplul 2.12. Tabel pentru îmbinarea imaginilor

Acest cod mai are nevoie de ceva lucru deoarece este necesar ca dunga orizontală gri și albă să ocupe întreaga lățime disponibilă a paginii web. În plus, unele fragmente se repetă și pot fi eliminate.

Pentru a obține rezultatul dorit, să introducem un strat cu o imagine de fundal și să suprapunem tabelul nostru deasupra acestuia. Această imagine este prezentată în Fig. 2.20.

Orez. 2.20. Imaginea de fundal, cadrul în jur este pentru claritate

Acum creăm stratul dorit, îl numim toplayer și specificăm parametrii acestuia în stiluri (exemplul 2.13).

Exemplul 2.13. Strat pentru formarea dungilor

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ÎN în acest exemplu Parametrii de fundal ale stratului sunt setabili prin proprietatea universală de fundal, care determină calea către fișierul grafic, culoarea de umplere și repetabilitatea modelului. Deși culoarea de fundal în astfel de cazuri nu poate fi specificată deoarece există imagine de fundal, dar în cazul în care utilizatorul a dezactivat încărcarea imaginii, este mai bine să faceți acest lucru. Înălțimea stratului nu este, de asemenea, un parametru necesar datorită faptului că masa din interiorul stratului are o înălțime dată.

Tot ce rămâne este să eliminați imaginile cu fragmente nesemnificative, menținându-le dimensiunile în celulele tabelului (exemplul 2.14).

Exemplul 2.14. Cod final

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

În acest exemplu, doctype a fost schimbat în strict, ceea ce are ca rezultat o mică adâncime în partea de jos a imaginilor. Pentru a-l elimina, afișaj : blocul este adăugat la selectorul IMG în stil.

Pe lângă avantajele enumerate, tăierea imaginilor are și dezavantaje, care sunt evidente în exemplul dat. Codul se dovedește a fi destul de complex și, deoarece celulele sunt interconectate, schimbarea dimensiunii unei imagini va presupune modificarea întregului tabel. În plus, este incomod să editați poziția desenelor individuale. Din nou, pentru a muta un desen cu câțiva pixeli la dreapta, va trebui să faceți modificări în mai multe celule simultan. Prin urmare, tăierea nu merită întotdeauna folosită, mai ales dacă există o alternativă sub forma utilizării straturilor. Să vedem cum să facem un aspect similar folosindu-le.

Pentru a controla poziția imaginilor, vom seta poziționarea relativă la clasa meniului părinte și poziționarea absolută la imagini. Apoi, aplicarea proprietăților din stânga și de sus va seta coordonatele imaginii în raport cu părintele ei, adică. meniul de straturi. Stratul în sine poate fi mutat cu ușurință și acest lucru nu îl va afecta în niciun fel. elemente copil(exemplul 2.15).

Exemplul 2.15. Aspect folosind straturi

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Aici stratul toplayer este creat folosind imagine de fundal o fâșie de o înălțime dată pe toată lățimea ferestrei. Stratul de meniu definește un element părinte care este centrat deasupra barei de fundal. Poziția imaginilor în stratul de meniu este controlată de proprietățile din partea de sus și din stânga. Datorită utilizării active a stilurilor, codul HTML este mult redus, imaginile sunt independente unele de altele, pot fi mutate cu ușurință, schimbate cu altele și adăugate altele noi. Acesta este exact cazul când o masă nu are nicio șansă în timpul amenajării.

Să luăm în considerare trei moduri simple, care poate fi folosit pentru a afișa doar o parte a unei imagini pe un site web. Rețineți că, cu ajutorul acestor metode, imaginea nu este decupată la o anumită dimensiune în sensul literal, ci este afișată doar partea din ea pe care trebuie să o vedem, iar zona inutilă este ascunsă.

Aceste metode pot fi foarte utile dacă trebuie să redimensionați o imagine sau să creați o previzualizare, de exemplu, într-un flux de știri etc.

Metoda 1: Utilizarea marjelor negative

Imaginea trebuie plasată într-un element părinte, în cazul nostru un div. Elementul părinte trebuie să fie un element flotant (sau cu o lățime specificată). Metoda nu va funcționa pe elemente la nivel de bloc sau cu lățime completă.

Să setăm margini negative pentru toate cele patru laturi: sus (sus), dreapta (dreapta), jos (jos) și stânga (stânga). Marginile negative determină cât de mult este decupată imaginea elementului părinte în fiecare direcție. Apoi, vom seta proprietatea de depășire a elementului părinte la ascuns pentru a ascunde marginile care se află în spatele zonei imaginii decupate.

<div class = "decupare" >

A decupa

plutește la stânga;

preaplin: ascuns;

Decupați img

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

Metoda 2: Utilizarea poziționării absolute

Folosind această metodă, setăm lățimea și înălțimea elementului părinte și setăm proprietatea poziției la relativă. Lățimea și înălțimea determină dimensiunile câmpului afișat. Pentru o imagine din interiorul unui element părinte, setați proprietatea de poziționare la absolut. Apoi, folosind proprietățile de sus și din stânga, setăm ce parte a imaginii să fie afișată.

<div class = "decupare" >

A decupa

plutește la stânga;

preaplin: ascuns;

poziție: relativă;

latime: 270px;

înălțime: 260px;

Decupați img

poziție: absolută;

sus: -70px;

stânga: -175px;

Metoda 3: Utilizarea proprietății de alunecare

Această metodă este cea mai simplă, deoarece proprietatea clip determină partea elementului care trebuie afișată. Dar această metodă are două dezavantaje.

În primul rând, elementul decupat trebuie poziționat absolut. Prin urmare, va trebui să adăugăm element suplimentar, calculați dimensiunea zonei vizibile a imaginii, adăugați această dimensiune și setați proprietate de plutire către părinte.

În al doilea rând, dimensiunea zonei vizibile nu este redusă la dimensiunea părții decupate, ci rămâne egală cu dimensiunea întregii imagini (zona din afara părții decupate este doar ascunsă). Trebuie să folosim poziționarea absolută pentru a muta zona vizibilă în colțul din stânga sus al părintelui.

<div class = "decupare" >

A decupa

plutește la stânga;

poziție: relativă;

În unele cazuri, conținutul blocului apare în afara granițelor elementului, suprapunându-se cu acesta. Pentru a controla comportamentul elementelor la nivel de bloc, utilizați proprietatea overflow, care determină modul în care ar trebui să fie afișat conținutul care se extinde în afara blocului.

Folosind proprietatea clip, puteți decupa un element la dimensiunile specificate.

1. Proprietate de overflow

Conținutul elementelor blocului poate depăși blocul atunci când blocul are o înălțime și/sau lățime explicită. Fără a specifica o înălțime, blocul se va întinde pentru a găzdui conținutul, cu excepția cazului în care blocul este poziționat la poziția: absolută; sau poziție: fixă; . Textul poate depăși blocul în înălțime, imagini - în înălțime și lățime.

Valori:
vizibil	Valoare implicită. Tot conținutul devine vizibil indiferent de dimensiunea blocului container. Este posibil să se suprapună conținutul blocurilor adiacente.
sul	Adaugă bare de defilare în interiorul zonei de afișare a elementului care apar chiar și atunci când conținutul se încadrează în bloc. Dimensiunile containerului nu se modifică.
auto	Adaugă bare de defilare numai atunci când este necesar.
ascuns	Ascunde conținutul care se extinde dincolo de granițele blocului. Poate ascunde ceva conținut. Folosit pentru blocuri de containere care conțin elemente plutitoare. De asemenea, împiedică afișarea fundalurilor sau a chenarelor sub elementele plutitoare (care au float: stânga / dreapta; proprietatea setată. Acest lucru nu redimensionează containerul.

Orez. 1. Decupați conținutul blocului folosind proprietatea overflow Sintaxă: div ( lățime: 200px; înălțime: 150px; overflow: ascuns; )

2. Proprietatea Overflow-x

Proprietatea specifică modul în care marginea dreaptă a conținutului din interiorul blocului va fi tăiată dacă se depășește.

Sintaxă:

Div ( overflow-x: ascuns; )

3. Proprietatea overflow-y

Proprietatea specifică modul în care marginea de jos a conținutului din interiorul blocului va fi tăiată dacă se depășește.

Sintaxă:

Div (overflow-y: ascuns; )

4. Proprietatea clipului

Proprietatea determină cât de mult din element va fi vizibil. Partea elementului care rămâne vizibilă după tăiere se numește regiunea de tăiere. Decuparea se aplică unui element care este inițial complet vizibil. Proprietatea se aplică elementelor care au proprietatea de poziție setată la absolut sau fix.

Când pregătiți imagini pentru WEB, adesea devine necesar să le decupați pentru a evidenția părțile necesare ale imaginii și pentru a le tăia pe cele inutile. În afară de judecățile pur artistice, o astfel de tăiere sau, așa cum se mai numește, decuparea, este necesară pentru a reduce dimensiunea fișierului. Cu cât imaginea este mai mică, cu atât dimensiunea fișierului său este mai mică și se încarcă mai rapid pe pagina WEB.

Cum să eliminați părțile inutile ale unei imagini

Să vedem cum se realizează decuparea prin eliminarea dungii negre înguste de la marginea de jos a fotografiei, ceea ce nu a fost posibil în într-o măsură suficientă uşura. Decuparea se face cu un instrument special, Instrumentul de decupare (C).

Faceți clic pe butonul Instrument de decupare (C) din panoul Instrumente pentru a selecta acest instrument.

Setați indicatorul mouse-ului la forma din colțul din stânga sus al imaginii.

apasa si tine apasat butonul din stanga soareci.

Fără a elibera butonul stâng al mouse-ului, mutați indicatorul mouse-ului în partea de jos a marginii drepte a fotografiei, astfel încât cadrul de selecție punctat care apare să nu includă o dungă neagră îngustă la marginea de jos a imaginii.

Eliberați butonul stâng al mouse-ului. Cadrul se va bloca și vor apărea marcaje pătrate în colțurile sale și în mijlocul laturilor. Zona imaginii din afara cadrului de decupare va fi întunecată, indicând astfel porțiunea din fotografie care este decupată.

Folosind acești marcatori, puteți ajusta și roti chenarul cadrului. Pentru a muta cadrul de decupare, plasați pur și simplu indicatorul mouse-ului în interiorul zonei selectate și trageți-l în locația dorită. Pentru a modifica dimensiunea zonei selectate, mutați unul dintre mânerele de colț. Dacă țineți apăsat butonul Shift în timp ce vă deplasați, proporțiile zonei vor fi păstrate. Pentru a roti cadrul, plasați indicatorul mouse-ului, care va lua forma unei săgeți curbe, în afara zonei de selecție și, prin mișcarea mouse-ului, ajungeți într-o poziție potrivită pentru cadru. Pentru a anula decuparea, pur și simplu apăsați butonul Esc.

Mutând mânerele cadrului de selecție, asigurați-vă că cadrul de decupare include întreaga imagine, fără a număra dunga neagră îngustă de la marginea de jos a fotografiei.

Faceți dublu clic în interiorul casetei de decupare sau apăsați Enter. Fotografia va fi decupată de-a lungul marginii stabilite.

Cum se reduce dimensiunea imaginii

Dar chiar și după decuparea fotografiei este destul de mare pentru o pagină WEB. Cu o rezoluție a ecranului de 800 x 600 pixeli (și cu această rezoluție, conform statisticilor, ora curentă majoritatea utilizatorilor de Web lucrează) fotografiile ocupă o cantitate semnificativă de spațiu pe afișaj. În plus, un fișier imagine de această dimensiune va fi destul de mare și va dura mult timp pentru a se încărca. Prin urmare, vom reduce dimensiunea imaginii, care, la rândul său, va reduce dimensiunea fișierului.

Selectați comanda de meniu Image - Image Size. Pe ecran apare dialogul Dimensiune imagine.

În partea cea mai înaltă a casetei de dialog, în grupul de părți de control Dimensiuni pixeli (Dimensiune în pixeli), este indicată dimensiunea curentă a fișierului în format PSD - 400.3K, precum și lățimea (Lățimea) și înălțimea (Înălțimea) curente ale imaginea în pixeli. Valorile dvs. după tăiere pot fi ușor diferite.

În grupul de control Dimensiune document, sunt indicate dimensiunea documentului în centimetri și rezoluția sa grafică (Rezoluție). Când este setat indicatorul Constrain Proportions, programul păstrează automat proporțiile imaginii la modificarea uneia dintre dimensiuni - lățime sau înălțime.

Atunci când redimensionați o imagine din grupul Dimensiuni pixeli de părți de control, proprietățile acesteia pentru document se schimbă în consecință - fie dimensiunile, fie rezoluția grafică, în funcție de faptul dacă indicatorul Resample Image este bifat sau șters. Dacă acest steag este setat, dimensiunea documentului și, în consecință, dimensiunea fișierului imagine se modifică. Dacă steagul este șters, atunci doar dimensiunile documentului pot fi modificate. Cu toate acestea, rezoluția sa grafică se va modifica în consecință, iar dimensiunea imaginii în pixeli și dimensiunea fișierului vor rămâne fără configurare.

Când reduceți dimensiunea sau rezoluția grafică, Adobe Photoshop elimină informațiile super-redundante din imagine, iar la creșterea acestor caracteristici, formează informațiile lipsă pe baza valorilor de culoare ale pixelilor existenți. În ambele cazuri, programul utilizează una dintre cele 5 metode de interpolare, care pot fi selectate în lista derulantă Resample Image.

Deoarece fotografia a cărei dimensiune dorim să o schimbăm a fost creată pentru afișare pe afișaj, rezoluția sa grafică nu trebuie modificată.

Asigurați-vă că caseta de selectare Resample Image este bifată pentru a păstra rezoluția grafică a imaginii și a o redimensiona.

În câmpul de introducere Lățime al grupului Dimensiuni pixeli de părți de control, introduceți o nouă valoare pentru lățimea imaginii în pixeli - 300. Valoarea înălțimii imaginii din câmpul de introducere Înălțime se va modifica automat, precum și dimensiunea documentului în Dimensiunea documentului grup de piese de control (Dimensiunea documentului). În partea superioară a casetei de dialog veți vedea, de asemenea, o nouă valoare redusă de dimensiune a fișierului și lângă ea, între paranteze, volumul anterior.

Închideți dialogul Dimensiune imagine făcând clic pe OK. Se vor folosi caracteristicile specificate, iar dimensiunea imaginii din fereastra documentului va fi redusă.

Cum să evitați pierderea proprietăților imaginii atunci când o redimensionați

După cum sa indicat deja, reducerea dimensiunii unei imagini elimină informațiile super-redundante din aceasta, ceea ce duce la o anumită scădere a clarității. Utilizarea filtrului Unsharp Mask poate restabili claritatea imaginii într-o anumită măsură.

Selectați comanda de meniu Filter - Sharpen - Unsharp Mask (Filtru - Claritate - Claritate contur). Pe ecran va apărea dialogul Unsharp Mask.

Mutați glisorul Cantitate pentru a restabili claritatea fotografiei. Valoarea acestui parametru ar trebui să fie între 50-60%.

Faceți clic pe OK pentru a închide caseta de dialog Urisharp Mask. Imaginea va deveni mai clară.

Salvați documentul selectând comanda de meniu Fișier - Salvare.

Deoarece la redimensionarea unei imagini, calitatea acesteia scade din cauza eliminării informațiilor inutile, această operațiune trebuie evitată dacă este posibil. Dacă scanați o imagine, este mai bine să găsiți dimensiunea acesteia la acest pas și să scanați la o rezoluție care va oferi cea mai bună calitate de afișare.