Juhendatavate piltide suuruse määramine: 13 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:49

Kas teil on probleeme piltide õige suuruse saavutamisega? Kas teie piltide suurus on liiga suur ja ületab raami nagu ülaltoodud? See õpetlik katse võtab kokku selle, mida olen õppinud selle probleemi lahendamiseks.

Instructable Staff on mulle öelnud, et kõik üleslaaditud pildid on dubleeritud erinevateks kuvasuheteks. Need piltide kogumid tõmmatakse seejärel välja ja mõõdetakse erinevalt sõltuvalt sellest, millisest seadmest juhendit vaatate. Tavalises redigeerijas pole võimalik määrata, millist suurust ja suhet kuvada.

Seejärel soovitasid nad, et "Teine võimalus, mis võib toimida, on see, kui laadite üles pildid, millel on traditsioonilisem kuvasuhe. Kõik, mis on vahemikus 16: 9 kuni 4: 3, peaks ilmuma väga kenasti."

Pange tähele, et nad ütlevad, et see "võib" töötada. Siin on see, mida olen leidnud oma võitlustes, et oma pilte väärikalt kuvada. (Pange tähele, et ma kasutan oma "Rubiku kuubik lihtsaks tehtud" juhiseid, seega kõik need kuubikujutised!)

Ülaltoodud pilt on selle algne suurus (600x195), mis ei kuulu traditsiooniliste kuvasuhete vahemikku. Nagu näete, kuvab Instructables seda pilti liiga suurena suurendatud, vasak ja parem külg on ära lõigatud. Vaatame, mida saame teha, et see pilt korralikult kuvataks.

1. samm: proovime 16: 9 kuvasuhet

Nii et proovime 16: 9 (laius: kõrgus) kuvasuhet. Jätan esialgse laiuse 600 pikslit, 16: 9 tähendab, et kõrgus peab olema 338 pikslit, nii et teeme lõuendi suuruseks 600x338 ja laseme selle 600x195 pildi sinna sisse.

Nii et vaatame, kuidas see 600x338 (16: 9 kuvasuhe) pilt välja näeb. Nii huvitaval kombel sobis see pilt, kui ma selle ette pillasin ja eelvaate nägin, ideaalselt - vasak ja parem serv olid ära lõigatud! Tegin sellest lihtsalt tõestuseks ekraanipildi, vaata seda järgmiselt slaidilt.

Aga kui ma seda oma brauseris (Chrome) vaatan, näen ülaltoodud pildil, et parem ja vasak külg on jälle ära lõigatud! Nii et sellest eksperimendist nähtub, et suuruse muutmine kuvasuhtele 16: 9 ei lahenda meie probleeme!

Vahemärkusena võib öelda, et 16: 9 on „uus” ühine kuvasuhe, mida tuntakse kui „laiekraani”, samas kui 4: 3 on vana kooli täisekraan, mis oli levinud televiisori päevil. Jah, sul, millenniumil, pole ilmselt aimugi, millest ma räägin.

Samm 2: 16: 9 Pilt värskelt üles laaditud eelvaates vaadatuna

See pilt on ekraanipilt, mis näitab, et meie 16: 9 pilt näeb eelvaates täiuslik välja. Edu eks? Noh, mitte nii kiiresti - vaadake, mis juhtub, kui vaatame seda lehte tegelikult oma brauseris (Chrome)! Vasak ja parem serv kärbitakse uuesti! Minge lihtsalt tagasi, et lasta eelmisel libiseda ja veenduge selles.

Õppetund - ärge usaldage eelvaadet! See, mis eelvaates hea välja näeb, renderdatakse brauseriga vaatamisel erinevalt!

Samuti jah, minu pildi all on palju valget ruumi. Selle põhjuseks on asjaolu, et ma lasin 600x195 kujutise 600x338 lõuendile ja asetasin selle ülaossa, nii et allosas on tühi tühik. Mida me saame selle vastu teha? Noh … proovime seda hilisemal slaidil käsitleda.

Nii et vaatame edasi, kuidas saaksime selle pildi tervikuna kuvada.

Samm 3: 16: 9 kuvatakse väljalülitatud L&R külgedega

Lihtsalt teadmiseks, kui teie brauser kuvab mis tahes põhjusel neid 16: 9 pilte ideaalselt, siis ma räägin sellest. Siin on ekraanipilt sellest, kuidas näen oma 1. sammu 16: 9 kujutist pärast esmase eelvaate "sisseelamist" - pange tähele, et vasak ja parem on ära lõigatud.

Kui näete minu 1. sammu pilti ideaalselt kuvatuna, siis suurepärane. Anna mulle teada! Aga mina näen seda niimoodi. Jah, see on palju parem kui tiitellehe originaalpilt, kuid see on siiski ära lõigatud. Nii et minu jaoks vaatamata Instructablesi personali nõuannetele 16: 9 kuvasuhe seda päris ei vähenda. Liigume edasi 4: 3 kuvasuhte juurde.

4. samm: proovime 4: 3 kuvasuhet

Nii et proovime 4: 3 kuvasuhet. Jätan esialgse laiuse 600 pikslit, 4: 3 tähendab, et kõrgus peab olema 450 pikslit, nii et teeme lõuendi suuruseks 600x450 ja laseme selle 600x195 pildi sinna sisse.

Kuidas see 600x450 (kuvasuhe 4: 3) pilt välja näeb?

Jällegi, kui ma selle esimest korda sisse panen, näeb pilt suurepärane välja (välja arvatud kogu tühi ruum allosas). Vasak ja parem kuvatakse hästi. Brauseris vaadates tundub, et parem- ja vasakpoolsed kuvatakse jätkuvalt hästi.

Nagu varem märgitud, on kogu see tühi tühi koht pildi all sellepärast, et lasin oma 600x195 kujutise 600x450 lõuendile ja asetasin selle ülaossa.

Õppetund - 4: 3 kuvasuhe tundub olevat vajalik, et parem ja vasak külg ei oleks ära lõigatud. Kahjuks tähendab see, et lühikeste ja laiade piltide jaoks jääb palju vaba ruumi, sest peate need pildid 4: 3 suurusega lõuendile laskma. Jah, võite oma pildi tsentreerida nii, et üla- ja alaosas oleks võrdne tühimik, kuid olenemata sellest, et teie pildi kohal või all on palju tühja ruumi, kuid minu teada on see kompromiss peate sisestama käsud Instructables, et teie pildid oleksid terved.

5. samm: 4: 3 pildikeskusega

Siin on sama 600x195 kujutis, mis on langetatud 600x450 lõuendile, kuid on tsentreeritud nii, et üla- ja alaosas on võrdne tühi tühik. Paistab natuke parem, tekst ei tundu pildist nii kaugel olevat.

6. samm: 4: 3, pildi allosas

Ja lõpuks, see sama pilt langes sisse ja liikus põhja. Nüüd on pildi peal palju tühja tühikut. Pilt on nüüd tiitliribast tõesti eraldatud, kuid see on tekstile lähemal. Need on teie kompromissid ja saadud õppetunnid:

• 4: 3 näib olevat kuvasuhe, mida peate kasutama piltide terviklikuks kuvamiseks Instructablesis.
• ärge usaldage eelvaadet - see võib teie pilti ideaalselt näidata, kuid osad võivad tegelikus brauseris kärpida

Samm: mis on minimaalne laius?

Nüüd vaatame, milline peaks olema minimaalne laius. Kujutise suurus on 382x206, peaaegu 2: 1, see tundub tõesti tohutu, kas pole? Ilmselgelt on Instructables pilti suurendanud, et see sobiks mõnele laiusele, ilmselt 640 pikslile, ma pole kindel.

Kuid see sobib, sest see on rohkem "kandiline" - st see pole oma kõrguse jaoks liiga lai. Oota, ma sain selle eelvaatega jälle petta! See tegelikult ei sobi - R&L pooled kärbitakse uuesti.

Tegelikult on see veider, sassi ajab mitte ainult eelvaade. Vaatasin seda tegelikult brauseris ja alguses renderdati korralikult (st R&L servi ei lõigatud ära). Kuid vaadates seda uuesti brauseri kaudu, on nüüd kujutise suurus muudetud ja R&L servad kärbitud. Kummaline.

Nii et proovime pilti väiksemaks muuta. Vähendame pilti 200x108 -le, säilitades sama 2: 1 kuvasuhte.

8. samm: pildi kahandamine, kuid kuvasuhte säilitamine

Seega muudan selle pildi suuruseks 200x108, säilitades sama 2: 1 kuvasuhte.

Nüüd tundub see esialgu sobivat (eraldusvõime (pildikvaliteet) on oluliselt halvenenud!), Kuid muidugi vaatate seda tõenäoliselt ja see ei sobi üldse ja näeb välja täpselt nagu originaalpilt, välja arvatud originaalil parem resolutsioon. Jällegi laiendab Instructables pilti, et see sobiks mõnele laiusele, nii et see väiksem (200x108) pilt näeb välja nii kohutav, palju hullem kui originaal 382x206.

Ma ütlen "ilmselt", sest mul pole tõesti aimugi, kuidas Instructables neid pilte teie brauseris kuvab. Mis tahes põhjusel, kui värskendan vahemälu ja vaatan selle Instructable'i üle, ei tundu minu pildisuurused järjepidevad, nii et ma tõesti ei tea, mida Instructables teeb, välja arvatud see, et see võib olla ebajärjekindel. Seega on selle juhendi eesmärk - välja mõelda, kuidas pilte suurust muuta, et neid vähemalt mõnevõrra järjepidevalt kuvataks!

Samm: tõestus, et pildid esitatakse alguses korralikult

Siin on see, mida ma nägin kohe pärast pildi üleslaadimist - see sobib! (Pange tähele, et pidin ülaltoodud ekraanipildi sobitama 1600x1200 kujutisele (st suhtega 4: 3), et Instructables saaks kuvada kogu ekraanipildi!)

Aga muidugi teate, kui vaatate seda pilti, mida paar nüüd tagasi libiseb, see ei sobi enam. Vaatame, milline peab olema minimaalne laius, et see sobiks.

10. toiming: proovige 382x287 (suhe 4: 3)

Säilitasin 382 laiuse ja kukutasin algse 382x206 pildi 382x287 lõuendile, et muuta see 4: 3 kuvasuhtega, sest oleme varem avastanud, et Instructable vajab pilti, mis sobiks selle 4: 3 suhtega, et seda tervikuna kuvada.

Nii et nüüd on all palju tühja tühikut. See sobib ilma, et midagi oleks ära lõigatud, kuid jällegi on seda laiendatud, et täita teatud laius, nii et pilt pole terav. Proovime leida, milline on see täiuslik juhendatav laius.

11. samm: pildi laiendamine 300x206 -lt 600x206 -le, et näha, kas see kuvab paremini

Lasin algse 382x206 (2: 1) pildi 600x206 (3: 1) lõuendile lihtsalt selleks, et näha, kas selle laiendamine 600 pikslini paneb Instructables kogu pildi kuvama. Jällegi, algul läks, aga nagu näha, siis praegu mitte.

See on tõesti veider asi - iga kord, kui pilti esmakordselt sisse lasete, tundub, et Instructables kuvab selle pildi õigesti, olenemata pildi suurusest või kuvasuhtest. Seekord logisin isegi Instructablesist välja ja sulgesin selle vahekaardi ning vaatasin selle Instructable'i nii -öelda uuesti üle, et kontrollida, kas pilt kuvatakse ikka korralikult. Tavaliselt piisab sellest, et Instructable saaks oma asja ajada ja hakata muutma 4: 3 kuvasuhtega piltide suurust ning kuvada neid vasakul ja paremal küljel.

Minu üllatuseks jäi paar esimest korda seda juhendatavat "värsket" uuesti vaatama, see pilt jäi küll tervikuna välja, kuid kahjuks, pärast seda, kui läksin midagi muud tegema ja jõudsin võib -olla tund aega hiljem, hakkas see pilt ilmuma suurendatud L&R külgedega kärbitud uuesti, nagu näete ülal.

Miks või kuidas see juhtub? Mul pole õrna aimugi. Ma ei kujuta ette, miks peaks pärast pildi üleslaadimist mõnda aega ootama, et Instructables seda teisiti renderdaks, kuid see on nii. Tõestuseks näitan oma ekraanipilti ülaltoodud pildist, mis kuvatakse ideaalselt esimese oi, 10-15 minuti jooksul pärast järgmise slaidi üleslaadimist.

12. samm: tõestus selle kohta, et kujutised kuvatakse pärast üleslaadimist esialgu korralikult

Siin on ekraanipilt, mis näitab 600x206 kujutist tervikuna kohe pärast üleslaadimist. See on eelmise slaidi ekraanipilt. Minge tagasi eelmisele slaidile ja näete, kuidas pilt on nüüd üles tõstetud!

Pange tähele, et minu ekraanipildi suurus oli tegelikult 1563 x 766, kuid nagu ma selle juhendi alguses oma katsetest õppisin, teadsin ma, et see ei sobi 4: 3 kuvasuhtega (1563 x 766 on ligikaudu 4: 2). just laadis selle ekraanipildi algses suuruses Instructable kärbiks servad. Nii et ma lasin selle pildi 4: 3 lõuendile, nii et sellepärast on minu ekraanipildi all palju tühja ruumi.

Pange tähele, et ekraanipilt tehti ka enne, kui muutsin 11. sammu pealkirja ja lõpetasin kogu selle teksti sisestamise juhuks, kui te seda ei tea!

Õppetund - üleslaaditud pildi vaatamine brauseris kohe pärast üleslaadimist ei näita ilmtingimata seda, kuidas seda tulevikus kuvatakse. Mis tahes põhjusel näib peaaegu iga suuruse ja/või kuvasuhtega pilt ilusti kohe pärast üleslaadimist ja isegi umbes 10-15 minutit pärast üleslaadimist ja isegi pärast seda, kui logite Instructablesist välja ja vaatate seda värskelt uuelt brauseri seansilt jne.

Kuid oodake umbes tund või rohkem ja asjad muutuvad! Kui teie pilt ei sobi 4: 3 kuvasuhtega, reguleeritakse (tavaliselt suurendatakse) programmi Instructable abil, nii et servad kärbitakse.

Samm 13: Kokkuvõte - mida ma õppisin

Kokkuvõte - mida ma õppisin?

1. Pildi terviklikuks kuvamiseks on 4: 3 kuvasuhte (laius: kõrgus) hoidmine kohustuslik!

2. Kasutage originaalseid pilte, mis on suured ja kõrgeima eraldusvõimega, ja laske need 4: 3 suhtega lõuendile. Kui see on liiga suur, mõõdab Instructables selle väiksemaks ja teil on kenad teravad pildid.

3. Kui teie pilt on liiga väike (palju väiksem kui 600 pikslit), laiendab Instructable teie pilti ja muudab selle vähemalt 600 piksli laiuseks, muutes selle vähem teravaks. Ma ütlen "ish", sest ma ei tea täpselt, millist laiust Instructable kasutab, kuid tundub, et see on peaaegu 600. See on ilmselt 640, mis oli vana kooli torude monitori päevil tavaline laius.

600x450 ja 640x480 on 4: 3 kuvasuhted. Kõik vana kooli "täisekraaniga" torumonitorid olid 640x480 (laius x kõrgus).

4. Mida teha, kui teie algne pilt ei ole vähemalt 600 pikslit lai? Peaaegu kõik, mida saate teha, on kukutada see lõuendile, mis sobib 4: 3 suhtega ja kuvab teie pildi algse suuruse lähedal. Kui teie algne pilt on väike, jääb palju tühja tühikut, nii et proovige oma pilt tsentreerida või paigutada tühik pildi kohale või alla ja muuta see võimalikult hästi välja.

Minu teada on see kompromiss, mille peate Instructablesis tegema, et teie pildid oleksid terved.

Näiteks ülaltoodud pilt on lõuendi suurus 600x450, kuhu on 382x206 kujutis kukutatud ja tsentreeritud, nii et ülal ja all on võrdne tühi tühimik. Pilt kuvatakse ligikaudu oma algses suuruses, ma arvan, et Instructables võib seda laiendada 640 x 480 -le (tühine laienemine), nii et see on umbes parim, mida me selle algse pildiga teha saame.

5. ÄRGE usaldage eelvaadet ega seda, kuidas teie pilt esimestel tundidel pärast nende Instructable'i üleslaadimist välja näeb! Mingil põhjusel ei tundu piltide suurus püsivat enne paar tundi pärast nende üleslaadimist.

Iga kord, kui pilti esmakordselt sisse lasete, tundub, et Instructables kuvab selle pildi õigesti, olenemata pildi suurusest või kuvasuhtest. Pärast seda võib see mõneks ajaks isegi õigesti kuvada, kuid ärge laske end petta, sest lõpuks muudab see nende suurust ja tekitab teile probleeme, kui te ei järgi seda 4: 3 reeglit!

Loodan, et see aitab ja palun, kui leiate parema viisi või on muid vihjeid, andke mulle sellest teada!