Dizainerio vadovas dėl vaizdo pjaustymo „Photoshop“

Dirbdami su vaizdais žiniatinklyje, kartais norėsite įkelti didelį vaizdą kaip pagrindinį puslapio vaizdą arba foną. Trūkumas yra tas, kad tuoj pat susidursite su keliomis problemomis. Pirmiausia yra tikrasis failo dydis. Antra yra rezoliucija. Trečia - suspaudimas.

Jei failas didelis, užtruks daug laiko, ypač vartotojams, turintiems lėtesnį ryšį. Galite sumažinti failo dydį suglaudindami, bet galite eiti tik tiek, kol vaizdo kokybė pradės nukentėti.

Jūsų problemos sprendimas yra naudoti vaizdo pjaustymą, kuris leis jums įkelti vaizdą po vieną, kol visas vaizdas pasirodys jūsų ekrane.



Kaip tai veikia

Čia pateikiama jo veikimo apžvalga: kai turite vaizdą, kurio įkėlimas užtruks per ilgai, pasinaudokite „Photoshop“ įrankiu „Pjaustymas“, kad supjaustytumėte vaizdą į mažesnes dalis. Šie vaizdai bus išsaugoti kaip atskiras failas ir optimizuoti naudojant komandą Išsaugoti žiniatinkliui.

Be to, „Photoshop“ sukuria HTML arba CSS, būtiną supjaustytam vaizdui rodyti. Naudojant tinklalapį, kiekvienas vaizdas bus iš naujo surinktas naršyklėje naudojant anksčiau minėtą HTML arba CSS, kad būtų sukurtas sklandus rezultatas. Čia yra supjaustyto vaizdo pavyzdys.

vaizdo pjaustymas

Pjaustymo pagrindai

Kad viskas būtų paprasta, dirbsime tik su „Slice“ įrankiu viename sluoksnyje. Šiame pavyzdyje dirbu su vaizdu, kurio dydis 960x722px. Keletas dalykų, kuriuos turite žinoti prieš pradėdami:

  • Kurdami pjūvius, galite tai padaryti naudodami „Pjūvio“ įrankį arba galite juos sukurti naudodami sluoksnius.
  • Pjūvius galima pasirinkti naudojant įrankį Pjūvių pasirinkimas.
  • Galite perkelti, dydį arba sulyginti pjūvį su kitais. Be to, galite nurodyti pjūvio pavadinimą, tipą ir URL.
  • Kiekvieną skiltį galima optimizuoti naudojant dialogo lango Išsaugoti žiniatinkliui nustatymus.

Norėdami pradėti, paspauskite C klaviatūroje ir spustelėkite įrankį Skiltelė.

lengva piešti pastelėmis

vaizdo pjaustymas

Kurdami pjūvius galite pasirinkti iš trijų nustatymų: Normalus, Fiksuoto formato santykis ir Fiksuotas dydis.

  • Normalus : Tai taps riekele, priklausomai nuo to, kur pradedate ir baigiate langelį, kurį piešiate ant paveikslėlio.
  • Fiksuotas vaizdo santykis : Čia jūs nustatote aukštį ir plotį naudodami sveikus skaičius. Norėdami išsiaiškinti, jei norite sukurti pjūvį santykiu „trys prieš vieną“, įveskite 3 aukštį ir 1 plotį.
  • Fiksuotas dydis : Čia nustatote pjūvio aukštį ir plotį pikseliais.

Pjaustydami vaizdą turite keletą galimybių. Jei tikslumas nėra svarbus, galite supjaustyti vaizdą rankiniu būdu ir, jei reikia, perkelkite užbaigtus gabalėlius naudodamiesi „Slice Select Tool“.

vaizdo pjaustymas

Jei tikslumas yra svarbus, naudokite gaires, kad atvaizduotumėte svarbias paveikslėlio dalis.

vaizdo pjaustymas

„Slicing“ meniu juostos viršuje spustelėkite C arba „Slice“ įrankį, kad jį suaktyvintumėte, o „Slice“ meniu juostoje virš vaizdo spustelėkite mygtuką „Slices from Guides“.

vaizdo pjaustymas

Skiltelės automatiškai nupiešiamos jums. Tada galite pakeisti skiltelių padėtį naudodami įrankį „Skiltelių pasirinkimas“.

Redaguoti skiltelių informaciją

Sukūrus kiekvieną pjūvį, galite redaguoti informaciją apie pjūvį vienu iš dviejų būdų.

Pirmas dalykas, kurį reikia padaryti, yra spustelėti pjūvio pasirinkimo įrankį, spustelėkite norimą redaguoti pjūvį, tada spustelėkite juostą šalia meniu „Rodyti automatinius pjūvius“.

vaizdo pjaustymas

Kitas variantas yra dešiniuoju pelės mygtuku spustelėkite gabalėlį ir iššokančiajame meniu spustelėkite Redaguoti gabalo parinktis.

vaizdo pjaustymas

Abiem pasirinkimais bus parodytas dialogo langas „Skiltelių parinktys“.

vaizdo pjaustymas

Kaip matote, yra daugybė nustatymų. Galite pakeisti pjūvio pavadinimą, galite priskirti jam URL, kad spustelėjus naršyklėje, jis nukeltų jus į kitą vietą, galite nustatyti tikslą (_ blank, _self, _parent, _top), Message Tekstas, „Alt Tag“, pjūvio matmenys ir dar daugiau.

kaip pagerinti mano linijinį meną

Išsaugoti žiniatinkliui

Kai būsite patenkinti išdėstymu, eikite į Failas> Išsaugoti žiniatinkliui.

vaizdo pjaustymas

Čia galite nustatyti kiekvieno griežinėlio failo tipą ir glaudinimą arba pasirinkti numatytąjį, nurodytą dialogo lange Išsaugoti žiniatinkliui. Kai būsite patenkinti savo nustatymais, spustelėkite mygtuką Išsaugoti.

vaizdo pjaustymas

Taip pasirodys dialogo langas Išsaugotas optimizuotas kaip. Dėžutės apačioje yra keli svarbūs nustatymai.

  • Formatas : Turite tris parinktis: HTML ir vaizdai, tik vaizdai ir tik HTML.
  • Nustatymai : Jūsų parinktys yra Pasirinktinis, Fono paveikslėlis, Numatytieji nustatymai, XHTML ir Kita.
  • Skiltelės : Jūsų parinktys yra Visos, Visos vartotojo ir Pasirinktos.

Šioje pamokoje naudoju HTML ir vaizdus, ​​numatytuosius nustatymus ir visas skiltis. Kai būsite patenkinti nustatymais, pasirinkite aplanką, kuriame norite išsaugoti failus, ir spustelėkite mygtuką Išsaugoti. Tai sukuria HTML failą ir visus šešis vaizdus išsaugo aplanke.

Čia yra „Adobe Dreamweaver“ HTML failo padalinto ekrano vaizdas. Kaip matote, kodas yra paprastas ir lengvai naudojamas.

vaizdo pjaustymas

Išvada

Kaip matote, vaizdo pjaustymas yra naudingas, jei turite didelį vaizdą. Padalinus jį į sekcijas, pirmiausia bus įkeliamos vaizdo dalys, leisdamos vartotojui sužinoti daugiau. Tai naudinga vartotojams, turintiems lėtą ryšį.

Norėdami gauti daugiau informacijos, peržiūrėkite šiuos straipsnius:

Žodžiai : Natanas Segalas