Dimenzování instrukovatelných obrázků: 13 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:23

Máte problémy se správným nastavením velikosti obrázků? Jsou vaše obrázky příliš velké a přetékají rámem jako ten výše? Tento instruktážní pokus shrnuje, co jsem se naučil řešit tento problém.

Instructable Staff mi řekl, že všechny nahrané obrázky jsou duplikovány do různých poměrů stran. Tyto soubory obrázků jsou poté staženy a mají různou velikost v závislosti na tom, ze kterého zařízení si prohlížíte pokyny. V běžném editoru nelze určit, jakou velikost a poměr má zobrazit.

Poté navrhli, že "Další možností, která může fungovat, je, když nahrajete obrázky s tradičnějším poměrem stran. Cokoli od 16: 9 do 4: 3 by se mělo zobrazovat velmi pěkně."

Všimněte si, že se říká, že to „může“fungovat. Zde je to, co jsem našel ve svých bojích, aby se moje obrázky zobrazovaly slušně. (Všimněte si, že používám obrázky z mých instrukcí „Rubikova kostka usnadněna“, proto všechny ty obrázky kostek!)

Výše uvedený obrázek je jeho původní velikost (600x195), která není v rozsahu tradičních poměrů stran. Jak vidíte, Instructables zobrazuje tento obrázek příliš velký zvětšený s odříznutou levou a pravou stranou. Podívejme se, co můžeme udělat, aby se tento obrázek zobrazil správně.

Krok 1: Zkusme poměr stran 16: 9

Zkusme tedy poměr stran 16: 9 (šířka: výška). Ponechám původní šířku 600 pixelů, 16: 9 znamená, že výška musí být 338 pixelů, takže uděláme velikost plátna 600 x 338 a vložíme do něj obrázek 600 x 195.

Pojďme se tedy podívat, jak tento obrázek 600x338 (poměr stran 16: 9) vypadá. Je zajímavé, že když jsem tento obrázek vložil a zobrazil jeho náhled, perfektně seděl - levý a pravý okraj nebyly oříznuty! Pořídil jsem snímek obrazovky jen pro důkaz, podívejte se na další snímek.

Když to ale vidím ve svém prohlížeči (Chrome), na výše uvedeném obrázku vidím, že pravá a levá strana jsou opět useknuty! Z tohoto experimentu tedy vyplývá, že změna velikosti na poměr stran 16: 9 naše problémy nevyřeší!

Jako vedlejší poznámku uvádím, že 16: 9 je „nový“běžný poměr stran známý jako „širokoúhlý“, zatímco 4: 3 je stará škola „na celou obrazovku“, která byla běžná již v dobách tubové televize. Jo, vy tisíciletí pravděpodobně nemáte tušení, o čem mluvím.

Krok 2: Obrázek 16: 9 čerstvě nahraný podle zobrazení v náhledu

Tento obrázek zachycuje obrazovku, která ukazuje, že náš obrázek 16: 9 vypadá v náhledu perfektně. Úspěch ne? Ne tak rychle - podívejte se, co se stane, když si tuto stránku skutečně prohlížíme v našem prohlížeči (Chrome)! Levý a pravý okraj jsou opět zkráceny! Vraťte se zpět a nechte předchozí snímek a uvidíte sami.

Poučení - Nevěřte náhledu! To, co vypadá v náhledu dobře, se při skutečném prohlížení v prohlížeči vykreslí odlišně!

Také ano, pod mým obrazem je spousta bílého místa. To proto, že jsem na plátno o rozměrech 600 x 338 vložil obrázek 600 x 195 a umístil jej nahoře, takže dole je všechno to prázdné bílé místo. Co s tím můžeme dělat? No … pokusíme se to vyřešit v pozdějším snímku.

Pojďme se tedy dále podívat, jak můžeme tento obrázek zobrazit jako celek.

Krok 3: 16: 9 zobrazeno s oříznutými stranami L&R

Jen pro informaci, v případě, že z jakéhokoli důvodu váš prohlížeč zobrazuje tyto obrázky 16: 9 perfektně, o tom mluvím. Zde je snímek obrazovky, jak vidím svůj obrázek 16: 9 v kroku 1 zobrazený po „usazení“po počátečním náhledu - všimněte si, že levý a pravý jsou odříznuty.

Pokud vidíte můj obrázek z kroku 1 zobrazený perfektně, dobře, skvěle. Dej mi vědět! Ale takhle to vidím já. Ano, je to mnohem lepší než původní obrázek z titulní stránky, ale stále je to oříznuté. Takže pro mě, navzdory radám personálu Instructables, poměr stran 16: 9 to docela nesnižuje. Přejdeme k poměru stran 4: 3.

Krok 4: Zkusme poměr stran 4: 3

Zkusme tedy poměr stran 4: 3. Ponechám původní šířku 600 pixelů, 4: 3 znamená, že výška musí být 450 pixelů, takže uděláme velikost plátna 600 x 450 a vložíme do něj obrázek 600 x 195.

Jak vypadá tento obrázek 600x450 (poměr stran 4: 3)?

Opět platí, že když ho poprvé vložím, vypadá obrázek skvěle (kromě všeho bílého místa ve spodní části). Levý a pravý jsou zobrazeny v pořádku. Když se na to podíváme v prohlížeči, zdá se, že doprava a doleva se nadále zobrazují dobře.

Jak již bylo uvedeno dříve, celé to prázdné bílé místo pod obrázkem je proto, že jsem svůj obrázek 600 x 195 umístil na plátno 600 x 450 a umístil jej nahoře.

Poučení - zdá se, že je vyžadován poměr stran 4: 3, aby pravá a levá strana nebyly oříznuty. Bohužel to znamená, že u obrázků, které jsou krátké a široké, bude mnoho volného místa, protože tyto obrázky budete muset vložit na plátno velikosti 4: 3. Ano, můžete vycentrovat svůj obraz tak, aby nahoře i dole byl stejný bílý prostor, ale bez ohledu na to bude nad nebo pod vaším obrázkem spousta bílého místa, ale pokud je mi známo, toto je kompromis, který budete musíte provést v Instructables, aby se vaše obrázky zobrazovaly neporušené.

Krok 5: 4: 3 Se středem obrazu

Tady je stejný obrázek o rozměrech 600 x 195 vložený na plátno o rozměrech 600 x 450, ale vycentrovaný tak, aby v horní a dolní části bylo stejné prázdné místo. Vypadá to o něco lépe, text se nezdá být tak daleko od obrázku.

Krok 6: 4: 3 S obrázkem dole

A konečně, tady je ten samý obrázek, který spadl a přesunul se dolů. Nyní je v horní části obrázku spousta prázdného místa. Obrázek je nyní opravdu oddělen od záhlaví, ale je blíže textu. Toto jsou vaše kompromisy a ponaučení:

• Poměr stran 4: 3 se zdá být poměrem stran, který musíte použít k tomu, aby se obrázky v Instructables zobrazovaly celé.
• nedůvěřujte náhledu - může dokonale zobrazit váš obrázek, ale části lze ve skutečném prohlížeči zkrátit

Krok 7: Jaká je minimální šířka?

Nyní se podívejme, jaká by měla být minimální šířka. Zobrazený obrázek má velikost 382 x 206, blízko 2: 1, zdá se být opravdu obrovský, že? Instructables očividně zvětšil obrázek tak, aby odpovídal nějaké nastavené šířce, pravděpodobně 640 pixelů, nejsem si jistý.

Ale hodí se, protože je více „hranatý“- tj. Není příliš široký na svou výšku. Počkejte, znovu jsem se nechal oklamat tím Náhledem! Ve skutečnosti to nesedí - strany výzkumu a vývoje jsou opět zkráceny.

Ve skutečnosti je to zvláštní, není to jen náhled, který je zmatený. Vlastně jsem se na to podíval v prohlížeči a zpočátku se to vykreslilo správně (tj. Hrany R&L nebyly oříznuty). Když se na to ale podíváme znovu přes prohlížeč, nyní se obrázek vykreslí se změněnou velikostí se zkrácenými hranami R&L. Zvláštní.

Zkusme tedy obrázek zmenšit. Zmenšíme obrázek na 200 x 108, přičemž zachováme stejný poměr stran 2: 1.

Krok 8: Zmenšení obrazu, ale zachování poměru stran

Změním tedy velikost obrázku na 200 x 108, přičemž zachovám stejný poměr stran 2: 1.

Znovu se zdá, že se to zpočátku hodí (s rozlišením (kvalita obrazu) se výrazně zhoršila!), Ale samozřejmě se na to pravděpodobně díváte a vůbec se to nehodí a vypadá přesně jako původní obrázek, kromě toho, že originál má lepší rozlišení. Instructables opět rozšiřuje obrázek tak, aby odpovídal určité nastavené šířce, a proto tento menší (200x108) obrázek vypadá tak hrozně, mnohem hůře než původní 382x206.

Říkám „pravděpodobně“, protože opravdu netuším, jak Instructables zobrazuje tyto obrázky ve vašem prohlížeči. Pokud z jakéhokoli důvodu obnovím mezipaměť a zkontroluji tento Instructable, zdá se, že moje velikosti obrázků nezůstávají konzistentní, takže opravdu nevím, co Instructables dělá, kromě toho, že to může být nekonzistentní. Cílem této instruktáže je tedy zjistit, jak velikost obrázků, aby se zobrazovaly alespoň trochu konzistentně!

Krok 9: Důkaz, že se obrázky zpočátku správně vykreslují

Tady je to, co jsem zpočátku viděl bezprostředně po nahrání obrázku - sedí to! (Všimněte si toho, že jsem musel vložit výše uvedený snímek obrazovky na obrázek 1600x1200 (tj. Poměr 4: 3), aby Instructables zobrazil celý snímek obrazovky!)

Ale samozřejmě víte, že když se podíváte na ten obrázek, který teď pár sklouzne zpět, už se to nehodí. Podívejme se, jaká musí být minimální šířka, aby to sedělo.

Krok 10: Zkuste 382x287 (poměr 4: 3)

Ponechal jsem šířku 382 a původní obrázek 382x206 jsem vložil na plátno 382x287, aby byl poměr stran 4: 3, protože jsme již dříve zjistili, že Instructable potřebuje obrázek, aby odpovídal tomuto poměru 4: 3, aby jej zobrazil celý.

Takže teď je pod ním spousta prázdného bílého místa. Nehodí se s ničím uříznutým, ale opět byl rozšířen tak, aby vyplňoval určitou nastavenou šířku, takže obraz není ostrý. Pokusme se zjistit, jaká je tato dokonalá nastavitelná šířka.

Krok 11: Rozšíření obrázku z 300x206 na 600x206, abyste zjistili, zda se zobrazuje lépe

Pustil jsem původní obrázek 382x206 (2: 1) na plátno 600x206 (3: 1), abych zjistil, zda jeho rozšíření na 600 pixelů způsobí, že Instructables zobrazí celý obrázek. Znovu to zpočátku platilo, ale jak vidíte, nyní už ne.

To je opravdu zvláštní věc - pokaždé, když poprvé vložíte obrázek, vypadá to, že Instructables zobrazí tento obrázek správně, bez ohledu na velikost nebo poměr stran tohoto obrázku. Tentokrát jsem se dokonce odhlásil z Instructables a zavřel tuto záložku a poté znovu navštívil tuto instruktabilní „čerstvou“, abych tak řekl, abych ověřil, zda se obrázek stále zobrazuje správně. Obvykle to stačí k tomu, aby Instructable mohl udělat svou věc a začít měnit velikost obrázků, které nemají poměr stran 4: 3, a zobrazovat je s odseknutou levou a pravou stranou.

K mému překvapení, prvních párkrát, co jsem znovu navštívil tento instruktážní „čerstvý“tento obrázek, zůstal zobrazen celý, ale bohužel, poté, co jsem odešel dělat něco jiného a přišel asi o hodinu později, se tento obrázek začal zobrazovat zvětšeno, strany L&R jsou opět zkráceny, jak to vidíte výše.

Proč nebo jak se to děje? Nemám tušení. Nemám tušení, proč by čekací doba po nahrání obrázku přiměla Instructables vykreslit to jinak, ale dělá to. Jako důkaz ukážu svůj snímek obrazovky výše uvedeného obrázku, který se perfektně zobrazí v prvním oh, 10-15 minut poté, co jsem ho nahrál na další snímek.

Krok 12: Důkaz, že se obrázky po nahrání správně zobrazí zpočátku

Zde je snímek obrazovky, který ukazuje, že obrázek 600x206 se zobrazuje celý hned po nahrání. Toto je snímek obrazovky předchozího snímku. Vraťte se na předchozí snímek a uvidíte, jak je obrázek nyní vylepšený!

Všimněte si, že můj snímek obrazovky byl ve skutečnosti velikosti 1563x766, ale jak jsem se dozvěděl ze svých experimentů na začátku tohoto Instructable, věděl jsem, protože to neodpovídalo poměru stran 4: 3 (1563x766 je zhruba 4: 2), takže kdybych právě nahrál ten snímek obrazovky v původní velikosti Instructable by zkrátil okraje. Tak jsem ten obrázek hodil na plátno 4: 3, takže pod mým screenshotem je spousta prázdného bílého místa.

Všimněte si, že snímek obrazovky byl také pořízen, než jsem změnil název kroku 11 a dokončil psaní celého tohoto textu pro případ, že by vás to zajímalo!

Poučení - zobrazení nahraného obrázku v prohlížeči bezprostředně po nahrání nemusí nutně ukázat, jak bude v budoucnu zobrazen. Z jakéhokoli důvodu se zdá, že se téměř jakýkoli obrázek velikosti a/nebo poměru stran zobrazuje pěkně hned po nahrání, a dokonce asi 10–15 minut po nahrání, a dokonce i poté, co se odhlásíte z Instructables a zobrazíte jej nově z nové relace prohlížeče atd..

Ale počkejte asi hodinu nebo déle a věci se změní! Pokud váš obrázek neodpovídá poměru stran 4: 3, bude upraven (obvykle zvětšen) pomocí Instructable, aby byly okraje zkráceny.

Krok 13: Sečteno a podtrženo - co jsem se naučil

Takže konečný součet - co jsem se naučil?

1. Chcete -li zobrazit obrázek jako celek, je nutné dodržet poměr stran 4: 3 (šířka: výška)!

2. Použijte originální obrázky, které jsou velké, s nejvyšším možným rozlišením, a vložte je na plátno s poměrem stran 4: 3. Pokud je příliš velká, Instructables ji zmenší a budete mít pěkné ostré obrázky.

3. Pokud je váš obrázek příliš malý (mnohem menší než 600 pixelů na šířku), nástroj Instructable rozšíří váš obrázek a zvětší jej na nejméně 600 pixelů, čímž bude méně ostrý. Říkám „ish“, protože přesně nevím, jakou šířku Instructable používá, ale zdá se, že se blíží 600. Pravděpodobně je to 640, což byla běžná šířka ve dnech staré školní elektronky.

Poměry stran 600x450 a 640x480 jsou 4: 3. Všechny trubkové monitory „na celou obrazovku“ze staré školy byly 640 x 480 (šířka x výška).

4. Co dělat, když váš původní obrázek není široký alespoň 600 pixelů? Přibližně vše, co můžete udělat, je umístit jej na plátno, které odpovídá poměru 4: 3 a zobrazí váš obrázek téměř v původní velikosti. Pokud je váš původní obrázek malý, bude zde mnoho prázdných prázdných míst, zkuste tedy obrázek vycentrovat nebo jej umístit buď nad, nebo pod obrázek, aby vypadal co nejlépe.

Pokud je mi známo, je to kompromis, který budete muset učinit v Instructables, aby se vaše obrázky zobrazovaly neporušené.

Výše uvedený obrázek má například velikost plátna 600x450 a do něj je vložen a vycentrován obrázek 382x206, takže nahoře i dole máme stejné prázdné místo. Obrázek se zobrazuje zhruba v původní velikosti.

5. NEDŮVĚŘTE náhledu a nevěřte tomu, jak váš obrázek vypadá prvních pár hodin po jejich nahrání do Instructable! Z nějakého důvodu se zdá, že velikosti obrázků zůstávají konzistentní až několik hodin po jejich nahrání.

Pokaždé, když poprvé vložíte obrázek, vypadá to, že Instructables zobrazí tento obrázek správně, bez ohledu na velikost nebo poměr stran tohoto obrázku. Může se dokonce stát, že se bude zobrazovat správně ještě nějakou dobu poté, ale NEDĚLEJTE SE, protože nakonec změní jejich velikost a způsobí vám problémy, pokud nedodržíte pravidlo 4: 3!

Doufám, že to pomůže a prosím, pokud najdete lepší způsob nebo máte jiné rady, dejte mi vědět!