Përmasimi i imazheve të udhëzueshme: 13 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:27

Keni probleme me marrjen e madhësisë së imazheve në mënyrë korrekte? Madhësia e imazheve tuaja është shumë e madhe dhe e tejkalon kornizën si ajo e mësipërme? Kjo përpiqet të mësojë të përmbledhë atë që kam mësuar për të trajtuar këtë problem.

Më është thënë nga Instructable Staff që të gjitha imazhet e ngarkuara kopjohen në raporte të ndryshme aspektesh. Këto grup imazhesh më pas nxirren dhe madhësohen ndryshe në varësi të asaj pajisjeje nga e cila po shikoni udhëzimet. Nuk ka asnjë mënyrë për të specifikuar në redaktorin e zakonshëm se çfarë madhësie dhe raporti të shfaqet.

Ata më pas sugjeruan se "Një opsion tjetër që mund të funksionojë është nëse ngarkoni imazhe që janë me një raport aspekti më tradicional. Çdo gjë nga 16: 9 në 4: 3 duhet të shfaqet shumë bukur."

Vini re se ata thonë se kjo "mund" të funksionojë. Ja çfarë kam gjetur në përpjekjet e mia për t'i bërë imazhet e mia të shfaqen në mënyrë të denjë. (Vini re se unë jam duke përdorur imazhe nga "Kubi im i Rubikut i bërë i lehtë" udhëzues, prandaj të gjitha ato imazhe kubike!)

Imazhi i mësipërm është madhësia e tij origjinale (600x195) e cila nuk është në atë gamë të raporteve të aspektit tradicional. Siç mund ta shihni, Instructables po e shfaq këtë imazh të zmadhuar shumë të madh me anët e majta dhe të djathta të prera. Le të shohim se çfarë mund të bëjmë që ky imazh të shfaqet siç duhet.

Hapi 1: Le të Provojmë Raportin Aspekt 16: 9

Pra, le të provojmë raportin e aspektit 16: 9 (gjerësia: lartësia). Unë do të ruaj gjerësinë origjinale prej 600 piksele, 16: 9 do të thotë që lartësia duhet të jetë 338 piksele, kështu që ne do të bëjmë një madhësi kanavacë prej 600x338 dhe do të hedhim atë imazh 600x195 në të.

Pra, le të shohim se si duket kjo imazh 600x338 (raporti i aspektit 16: 9). Interestingshtë kaq interesante, kur e hodha këtë imazh dhe e shikova paraprakisht, ai përshtatet në mënyrë të përsosur - skajet e majta dhe të djathta nuk ishin prerë! Kam marrë një pamje nga ekrani vetëm për dëshmi, shikojeni në rrëshqitjen tjetër.

Por, kur e shikoj këtë në shfletuesin tim (Chrome) ajo që po shoh në imazhin e mësipërm, është se anët e djathta dhe të majta janë copëtuar përsëri! Pra, nga ky eksperiment, duket se ndryshimi i madhësisë në një raport 16: 9 nuk do të zgjidhë problemet tona!

Si një shënim anësor, 16: 9 është raporti i ri "i ri" i aspektit i njohur si "ekran i gjerë" ndërsa 4: 3 është "ekrani i plotë" i shkollës së vjetër që ishte i zakonshëm në ditët e televizorit me tub. Po, ju mijëvjeçarë ndoshta nuk e keni idenë për çfarë po flas.

Hapi 2: 16: 9 Imazhi i Ngarkuar Sapo Siç Shikohet në Preview

Kjo fotografi është kapja e ekranit që tregon se imazhi ynë 16: 9 duket i përsosur në Pamjen Paraprake. Suksesi apo jo? Epo, jo aq shpejt - shikoni se çfarë ndodh kur ne në të vërtetë e shikojmë këtë faqe në shfletuesin tonë (Chrome)! Skajet e majta dhe të djathta shkurtohen përsëri! Thjesht kthehuni për të lejuar që të rrëshqasë më parë dhe shihni vetë.

Mësimi i mësuar - mos i besoni Pamjes Paraprake! Ajo që duket mirë në Pamjen Paraprake jepet ndryshe në shikimin aktual me një shfletues!

Gjithashtu, po, ka shumë hapësirë të bardhë nën imazhin tim. Kjo sepse hodha një imazh 600x195 në një kanavacë 600x338 dhe e vendosa në krye, kështu që ka gjithë atë hapësirë të bardhë bosh në fund. Çfarë mund të bëjmë për këtë? Epo … ne do të përpiqemi ta trajtojmë atë në një rrëshqitje të mëvonshme.

Pra, le të vazhdojmë të shohim se si mund ta bëjmë këtë imazh të shfaqet në tërësi.

Hapi 3: 16: 9 Shfaqet Me Anët L&R të Shkëputura

Vetëm për regjistrim, në rast se për çfarëdo arsye shfletuesi juaj po shfaq këto imazhe 16: 9 në mënyrë perfekte, kjo është ajo për të cilën po flas. Këtu keni një pamje të ekranit se si e shoh imazhin tim 16: 9 në Hapin 1 të shfaqur pas "vendosjes" pas vrojtimit fillestar - vini re se e majta dhe e djathta janë ndërprerë.

Nëse e shihni imazhin tim të Hapit 1 të shfaqur në mënyrë perfekte, mirë, shkëlqyeshëm. Me njofto! Por kështu e shoh unë. Po, është shumë më mirë sesa imazhi origjinal nga faqja e titullit, por është akoma i prerë. Pra, për mua, pavarësisht nga këshillat e stafit të Instructables, raporti i aspektit 16: 9 nuk e shkurton atë. Le të kalojmë në raportin e aspektit 4: 3.

Hapi 4: Le të Provojmë Raportin Aspekt 4: 3

Pra, le të provojmë raportin e aspektit 4: 3. Unë do të ruaj gjerësinë origjinale prej 600 piksele, 4: 3 do të thotë që lartësia duhet të jetë 450 piksele, kështu që ne do të bëjmë një madhësi kanavacë prej 600x450 dhe do të hedhim atë imazh 600x195 në të.

Si duket ky imazh 600x450 (raporti i aspektit 4: 3)?

Përsëri, kur e fut atë për herë të parë, imazhi duket i mrekullueshëm (përveç gjithë hapësirës së bardhë në fund). Majtas dhe Djathtas shfaqen mirë. Duke e parë atë në një shfletues, duket se Djathtas dhe Majtas duket se vazhdojnë të shfaqen mirë.

Siç u përmend më parë, e gjithë ajo hapësirë e bardhë bosh nën imazhin është sepse e hodha imazhin tim 600x195 në një kanavacë 600x450 dhe sapo e vendosa në krye.

Mësimi i mësuar - Raporti i aspektit 4: 3 duket se kërkohet në mënyrë që anët e djathtë dhe të majtë të mos ndërpriten. Fatkeqësisht, kjo do të thotë se do të ketë shumë hapësirë të bardhë për imazhet e shkurtra dhe të gjera, sepse do t'ju duhet t'i hidhni ato imazhe në një kanavacë me madhësi 4: 3. Po, ju mund ta përqendroni imazhin tuaj në mënyrë që të ketë hapësirë të barabartë të bardhë në krye dhe në fund, por pavarësisht, do të ketë shumë hapësirë të bardhë mbi ose nën imazhin tuaj, por për sa di unë, ky është kompromisi që do të bëni duhet të bëni në Instructables në mënyrë që imazhet tuaja të shfaqen të paprekura.

Hapi 5: 4: 3 Me Qendër të Imazhit

Këtu është e njëjta imazh 600x195 e rënë në një kanavacë 600x450, por e përqendruar në mënyrë që të ketë hapësirë të barabartë të bardhë bosh në krye dhe në fund. Duket pak më mirë, teksti nuk duket aq i ndarë nga imazhi.

Hapi 6: 4: 3 Me imazh në fund

Dhe së fundi, ja që i njëjti imazh ra dhe u zhvendos në fund. Tani ka një ton hapësirë të bardhë të bardhë sipër imazhit. Imazhi tani është vërtet i ndarë nga shiriti i titullit, por është më afër tekstit. Pra, këto janë kompromiset dhe mësimet tuaja të nxjerra:

• 4: 3 duket se është raporti i aspektit që duhet të përdorni që imazhet të shfaqen në tërësi në Instructables.
• mos i besoni pamjes paraprake - mund të tregojë imazhin tuaj në mënyrë perfekte, por pjesët mund të shkurtohen në shfletuesin aktual

Hapi 7: Sa është Gjerësia Minimale?

Tani le të shohim se cila duhet të jetë gjerësia minimale. Imazhi i treguar është me madhësi 382x206, afër 2: 1, duket vërtet i madh, apo jo? Natyrisht, Instructables ka zgjeruar imazhin për ta bërë atë të përshtatet me një gjerësi të caktuar, ndoshta 640 piksele, nuk jam i sigurt.

Por përshtatet sepse është më shumë "katror" - domethënë, nuk është shumë i gjerë për lartësinë e tij. Oh prisni, u mashtrova përsëri nga ajo Pamje Paraprake! Në fakt nuk përshtatet - anët e R&L shkurtohen përsëri.

Në fakt, kjo është e çuditshme, nuk është vetëm prishja e prishur. Unë në të vërtetë e shikova atë në shfletuesin dhe në fillim u interpretua siç duhet (domethënë, skajet e R&L nuk ishin prerë). Por duke e parë përsëri përmes shfletuesit, tani imazhi po ndryshon madhësinë me skajet e R&L të cunguara. E çuditshme

Pra, le të përpiqemi ta bëjmë imazhin më të vogël. Ne do ta zvogëlojmë imazhin në 200x108, duke mbajtur të njëjtin raport aspekti 2: 1.

Hapi 8: Tkurrja e imazhit por mbajtja e raportit të aspektit

Kështu që unë e ndryshoj atë imazh në 200x108, duke mbajtur të njëjtin raport aspekti 2: 1.

Tani përsëri duket se përshtatet në fillim (me rezolucionin (cilësia e figurës) u përkeqësua shumë!), Por sigurisht që ju me siguri po e shikoni dhe nuk përshtatet fare, dhe duket tamam si imazhi origjinal përveç origjinalit zgjidhje më të mirë. Përsëri, Instructables po zgjeron imazhin për ta bërë atë të përshtatet me një gjerësi të caktuar, prandaj kjo është arsyeja pse ky imazh më i vogël (200x108) duket kaq i tmerrshëm, shumë më keq se 382x206 origjinal.

Unë them "ndoshta" sepse nuk kam asnjë ide se si Instructables po shfaq këto imazhe në shfletuesin tuaj. Për çfarëdo arsye, nëse rifreskoj cache -in tim dhe rishikoj këtë Instructable, madhësitë e imazhit tim nuk duket të jenë të qëndrueshme, kështu që me të vërtetë nuk e di se çfarë po bën Instructables, përveç se mund të jetë në kundërshtim. Kështu, objektivi i këtij Udhëzuesi - të kuptoni se si të madhësoni imazhet në mënyrë që ato të shfaqen të paktën disi në mënyrë të qëndrueshme!

Hapi 9: Vërtetimi që imazhet jepen siç duhet në fillim

Ja çfarë pashë në fillim menjëherë pas ngarkimit të imazhit - i përshtatet! (Vini re se më duhej të përshtatja pamjen e mësipërme të ekranit në një imazh 1600x1200 (d.m.th., raporti 4: 3) për t'i bërë Instructables të shfaqin të gjithë pamjen e ekranit!)

Por sigurisht që e dini kur shikoni atë imazh që një çift rrëshqet prapa tani, nuk është më i përshtatshëm. Le të shohim se çfarë duhet të jetë gjerësia minimale për ta përshtatur atë.

Hapi 10: Përpjekja 382x287 (Raporti 4: 3)

Mbajta gjerësinë 382 dhe e hodha imazhin origjinal 382x206 në një kanavacë 382x287 për ta bërë atë një raport 4: 3 sepse kemi zbuluar më parë se Instructable ka nevojë për një imazh që të përshtatet me atë raport 4: 3 për ta shfaqur atë në tërësi.

Pra, tani ka shumë hapësirë të bardhë bosh nën të. Ai përshtatet me asgjë të copëtuar, por përsëri është zgjeruar për të mbushur një gjerësi të caktuar, kështu që imazhi nuk është i mprehtë. Le të përpiqemi të gjejmë se çfarë është kjo gjerësi e përsosur e udhëzueshme.

Hapi 11: Zgjerimi i imazhit nga 300x206 në 600x206 për të parë nëse shfaqet më mirë

Unë e hodha imazhin origjinal 382x206 (2: 1) në një kanavacë 600x206 (3: 1) vetëm për të parë nëse zgjerimi i tij në 600 piksele do t'i bënte Instructables të shfaqte të gjithë imazhin. Përsëri, në fillim bëri, por siç mund ta shihni nuk ka tani.

Kjo është gjëja vërtet e çuditshme - çdo herë, kur hidhni për herë të parë një imazh, duket se Instructables do ta shfaqë atë imazh në mënyrë korrekte, pavarësisht nga madhësia ose raporti i aspektit të atij imazhi. Këtë herë unë madje dola nga Instructables dhe e mbylla atë skedë, dhe pastaj e rishikova këtë Instructable "të freskët", për të thënë kështu për të verifikuar nëse imazhi ende shfaqet siç duhet. Zakonisht kjo është e mjaftueshme për të lejuar Instructable të bëjë punën e saj dhe të fillojë të ndryshojë madhësinë e imazheve që nuk janë në një raport aspekt 4: 3 dhe t'i shfaqë ato me anët e majta dhe të djathta të copëtuara.

Për habinë time, disa herët e para që e rishikova këtë "të freskët" udhëzues, ky imazh mbeti i shfaqur në tërësi, por mjerisht, pasi u largova për të bërë diçka tjetër dhe erdha ndoshta një orë e më vonë, ky imazh filloi të shfaqet zmadhuar me anët e L&R të shkurtuara përsëri ashtu siç e shihni më sipër.

Pse ose si ndodh kjo? Nuk e kam idenë. Unë nuk kam asnjë ide pse të presësh një periudhë kohore pas ngarkimit të një imazhi do të bëjë që Instructables ta bëjë atë ndryshe, por ndodh. Si dëshmi, unë do të tregoj kapjen e ekranit tim të imazhit të mësipërm që shfaqet në mënyrë perfekte në oh-in e parë, 10-15 minuta pasi e kisha ngarkuar atë në rrëshqitjen tjetër.

Hapi 12: Vërtetim që Imazhet Shfaqen Si Fillimisht Pas Ngarkimit

Këtu keni një kapje të ekranit që tregon atë imazh 600x206 që shfaqet në tërësi menjëherë pas ngarkimit. Ky është një kapje në ekran e rrëshqitjes së mëparshme. Kthehuni te diapozitivi i mëparshëm dhe mund të shihni se sa i shkëlqyer është imazhi tani!

Vini re se kapja e ekranit tim në të vërtetë ishte me madhësi 1563x766, por siç mësova nga eksperimentet e mia në fillim të këtij udhëzuesi, e dija që nuk i përshtatej atij raporti 4: 3 (1563x766 është afërsisht 4: 2), kështu që nëse do vetëm ngarkuar atë screenshot në madhësinë e tij origjinale Instructable do të shkurtojë skajet. Kështu që e hodha atë imazh në një kanavacë 4: 3, prandaj ka shumë hapësirë të bardhë bosh nën pamjen time të ekranit.

Vini re se pamja e ekranit është marrë edhe para se të ndryshoja titullin e Hapit 11 dhe të përfundoja shtypjen në të gjithë këtë tekst në rast se pyesni veten për këtë!

Mësimi i mësuar - shikimi i imazhit tuaj të ngarkuar në një shfletues menjëherë pasi ta ngarkoni nuk do të tregojë domosdoshmërisht se si do të shfaqet në të ardhmen. Për çfarëdo arsye, pothuajse çdo imazh i madhësisë dhe/ose raportit të aspektit duket se shfaqet bukur menjëherë pas ngarkimit, madje edhe për rreth 10-15 minuta pas ngarkimit dhe madje edhe pasi të dilni nga Instructables dhe ta shihni atë të freskët nga një sesion i ri i shfletuesit, etj. Me

Por prisni rreth një orë ose më shumë, dhe gjërat ndryshojnë! Imazhi juaj, nëse nuk i përshtatet raportit të aspektit 4: 3, do të rregullohet (zakonisht zmadhohet) nga Instructable në mënyrë që skajet të shkurtohen.

Hapi 13: Përfundimi - Çfarë mësova

Pra, përfundimi - çfarë mësova?

1. Për të shfaqur një imazh në tërësinë e tij, mbajtja e një raporti 4: 3 (gjerësia: lartësia) është një domosdoshmëri!

2. Përdorni imazhe origjinale që janë të mëdha me rezolucionin më të lartë që mundeni dhe hidhini ato në një kanavacë me raport 4: 3. Nëse është shumë i madh, Instructables do ta zvogëlojë atë dhe do të keni imazhe të këndshme të qarta.

3. Nëse imazhi juaj është shumë i vogël (shumë më pak se 600 piksela i gjerë) Instructable do të zgjerojë imazhin tuaj dhe do ta bëjë atë të paktën 600ish pixel të gjerë, duke e bërë atë më pak të mprehtë. Unë them "ish" sepse nuk e di saktësisht se çfarë gjerësie përdor Instructable por duket afër 600. probablyshtë ndoshta 640, e cila ishte një gjerësi e zakonshme në ditët e vjetra të monitorimit të tubave të shkollës.

600x450 dhe 640x480 janë raporte aspekti 4: 3. Të gjithë monitorët e tubave të shkollës së vjetër "me ekran të plotë" ishin 640x480 (gjerësi x lartësi).

4. Çfarë duhet të bëni nëse imazhi juaj origjinal nuk është i gjerë së paku 600 piksele? Pothuajse gjithçka që mund të bëni është ta hidhni në një kanavacë që i përshtatet raportit 4: 3 që shfaq imazhin tuaj afër madhësisë së tij origjinale. Nëse imazhi juaj origjinal është i vogël, do të ketë shumë hapësirë të bardhë të bardhë, kështu që përpiquni të përqendroni imazhin tuaj ose vendosni hapësirën e bardhë sipër ose poshtë imazhit tuaj dhe bëni që të duket sa më mirë që mundeni.

Me sa di unë, ky është kompromisi që duhet të bëni në Instructables në mënyrë që imazhet tuaja të shfaqen të paprekura.

Si shembull, imazhi i mësipërm është një madhësi kanavacë 600x450 me një imazh 382x206 të rënë në të dhe të përqendruar në mënyrë që të kemi hapësirë të bardhë të barabartë të bardhë sipër dhe poshtë. Imazhi shfaqet përafërsisht në madhësinë e tij origjinale, mendoj se Instructables mund ta zgjerojë atë në 640x480 (zgjerim i papërfillshëm) kështu që kjo është më e mira që mund të bëjmë me atë imazh origjinal.

5. MOS i besoni pamjes paraprake ose mos i besoni mënyrës sesi duket imazhi juaj për orët e para pas ngarkimit të tyre në Instructable! Për çfarëdo arsye, madhësitë e imazheve nuk duken të qëndrueshme deri në disa orë pasi t'i ngarkoni ato.

Çdo herë, kur hidhni për herë të parë një imazh, duket se Instructables do ta shfaqë atë imazh në mënyrë korrekte, pavarësisht nga madhësia ose raporti i aspektit të atij imazhi. Madje mund të qëndrojë duke u shfaqur saktë për një periudhë kohore më pas, por MOS U NDUHUR sepse përfundimisht, do t'i ndryshojë ato në madhësi dhe do t'ju krijojë probleme nëse nuk ndiqni atë rregull 4: 3!

Shpresoj se kjo ju ndihmon dhe ju lutem, nëse gjeni një mënyrë më të mirë ose keni ndonjë sugjerim tjetër, më tregoni!