Задача. Уеднаквяване на изображения за публикацията

Уеб сайтове с Wordpress WordPress е страхотен инструмент – едновременно безплатен и безценен помощник в създаването на уеб сайтове. Лесен за инсталация и използване от всеки!

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

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
Напред
В този урок, който е по-скоро едно упражнение.
 За обработка на изображения.
 Ще редактираме няколко изображения.
 Нека да разгледаме какво имаме.
 Това са изображения, които са на статии, които вече сме публикували, но трябва да коригираме или на статии, които тепърва ще качваме и ни трябват в нормален размер.
 Първото изображение е за една рецепта.
 И е от безумните 15 МВ.
 Това просто не може да бъде изображения за уеб.
 Може да бъде изображения за разпечатване на билборд, но не и за изображение, което ще се ползват за уеб.
 Затова трябва да го редактираме.
 Долу в информацията се вижда "Canon 6d".
 Чудесен фотоапарат.
 Но това изображение, което прави ние ще трябва да го редактираме, за да стане по-подходящо за уеб.
 Резолюцията е 5472 на 3648 пиксела.
 Прекалено голяма за нашите нужди.
 Следващото изображение е чашата с лимон.
 Тя е прилична като размер 300 КВ.
 1920 на 1271 пиксела като размер.
 Доближава се до нашите изисквания, но ще трябва да го редактираме.
 Следващото е 830 на 550 пиксела.
 Това е изображение за една статия.
 За съжаление няма да може да го използваме.
 Ще трябва да намерим ново изображение, защото ако тръгнем да го увеличаваме като размер.
 Просто ще се развали качеството.
 Така че това изображение няма да ни свърши работа.
 Единият вариант е да го заменим, а другия вариант е да го направим в половин размер, спрямо препоръките на "Facebook", което в нашия сайт мисля, че ще изглежда добре.
 И все още ще изглежда добре и в "Facebook".
 Ще направим един тест с това изображения.
 Да видим следващото изображение.
 Това са нашите броколи.
 Те са доста малки като размер.
 Тях също ще ги коригираме на половината на размера.
 Тоест вместо да е 1200 на 630, ще бъде 600 на 315 пиксела.
 И ще видим какво ще се получи.
 Това са доматите, които отново са доста големи 6 MB.
 И с някаква безумно висока резолюция, за целите на уеб.
 И киноата, която е компактен файл 168 КВ.
 Със сравнително висока резолюция.
 Нека да редактираме тези изображения.
 Но това, което ви предлагам да направите е.
 Да свалите тези файлове, които са под урока.
 Да се опитате да редактирате файловете сами.
 След което да видите как аз да ги редактирам.
 Така че оставете на пауза сега видеото.
 Редактирайте ги.
 И ако имате затруднения пуснете видеото.
 И вижте как аз ще ги редактирам.
 Наистина оставете на пауза видеото.
 И се опитайте сами да редактирате тези файлове.
 На базата на това, което направихме досега.
 Добре аз ще продължа с редакцията.
 Ще пусна програмата "Paint".
 И един по един ще ги редактирам.
 Първо ще хвана този огромния файл.
 Ще го преоразмеря.
 1200.
 На 800.
 Се получава, което означава, че във височина ще трябва да го редактирам.
 Единия вариант е да го режа само отдолу.
 Другият вариант е да го режа отдолу и отгоре.
 Затова за да не отрязвам прекалено много отдолу.
 Аз ще подрежда по такъв начин.
 Ще избера селекция.
 Ще кликна на "Crop".
 Сега стана 1198, мисля че без да исках отрязах 2 пиксела.
 Затова ще върна.
 Трябва внимателно да се кликне.
 Наистина, ако имате "Photoshop", по-удобно е в "Photoshop".
 Но ползваме тези.
 Сега по-внимателно ще избера.
 Докато избирам, долу в селекцията може да видите че размера се променя.
 Само че изпуснах селекцията.
 Променя се размера 630, трябва да стане.
 Кликвам на "Crop" и това е моето изображение.
 Което ще запиша.
 Със същото име.
 Но ще сложа 1200x630.
 За да знам, че това е размерът му.
 Да видим каква е промяната.
 От 15 МВ, стана на 427 КВ.
 Наистина голяма промяна.
 Няма да си играем да го оптимизираме допълнително.
 Все пак ти е под максимума, който казахме ориентировъчно 500 КВ.
 Със сигурност може все още да се намали размера на този файл.
 Да видим лимонът.
 Нов файл.
 Вкарваме изображението с лимона.
 Преоразмеряване.
 И сега ще дръпна на 630.
 Малко е играчка, да се уцели точния размер.
 Но с малко повече тренировка, се получава.
 Разбира се аз правя този размер, който съм решил, че ще ползвам за моята тема.
 Ако вие използвате друг размер.
 Правете него.
 Нека да сложим това изображение.
 830 нека да го направим на 600.
 Реално като размер е по-малко.
 Но пропорцията между височина и широчина е същата.
 Аз ще го избера.
 За да се вижда по-голяма част от чашата.
 Ще избера да бъде 315 височината.
 Като това се променя забележете в долния ляв ъгъл.
 "Crop" и това е изображението.
 Ще бъдеш 600 на 315.
 Схванахте идеята.
 По подобен начин редактирайте и другите изображения.
 И ще ги качим на нашия уеб сайт.
 Останалите изображения ще ги редактирам в "Photoshop".
 Защото честно казано си скъсах нервите с този "Paint".
 Естествено става ако нямате "Photoshop".
 Но ако имате "Photoshop" е по-добре с "Photoshop" да работите.
 Нека да отворим файловете в "Photoshop".
 Това което ни остана е.
 Този файл направихме.
 Лимоните направихме.
 Това направихме.
 Останалите три файла ще ги поставя в "Photoshop".
 Естествено може да си направим малко скриптче в "Photoshop".
 Което правят тези неща автоматични.
 "Photoshop" ми отвори файловете.
 Ще го преоразмерим на 1200.
 И тук вече има опция "Canva Size".
 Където няма да си играя да ги нацелувам пикселите.
 А просто ще кажа на 630.
 "Image Size".
 Избирам 630.
 Да видим как ще се получи.
 Добре се получи.
 Тук ще го направиме на 600.
 И с размер.
 315.
 Така нашите файлове са готови.
 Тук има възможността записване за уеб.
 "JPEG".
 Резолюцията.
 Тук може да намалим размера и.
 Но така ли иначе ние трябваше да променим някои размери.
 Тук ще я добавя.
 1200х630.
 Ще си го копирам, за да го ползвам и за другите.
 Така реално създадохме нашите изображения, които сега ще качим в нашия сайт.
 За да може всичките изображения, да са с еднакъв размер.
 Съответно да имаме една последователност и идентичност на нашия дизайн.

Тест за преминаване към следващия урок

 
Кое НЕ е свързано с уеднаквяване на изображенията на сайта ни?
Пропорционалност на ширина и височина на изображението
Еднакъв размер на изображенията
Последователност и идентичност на сайта
Изображенията могат да се уеднаквяват само чрез Photoshop
 
Какъв е препоръчителният размер на изображенията?
1200 x 200
1200 x 630
1800 x 2000

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

  • Как да премина към следващия урок, ако единият от въпросите не приема отговора и не мога да премина теста

    Ivelina:

    WP 4.3.1

    Мария Балева:

    Здравей,

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

  • Какви?

    Манол Перпериев:

    Какви трябва да са размерите на изображение, на което височината е по-голяма /портретно/?

    Мария Балева:

    Здравей, няма конкретни правлини размери, всичко зависи от личния избор, изображенията които са подбрани и това как стоят в сайта. По-важно е, че всяка тема има различни изиксквания за размерите на изображенията и е най-добре да се придържаме към тях, за да изглеждат най-добре нещата. Естествено може да изберем да работим и с други размери :) Все пак ето тук има полезна информация за размерите на изображенията в темата colormag

  • Как трябва да действаме в случаите, когато изображението,което имаме е дори под границите наполовина 600х315?

    Надежда Димитрова:

    Как трябва да действаме в случаите, когато изображението,което имаме е дори под границите наполовина 600х315?Тогава не можем да използваме това изображение или?

    Кристиана:

    Най-добре е да си намериш изображение, което да отговаря на размерите.

    Адриян Бойков Хаджийски:

    В последните си версии Photoshop се справя доста добре със запазването на качеството, когато увеличаваме размера на някое изображение. Според мен преди да се търси ново, си струва да се пробва и да се прецени дали резултатът е удовлетворителен или не :)

    Rumen Gotsev:

    А какво мислите за Gimp? Тази програма е свободно разпространяема и може да свърши чудесна работа. Ето ви Gimp за Windows:

    https://www.gimp.org/downloads/

    Ако хората нямат достъп до Photoshop, а самия Photoshop е много тежък и отнема от ресурсите на RAM паметта. Gimp като програма е много по-лек като програма и не затормозява компютъра, нито отнема от ресурсите на паметта на компютъра.

    Имам една идея: Да има курсове за Gimp, Inkscape, Scribus, Blender. Предполагам, че ще има хора, които ще имат желание да се научат.

    Любомир Жипонов:

    Бих искал да ви споделя един важен съвет за изображенията в уеб. Добре е по-големи изображения да ги превръщате в по-малки според идеята ви, но не и обратното (разваля се качеството). Важно е и резолюцията (DPI), освен dimensions - DPI за WEB 72 или 96 pixels/inch, не повече (при Print е 240-300px/inch диапазона за high quality). Важен е и цветовия режим за уеб: RGB 8bits/channel с профил на изображението sRGB IEC61966-2.1 (не AdobeRGB, не CMYK). И не на последно място ако искате изображенията да ви се отварят супер бързо в сайта ви от потребителите (тоест да са с възможно най-малкия размер като големина в MB, но да не се разваля същевременно с това качеството) ви препоръчвам една програма JPEGmini Pro. Бърза, лесна, БЕЗ никакъв компромис в качеството, както за принтиране така и за уеб, при намаляване на изображението като големина приблизително няколко пъти. Ако ползвате също фейсбук и се съобразите с техните изисквания например 960 или 2048px/inch по дългата страна и след това "хвърлите" изображението през тази програма и го upload-нете във фейсбук - ще виждате кристално ясно изображението, както когато си го гледате локално на вашия компютър (фейсбук не прилага компресията си, която по принцип прави за изображенията с цел да достигнат до около 100kb снимките).

    Вера Строй ЕООД:

    Аз лично предпочитам Faststone image viewer и IrfanView.

    Ivan Pukov:

    Аз лично използвам SlowView ( http://www.brennig.com/ ) един стар редактор - работи под всички windows-и и такива операции ги решава за секунди

    Живко:

    Аз ползвам InkScape

  • Защо всички изображения нямат визуализация?

    Албена Христова:

    Здравейте ! Няма причина да не ми се визуализира изображението, но не се получава - 194 КВ, 1200 × 626. Същото се получава и с останалите изображения от упражнението. Каква може да е причината ?

    Петър Триндев:

    Направено е нарочно, за да не се ползват готовите изображения. Трябва да се направи упражнението с Resize и полученото собствено изображение ще се визуализира.

    Васил Хитров:

    Най-вероятно името на файла е на кирилица. Сменете го на латиница и вижте пак.

  • Какво да правим със сгрешените и вече неизползвани снимки?

    Георги Димитров:

    Как да действаме със сгрешени снимки? Ако прикачим към даден продукт снимка и след това решим да я заменим - какво става със сгрешената снимка? Остава ли някъде из фолдерите на wordpress? Можем ли на ръка да изтрием неизползваните снимки и ако да - къде се съхраняват?

    Милко Личев:

    Остава в базата данни . В Wordpress може да се открие в Files/Library и да се изтрие .

  • Къде да търся файловете "под урока", които трябва да сваля?

    Светлана Тихова:
    Павлина Бакалова:

    Здравей! Могат да бъдат свалени от раздела „Допълнения към урока“, който се намира вляво на екрана над менюто с имената на уроците, точно под видеото на съответния урок. Там има качени файлове, които могат да се изтеглят. Пише “Свали” и името на самия файл. Надявам се да съм помогнала и ти желая успех!

  • Можете да ползвате опцията Crop във Фотошоп като на нея се задава точните пиксели по H и W и само с ентър се реже, не е нужен канваса. При запазването за уеб има още една опция която сваля килобайтите, горе има падащо меню и процентни стойности, при намал

    Aulanet потребител:
    Лилия:

    OK

  • И аз питам къде да намеря тези фаилове.

    Elmazka:
    Vesselin G Tsukev:

    В горния десен ъгъл има иконка. Натиснете я

Напред