Ghidul designerului pentru felierea imaginilor în Photoshop

Când lucrați cu imagini pe web, vor exista momente în care doriți să încărcați o imagine mare, fie ca imagine principală pe o pagină, fie ca fundal. Dezavantajul este că vei întâlni imediat mai multe probleme. În primul rând este dimensiunea reală a fișierului. A doua este rezoluția. Al treilea este compresia.

Dacă fișierul este mare, va dura mult timp pentru încărcare, în special pentru utilizatorii cu o conexiune mai lentă. Puteți reduce dimensiunea fișierului cu compresie, dar puteți merge atât de departe înainte ca calitatea imaginii să înceapă să sufere.

Soluția la problema dvs. este să folosiți felierea imaginii, care vă va permite să încărcați imaginea, câte o bucată la un moment dat, până când întreaga imagine apare pe ecran.



Cum functioneaza

Iată o prezentare generală a modului în care funcționează: când aveți o imagine care va dura prea mult timp pentru a fi încărcată singură, profitați de instrumentul Slicing din Photoshop pentru a tăia imaginea în secțiuni mai mici. Aceste imagini vor fi salvate ca fișier separat și optimizate folosind comanda Save for Web.

În plus, Photoshop creează codul HTML sau CSS necesar pentru a afișa imaginea în felii. Atunci când este utilizată într-o pagină web, fiecare imagine va fi reasamblată în browser folosind HTML sau CSS menționate anterior pentru a crea un rezultat lin. Iată un exemplu de imagine în felii.

felierea imaginii

Noțiuni de bază privind felierea

Pentru a simplifica lucrurile, vom lucra doar cu instrumentul Slice pe un singur strat. În acest exemplu lucrez cu o imagine de 960x722px. Câteva lucruri pe care trebuie să le cunoașteți înainte de a începe:

  • Când creați felii, puteți face acest lucru folosind instrumentul Slice sau le puteți construi folosind straturi.
  • Feliile pot fi selectate folosind instrumentul Slice Select.
  • Puteți muta, dimensiona sau alinia felia cu alte felii. În plus, puteți desemna un nume pentru felie, tip și adresă URL.
  • Fiecare felie poate fi optimizată utilizând setările din caseta de dialog Salvare pentru web.

Pentru a începe, apăsați C de pe tastatură și faceți clic pe instrumentul Slice.

felierea imaginii

Când creați felii, puteți alege dintre trei setări: Normal, Raport de aspect fix și Dimensiune fixă.

  • Normal : Aceasta va deveni o felie în funcție de locul în care începeți și terminați caseta pe care o desenați pe imagine.
  • Raport de aspect fix : Aici setați înălțimea și lățimea folosind numere întregi. Pentru a elabora, dacă doriți să creați o felie cu un raport trei la unu, ați introduce 3 pentru înălțime și 1 pentru lățime.
  • Marime fixa : Aici setați înălțimea și lățimea feliei în pixeli.

Aveți mai multe opțiuni la felierea unei imagini. Dacă precizia nu este importantă, puteți tăia imaginea manual și, dacă este necesar, puteți muta feliile completate folosind Instrumentul de selectare a feliei.

felierea imaginii

cum să atragi un om în picioare

Dacă precizia este importantă, utilizați instrucțiunile pentru a mapa secțiunile importante din imagine.

felierea imaginii

În partea de sus a barei de meniu Slicing, faceți clic pe C sau pe instrumentul Slice pentru a o activa și în bara de meniu Slice de deasupra imaginii, faceți clic pe butonul Slices din Ghiduri.

felierea imaginii

Feliile sunt desenate automat pentru dvs. Apoi puteți repoziționa feliile cu Instrumentul de selectare a feliei.

Editarea informațiilor despre felii

După ce fiecare felie a fost creată, puteți edita informații despre felie într-unul din cele două moduri.

Primul lucru de făcut este să faceți clic pe instrumentul de selectare a feliei, faceți clic pe felia pe care doriți să o editați, apoi faceți clic pe pictograma de lângă butonul Afișare felii automate din bara de meniu.

felierea imaginii

O altă opțiune este să faceți clic dreapta pe felie și în meniul pop-up, faceți clic pe Editare opțiuni felie.

felierea imaginii

Ambele opțiuni vor afișa caseta de dialog Slice Options.

felierea imaginii

După cum puteți vedea, există multe setări. Puteți schimba numele feliei, îi puteți atribui o adresă URL, astfel încât atunci când faceți clic pe acesta în browser, vă va duce într-o altă locație, puteți seta Ținta (_blank, _self, _parent, _top), Message Text, Etichetă alternativă, Dimensiunile feliei și multe altele.

Salvați pentru web

După ce sunteți mulțumit de aspectul dvs., accesați Fișier> Salvare pentru web.

felierea imaginii

Aici puteți seta tipul de fișier și compresia pentru fiecare felie sau puteți merge cu valoarea implicită listată în caseta de dialog Salvare pentru web. După ce sunteți mulțumit de setările dvs., faceți clic pe butonul Salvare.

felierea imaginii

Aceasta afișează caseta de dialog Salvat optimizat ca. În partea de jos a casetei sunt mai multe setări importante.

  • Format : Aveți trei opțiuni care sunt HTML și imagini, numai imagini și numai HTML.
  • Setări : Opțiunile dvs. sunt Personalizate, Imagine de fundal, Setări implicite, XHTML și Altele.
  • Felii : Opțiunile dvs. sunt Toate feliile, Toate feliile de utilizator și Feliile selectate.

Pentru acest tutorial folosesc HTML și imagini, Setări implicite și Toate feliile. Când sunteți mulțumit de setările dvs., alegeți folderul în care doriți să salvați fișierele și faceți clic pe butonul Salvare. Aceasta creează un fișier HTML și salvează toate cele șase imagini într-un folder.

xp-pen deco 01 recenzie

Iată o vizualizare pe ecran divizat a fișierului HTML din Adobe Dreamweaver. După cum puteți vedea, codul este simplu și ușor de utilizat.

felierea imaginii

Concluzie

După cum puteți vedea, felierea imaginilor este utilă dacă aveți o imagine mare. Prin împărțirea acesteia în secțiuni, porțiuni din imagine vor începe să se încarce mai întâi, informând utilizatorul mai multe lucruri. Acest lucru este util pentru utilizatorii cu o conexiune lentă.

Pentru mai multe informații, consultați următoarele articole:

Cuvinte : Nathan Segal