Ohjattavien kuvien mitoitus: 13 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:03

Onko sinulla ongelmia saada kuvat oikeaan kokoon? Onko kuvasi liian suuri ja ylittää kehyksen, kuten yllä oleva? Tämä opettavainen yritys tehdä yhteenvedon siitä, mitä olen oppinut ratkaisemaan tämän ongelman.

Instructable Staff on kertonut minulle, että kaikki ladatut kuvat on kopioitu eri kuvasuhteisiin. Nämä kuvasarjat vedetään sitten ja mitoitetaan eri tavalla riippuen siitä, mistä laitteesta katsot ohjeita. Tavallisella editorilla ei voi määrittää näytettävän kokoa ja suhdetta.

Sitten he ehdottivat, että "Toinen vaihtoehto, joka voi toimia, on, jos lataat kuvia, joiden kuvasuhde on perinteisempi. Kaikkien 16: 9 - 4: 3 -kuvien pitäisi näkyä erittäin kauniisti."

Huomaa, että he sanovat, että tämä "voi" toimia. Tässä on se, mitä olen löytänyt kamppaillessani saadakseni kuvat näkymään kunnolla. (Huomaa, että käytän "Rubikin kuutiosta tehty helppokäyttöinen" -ohjattavia kuvia, joten kaikki nämä kuutikuvat!)

Yllä oleva kuva on sen alkuperäinen koko (600x195), joka ei ole tällä perinteisten kuvasuhteiden alueella. Kuten huomaat, Instructables näyttää tämän kuvan suurennettuna liian suurena vasen ja oikea puoli leikattuina. Katsotaanpa, mitä voimme tehdä saadaksemme tämän kuvan oikein näkyviin.

Vaihe 1: Kokeillaan 16: 9 -kuvasuhdetta

Kokeillaan siis kuvasuhdetta 16: 9 (leveys: korkeus). Säilytän alkuperäisen 600 pikselin leveyden. 16: 9 tarkoittaa, että korkeuden on oltava 338 pikseliä, joten teemme kankaan koon 600x338 ja pudotamme 600x195 kuvan siihen.

Joten katsotaan miltä tämä 600x338 (16: 9 kuvasuhde) kuva näyttää. Niin mielenkiintoista, että kun pudotin tämän kuvan sisään ja esikatselin sitä, se sopi täydellisesti - vasenta ja oikeaa reunaa ei leikattu pois! Otin kuvakaappauksen siitä vain todisteeksi, katso se seuraavassa diassa.

Mutta kun katson tätä selaimessani (Chromessa), mitä näen yllä olevassa kuvassa, oikea ja vasen puoli on taas katkaistu! Joten tästä kokeesta näyttää siltä, että 16: 9 -kuvasuhteen muuttaminen ei ratkaise ongelmia!

Sivuhuomautuksena 16: 9 on "uusi" yhteinen kuvasuhde, joka tunnetaan nimellä "laajakuva", kun taas 4: 3 on vanhan koulun "koko näyttö", joka oli yleinen televisiopäivinä. Joo, sinä milleniaalinen ei luultavasti tiedä, mistä puhun.

Vaihe 2: 16: 9 Kuva juuri ladattu esikatselussa katsottuna

Tämä kuva on kuvakaappaus, joka osoittaa, että 16: 9 -kuvasi näyttää täydelliseltä esikatselussa. Menestys oikein? No, ei niin nopeasti - katso mitä tapahtuu, kun tarkastelemme tätä sivua selaimessamme (Chrome)! Vasen ja oikea reuna katkaistaan jälleen! Palaa vain takaisin edelliseen diaan ja katso itse.

Oppiaihe - älä luota esikatseluun! Se, mikä näyttää hyvältä esikatselussa, näytetään eri tavalla todellisessa katselussa selaimella!

Lisäksi kyllä, kuvani alla on paljon tyhjää tilaa. Tämä johtuu siitä, että pudotin 600x195 -kuvan 600x338 -kankaalle ja laitoin sen yläosaan, joten alareunassa on tyhjä tyhjä tila. Mitä voimme tehdä asialle? No… yritämme käsitellä sitä myöhemmässä diassa.

Katsotaanpa siis edelleen, kuinka voimme saada tämän kuvan näyttämään kokonaisuudessaan.

Vaihe 3: 16: 9 Näytössä L&R -sivut katkaistu

Tiedän vain, jos jostain syystä selaimesi näyttää nämä 16: 9 -kuvat täydellisesti, tästä puhun. Tässä on kuvakaappaus siitä, miten näen 16: 9 -kuvasi vaiheessa 1 näkyvän "asettumisen" jälkeen alkuperäisen esikatselun jälkeen - huomaa, että vasen ja oikea on katkaistu.

Jos näet vaiheen 1 kuvani täydellisesti, hyvä. Kerro minulle! Mutta näin minä sen näen. Kyllä, se on paljon parempi kuin otsikkosivun alkuperäinen kuva, mutta se on silti katkaistu. Joten minulle Instructables -henkilökunnan neuvoista huolimatta 16: 9 -kuvasuhde ei täysin vähennä sitä. Siirrytään 4: 3 -kuvasuhteeseen.

Vaihe 4: Kokeillaan 4: 3 -kuvasuhdetta

Joten kokeillaan 4: 3 kuvasuhdetta. Säilytän alkuperäisen 600 pikselin leveyden, 4: 3 tarkoittaa, että korkeuden on oltava 450 pikseliä, joten teemme kankaan koon 600x450 ja pudotamme sen 600x195 kuvan.

Miltä tämä 600x450 (4: 3 kuvasuhde) kuva näyttää?

Jälleen kerran, kun pudotan sen ensimmäisen kerran, kuva näyttää hyvältä (lukuun ottamatta kaikkea valkoista tilaa alareunassa). Vasen ja oikea näkyvät hyvin. Kun katsot sitä selaimessa, näyttää siltä, että oikea ja vasen näyttävät edelleen hyvältä.

Kuten aiemmin mainittiin, tyhjä tyhjä tila kuvan alla johtuu siitä, että pudotin 600x195 -kuvani 600x450 -kankaalle ja asetin sen vain yläreunaan.

Oppiaihe - Kuvasuhde 4: 3 näyttää olevan tarpeen, jotta oikea ja vasen sivu eivät katkea. Valitettavasti tämä tarkoittaa, että lyhyille ja leveille kuville on paljon tyhjää tilaa, koska sinun on pudotettava nämä kuvat 4: 3 -kokoiselle kankaalle. Joo, voit keskittää kuvan niin, että ylä- ja alareunassa on yhtä paljon tyhjää tilaa, mutta siitä huolimatta kuvan ylä- tai alapuolella on paljon tyhjää tilaa, mutta parhaan tietoni mukaan tämä on kompromissi sinun on tehtävä Instructables, jotta kuvasi näkyvät ehjinä.

Vaihe 5: 4: 3 Kuva keskitetty

Tässä on sama 600x195 kuva, joka on pudotettu 600x450 -kankaalle, mutta keskitetty niin, että ylä- ja alareunassa on yhtä paljon tyhjää tyhjää tilaa. Näyttää hieman paremmalta, teksti ei näytä olevan niin kaukana kuvasta.

Vaihe 6: 4: 3 Kuva alhaalla

Ja lopuksi, tämä sama kuva putosi ja siirtyi pohjaan. Nyt kuvan päällä on tyhjä tyhjä tila. Kuva on nyt todella erotettu otsikkoriviltä, mutta se on lähempänä tekstiä. Nämä ovat siis kompromissejasi ja opit:

• 4: 3 näyttää olevan kuvasuhde, jota sinun on käytettävä kuvien näyttämiseen kokonaisuudessaan Instructables -ohjelmassa.
• Älä luota esikatseluun - se saattaa näyttää kuvasi täydellisesti, mutta osia voidaan katkaista todellisessa selaimessa

Vaihe 7: Mikä on vähimmäisleveys?

Katsotaan nyt, mikä on vähimmäisleveys. Kuvan koko on 382x206, lähellä 2: 1, se näyttää todella isolta, eikö? Ilmeisesti Instructables on laajentanut kuvaa niin, että se sopii tiettyyn leveyteen, luultavasti 640 pikseliin, en ole varma.

Mutta se sopii, koska se on "neliömäisempi" - eli se ei ole liian leveä korkeuteensa nähden. Voi odota, tämä esikatselu huijasi minua jälleen! Se ei todellakaan sovi - R&L -puolet katkaistaan jälleen.

Itse asiassa tämä on outoa, ei vain esikatselu ole sekaisin. Katsoin sitä itse selaimessa ja aluksi se näytti oikein (eli R&L -reunat eivät katkenneet). Mutta kun sitä tarkastellaan uudelleen selaimen kautta, nyt kuvan koko muuttuu, kun R&L -reunat on katkaistu. Outo.

Joten yritetään pienentää kuvaa. Pienennämme kuvan 200x108 kokoon pitäen samana 2: 1 -kuvasuhteen.

Vaihe 8: Pienennä kuvaa, mutta säilytä kuvasuhde

Joten muutan kuvan kooksi 200x108, säilyttäen saman 2: 1 -kuvasuhteen.

Nyt se näyttää jälleen sopivan aluksi (kun resoluutio (kuvanlaatu) on heikentynyt huomattavasti!), Mutta tietysti luultavasti katsot sitä, eikä se sovi ollenkaan, ja näyttää täsmälleen alkuperäiseltä kuvalta, paitsi että alkuperäinen on parempi resoluutio. Jälleen Instructables laajentaa kuvaa sopimaan tiettyyn leveyteen, joten tämä pienempi (200 x 108) kuva näyttää niin kauhealta, paljon huonommalta kuin alkuperäinen 382 x 206.

Sanon "luultavasti", koska minulla ei todellakaan ole aavistustakaan siitä, kuinka Instructables näyttää nämä kuvat selaimessasi. Jostain syystä, jos päivitän välimuistini ja tarkastelen tätä Instructablea, kuvakokoni eivät näytä pysyvän yhtenäisinä, joten en todellakaan tiedä mitä Instructables tekee, paitsi että se voi olla epäjohdonmukainen. Tämän Instructable -ohjelman tavoite on siis selvittää, kuinka mitoittaa kuvat niin, että ne näytetään ainakin jonkin verran johdonmukaisesti!

Vaihe 9: Todiste siitä, että kuvat näyttävät ensin oikein

Tässä on mitä näin aluksi heti kuvan lataamisen jälkeen - se sopii! (Huomaa, että minun piti sovittaa yllä oleva kuvakaappaus 1600 x 1200 kuvaan (eli 4: 3 -suhde), jotta Instructables näyttää koko kuvakaappauksen!)

Mutta tietysti tiedät, että kun katsot tätä kuvaa, pari liukuu nyt taaksepäin, se ei enää sovi. Katsotaanpa, mitä vähimmäisleveyden on oltava, jotta se sopii.

Vaihe 10: Yritetään 382 x 287 (4: 3 -suhde)

Pidin 382 leveyden ja pudotin alkuperäisen 382x206 kuvan 382x287 -kankaalle, jotta se olisi 4: 3 -kuvasuhde, koska olemme aiemmin havainneet, että Instructable tarvitsee kuvan, joka sopii tähän 4: 3 -suhteeseen näyttääkseen sen kokonaisuudessaan.

Joten alla on paljon tyhjää tyhjää tilaa. Se ei sovi mihinkään katkaistuna, mutta jälleen sitä on laajennettu täyttämään tietty leveys, joten kuva ei ole terävä. Yritetään löytää, mikä tämä täydellinen Instructable -leveys on.

Vaihe 11: Kuvan laajentaminen 300 x 206: sta 600 x 206: een nähdäksesi, näkyykö se paremmin

Pudotin alkuperäisen 382x206 (2: 1) -kuvan 600x206 (3: 1) -kankaalle vain nähdäkseni, saako sen laajentamisen 600 pikseliin Instructables näyttää koko kuvan. Jälleen, aluksi se teki, mutta kuten näet, se ei nyt.

Tämä on todella outoa - joka kerta, kun pudotat kuvan ensimmäistä kertaa, näyttää siltä, että Instructables näyttää kuvan oikein, riippumatta kuvan koosta tai kuvasuhteesta. Tällä kertaa olen jopa kirjautunut ulos Instructablesista ja sulkenut kyseisen välilehden ja käynyt sitten uudelleen tämän Instructable "tuoreen" niin sanotusti varmistaakseni, näkyykö kuva edelleen oikein. Yleensä tämä riittää, jotta Instructable voi tehdä asiansa ja alkaa muuttaa kuvien kokoa, joiden kuvasuhde ei ole 4: 3, ja näyttää ne vasemmalla ja oikealla puolella katkaistuna.

Yllätyksekseni pari ensimmäistä kertaa, kun kävin uudelleen tässä ohjeessa "tuoreena", tämä kuva pysyi näkyvissä kokonaisuudessaan, mutta valitettavasti, kun kävelin tekemään jotain muuta ja tulin ehkä noin tunnin kuluttua, tämä kuva alkoi näkyä suurennettuna, kun L&R -sivut on katkaistu uudelleen, kuten näet yllä.

Miksi tai miten tämä tapahtuu? Minulla ei ole aavistustakaan. Minulla ei ole aavistustakaan, miksi jonkun ajan odottaminen kuvan lataamisen jälkeen saisi Instructablesin näyttämään sen eri tavalla, mutta se tekee niin. Todisteeksi näytän kuvakaappaukseni yllä olevasta kuvasta, joka näkyy täydellisesti ensimmäisenä ohi, 10-15 minuuttia sen jälkeen, kun olin ladannut sen seuraavassa diassa.

Vaihe 12: Todiste siitä, että kuvat näkyvät oikein aluksi lataamisen jälkeen

Tässä on kuvakaappaus, joka osoittaa, että 600 x 206 kuva näkyy kokonaisuudessaan heti lataamisen jälkeen. Tämä on kuvakaappaus edellisestä diasta. Palaa edelliseen diaan ja näet, kuinka kuva on nyt nostettu!

Huomaa, että kuvakaappaukseni oli itse asiassa kooltaan 1563 x 766, mutta kuten olen oppinut kokeilustani tämän Instructable -ohjelman alussa, tiesin, koska se ei sopinut 4: 3 -kuvasuhteeseen (1563 x 766 on suunnilleen 4: 2), joten jos juuri ladannut kyseisen kuvakaappauksen alkuperäisessä koossaan Instructable katkaisi reunat. Joten pudotin kuvan 4: 3 -kankaalle, joten kuvakaappaukseni alla on paljon tyhjää tyhjää tilaa.

Huomaa, että kuvakaappaus otettiin myös ennen kuin muutin vaiheen 11 otsikon ja lopetin koko tämän tekstin kirjoittamisen, jos mietit sitä!

Oppiaihe - ladatun kuvan katsominen selaimessa heti lataamisen jälkeen ei välttämättä näytä, miten se näytetään tulevaisuudessa. Jostain syystä melkein mikä tahansa koko- ja/tai kuvasuhdekuva näyttää näyttävän kauniisti heti lataamisen jälkeen ja jopa noin 10-15 minuuttia lataamisen jälkeen ja jopa sen jälkeen, kun kirjaudut ulos Instructablesista ja katsot sitä tuoreena uudesta selainistunnosta jne..

Mutta odota noin tunti tai enemmän, ja asiat muuttuvat! Jos kuva ei sovi 4: 3 -kuvasuhteeseen, sitä säädetään (yleensä suurennetaan) Instructable -ohjelmalla, jotta reunat katkaistaan.

Vaihe 13: Bottom Line - Mitä opin

Joten lopputulos - mitä opin?

1. Jotta kuva voidaan näyttää kokonaisuudessaan, kuvasuhteen 4: 3 (leveys: korkeus) säilyttäminen on välttämätöntä!

2. Käytä suuria alkuperäisiä kuvia, joilla on suurin mahdollinen resoluutio, ja pudota ne 4: 3 -kuvasuhteelle. Jos Instructables on liian suuri, se pienentää sen ja saat kauniita teräviä kuvia.

3. Jos kuva on liian pieni (paljon alle 600 pikseliä leveä), Instructable laajentaa kuvaa ja tekee siitä vähintään 600 pikseliä leveä, mikä tekee siitä vähemmän terävän. Sanon "ish", koska en oikeastaan tiedä tarkalleen, mitä leveyttä Instructable käyttää, mutta se näyttää lähes 600. Se on luultavasti 640, joka oli yleinen leveys takaisin vanhan koulun putkivalvontapäivinä.

600x450 ja 640x480 ovat 4: 3 -kuvasuhteita. Kaikki vanhan koulun "koko näytön" putkimonitorit olivat 640x480 (leveys x korkeus).

4. Mitä tehdä, jos alkuperäinen kuva ei ole vähintään 600 pikseliä leveä? Kaikki mitä voit tehdä, on pudottaa se kankaalle, joka sopii 4: 3 -kuvasuhteeseen ja joka näyttää kuvasi lähellä alkuperäistä kokoa. Jos alkuperäinen kuvasi on pieni, siinä on paljon tyhjää tyhjää tilaa, joten yritä keskittää kuva tai laittaa tyhjä tila joko kuvan ylä- tai alapuolelle ja saada se näyttämään parhaalta.

Tietääkseni tämä on kompromissi, joka sinun on tehtävä Instructables -ohjelmassa, jotta kuvasi näkyvät ehjinä.

Esimerkkinä yllä oleva kuva on 600x450 -kankaan koko, johon on pudotettu 382x206 -kuva ja keskitetty, joten meillä on yhtä suuri tyhjä tyhjä tila ylä- ja alapuolella. Kuva näkyy suunnilleen alkuperäisessä koossaan, luulen, että Instructables saattaa laajentaa sen 640x480: een (vähäinen laajennus), joten se on parasta, mitä voimme tehdä alkuperäisen kuvan kanssa.

5. ÄLÄ luota esikatseluun tai siihen, miltä kuvasi näyttää ensimmäisten tuntien kuluttua sen lataamisesta Instructableen! Jostain syystä kuvien koot eivät näytä pysyvän yhdenmukaisina vasta pari tuntia lataamisen jälkeen.

Joka kerta, kun pudotat kuvan ensimmäisen kerran, Instructables näyttää kuvan oikein, riippumatta kuvan koosta tai kuvasuhteesta. Se voi jopa pysyä näytössä oikein jonkin aikaa sen jälkeen, mutta ÄLÄ HÄVITÄ, koska lopulta se muuttaa niiden kokoa ja aiheuttaa sinulle ongelmia, ellet noudata tätä 4: 3 -sääntöä!

Toivottavasti tämä auttaa, ja jos löydät paremman tavan tai sinulla on muita vinkkejä, kerro siitä minulle!