Instrukcinių vaizdų dydžio nustatymas: 13 žingsnių

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:48

Ar turite problemų, kad vaizdai būtų tinkamo dydžio? Ar jūsų vaizdai yra per dideli ir perpildo rėmelį, kaip nurodyta aukščiau? Šis pamokomas bandymas apibendrinti tai, ką išmokau spręsti šią problemą.

„Instructable Staff“man sakė, kad visi įkelti vaizdai yra dubliuojami į įvairius formato koeficientus. Tada šis vaizdų telkinys ištraukiamas ir jo dydis skiriasi, atsižvelgiant į tai, iš kokio įrenginio žiūrite nurodymus. Įprastame redaktoriuje nėra galimybės nurodyti, kokio dydžio ir santykio rodyti.

Tada jie pasiūlė, kad "Kita galimybė, kuri gali pasiteisinti, yra įkelti vaizdus, kurių proporcijos yra labiau tradicinės. Viskas, kas yra nuo 16: 9 iki 4: 3, turėtų būti rodoma labai gražiai."

Atkreipkite dėmesį, kad jie sako, kad tai „gali“veikti. Štai ką radau kovodama, kad mano vaizdai būtų rodomi padoriai. (Atkreipkite dėmesį, kad naudoju vaizdus iš savo „Rubiko kubo palengvinimo“, todėl visi šie kubo vaizdai!)

Aukščiau pateiktas vaizdas yra jo pradinis dydis (600x195), kuris nepatenka į tą tradicinių formato koeficientų diapazoną. Kaip matote, „Instructables“šį vaizdą rodo per daug padidintą, kai kairė ir dešinė pusės yra nukirptos. Pažiūrėkime, ką galime padaryti, kad šis vaizdas būtų tinkamai rodomas.

1 žingsnis: Pabandykime 16: 9 formato koeficientą

Taigi pabandykime 16: 9 (pločio: aukščio) kraštinių santykį. Aš išlaikysiu pradinį 600 pikselių plotį, 16: 9 reiškia, kad aukštis turi būti 338 pikselių, todėl mes padarysime 600x338 drobės dydį ir įmesime tą 600x195 vaizdą.

Taigi pažiūrėkime, kaip atrodo šis 600x338 (16: 9 kraštinių santykis) vaizdas. Taigi įdomu tai, kad kai numečiau šį vaizdą ir peržiūrėjau, jis puikiai tiko - kairysis ir dešinysis kraštai nebuvo nukirpti! Aš padariau jo ekrano kopiją tik kaip įrodymą, žiūrėkite kitoje skaidrėje.

Bet kai žiūriu į tai savo naršyklėje („Chrome“), tai, ką matau aukščiau esančiame paveikslėlyje, yra tai, kad dešinė ir kairė pusės vėl nukirsta! Taigi iš šio eksperimento atrodo, kad dydžio keitimas iki 16: 9 formato santykio neišspręs mūsų problemų!

Kaip šalutinė pastaba, 16: 9 yra „naujas“bendras formato koeficientas, žinomas kaip „plačiaekranis“, o 4: 3 yra senosios mokyklos „visas ekranas“, kuris buvo įprastas televizijos televizijos laikais. Taip, tu tūkstantmečio tikriausiai neįsivaizduoji, apie ką aš kalbu.

2 veiksmas: 16: 9 Vaizdas ką tik įkeltas kaip peržiūrėtas

Ši nuotrauka yra ekrano užfiksavimas, rodantis, kad mūsų 16: 9 vaizdas puikiai atrodo peržiūroje. Sėkmė tiesa? Na, ne taip greitai - pažiūrėkite, kas nutinka, kai iš tikrųjų peržiūrime šį puslapį savo naršyklėje („Chrome“)! Kairysis ir dešinysis kraštai vėl sutrumpinami! Tiesiog grįžkite, kad leistumėte ankstesnę skaidrę ir pamatytumėte patys.

Pamoka - nepasitikėkite peržiūra! Tai, kas gerai atrodo peržiūroje, tikrinant naršyklėje pateikiama kitaip!

Be to, taip, po mano atvaizdu yra daug baltos erdvės. Taip yra todėl, kad numečiau 600x195 dydžio vaizdą į 600x338 drobę ir padėjau jį viršuje, taigi apačioje yra tuščia tuščia erdvė. Ką galime padaryti? Na … mes pabandysime tai išspręsti vėliau.

Taigi toliau pažvelkime, kaip šį vaizdą parodyti visą.

3 veiksmas: 16: 9 rodomas išjungus L&R šonus

Įdomu, jei dėl kokių nors priežasčių jūsų naršyklė puikiai parodo šiuos 16: 9 vaizdus, aš apie tai kalbu. Štai ekrano kopija, kaip aš matau savo 16: 9 vaizdą 1 veiksme, rodomą po „įsitaisymo“po pradinės peržiūros - pastebėkite, kad kairė ir dešinė yra nukirpti.

Jei matote, kad mano 1 veiksmo vaizdas rodomas puikiai, gerai. Leisk man žinoti! Bet štai kaip aš tai matau. Taip, tai daug geriau nei originalus vaizdas iš titulinio puslapio, tačiau jis vis tiek nukirptas. Taigi man, nepaisant „Instructables“personalo patarimų, 16: 9 formato koeficientas jo visai nesumažina. Pereikime prie 4: 3 formato santykio.

4 žingsnis: Pabandykime 4: 3 formato koeficientą

Taigi pabandykime 4: 3 formato koeficientą. Aš išlaikysiu pradinį 600 pikselių plotį, 4: 3 reiškia, kad aukštis turi būti 450 pikselių, todėl padarysime 600x450 drobės dydį ir įmesime tą 600x195 vaizdą.

Kaip atrodo šis 600x450 (4: 3 formato koeficientas) vaizdas?

Vėlgi, kai pirmą kartą jį numetau, vaizdas atrodo puikiai (išskyrus visą baltą erdvę apačioje). Kairė ir dešinė rodomos gerai. Pažvelgus į tai naršyklėje, atrodo, kad dešinė ir kairė ir toliau rodomos gerai.

Kaip minėta anksčiau, visa tuščia tuščia erdvė po vaizdu yra todėl, kad numečiau savo 600x195 dydžio vaizdą į 600x450 drobę ir tiesiog padėjau jį viršuje.

Pamoka - atrodo, kad reikalingas 4: 3 formato koeficientas, kad nebūtų nukirsta dešinė ir kairė pusės. Deja, tai reiškia, kad trumpi ir platūs vaizdai turės daug laisvos vietos, nes tuos vaizdus turėsite nuleisti į 4: 3 dydžio drobę. Taip, jūs galite sutelkti savo vaizdą taip, kad viršuje ir apačioje būtų vienoda balta erdvė, bet nepaisant to, virš jūsų paveikslėlio ar po juo bus daug laisvos vietos, tačiau, mano žiniomis, tai yra kompromisas turite sukurti „Instructables“, kad jūsų vaizdai būtų nepažeisti.

5 veiksmas: 4: 3 su vaizdu centre

Štai tas pats 600x195 dydžio vaizdas nukrito į 600x450 drobę, bet sucentruotas taip, kad viršuje ir apačioje būtų vienoda tuščia tuščia erdvė. Atrodo šiek tiek geriau, tekstas neatrodo taip toli nuo vaizdo.

6 veiksmas: 4: 3 su vaizdu apačioje

Ir galiausiai, tas pats vaizdas nukrito ir persikėlė į apačią. Dabar vaizdo viršuje yra daugybė tuščios baltos vietos. Dabar vaizdas tikrai atskirtas nuo pavadinimo juostos, tačiau jis yra arčiau teksto. Taigi tai yra jūsų kompromisai ir išmokta pamoka:

• 4: 3 yra tas kraštinių santykis, kurį turite naudoti, kad visi vaizdai būtų rodomi „Instructables“.
• nepasitikėkite peržiūra - ji gali puikiai parodyti jūsų vaizdą, tačiau dalys gali būti sutrumpintos tikroje naršyklėje

7 žingsnis: koks yra minimalus plotis?

Dabar pažiūrėkime, koks turėtų būti minimalus plotis. Rodomas vaizdas yra 382 x 206 dydžio, artimas 2: 1, atrodo tikrai didžiulis, ar ne? Akivaizdu, kad „Instructables“padidino vaizdą, kad jis atitiktų tam tikrą nustatyto pločio, tikriausiai 640 pikselių, nesu tikras.

Bet jis tinka, nes yra labiau „kvadratinis“, t. Y. Jis nėra per platus savo ūgiui. O palauk, mane vėl apgavo ta peržiūra! Tai iš tikrųjų netinka - R&L pusės vėl sutrumpinamos.

Tiesą sakant, tai keista, sujaukta ne tik peržiūra. Aš iš tikrųjų pažvelgiau į jį naršyklėje ir iš pradžių jis buvo pateiktas tinkamai (ty R&L kraštai nebuvo nukirpti). Bet dar kartą pažvelgus į jį per naršyklę, dabar vaizdas keičiamas, o R&L kraštai yra sutrumpinti. Keista.

Taigi pabandykime sumažinti vaizdą. Mes sumažinsime vaizdą iki 200x108, išlaikydami tą patį 2: 1 formato koeficientą.

8 žingsnis: sumažinkite vaizdą, bet išlaikykite vaizdo santykį

Taigi pakeičiu to vaizdo dydį iki 200x108, išlaikydamas tą patį 2: 1 kraštinių santykį.

Dabar vėl atrodo, kad jis iš pradžių tinka (kai skiriamoji geba (vaizdo kokybė) labai pablogėjo!), Bet, žinoma, jūs tikriausiai žiūrite į jį ir jis visai netinka, ir atrodo lygiai taip pat, kaip originalus vaizdas, išskyrus originalą geresnė raiška. Vėlgi, „Instructables“išplečia vaizdą, kad jis atitiktų tam tikrą nustatytą plotį, todėl šis mažesnis (200 x 108) vaizdas atrodo toks siaubingas, daug blogesnis nei originalus 382 x 206.

Sakau „tikriausiai“, nes tikrai neįsivaizduoju, kaip „Instructables“pateikia šiuos vaizdus jūsų naršyklėje. Dėl kokių nors priežasčių, jei atnaujinu talpyklą ir peržiūriu šį „Instructable“, atrodo, kad mano vaizdo dydžiai nesikeičia, todėl tikrai nežinau, ką daro „Instructables“, išskyrus tai, kad jis gali būti nenuoseklus. Taigi šios instrukcijos tikslas - išsiaiškinti, kaip padidinti vaizdų dydį, kad jie būtų rodomi bent kiek nuosekliai!

9 žingsnis: įrodymas, kad vaizdai iš pradžių pateikiami tinkamai

Štai ką iš pradžių pamačiau iškart įkėlus vaizdą - tinka! (Atminkite, kad aukščiau pateiktą ekrano kopiją turėjau sutalpinti į 1600x1200 vaizdą (t. Y. 4: 3 santykį), kad „Instructables“rodytų visą ekrano kopiją!)

Bet, žinoma, žinai, kai pažvelgi į tą vaizdą, kai pora dabar atslenka atgal, tai nebetinka. Pažiūrėkime, koks turi būti minimalus plotis, kad jis tilptų.

10 veiksmas: pabandykite 382 x 287 (santykis 4: 3)

Aš išlaikiau 382 plotį ir numečiau originalų 382 x 206 vaizdą į 382 x 287 drobę, kad jis taptų 4: 3 formato santykiu, nes anksčiau atradome, kad „Instructable“reikalingas vaizdas, kad jis atitiktų tą 4: 3 santykį, kad jis būtų rodomas visas.

Taigi dabar apačioje yra daug tuščios baltos vietos. Jis tinka, kai nieko nenupjauta, tačiau vėl išplėstas, kad užpildytų tam tikrą nustatytą plotį, todėl vaizdas nėra ryškus. Pabandykime išsiaiškinti, koks yra šis puikus instrukcinis plotis.

11 veiksmas: padidinkite vaizdą nuo 300 x 206 iki 600 x 206, kad pamatytumėte, ar jis rodomas geriau

Aš numečiau originalų 382 x 206 (2: 1) vaizdą į 600 x 206 (3: 1) drobę, tik norėdamas pamatyti, ar išplėtus jį iki 600 pikselių, „Instructables“parodys visą vaizdą. Vėlgi, iš pradžių tai buvo, bet kaip matote, dabar ne.

Tai išties keistas dalykas - kiekvieną kartą, kai pirmą kartą įmetate vaizdą, atrodo, kad „Instructables“tą vaizdą parodys teisingai, nesvarbu, kokio dydžio ar formato koeficiento tas vaizdas bus. Šį kartą aš net atsijungiau nuo „Instructables“ir uždariau tą skirtuką, o po to dar kartą peržiūrėjau šį „Instructable“„naują“, kad galėčiau patikrinti, ar vaizdas vis tiek rodomas tinkamai. Paprastai to pakanka, kad „Instructable“galėtų atlikti savo darbą ir pradėti keisti vaizdų, kurių formato koeficientas nėra 4: 3, dydį ir rodyti juos nukirsta kairė ir dešinė pusės.

Mano nuostabai, pirmuosius porą kartų, kai peržiūrėjau šį „instrukcinį“„šviežią“, šis vaizdas liko rodomas visas, bet, deja, po to, kai nuėjau nuveikti kažko kito ir atvykau gal po valandos ar vėliau, šis vaizdas buvo rodomas padidintas, kai L&R pusės vėl sutrumpintos, kaip matote aukščiau.

Kodėl ar kaip tai atsitinka? Neturiu supratimo. Neįsivaizduoju, kodėl po tam tikro laiko po vaizdo įkėlimo „Instructables“turėtų jį atvaizduoti kitaip, tačiau taip yra. Kaip įrodymą, aš parodysiu, kaip aukščiau pateiktas vaizdas puikiai atvaizduojamas per pirmąsias 10–15 minučių po to, kai jį įkėliau kitoje skaidrėje.

12 veiksmas: įrodymas, kad įkėlus vaizdai iš pradžių rodomi tinkamai

Štai ekrano užfiksavimas, rodantis, kad 600x206 vaizdas rodomas visas iškart po įkėlimo. Tai yra ankstesnės skaidrės ekrano kopija. Grįžkite į ankstesnę skaidrę ir pamatysite, kaip dabar pakeltas vaizdas!

Atminkite, kad mano ekrano užfiksavimo dydis iš tikrųjų buvo 1563 x 766, tačiau, kaip sužinojau iš savo eksperimentų šios instrukcijos pradžioje, žinojau, nes jis netinka šiam 4: 3 formato koeficientui (1563 x 766 yra maždaug 4: 2), taigi, jei ką tik įkėliau tą ekrano kopiją pradinio dydžio „Instructable“sutrumpintų kraštus. Taigi nuleidau tą vaizdą į 4: 3 drobę, todėl po mano ekrano kopija yra daug tuščios baltos vietos.

Atminkite, kad ekrano kopija taip pat buvo padaryta prieš pakeičiant 11 veiksmo pavadinimą ir baigiant įvesti visą šį tekstą, jei jums tai įdomu!

Pamoka - įkelto vaizdo peržiūra naršyklėje iškart po įkėlimo nebūtinai parodys, kaip jis bus rodomas ateityje. Dėl kokių nors priežasčių atrodo, kad beveik bet kokio dydžio ir (arba) formato vaizdo vaizdas iškart po įkėlimo bus rodomas gražiai ir net maždaug 10–15 minučių po įkėlimo ir net tada, kai atsijungsite nuo „Instructables“ir peržiūrėsite jį naujai iš naujos naršyklės sesijos ir pan..

Bet palaukite apie valandą ar daugiau, ir viskas pasikeis! Jei jūsų vaizdas neatitinka 4: 3 formato santykio, jis bus koreguojamas (paprastai padidinamas) naudojant „Instructable“, kad kraštai būtų sutrumpinti.

13 žingsnis: Esmė - ko aš išmokau

Taigi esmė - ko aš išmokau?

1. Norint rodyti visą vaizdą, būtina išlaikyti 4: 3 formato santykį (plotis: aukštis)!

2. Naudokite didelius originalius, didžiausios skiriamosios gebos vaizdus ir nuleiskite juos į 4: 3 santykio drobę. Jei „Instructables“yra per didelis, jį sumažinsite ir turėsite gražių ryškių vaizdų.

3. Jei jūsų vaizdas yra per mažas (daug mažesnis nei 600 pikselių pločio) „Instructable“išplės jūsų vaizdą ir padarys jį bent 600 pikselių pločio, todėl jis bus ne toks ryškus. Sakau „ish“, nes nelabai tiksliai žinau, kokį plotį naudoja „Instructable“, bet atrodo, kad jis yra artimas 600. Tikriausiai tai yra 640, kuris buvo įprastas plotis dar senosios mokyklos vamzdžių monitorių laikais.

600x450 ir 640x480 yra 4: 3 formato koeficientai. Visi senosios mokyklos „viso ekrano“vamzdžių monitoriai buvo 640x480 (plotis x aukštis).

4. Ką daryti, jei jūsų pradinis vaizdas yra ne mažesnis kaip 600 pikselių pločio? Viskas, ką galite padaryti, yra nuleisti jį į drobę, atitinkančią 4: 3 santykį, rodantį jūsų vaizdą artimą pradiniam dydžiui. Jei jūsų pradinis vaizdas yra mažas, bus daug tuščios baltos vietos, todėl pabandykite centruoti vaizdą arba įdėti baltą erdvę virš arba po vaizdu ir padaryti jį kuo geresnį.

Mano žiniomis, tai yra kompromisas, kurį turėsite padaryti „Instructables“, kad jūsų vaizdai būtų nepažeisti.

Pavyzdžiui, aukščiau pateiktas vaizdas yra 600x450 drobės dydžio, į kurį įmetamas 382 x 206 vaizdas ir sucentruotas, todėl viršuje ir apačioje yra vienoda tuščia tuščia erdvė. Vaizdas rodomas maždaug pradinio dydžio, manau, kad „Instructables“gali jį išplėsti iki 640x480 (nereikšmingas išplėtimas), taigi tai yra geriausia, ką galime padaryti su tuo originaliu vaizdu.

5. Nepasitikėkite peržiūra ir nepasitikėkite tuo, kaip jūsų vaizdas atrodo pirmąsias kelias valandas po to, kai įkeliate juos į „Instructable“! Dėl kokių nors priežasčių atrodo, kad vaizdo dydžiai nesikeičia tik po poros valandų nuo jų įkėlimo.

Kiekvieną kartą, kai pirmą kartą įmetate vaizdą, atrodo, kad „Instructables“tą vaizdą rodys teisingai, nesvarbu, koks būtų to vaizdo dydis ar kraštinių santykis. Vėliau jis netgi gali būti rodomas teisingai, tačiau NEGALIMA APKLAUSTI, nes galų gale jis pakeis jų dydį ir sukels problemų, nebent laikysitės šios 4: 3 taisyklės!

Tikimės, kad tai padės, ir prašau, jei radote geresnį būdą ar turite kitų patarimų, praneškite man!