Određivanje veličine slika po uputama: 13 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:37

Imate li problema s pravilnom veličinom slika? Jesu li vaše slike prevelike i prelijevaju okvir poput gornjeg? Ovaj poučni pokušaj sažima ono što sam naučio o rješavanju ovog problema.

Instructable Staff mi je rekao da se sve učitane slike dupliraju u različite omjere širine i visine slike. Skup slika se zatim izvlači i razlikuje u veličini, ovisno o tome s kojeg uređaja gledate upute. Ne postoji način da u redovitom uređivaču navedete veličinu i omjer za prikaz.

Zatim su predložili da "Druga mogućnost koja bi mogla funkcionirati je ako prenesete slike tradicionalnijeg omjera. Sve od 16: 9 do 4: 3 trebalo bi se prikazati vrlo lijepo."

Primijetite da kažu da ovo "možda" djeluje. Evo što sam otkrio u svojim borbama da moje slike budu pristojno prikazane. (Imajte na umu da koristim slike s moje instrukcije "Rubikova kocka je olakšana", dakle sve te slike kocke!)

Gornja slika izvorne je veličine (600x195) koja nije u tom rasponu tradicionalnih omjera širine i visine slike. Kao što vidite, Instructables prikazuje ovu sliku uvećanu s prevelikom lijevom i desnom stranom. Pogledajmo što možemo učiniti da se ova slika pravilno prikaže.

Korak 1: Pokušajmo omjer slike 16: 9

Pa pokušajmo omjer slike 16: 9 (širina: visina). Zadržat ću izvornu širinu od 600 piksela, 16: 9 znači da visina mora biti 338 piksela pa ćemo napraviti platno veličine 600x338 i ubaciti tu sliku 600x195.

Pa da vidimo kako izgleda ova slika 600x338 (omjer širine i visine 16: 9). Zanimljivo, kad sam ubacio ovu sliku i pregledao je, savršeno se uklopila - lijevi i desni rub nisu bili odsječeni! Napravio sam snimak zaslona samo radi dokaza, pogledajte ga na sljedećem slajdu.

Ali, kad ovo pogledam u svom pregledniku (Chrome), ono što vidim na gornjoj slici je da su desna i lijeva strana ponovno odsječene! Stoga se iz ovog eksperimenta čini da mijenjanje veličine na omjer 16: 9 neće riješiti naše probleme!

Kao spomenar, 16: 9 je "novi" zajednički omjer širine i visine slike poznat kao "široki ekran", dok je 4: 3 stari školski "cijeli ekran" koji je bio uobičajen u doba televizijske televizije. Da, ti milenijalci vjerojatno nemaju pojma o čemu govorim.

Korak 2: 16: 9 Slika svježe prenesena kako je prikazano u pregledu

Ova slika je snimka zaslona koja pokazuje da naša slika u omjeru 16: 9 izgleda savršeno u pregledu. Uspjeh zar ne? Pa, ne tako brzo - pogledajte što se događa kada zapravo pregledamo ovu stranicu u svom pregledniku (Chrome)! Lijevi i desni rub ponovno su skraćeni! Samo se vratite da dopustite prethodnom klizanju i uvjerite se sami.

Naučena lekcija - ne vjerujte pregledu! Ono što izgleda dobro u pregledu postaje drugačije prikazano pri stvarnom gledanju preglednikom!

Također, da, ispod moje slike ima puno bijelog prostora. To je zato što sam sliku 600x195 spustio u platno 600x338 i stavio je na vrh, tako da na dnu ima sav taj prazan bijeli prostor. Što možemo učiniti po tom pitanju? Pa … pokušat ćemo to riješiti u kasnijem slajdu.

Pa nastavimo vidjeti kako možemo ovu sliku prikazati u cijelosti.

Korak 3: 16: 9 Prikazano s odrezanim stranama L&R

Samo za zapisnik, u slučaju da iz bilo kojeg razloga vaš preglednik savršeno prikazuje ove slike 16: 9, o tome govorim. Evo snimke zaslona kako vidim svoju sliku u omjeru 16: 9 u 1. koraku prikazanu nakon "namještanja" nakon početnog pregleda - primijetite da su lijeva i desna odsječene.

Ako vidite da je moja slika 1. koraka prikazana savršeno, pa, super. Javi mi! Ali ovako ja to vidim. Da, puno je bolja od izvorne slike s naslovne stranice, ali je i dalje odsječena. Dakle, unatoč savjetima osoblja Instructablesa, omjer širine i visine 16: 9 to baš i ne smanjuje. Prijeđimo na omjer slike 4: 3.

Korak 4: Pokušajmo omjer slike 4: 3

Pa pokušajmo omjer slike 4: 3. Zadržat ću izvornu širinu od 600 piksela, 4: 3 znači da visina mora biti 450 piksela pa ćemo napraviti platno veličine 600x450 i ubaciti tu sliku 600x195.

Kako izgleda ova slika 600x450 (omjer 4: 3)?

Opet, kad ga prvi put ubacim, slika izgleda sjajno (osim cijelog bijelog prostora pri dnu). Lijevo i desno prikazani su dobro. Gledajući to u pregledniku, čini se da se desna i lijeva i dalje dobro prikazuju.

Kao što je prethodno napomenuto, sav taj prazan bijeli prostor ispod slike je zato što sam svoju sliku veličine 600x195 spustio u platno veličine 600x450 i stavio je na vrh.

Naučena lekcija - čini se da je potreban omjer širine i visine 4: 3 kako desna i lijeva strana ne bi bile odsječene. Nažalost, to znači da će biti puno bijelog prostora za kratke i široke slike jer ćete te slike morati ispustiti u platno veličine 4: 3. Da, mogli biste centrirati svoju sliku tako da ima jednakog bijelog prostora na vrhu i na dnu, ali bez obzira na to, bit će puno bijelog prostora iznad ili ispod vaše slike, ali koliko ja znam, ovo je kompromis koji ćete morate unijeti u Instructables tako da se vaše slike prikazuju netaknute.

Korak 5: 4: 3 sa slikom u sredini

Ovdje je ista slika 600x195 ispuštena u platno 600x450, ali centrirana tako da na vrhu i dnu ima jednak prazan bijeli prostor. Izgleda malo bolje, tekst ne izgleda toliko odvojeno od slike.

Korak 6: 4: 3 sa slikom pri dnu

I na kraju, evo te iste slike koja je pala i pomaknuta na dno. Sada je na vrhu slike tona praznog bijelog prostora. Slika je sada zaista odvojena od naslovne trake, ali je bliža tekstu. Ovo su vaši kompromisi i naučene lekcije:

• Čini se da je 4: 3 omjer širine i visine koji morate koristiti da bi se slike u potpunosti prikazale u Instructables.
• ne vjerujte pregledu - mogao bi savršeno prikazati vašu sliku, ali dijelovi bi mogli biti skraćeni u stvarnom pregledniku

Korak 7: Kolika je minimalna širina?

Pogledajmo sada koja bi trebala biti minimalna širina. Prikazana slika je veličine 382x206, blizu 2: 1, čini se doista ogromnom, zar ne? Očigledno je da je Instructables povećao sliku kako bi odgovarala određenoj širini, vjerojatno 640 piksela, nisam siguran.

Ali pristaje jer je više "četvrtast" - tj. Nije preširok za svoju visinu. Oh čekaj, opet me prevario taj pregled! Zapravo se ne uklapa - R&L strane su opet krnje.

Zapravo, ovo je čudno, nije samo pregled zabrljan. Zapravo sam ga pogledao u pregledniku i isprva se pravilno prikazao (tj. Rubovi istraživanja i razvoja nisu bili odrezani). No, gledajući to ponovno kroz preglednik, sada se slika mijenja s promjenom veličine R&L rubova. Neparan.

Pa pokušajmo smanjiti sliku. Smanjit ćemo sliku na 200x108, zadržavajući isti omjer slike 2: 1.

Korak 8: Smanjivanje slike, ali zadržavanje omjera slike

Tako sam promijenio veličinu slike na 200x108, zadržavajući isti omjer slike 2: 1.

Sad se opet čini da se u početku uklapa (s razlučivošću (kvalitetom slike) koja je jako pogoršana!), Ali naravno da vjerojatno gledate u nju i uopće se ne uklapa, a izgleda točno kao izvorna slika, osim što original ima bolja rezolucija. Ponovno, Instructables proširuje sliku kako bi odgovarala određenoj širini pa je ovo razlog zašto ova manja (200x108) slika izgleda tako užasno, puno gore od izvornih 382x206.

Kažem "vjerojatno" jer zaista nemam pojma kako Instructables prikazuje te slike u vašem pregledniku. Iz bilo kojeg razloga, ako osvježim predmemoriju i pregledam ovaj Instructable, čini se da moje slike ne ostaju dosljedne pa zaista ne znam što Instructables radi, osim što može biti nedosljedno. Stoga je cilj ovog Instructablea - shvatiti kako veličine slike tako da se prikazuju barem donekle dosljedno!

Korak 9: Dokažite da se slike isprva pravilno generiraju

Evo što sam prvo vidjela odmah nakon postavljanja slike - odgovara! (Imajte na umu da sam gornji snimak zaslona morao uklopiti u sliku 1600x1200 (tj. Omjer 4: 3) da bi Instructables prikazao cijeli snimak zaslona!)

Ali naravno da znate kad pogledate tu sliku koja se sada pomakne unatrag, više nije prikladna. Pogledajmo koja minimalna širina mora biti kako bi pristajala.

10. korak: Isprobavanje 382x287 (omjer 4: 3)

Zadržao sam širinu 382 i spustio izvornu sliku 382x206 na platno 382x287 kako bih imao omjer širine i visine 4: 3 jer smo već otkrili da Instructable treba sliku koja odgovara omjeru 4: 3 kako bi je prikazao u cijelosti.

Tako je sada ispod puno praznog bijelog prostora. Odgovara bez ičega odsječenog, ali opet je prošireno kako bi ispunilo određenu širinu pa slika nije oštra. Pokušajmo otkriti koja je to savršena širina Instructable.

Korak 11: Proširenje slike s 300x206 na 600x206 da biste vidjeli prikazuje li se bolje

Ispustio sam originalnu sliku 382x206 (2: 1) u platno 600x206 (3: 1) samo da vidim hoće li se proširenjem na 600 piksela Instructables prikazati cijelu sliku. Opet, isprva je bilo, ali kao što vidite sada ne.

Ovo je doista čudna stvar - svaki put, kad prvi put ubacite sliku, čini se da će Instructables ispravno prikazati tu sliku, bez obzira na veličinu ili omjer slike. Ovaj put čak sam se odjavio s Instructablesa i zatvorio tu karticu, a zatim ponovno posjetio ovaj Instructable "svjež", da tako kažem da provjerim je li slika i dalje ispravno prikazana. Obično je to dovoljno da bi Instructable mogao učiniti svoje i početi mijenjati veličinu slika koje nisu u omjeru 4: 3 te ih prikazivati s odsječenom lijevom i desnom stranom.

Na moje iznenađenje, prvih par puta kad sam ponovno pregledao ovu "svježu" uputu ova slika je ostala prikazana u cijelosti, ali nažalost, nakon što sam otišao odraditi nešto drugo i došao otprilike sat vremena kasnije, ova se slika počela prikazivati uvećane s L&R stranama ponovno odrezanima baš kako vidite gore.

Zašto ili kako se to događa? Nemam pojma. Nemam pojma zašto bi čekanje nekog vremenskog razdoblja nakon učitavanja slike učinilo da Instructables to renderiraju drugačije, ali to se događa. Kao dokaz, prikazat ću snimku zaslona gornje slike koja se savršeno prikazuje u prvom oh, 10-15 minuta nakon što sam je prenijela na sljedeći slajd.

Korak 12: Dokažite da se slike ispravno prikazuju nakon početka prijenosa

Evo snimke zaslona koja prikazuje sliku veličine 600x206 koja se prikazuje u cijelosti odmah nakon prijenosa. Ovo je snimka zaslona prethodnog slajda. Vratite se na prethodni slajd i možete vidjeti koliko je slika sada uspravljena!

Imajte na umu da je moj snimak zaslona zapravo bio veličine 1563x766, ali kako sam naučio iz mojih eksperimenata na početku ovog Instructable -a, znao sam jer ne odgovara omjeru stranica 4: 3 (1563x766 je otprilike 4: 2) pa ako bih upravo je prenio tu snimku zaslona u izvornoj veličini. Instructable će skratiti rubove. Pa sam tu sliku spustio u platno 4: 3 pa je zato ispod mog snimka zaslona puno praznog bijelog prostora.

Imajte na umu da je snimka zaslona također snimljena prije nego što sam promijenio naslov 11. koraka i završio s upisivanjem cijelog ovog teksta u slučaju da se pitate o tome!

Naučena lekcija - pregled vaše prenesene slike u pregledniku odmah nakon učitavanja neće nužno pokazati kako će se prikazivati u budućnosti. Iz bilo kojeg razloga, čini se da se slika gotovo bilo koje veličine i/ili omjera slike lijepo prikazuje odmah nakon prijenosa, pa čak i otprilike 10-15 minuta nakon prijenosa, pa čak i nakon što se odjavite s Instructables i pregledate je svježe iz nove sesije preglednika itd..

Ali pričekajte oko sat vremena ili više, i stvari će se promijeniti! Vaša slika, ako ne odgovara omjeru širine i visine 4: 3, bit će prilagođena (obično povećana) pomoću programa Instructable tako da su rubovi skraćeni.

Korak 13: Zaključak - ono što sam naučio

Zaključak - što sam naučio?

1. Za prikaz slike u cijelosti potrebno je zadržati omjer slike 4: 3 (širina: visina)!

2. Upotrijebite velike izvorne slike s najvećom mogućom razlučivošću i ispustite ih u platno omjera 4: 3. Ako su prevelike, Instructables će to smanjiti i imat ćete lijepe oštre slike.

3. Ako je vaša slika premala (široka manje od 600 piksela), Instructable će proširiti vašu sliku i učiniti je širokom najmanje 600 piksela, pa će biti manje oštra. Kažem "ish" jer ne znam točno koju širinu koristi Instructable, ali čini se da je blizu 600. Vjerojatno je 640, što je bila uobičajena širina još u doba monitora starih školskih cijevi.

600x450 i 640x480 omjeri su 4: 3. Svi monitori cijevi sa cijelim ekranom na cijelom ekranu bili su 640x480 (širina x visina).

4. Što učiniti ako vaša izvorna slika nije široka najmanje 600 piksela? Otprilike sve što možete učiniti je spustiti je u platno koje odgovara omjeru 4: 3 koje prikazuje vašu sliku blizu izvorne veličine. Ako je vaša izvorna slika mala, bit će puno praznog bijelog prostora, pa pokušajte centrirati sliku ili postaviti bijeli prostor iznad ili ispod slike i učiniti da izgleda najbolje što možete.

Koliko ja znam, ovo je kompromis koji ćete morati napraviti u Instructables kako bi se vaše slike prikazale netaknute.

Kao primjer, gornja slika je veličine platna 600x450 sa slikom 382x206 koja je postavljena u nju i centrirana tako da imamo jednak prazan bijeli prostor iznad i ispod. Slika se prikazuje otprilike u izvornoj veličini, mislim da je Instructables može proširiti na 640x480 (zanemarivo proširenje), pa je to najbolje što možemo učiniti s tom izvornom slikom.

5. NEMOJTE vjerovati pregledu niti vjerujte načinu na koji vaša slika izgleda prvih nekoliko sati nakon što ste ih prenijeli u Instructable! Iz bilo kojeg razloga, čini se da veličine slike neće ostati dosljedne sve do nekoliko sati nakon što ste ih prenijeli.

Svaki put, kad prvi put ubacite sliku, čini se da će Instructables ispravno prikazati tu sliku, bez obzira na veličinu ili omjer slike. Možda će se čak i nastaviti prikazivati ispravno neko vrijeme nakon toga, ali nemojte se zavaravati jer će im na kraju promijeniti veličinu i zadati vam probleme ako ne slijedite pravilo 4: 3!

Nadam se da će ovo pomoći i molim vas, ako pronađete bolji način ili imate neke druge savjete, javite mi!