Оразмеряване на изображения с инструкции: 13 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:53

Имате ли проблеми с правилното оразмеряване на изображенията? Прекалено големи ли са вашите изображения и преливат рамката като тази по -горе? Този инструктируем опит да обобщи наученото за решаване на този проблем.

От Instructable Staff ми казаха, че всички качени изображения се дублират в различни съотношения. Тези групи изображения след това се изтеглят и оразмеряват по различен начин в зависимост от това от какво устройство гледате инструкциите. Няма начин да се посочи в обикновения редактор какъв размер и съотношение да се показва.

След това те предложиха, че "Друг вариант, който може да работи, е ако качите изображения, които са с по -традиционно съотношение. Всичко от 16: 9 до 4: 3 трябва да се показва много добре."

Забележете, че казват, че това "може" да работи. Ето какво открих в борбите си изображенията ми да се показват прилично. (Обърнете внимание, че използвам изображения от моя "Кубикът на Рубик е лесен" с инструкции, следователно всички тези изображения на куб!)

Горното изображение е с оригиналния си размер (600x195), което не е в този диапазон на традиционните съотношения. Както можете да видите, Instructables показва това изображение увеличено твърде голямо с отрязани лявата и дясната страна. Нека да видим какво можем да направим, за да се покаже това изображение правилно.

Стъпка 1: Нека опитаме съотношение 16: 9

Така че нека опитаме съотношението 16: 9 (ширина: височина). Ще запазя първоначалната ширина от 600 пиксела, 16: 9 означава, че височината трябва да бъде 338 пиксела, така че ще направим платно с размер 600x338 и ще пуснем това изображение 600x195 в него.

Нека да видим как изглежда това изображение с размери 600x338 (съотношение на страните 16: 9). Толкова интересно, когато пуснах това изображение и го визуализирах, той пасна идеално - левият и десният ръб не бяха отрязани! Направих екранна снимка само за доказателство, вижте го в следващия слайд.

Но когато гледам това в браузъра си (Chrome), това, което виждам на горното изображение, е, че дясната и лявата страна отново са отрязани! Така че от този експеримент изглежда, че преоразмеряването до съотношение на страните 16: 9 няма да реши нашите проблеми!

Като странична забележка, 16: 9 е "новото" общо съотношение на страните, известно като "широкоекранен", докато 4: 3 е старото училище "цял екран", което беше обичайно в дните на телевизионната телевизия. Да, ти хилядолетни вероятно нямаш представа за какво говоря.

Стъпка 2: 16: 9 Прясно качено изображение, както е видяно в визуализацията

Тази снимка е заснемането на екрана, което показва, че нашето 16: 9 изображение изглежда перфектно в визуализацията. Успех нали? Е, не толкова бързо - вижте какво се случва, когато всъщност прегледаме тази страница в нашия браузър (Chrome)! Левият и десният ръб се отрязват отново! Просто се върнете, за да оставите предишния слайд и да се уверите сами.

Научен урок - не се доверявайте на визуализацията! Това, което изглежда добре в визуализацията, се изобразява по различен начин при реално гледане с браузър!

Също така, да, има много бяло пространство под изображението ми. Това е така, защото пуснах изображение с размер 600x195 в платно с размери 600x338 и го поставих отгоре, така че в долната част има цялото това празно бяло пространство. Какво можем да направим по въпроса? Е … ще се опитаме да разгледаме това в по -късен слайд.

Така че нека продължим да виждаме как можем да направим това изображение да се показва изцяло.

Стъпка 3: 16: 9 Показва се с отрязани страни на L&R

Само за протокол, в случай че по някаква причина браузърът ви показва тези 16: 9 изображения перфектно, за това говоря. Ето екранна снимка на това как виждам изображението си в съотношение 16: 9 в Стъпка 1, показвано след „установяване“след първоначалния преглед - забележете, че лявото и дясното са отрязани.

Ако виждате изображението ми от Стъпка 1 перфектно, добре, чудесно. Кажи ми! Но аз така го виждам. Да, това е много по -добро от оригиналното изображение от заглавната страница, но все пак е отрязано. Така че за мен, въпреки съветите от персонала на Instructables, съотношението на страните 16: 9 не го намалява. Нека преминем към съотношение 4: 3.

Стъпка 4: Нека опитаме съотношение 4: 3

Така че нека опитаме съотношението 4: 3. Ще запазя оригиналната ширина от 600 пиксела, 4: 3 означава, че височината трябва да бъде 450 пиксела, така че ще направим платно с размер 600x450 и ще пуснем това изображение 600x195 в него.

Как изглежда това изображение с размери 600x450 (съотношение 4: 3)?

Отново, когато го пусна за първи път, изображението изглежда страхотно (с изключение на цялото бяло пространство в долната част). Ляво и дясно се показват добре. Гледайки го в браузър, изглежда, че дясното и лявото изглежда продължават да се показват добре.

Както бе отбелязано по -рано, цялото това празно бяло пространство под изображението се дължи на това, че пуснах изображението си 600x195 в платно 600x450 и просто го поставих в горната част.

Извлеченият урок - Съотношението на страните 4: 3 изглежда е необходимо, така че дясната и лявата страна да не бъдат отрязани. За съжаление това означава, че ще има много бяло пространство за кратки и широки изображения, защото ще трябва да ги пуснете в платно с размер 4: 3. Да, можете да центрирате изображението си така, че да има равни бели пространства отгоре и отдолу, но независимо от това, ще има много бяло пространство над или под изображението ви, но доколкото ми е известно, това е компромисът, който ще трябва да направите в Instructables, така че вашите изображения да се показват непокътнати.

Стъпка 5: 4: 3 С Изображение в центъра

Ето същото изображение с размери 600x195, пуснато в платно 600x450, но центрирано, така че да има равни празни бели пространства отгоре и отдолу. Изглежда малко по -добре, текстът не изглежда толкова далеч от изображението.

Стъпка 6: 4: 3 с изображение в долната част

И накрая, ето, че същото изображение попадна и се премести на дъното. Сега има един тон празно бяло пространство в горната част на изображението. Изображението вече е наистина отделено от заглавната лента, но е по -близо до текста. Това са вашите компромиси и поуки:

• 4: 3 изглежда е съотношението на страните, което трябва да използвате, за да се показват изображенията изцяло в Instructables.
• не се доверявайте на визуализацията - тя може да покаже вашето изображение перфектно, но частите могат да бъдат отрязани в самия браузър

Стъпка 7: Каква е минималната ширина?

Сега нека видим каква трябва да бъде минималната ширина. Показаното изображение е с размер 382x206, близо до 2: 1, изглежда наистина огромно, нали? Очевидно Instructables е увеличил изображението, за да го побере с определена ширина, вероятно 640 пиксела, не съм сигурен.

Но се вписва, защото е по -квадратна - т.е. не е твърде широка за височината си. О, изчакайте, отново ме измами този преглед! Всъщност не се вписва - страните на R&L отново се отрязват.

Всъщност това е странно, не само визуализацията е объркана. Всъщност го погледнах в браузъра и първоначално се изобразяваше правилно (т.е. краищата на R&L не бяха отрязани). Но като го погледнем отново през браузъра, сега изображението се изобразява преоразмерено с отсечени краища на R&L. Странно.

Така че нека се опитаме да намалим изображението. Ще намалим изображението до 200x108, запазвайки същото съотношение 2: 1.

Стъпка 8: Свиване на изображението, но запазване на съотношението

Така че преоразмерявам това изображение до 200x108, запазвайки същото съотношение 2: 1.

Сега отново изглежда, че първоначално се вписва (с разделителна способност (качеството на картината) значително се влоши!), Но разбира се, вероятно го гледате и изобщо не се вписва и изглежда точно като оригиналното изображение, с изключение на оригинала по -добра резолюция. Отново, Instructables разширява изображението, за да го приспособи към определена ширина, така че това по -малко (200x108) изображение изглежда толкова ужасно, много по -лошо от оригиналния 382x206.

Казвам „вероятно“, защото наистина нямам представа как Instructables показва тези изображения във вашия браузър. По някаква причина, ако опресня кеша си и прегледам този Instructable, размерите на изображението ми изглежда не остават последователни, така че наистина не знам какво правят Instructables, освен че може да е непоследователно. По този начин целта на този Instructable - да разбере как да оразмерите изображенията, така че те да се показват поне донякъде последователно!

Стъпка 9: Първо докажете, че изображенията се изобразяват правилно

Ето какво видях отначало веднага след качването на изображението - пасва! (Имайте предвид, че трябваше да вмъкна горната екранна снимка в изображение с размери 1600x1200 (т.е. съотношение 4: 3), за да накарам Instructables да покаже цялата екранна снимка!)

Но, разбира се, знаете, че когато погледнете това изображение, което се плъзга назад сега, вече не е подходящо. Нека да видим каква трябва да бъде минималната ширина, за да се побере.

Стъпка 10: Опитваме 382x287 (съотношение 4: 3)

Запазих ширината 382 и пуснах оригиналното изображение 382x206 в платно 382x287, за да го направя в съотношение 4: 3, защото по -рано открихме, че Instructable се нуждае от изображение, което да пасне на това съотношение 4: 3, за да го покаже изцяло.

Така че сега има много празно бяло пространство отдолу. Той пасва без нищо отрязано, но отново е разширено, за да запълни определена ширина, така че изображението да не е рязко. Нека се опитаме да намерим каква е тази перфектна ширина на Instructable.

Стъпка 11: Разширяване на изображението от 300x206 на 600x206, за да видите дали се показва по -добре

Пуснах оригиналното изображение 382x206 (2: 1) в платно 600x206 (3: 1), само за да видя дали разширяването му до 600 пиксела ще накара Instructables да покаже цялото изображение. Отново първоначално се получи, но както виждате, сега не е така.

Това е наистина странно нещо - всеки път, когато за пръв път пуснете изображение, изглежда, че Instructables ще показва това изображение правилно, без значение какъв е размерът или съотношението на изображението. Този път дори излязох от Instructables и затворих този раздел, след което отново посетих този Instructable „свеж“, така да се каже, за да проверя дали изображението все още се показва правилно. Обикновено това е достатъчно, за да позволи на Instructable да си свърши работата и да започне да преоразмерява изображенията, които не са в съотношение 4: 3, и да ги показва с отрязани лява и дясна страна.

За моя изненада, първите няколко пъти, когато прегледах този „свеж“инструмент, това изображение наистина се показваше изцяло, но уви, след като си тръгнах да направя нещо друго и дойдох може би час или нещо по -късно, това изображение започна да се показва уголемен със странично отрязани L&R, както го виждате по -горе.

Защо или как се случва това? Нямам представа. Нямам представа защо изчакването на определен период от време след качване на изображение би накарало Instructables да го изобразят по различен начин, но го прави. Като доказателство ще покажа снимката на екрана на горното изображение, показваща се перфектно в първия о, 10-15 минути след като го качих в следващия слайд.

Стъпка 12: Доказателство, че изображенията се показват правилно първоначално след качване

Ето заснемане на екрана, показващо това изображение с размери 600x206, което се показва изцяло веднага след качването. Това е екранна снимка на предишния слайд. Върнете се към предишния слайд и можете да видите колко добре е изображението сега!

Обърнете внимание, че моят улавяне на екрана всъщност беше с размер 1563x766, но както научих от експериментите си в началото на тази инструкция, знаех, тъй като не отговаряше на това съотношение 4: 3 (1563x766 е приблизително 4: 2), така че ако бих току -що качи тази екранна снимка в оригиналния си размер Instructable ще отреже ръбовете. Така че пуснах това изображение в платно 4: 3, така че под моята екранна снимка има много празно бяло пространство.

Обърнете внимание, че екранната снимка също беше направена, преди да променя заглавието на Стъпка 11 и да завърша въвеждането на целия този текст, в случай че се чудите за това!

Научен урок - гледането на каченото от вас изображение в браузър веднага след качването му не показва непременно как ще се показва в бъдеще. По някаква причина почти всеки размер и/или съотношение на изображението изглежда се показват добре веднага след качването и дори за около 10-15 минути след качването и дори след като излезете от Instructables и го прегледате прясно от нова сесия на браузъра и т.н..

Но изчакайте около час или повече и нещата се променят! Вашето изображение, ако не отговаря на съотношението 4: 3, ще бъде коригирано (обикновено увеличено) от Instructable, така че ръбовете да бъдат отрязани.

Стъпка 13: В крайна сметка - какво научих

И така - какво научих?

1. За да изведете изображение в цялост, запазването на съотношение 4: 3 (ширина: височина) е задължително!

2. Използвайте оригинални изображения, които са големи с възможно най -високата разделителна способност и ги пуснете в платно със съотношение 4: 3. Ако е твърде голям, Instructables ще го намали и ще имате хубави резки изображения.

3. Ако изображението ви е твърде малко (много по -малко от 600 пиксела в ширина), Instructable ще разшири изображението ви и ще го направи поне 600 пиксела в ширина, като по този начин ще го направи по -малко рязко. Казвам "иш", защото не знам точно каква ширина използва Instructable, но изглежда близо до 600. Вероятно е 640, което беше обичайна ширина в дните на стария училищен тръбен монитор.

600x450 и 640x480 са съотношения 4: 3. Всички стари училищни лаптопи на цял екран бяха 640x480 (ширина x височина).

4. Какво да направите, ако оригиналното ви изображение не е най -малко 600 пиксела широко? Всичко, което можете да направите, е да го пуснете в платно, което отговаря на съотношението 4: 3, което показва вашето изображение близо до първоначалния му размер. Ако оригиналното ви изображение е малко, ще има много празно бяло пространство, така че опитайте да центрирате изображението си или поставете бялото пространство над или под изображението си и го накарайте да изглежда възможно най -добре.

Доколкото ми е известно, това е компромисът, който ще трябва да направите в Instructables, така че вашите изображения да се показват непокътнати.

Като пример, горното изображение е с размер на платното 600x450 с изображение 382x206, поставено в него и центрирано, така че имаме равни празни бели пространства отгоре и отдолу. Изображението се показва приблизително в оригиналния си размер, мисля, че Instructables може да го разшири до 640x480 (незначително разширение), така че това е най -доброто, което можем да направим с това оригинално изображение.

5. НЕ се доверявайте на визуализацията или на начина, по който изглежда вашето изображение през първите няколко часа след качването им в Instructable! По каквато и да е причина размерите на изображенията изглежда не остават еднакви до няколко часа след като ги качите.

Всеки път, когато пуснете за първи път изображение, изглежда, че Instructables ще покаже това изображение правилно, независимо от размера или съотношението на изображението. Може дори да остане да се показва правилно известно време след това, но НЕ БЪДЕТЕ ЗАБЛУДАНИ, защото в крайна сметка ще ги преоразмери и ще ви създаде проблеми, освен ако не спазвате това правило 4: 3!

Надявам се, че това помага и моля, ако намерите по -добър начин или имате някакви други намеци, уведомете ме!