Velikost slik po navodilih: 13 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:07

Ali imate težave pri pravilni velikosti slik? Ali so vaše slike prevelike in presegajo okvir, kot je zgornji? Ti poučni poskusi povzeti, kar sem se naučil za reševanje tega problema.

Instructable Staff mi je povedal, da so vse naložene slike podvojene v različnih razmerjih stranic. Te zbirke slik se nato izvlečejo in velikosti razlikujejo glede na to, iz katere naprave gledate navodila. V običajnem urejevalniku ni načina, kako določiti velikost in razmerje za prikaz.

Nato so predlagali: "Druga možnost, ki bi lahko delovala, je, če naložite slike, ki so bolj tradicionalnega razmerja stranic. Vse od 16: 9 do 4: 3 bi moralo biti zelo lepo prikazano."

Upoštevajte, da pravijo, da to "morda" deluje. Evo, kar sem ugotovil v svojih prizadevanjih, da bi bile moje slike dostojno prikazane. (Upoštevajte, da uporabljam slike iz moje "Rubikove kocke olajšano", zato vse te slike kocke!)

Zgornja slika je njena prvotna velikost (600 x 195), ki ni v tem obsegu tradicionalnih razmerij. Kot lahko vidite, Instructables prikazuje to sliko preveliko z odrezano levo in desno stranjo. Poglejmo, kaj lahko storimo, da se ta slika pravilno prikaže.

1. korak: Poskusimo razmerje stranic 16: 9

Poskusimo torej razmerje stranic 16: 9 (širina: višina). Ohranil bom prvotno širino 600 slikovnih pik, 16: 9 pomeni, da mora biti višina 338 slikovnih pik, zato bomo naredili platno velikosti 600x338 in vanj spustili to sliko 600x195.

Pa poglejmo, kako izgleda ta slika 600x338 (razmerje stranic 16: 9). Zanimivo je, da ko sem spustil to sliko in si jo ogledal, se je popolnoma prilegala - levi in desni rob nista bila odrezana! Posnetek zaslona sem naredil samo za dokaz, poglejte ga na naslednjem diapozitivu.

Ko pa to vidim v svojem brskalniku (Chrome), vidim to na zgornji sliki, da sta desna in leva stran spet odrezana! Iz tega poskusa se zdi, da spreminjanje velikosti na razmerje stranic 16: 9 ne bo rešilo naših težav!

Spomnimo se, da je 16: 9 "novo" skupno razmerje stranic, znano kot "širokozaslonski", medtem ko je 4: 3 starošolski "celozaslonski", ki je bil običajen v časih televizijske televizije. Ja, ti tisočletnik verjetno nimaš pojma o čem govorim.

2. korak: Slika je sveže naložena, kot je prikazano v predogledu

Ta slika je posnetek zaslona, ki prikazuje, da je naša slika 16: 9 videti popolno v predogledu. Uspeh kajne? No, ne tako hitro - poglejte, kaj se zgodi, ko si dejansko ogledamo to stran v brskalniku (Chrome)! Levi in desni rob sta spet odrezana! Vrnite se, da pustite prejšnji diapozitiv, in se prepričajte sami.

Naučena lekcija - ne zaupajte predogledu! Kar je v predogledu videti v redu, se pri dejanskem ogledu z brskalnikom upodobi drugače!

Tudi ja, pod mojo podobo je veliko praznega prostora. To je zato, ker sem sliko 600x195 spustil v platno 600x338 in jo postavil na vrh, tako da je na dnu ves tisti prazen bel prostor. Kaj lahko storimo glede tega? No … to bomo poskušali obravnavati v naslednjem diapozitivu.

Torej, poglejmo še naprej, kako lahko to sliko prikažemo v celoti.

Korak 3: 16: 9 Prikazano z odrezanimi stranicami L&R

Če želite vedeti, v primeru, da vaš brskalnik iz kakršnega koli razloga odlično prikazuje te slike 16: 9, govorim o tem. Tukaj je posnetek zaslona, kako vidim svojo sliko 16: 9 v 1. koraku, prikazano po "nastavitvi" po začetnem predogledu - opazite, da sta leva in desna odrezana.

Če vidite, da je moja slika 1. koraka prikazana odlično, no, odlično. Obvesti me! Ampak jaz tako vidim. Da, veliko boljša je od izvirne slike z naslovne strani, vendar je vseeno odrezana. Zato zame, kljub nasvetom osebja Instructables, razmerje stranic 16: 9 ne zmanjšuje povsem. Preidimo na razmerje stranic 4: 3.

4. korak: Poskusimo razmerje stranic 4: 3

Poskusimo torej z razmerjem stranic 4: 3. Ohranil bom prvotno širino 600 slikovnih pik, 4: 3 pomeni, da mora biti višina 450 slikovnih pik, zato bomo naredili platno velikosti 600x450 in vanj spustili to sliko 600x195.

Kako izgleda ta slika 600x450 (razmerje stranic 4: 3)?

Še enkrat, ko jo prvič spustim, je slika videti super (razen vsega belega prostora na dnu). Levo in desno sta prikazana v redu. Če pogledamo v brskalniku, se zdi, da sta Desni in Levi še naprej v redu.

Kot smo že omenili, je ves ta prazen prostor pod sliko zato, ker sem sliko 600x195 spustil v platno 600x450 in jo postavil zgoraj.

Naučena lekcija - zdi se, da je potrebno razmerje stranic 4: 3, da desna in leva stran nista odrezani. Na žalost to pomeni, da bo za kratke in široke slike veliko praznega prostora, ker jih boste morali spustiti v platno velikosti 4: 3. Ja, sliko bi lahko centrirali tako, da je na vrhu in na dnu enak bel prostor, vendar ne glede na to, bo nad ali pod vašo sliko veliko belega prostora, a kolikor mi je znano, je to kompromis, ki ga boste morate narediti v Instructables, tako da bodo vaše slike prikazane nedotaknjene.

5. korak: 4: 3 s sliko v središču

Tu je ista slika 600x195, ki je padla na platno 600x450, vendar centrirana tako, da je na vrhu in na dnu enak prazen bel prostor. Izgleda nekoliko bolje, besedilo se ne zdi tako ločeno od slike.

Korak 6: 4: 3 s sliko na dnu

In nazadnje, tukaj je padla ista slika in se premaknila na dno. Zdaj je na vrhu slike veliko praznega praznega prostora. Slika je zdaj resnično ločena od naslovne vrstice, vendar je bližje besedilu. To so torej vaši kompromisi in naučene lekcije:

• Zdi se, da je razmerje stranic 4: 3, ki ga morate uporabiti, da se slike v celoti prikažejo v Instructables.
• ne zaupajte predogledu - morda bo odlično prikazal vašo sliko, vendar so lahko deli okrnjeni v dejanskem brskalniku

7. korak: Kakšna je najmanjša širina?

Zdaj pa poglejmo, kakšna naj bo najmanjša širina. Prikazana slika je velikosti 382x206, blizu 2: 1, zdi se res velika, kajne? Očitno je Instructables sliko povečal tako, da ustreza določeni širini, verjetno 640 slikovnih pik, nisem prepričan.

Ampak se prilega, ker je bolj "kvadraten" - torej ni preširok za svojo višino. Oh počakaj, spet me je prelisičil tisti predogled! Pravzaprav ne ustreza - strani R&L so spet okrnjene.

Pravzaprav je to čudno, ni samo predogled tisti, ki je pokvarjen. Pravzaprav sem ga pogledal v brskalniku in sprva se je pravilno upodobil (tj. Robovi R&L niso bili odrezani). Toda če znova pogledamo skozi brskalnik, se slika zdaj spreminja in roti R&L so skrajšani. Čuden.

Poskusimo torej zmanjšati sliko. Sliko bomo skrčili na 200x108 in ohranili enako razmerje stranic 2: 1.

8. korak: krčenje slike, vendar ohranjanje razmerja stranic

Tako sem spremenil velikost slike na 200x108 in ohranil enako razmerje stranic 2: 1.

Zdaj se spet zdi, da se sprva prilega (z ločljivostjo (kakovost slike) se je močno poslabšalo!), Seveda pa verjetno gledate nanjo in sploh ne ustreza ter je videti popolnoma tako kot izvirna slika, razen v izvirniku boljša ločljivost. Spet Instructables razširja sliko, tako da ustreza določeni širini, zato je ta manjša (200x108) slika videti tako grozno, veliko slabše od prvotnih 382x206.

Pravim "verjetno", ker res ne vem, kako Instructables prikazuje te slike v vašem brskalniku. Če iz kakršnega koli razloga osvežim predpomnilnik in pregledam ta Instructable, se mi zdi, da velikosti slik ne ostanejo dosledne, zato res ne vem, kaj počne Instructables, razen da je lahko nedosledno. Tako je cilj tega navodila - ugotoviti, kako velikosti slik, tako da so prikazane vsaj nekoliko dosledno!

9. korak: Dokaz, da se slike najprej pravilno upodobijo

Evo, kar sem najprej videl takoj po nalaganju slike - ustreza! (Upoštevajte, da sem moral zgornji posnetek zaslona vstaviti v sliko 1600x1200 (tj. Razmerje 4: 3), da je Instructables prikazal celoten posnetek zaslona!)

Seveda pa veste, da ko pogledate to sliko, zdaj par zdrsne nazaj, ni več primerna. Poglejmo, kakšna mora biti najmanjša širina, da se prilega.

10. korak: Poskusite 382x287 (razmerje 4: 3)

Ohranil sem širino 382 in spustil izvirno sliko 382x206 na platno 382x287, da bi bilo razmerje stranic 4: 3, ker smo že odkrili, da Instructable potrebuje sliko, ki ustreza temu razmerju 4: 3, da jo prikaže v celoti.

Tako je zdaj spodaj veliko praznega praznega prostora. Prilega se brez nič odrezanega, vendar je bil spet razširjen, da zapolni določeno širino, zato slika ni ostra. Poskusimo ugotoviti, kakšna je ta popolna širina po navodilih.

11. korak: Razširite sliko iz 300x206 na 600x206 in preverite, ali se bolje prikazuje

Izvirno sliko 382x206 (2: 1) sem spustil v platno 600x206 (3: 1) samo zato, da vidim, če bi s širitvijo na 600 slikovnih pik Instructables prikazali celotno sliko. Spet se je sprva zgodilo, a kot vidite, zdaj ne.

To je res čudno - vsakič, ko prvič spustite sliko, se zdi, da bodo Instructables pravilno prikazali to sliko, ne glede na velikost ali razmerje stranic te slike. Tokrat sem se celo odjavila iz Instructables in zaprla ta zavihek, nato pa sem tako rekoč obiskala ta Instructable "svež", da preverim, ali je slika še vedno pravilno prikazana. Običajno je to dovolj, da lahko Instructable naredi svoje in začne spreminjati velikost slik, ki niso v razmerju 4: 3, ter jih prikazati z odrezano levo in desno stranjo.

Na moje presenečenje je prva slika, ki sem jo ponovno naročil, "sveža", da je ta slika ostala prikazana v celoti, a žal, potem ko sem odšel, da bi naredil kaj drugega in prišel kakšno uro kasneje, se je ta slika začela prikazovati povečano z L & R stranicami, spet odrezanimi, kot vidite zgoraj.

Zakaj ali kako se to zgodi? Nimam pojma. Nimam pojma, zakaj bi po čakanju nekaj časa po nalaganju slike Instructables to upodobil drugače, vendar se. Kot dokaz bom prikazal posnetek zaslona zgornje slike, ki se bo odlično prikazal v prvem oh, 10-15 minut po tem, ko sem jo naložil na naslednji diapozitiv.

12. korak: Dokaz, da se slike najprej naložijo pravilno po nalaganju

Tukaj je posnetek zaslona, ki prikazuje sliko 600x206, ki se prikaže v celoti takoj po nalaganju. To je posnetek zaslona prejšnjega diapozitiva. Vrnite se na prejšnji diapozitiv in videli boste, kako je slika zdaj zložena!

Upoštevajte, da je bil moj posnetek zaslona dejansko velikosti 1563x766, vendar sem, kot sem izvedel iz svojih poskusov na začetku tega navodila, vedel, ker ne ustreza temu razmerju stranic 4: 3 (1563x766 je približno 4: 2), zato, če bi pravkar naložil tisti posnetek zaslona v prvotni velikosti. Instructable bi skrajšal robove. Tako sem to sliko spustil v platno 4: 3, zato je pod mojim posnetkom zaslona veliko praznega belega prostora.

Upoštevajte, da je bil posnetek zaslona posnet tudi, preden sem spremenil naslov 11. koraka in dokončal vnos vsega tega besedila, če se sprašujete o tem!

Naučena lekcija - ogled naložene slike v brskalniku takoj po nalaganju ne bo nujno pokazal, kako bo prikazana v prihodnosti. Iz kakršnega koli razloga se zdi, da se skoraj vsaka velikost in/ali razmerje stranic lepo prikažeta takoj po nalaganju in celo približno 10-15 minut po nalaganju ter tudi potem, ko se odjavite iz Instructables in si jo ogledate sveže iz nove seje brskalnika itd..

Toda počakajte približno eno uro ali več, in stvari se spremenijo! Če slika ne ustreza razmerju stranic 4: 3, jo bo Instructable prilagodil (običajno poveča), tako da bodo robovi odrezani.

13. korak: Zaključek - kaj sem se naučil

Torej bistvo - kaj sem se naučil?

1. Če želite sliko prikazati v celoti, morate ohraniti razmerje stranic 4: 3 (širina: višina)!

2. Uporabite velike izvirne slike z najvišjo ločljivostjo in jih spustite v platno z razmerjem 4: 3. Če je prevelik, ga bodo Instructables zmanjšali in imeli boste lepe ostre slike.

3. Če je vaša slika premajhna (veliko manj kot 600 slikovnih pik v širino), lahko Instructable razširi vašo sliko in jo naredi široko vsaj 600 slikovnih pik, s čimer postane manj ostra. Pravim "ish", ker v resnici ne vem točno, kakšno širino uporablja Instructable, vendar se mi zdi blizu 600. Verjetno je 640, kar je bila običajna širina v časih monitorjev stare šole.

Razmerja stranic 600x450 in 640x480 sta 4: 3. Vsi stari šolski celoviti monitorji s cevmi so bili 640 x 480 (širina x višina).

4. Kaj storiti, če izvirna slika ni široka najmanj 600 slikovnih pik? Približno vse, kar lahko storite, je, da ga spustite na platno, ki ustreza razmerju 4: 3, ki prikazuje vašo sliko blizu prvotne velikosti. Če je vaša izvirna slika majhna, bo veliko praznega belega prostora, zato poskusite sliko postaviti na sredino ali postaviti beli prostor nad ali pod sliko in jo narediti čim boljšo.

Kolikor vem, je to kompromis, ki ga boste morali narediti v Instructables, da bodo vaše slike prikazane nedotaknjene.

Zgornja slika je na primer velikost platna 600x450 s sliko 382x206, ki je padla vanj in centrirana, tako da imamo zgoraj in spodaj enak prazen bel prostor. Slika je prikazana približno v prvotni velikosti, mislim, da jo Instructables lahko razširijo na 640x480 (zanemarljivo razširitev), tako da je to največ, kar lahko naredimo s to izvirno sliko.

5. Ne zaupajte predogledu in ne zaupajte videzu vaše slike prvih nekaj ur po nalaganju v Instructable! Iz kakršnega koli razloga se zdi, da velikosti slik ne ostanejo enake šele nekaj ur po tem, ko jih naložite.

Vsakič, ko prvič spustite sliko, se zdi, da bodo Instructables pravilno prikazali to sliko, ne glede na velikost ali razmerje stranic te slike. Morda se bo za nekaj časa celo prikazoval pravilno, vendar NE PREBUŠITE, ker jim bo sčasoma spremenil velikost in vam povzročil težave, razen če upoštevate pravilo 4: 3!

Upam, da to pomaga in prosim, če najdete boljši način ali imate kakšne druge namige, mi to sporočite!