Определяне на подходящ размер

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Преди да създадем нашето изображение, което смятаме да публикуваме в интернет, трябва да си отговорим на един въпрос.
С какви размери трябва да бъде то? Размерите на изображението определят неговото "aspect ratio" или това е съотношението между ширина и височина на изображението.
Което е много важно да се знае, за да бъде визуализирано вашите изображение в уеб страницата, както трябва.
Защо точният размер е важен въпрос? След малко ще го разгледаме това, а в случая искам да ви покажа, какво ще се случи ако размера и съотношението на изображението не е спазено.
Да предположим, че в това каре, във вашата уеб страница трябва да съберете изображение, което е с този размер..
Нека да допълним това изображение.
Имаме перфектен кръг, който се намира на ето този син фон.
Това е нашето изображение, а това е рамката, в която трябва да се събере в уеб страницата.
Ще растеризирам тези два слоя.
И ще ги обединя, за да са едно изображение.
Какво се получава ако искаме да съберем това изображение, в тази рамка и размерите, както виждате са различни на двете.
В най-добрият вариант.
Ще трябва изображението някак да бъде позиционирано в тази рамка.
Част от него да бъде отрязана.
Ако бъде центрирано и се вижда основната част и губим само от фона е добре, но това всъщност много рядко ще се случва.
По-скоро това изображение, което слагаме ще бъде подравнено по някой от краищата.
И дори няма да имаме вариант, в който да изберем коя част да не се вижда от изображението.
Това е първият вариант, в който ще бъде отрязаната част от изображението.
Която е по-голяма от рамката, в която го слагаме.
В другият вариант, това изображение ще бъде трансформирано така, че да се събере в рамката.
Когато това се случи обаче, изображението ще изглежда различно и това също е ефект, който не искаме да постигаме.
Това нещо може да го избегнем ако от самото начало знаем, в какъв размер трябва да работим при нашето изображение.
Така, че след ъплоудването му да няма никакви проблеми.
Но, как да разберем, какъв е този размер в нашата уеб страница, ще ви покажа в следващият пример.
Да предположим, че искаме да създадем изображение, което да се вмести ето тук.
Големината на това изображение, което е поместено в този случай, могат да видя по няколко начина.
Най-лесеният вариант е десен бутон върху изображението и да го запазя някъде на твърдият диск това изображение.
Когато се запази, с десен бутон, "properties".
Да видя, какви са размерите му.
655 по 402 пиксела.
Значи изображението, което създавам трябва да има същите размери, 655 по 402 пиксела.
Това, обаче е валидно само за случаи, в който това изображение мога да го сваля.
В много от случаите обаче, десен бутон върху изображението няма да ви позволи да го свалите.
И това ще бъде забранено от самият уеб сайт.
Разбира се, вие няма да сте го забранили за вас ако това е вашият уеб сайт.
Но ако публикувате в чужд website и трябва да прецените този размер колко е, това е един от начините.
Да видите във вече публикувана част, какъв е съществуващият размер.
Това обаче е валидно в случая, когато първо може да свалите изображението и второ е ясна рамката на самото изображение.
Ако искам обаче да видя, какъв е размера на това изображение на логото, мога да го направя същото с десен бутон и да запазя това изображение.
Но ще ви покаже друг случай, в който ако не стане с десния бутон, как можете да видите самият размер.
Това нещо може да го видите от сорса на самата страница.
Който за "Google Chrome" може да го направите от това меню с настройките.
"more tools", "view source".
Тук се зарежда източника на цялата страница.
Тук някъде има посочени изображенията и размерите, с които се използват в страницата.
От начало, когато видях така страницата формирана, предположих, че няма да бъде много трудно да открия кое изображение, какво е и с какъв размер е.
Обаче, когато видях "source" се оказа, че кода тук е организиран в 3051 реда.
Всъщност това намиране тук може да не е чак толкова лесно.
Но извадих малко късмет, тъй като изображението, което търсех се оказа, че е само на 147 ред.
По принцип, това е начина да видите от "source" на изображението, от "source" на web страницата, с какъв размер изображението.
Това е логото.
Това е името на файла, който се използва.
Това е тага, с който ще го намерите, а това са големината и височината в пиксели.
Това търсене тук може да отнеме доста време.
Затова това, което ще ви препоръчам всъщност е използването на една допълнителна програмка която е безплатна.
Може да си свалите от интернет.
С която сравнително точно да определите големината на изображенията или по-точно на каретата, в които ще се публикува снимката.
Програмата, за която говорим се казва "Skitch".
По принцип тя има друго предназначение, но ще ви покажа, как ще използвам за нашите цели.
Когато създадем нов документ, който да бъде от типа "screen snap", виждате, как курсора в момента чака да определя пространство, което да бъде така да се каже снимано.
Или да се направи "screenshot" на част от екрана.
В момента, в долния десен ъгъл ми показва координатите в пиксели на самия курсор.
Това в момента няма никакво значение.
Просто го казвам, така въвеждащо, а начина по който ще го използваме следният.
Когато тръгна да определям големината на рамката кликвам и валача.
Сега в долния десен ъгъл от това, което виждам е големината на карето, което селектирам в пиксели.
Което автоматично ми дава големината на изображението в пиксели, 654 по 403.
В случая селекцията ми не е много чистата, тъй като отгоре виждам, че има една тънка бяла линия.
Но това е изключително лесен метод, по който можете на 99% да направите веднага една оценка на това, колко голямо изображение ви трябва.
Да направим още един опит със нов екран, "screen snap".
Този го махам.
Да се опитаме например да преценим ето това изображение, колко е голямо.
Това тук може да е място за вашият банери или за някаква реклама, за което да изготвите някакво изображение.
Кликвам в горната част.
Трябваше да кликна малко по-надолу, 51на 52 така, че вероятно това изображение е 50 на 50 пиксела.
Ще направя още един опит.
Малко е подвеждащ този дебел курсор и не се вижда самото начало, къде е началната точка.
Но това е плюс минус един пиксел, което е всъщност доста точно 50 на 51 е в момента.
Значи, ако трябваше да подготвим изображение за това каре, щях да направя 50 на 50 пиксела.
И така, като обобщение за определяне на размер на изображенията, които ще публикуваме в някоя страница в интернет.
Реалният размер можем да го видим от вече съществуваща публикация от "source" кода на самата страница.
Както видяхме тук, в този пример.
Или с допълнителната програмка, която ви показах, с която можем да направим "screenshot".
Точно на тази част, която съдържа изображението и оттам също да видим, каква е неговата големина.

Въпроси и отговори

  • Как да определим размер за нов сайт?

    Веселина Грозева:

    Докато гледах урока се породи въпросът - как да определим размера на изображение например за нов сайт. Имам в предвид тепърва ще се прави сайта и няма изображение, което да използвам за източник на информация. Има ли там някакви "правила" и "изисквания" към размера му? Благодаря!

    Ивайло Искренов:

    Здравей Веселина,

    правилата за големините и разположението на изображенията в сайта не мисля че са утвърдени и застъпени, защото става въпрос за поднасяне на визуална информация, която във всеки сайт е различна и за различните области на приложение е подходяща различна структура. За това по-скоро може да се говори за "типови" сайтове, където подобни размери ще са по-скоро подходящи отколкото правилни. Ако сайта ти показва новият модел автомобил на някой компания, може да искаш да заложиш на едно, голямо изображение, ако обаче сайта ти е за продажба на бижута, сигурно ще заложиш за много на брой и малки изображения. Много зависи от предназначението и функцията на сайта ... и според мен лично основното изискване е да изглежда добре (което също е условно) и да е "хармонично" спрямо цялото съдържание, да е са спазени най-основните правила на композицията.
      Другият полезен вариант -поне като начало, е да разгледаш подобни сайтове и да видиш там как са структурирани нещата ... малко творческо взаимстване :)
      Ако някой се занимава с разработване на сайтове, може да допълни темата с примери или правила, утвърдени в практиката :)
    Веселина Грозева:

    Благодаря! Много полезна и изчерпателна информация и ценни съвети!!!

    инж. Юлиан Ангелов:

    За определяне на размера на изображенията аз се водя от практически съображения. От години произвежданите монитори и дисплеи за лаптопи не са с традиционното съотношение 4:3, а с 16:9 или близки до него. Това ограничава възможностите си за "високи" изображения. Имате ограничения и от това как ще изпълните сайта и ако ползвате CMS ( напр. WordPress) - и от темите, които са подходящи в контекста на излагане на информацията на сайта - дали има или няма странична лента, стики меню ( което остава винаги в горният край на екрана) и др. такива особености. Силно нежелателно обаче за посетителя на сайта е изображението да не се вижда цялото, а да се налага да се скролва, за да се разгледа. Аз за себе си се убедих, че е най-удобна страницата за разглеждане, ако позиционирам изображенията в единият край ( левият или десният - рядко има значение) а другата част от екрана да е запълнена с текста, който се отнася за изображението. А това предполага неголеми изображения, по възможност подбрани така, че да са в "портретен" вид - може би ако изберем изображение, което да стои добре 4:3 "изправено" в портретен вид. А ако имаме странична лента, която стеснява полето за основният текст - тогава да търсим подходящо изображение, което да изглежда 16:9 в портретен вид.

  • Как да променим размера на снимка?

    Цвета Тодорова:

    Здравейте, Моят въпрос е как да променим размера на снимка, без да променяме качеството й? Благодаря!

    Ивайло Искренов:

    Здравей, може да конвертираш снимката в Smart обект. Също така може да прочетеш още по темата тук във форума : http://aula.bg/question#id-130240000001

    Kristina Stancheva:

    Здравейте, този линк не е активен. Аз също се интересувам от този въпрос. Може ли да ни дадете актуален линк по темата? Благодаря!

    Kristina Stancheva:

    Благодаря!

    Rumen Gotsev:

    Урокът е от 2015 г. така видях от статията за пингвините, и тя е от 2015 г. аз мисля, че всичко е реално от 2018-2019 г. значи всичко ми се е струвало нереално, но е било преди 4 години. а дизайнът толкова много се промени и продължава с бързи темпове да се променя. следователно, човек постоянно трябва да обновява своите познания. софтуера също се променя. следователно, човек трябва да приема всяко предизвикателство и да се справи с него. Уменията също трябва да се променят. Това го показва постоянната практика. Теоретично всяко нещо изглежда много лесно, но практически - всяко действие е премерено и не винаги човек иска да направи нещо ново. аз се запознах с фотошоп 6 през 2006 г. бях тогава само един ентусиаст. после минах на версия 7.0, но не познавах програмата в дълбочина, но не се бях запознал с каналите, а тогава ми е липсвало въображение. За да можем да кажем, че умеем да работим с Фотошоп, трябва да имаме голяма доза въображение, трябва да си представяме невидимите идеи, които искаме да получим като видими резултати. аз в последствие се запознах и с книги по фотография, започнах да се уча да снимам. отидох да уча магистратура в амтии пловдив - специалност графичен дизайн и фотография. а преди да запиша да уча, отидох в едно малко студио да се запозная практически с фотошоп и корел дроу - програма за векторна обработка. теоретично не бях подготвен, но ме подготвяха практически. с програми като фотошоп и корел се запознах малко по-надълбоко в един курс на пловдивската регионална сиско академия. там поне един два месеца отделяхме внимание как работят тези програми. после трябваше да чета "туториали" по корел дроу и фотошоп. с илюстратор се запознах през 2009 г. а с индизайн през 2016 г. аз все още търся нови неща, които искам да науча от по-опитни и приветливи потребители. човек ако иска да научи най-необходимото и най-важното, той ще успее. в мен има нещо, което ме кара да харесвам фотошопа, това е този курс - тайните на фотошоп.

  • Може ли да дадете линк за сваляне!

    Георги:

    Здравейте! Може ли да дадете линк и описание за сваляне на програмата skitch? Благодаря!

    Ивайло Искренов:

    Здравей, за съжаление от Evernote, спират поддръжката на Skitch за Windows и няма да можеш да я свалиш от официалният сайт, но може да пробваш от този адрес :
    http://www.techspot.com/downloads/downloadnow/5705/?evp=cbd9d319fb05a26f9273e3d881f2594f&file=1

    Георги:

    Благодаря! Добра работа върши.

    Николина Танчева:

    Ако откривате трудности да си свалите тази програмка, може да използвате и "Изрязващ инструмент" (който по подразбиране си е в пакета на Microsoft на почти всеки компютър). Изрязвате селекцията, записвате я и с десен бутон в свойствата може да откриете размерите на изображението. Принципа е подобен :)