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.
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ė.
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“.
Jei tikslumas yra svarbus, naudokite gaires, kad atvaizduotumėte svarbias paveikslėlio dalis.
„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“.
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“.
Kitas variantas yra dešiniuoju pelės mygtuku spustelėkite gabalėlį ir iššokančiajame meniu spustelėkite Redaguoti gabalo parinktis.
Abiem pasirinkimais bus parodytas dialogo langas „Skiltelių parinktys“.
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.
Išsaugoti žiniatinkliui
Kai būsite patenkinti išdėstymu, eikite į Failas> Išsaugoti žiniatinkliui.
Č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.
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.
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
