Различни методи за редакция на изображение

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

Ако сте вече потребител - Регистриран съм
Видео
Тук имам предварително подготвена статия, която е с красиво изображение за рецепта.
Преглеждам какво е изображението, когато кликна на изображението в Windows ми се визуализира отстрани.
Aко не ви се визуализира с този бутон се показва, и вечер от долната страна виждам резолюцията и размера на файла.
Кликвам на properties също мога да видя това нещо.
Кликвам на раздела Details.
Виждам, че това изображение е с размери 4104 пиксела на 2736 пиксела.
Това е изключително голямо, като изображения.
Отделно мога да видя, че размера на файла е почти 4 мегабайта.
Първо wordpress няма да ми го приеме, а второ и да ми го приеме този файл в моята страница ще се зарежда ненужно бавно.
Затова аз трябва да редактирам това изображения.
Да видим как може да стане това.
Обикновено се редактира във Фотошоп, но Фотошоп е прекалено мощен инструмент за преоразмеряване на изображение.
Така че, ако се интересувате от Фотошоп, той е доста свързан с уеб дизайна.
Препоръчвам ви курса "Тайните на Фотошоп" и
"Фотошоп за уеб дизайн" два курса имаме.
Но ако не знаете Фотошоп и трябва бързо да коригирате изображението,
вече има такава web базирани безплатни инструменти.
Отворил съм един от тях - sketch.
io.
Отивате на този адрес.
Под това видео ще добавя и адреси на безплатни програми за редакция,
които са базови.
Вие може да направите тази редакция и в самия Windows, ако пуснете програмата Paint.
Програмата Paint я има във всеки един Windows и може да редактирайте това изображения Въпрос на ваш избор е.
Аз ще редактирам в уеб.
Тук е по-лесно за мен.
Кликвам на нов, кликвам на файла.
Тук ще задам размерите на моето изображение.
1200 на 630 казахме.
Ще създам мястото, където ще бъде моя файл.
След което ще отида в Windows Explorer и ще придърпам моя файл.
Виждате, че този файл е прекалено голям дори за това изображение.
Затова ще го премащабирам.
Той излезе въобще извън границите на място, където трябва да се прибере.
Затова ще го дръпнеш за да го намаля.
Намалям го още.
Все още е прекалено голям.
Хващам и го намалям.
Вече започва да се доближава до размерите на това което искаме.
Ако го направя прекалено малък.
Представете си така е просто за моя уеб сайт, пък в единия го ще бъде изображението.
Залепям го за единия ъгъл и го разбърквам.
Намествам го.
Да кажем че така искам да изглежда моето изображение.
След което ще кликна на Export.
В опцията download имам опции за PDF и JPEG.
Ползвайте JPEG или PNG.
JPEG обикновено има възможност за повече компресия i стават малко по-малки файловете.
В PNG се получат малко по-качествени файлове, но понякога малко по-големи.
Да оставим PNG.
За тези dpi оставете варианта за уеб.
Това е достатъчно качествено и ще клекне на download.
Да видим моят файл.
Премествам го в папката до другия файл.
Виждаме, че това уеб базирано, приложение свали резолюцията направи я на 1200 на 630.
Размера на файла за съжаление остана 1 мегабайт, което е доста голямо, но пък изображението е на качествено.
Ако искам все пак да го коригирам и да го намаля размера, все още мога да отворя Paint.
Отварям го в Paint.
Размерът е коректен, затова аз мога да го запиша.
Трета версия.
Това приложение го записа като PNG.
Вече виждаме че като jpeg, като кликна този файл не виждам никаква визуална разлика, но размера е 149 килобайта.
Тоест от първоначалното изображение, което беше 4 мегабайта ние паднахме на 1 мегабайт, след което на 149 килобайта, без някаква видима поне за нас загуба в качеството.
Ако искам без това уеб приложение, да сменям размера мога да го направя директно в Paint.
Oтворяm нов файл с Paint и ще придърпам моето изображение.
Oтново то е прекалено голямо, когато го отворим в Paint 1 към ,1 без да сме приближили.
Мога да кликна на опцията Resize.
Неудобството на Paint e, че тук няма опция директно да задаваме точните пиксели, когато правим Resize на размера.
Ако кликна на пиксели тук трябва да е сложена тази отметка, за да се запазва съотношението.
Записвам 1200 пиксела и отдолу ми се получава 800.
За да го направя 800 на 630, ако кликна тук и махна отметката за запазване, и кликна на 630 ще ми се смачка изображението и при повечето изображения когато смачкат, изглеждат много зле.
Тук даже не изглежда толкова зле като се смачка, но то не го отрязва, а го смачква буквално.
Обикновено това разваля изображенията.
Затова ще се върна назад и за да го отрежа на 630 пиксела, долу виждаме 1200 на 800,
ще трябва да избера 630 пиксела.
Малко е трудоемко.
Това е неудобството на Paint, но все пак не е Фотошоп.
Така го направихме на 1200 630.
Сега мога да го запиша и ще наименовам "zakuski brusketi".
Избирам JPEG, като размер.
Сега да видим какъв размер се е получил "zakuska-brusketi" 180 kB.
Tова е нещо, което ме устройва! Директно в Paint може да слагате или в това уеб-базирано приложение.
Предимството на уеб-базираното приложение, че има доста инструменти.
Тук ако искам мога да рисувам върху него и то с различни маркери, които са доста ограничени в Paint.
Mога да слагам стрелки.
Мога да им сменя цвета.
Мога да пиша текст.
Да слагам какви ли не други работи.
Доста хитро е направено това нещо и е много лесно да се използва.
Понякога не за всички изображения, прави големи файлове, които след това трябва да се намалят допълнително.
Да се върнем в нашето изображения.
Имаме подготвено вече изображение в правилният размер.
Нашата статия, която ще публикуваме

 

Линкове към онлайн редaктори на изображения:

 
photoshop
 

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

 
Какво НЕ е подходящо да правим с изображението си?
Да го конвертираме в .jpg формат, което ще го направи по-малко като размер, но с по-лошо качество от същото изображение в .png формат
Да го конвертираме в .png формат, което ще го направи малко по-голямо, но пък по-качествено от изображението с .jpg формат
Да го премащабираме в Paint, като отбелязваме отметката Maintain aspect ratio
Да го премащабираме в Paint, като избираме Resize и си избираме сами резолюцията
 
Как НЕ можем да редактираме нашите изображения?
Чрез програмата Photoshop
Чрез уеб базирани безплатни инструменти 
Чрез Paint
Чрез Google

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

  • Какви са препоръчителните размери на изображенията в Header-a?

    Зорница Каракулева:

    Здравейте,

    Бих искала да попитам какви са препоръчителните размери на Header Image, Background Image или зависят от избраната тема?
    Дарина Иванова:

    Header е заглавната част на страница и ако е много голям ще остане малко място за друг текст. Според мен е въпрос на преценка и дизайнерско виждане. Дали 250 рх е най-добра височина? А може би не повече от 1/4 от височината на страницата?

    инж. Димитрина Янева:

    Не зависи ли от темата и препоръчителните размери описани в документацията на темата? Какво ще се случи, ако се променят препоръчителните размери?

    Биляна Борисова:

    Здравейте,каква е причината след като  издърпам  изображението да не се визуализира в Sketchpad.А в урока ,който  гледам ,веднага се показва на  екрана

    Ana:

    Според мен е хубаво да се следват препоръчителните размери на темата. Аз пробвах с по-голямо изображение, съответно зае по-голямо място и стоеше грозно. Въпрос на преценка...

  • Иван Цукев:

    Може да е извън екрана. Пробвайте да изберете ново изображение (нещо като new file) и вижте дали проблемът се повтаря.

    Стефка Иванова:

    При мен също не се визуализира. Съобщението  е invalid format uploaded. Качваното изображение си е *.jpg.

    Даниела Ганчева:

    При мен не се вижда файла /черна картинка/. Защо?

    Radkish1:

    Вероятно проблема е в настройките на браузера или версията която имате. Тя вероятно не е същата като тази от клипчето. За повече инфо се налага да има снимки по които да се коментира. :)

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

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

    Ivan Mirev:

    Здравейте! Между другото можем да направим преоразмеряване на изображението и в Paint. Отиваме в Начало -> кликваме на Преоразмеряване -> след като ни се отвори прозореца отмятаме пиксели и след това си слагаме пикселите, които искаме. И да не забравим да си махнем отметката за Запазване на пропорциите и ОК.

  • Какви...

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

    Здравейте,Какви размери да използвам за моите изображение при положение,че съм избрала друга тема, не тази, която е в урока, и в която е посочен препоръчителен размер,но само за заглавното изображение?Това означава ли,че за другите изображения трябва да използвам същия размер,тъй като не стоят добре или да използвам тези,които посочихте-1200х630?

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

    Здравей Надежда, размерите на изображенията в темата са конкретно съобразени с темата, която се използва в курса. Ако използваш различна тема най-вероятно ще трябва да се съобразиш с размерите, които са посочени в документацията на темата, която си инсталирала. Не е задължително да използваш размерите показани в урока. Моя съвет е да провериш препоръчителните размери и да се съобразиш с тях. Подбери си различните изображения, които ти трябват - featured image, изображения за публикацийте или ако имаш галерия и др. и един път вече като имаш точните размери ги използвай за всяко ново изображение, което ще качваш в темата.

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

    Благодаря Мария.

  • Защо да не използваме Office пакета :)

    Даниела Найденова:

    Още един вариант за базова редакция на изображения, който използвам често и не изисква специфични програми - редакторът на Office пакета. Можем да го достъпим, като кликнем на снимката с десен бутон, от падащото меню избираме Open with --> Microsoft Office 2010 (в зависимост от версията може да е 2007, 2013 и тн.), Edit Pictures (под менютата с команди), отдясно се отваря лента с опции, избираме Resize - и тук можем да избираме от готови размери (напр. 1024 х 768рх), да зададем точни размери или да посочим % от ширината и височината на изображението. Единственият недостатък е, че не можем да променяме формата на изображението (ако е .jpg, си остава .jpg), но това можем да го "пипнем" в Paint :)

    Лилия Ласкова:

    Благодарим ти за полезното предложение. Със сигурност и това е доста удобен вариант, който доста хора ползват. :)

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

    Ако изображението е jpg няма никакъв смисъл да го записваме като png - качеството веднъж загубено при jpg поради по-голямата компресия не може да се възстанови в запис на png.

    Васил:

    аз лично ползвам https://compressor.io компресира доста снимките, като запазва качеството им

    Красимира:

    Мога компресия мога да добавя и https://tinypng.com/. Ползва се много лесно , директно в браузъра. Единствено май имаше ограничение за броя снимки, които могат да се компресират наведнъж. На десктоп ползвам ImageOptim

  • Защо не използваме инструментите за редакция на Wordpress?

    Radkish1:

    Вярно е че качеството на снимката се променя, яко коригирамен направо в публикацията, но в редакция на снимки нещата са по-добре.

    Стефан Рачев:

    Най-Малкото ако зададем на картинката точни размери, които не са пропорционални на оригинала ще я смачка.

    Лъчезар Николов:

    Макар, че Фотошоп си е Фотошоп, една лека и супер удобна програмка за премащабиране, с която можем и да увеличаваме е Benvista Photozoom, само че е платенa. А иначе най-доброто и прецизно решение е FastStone Photoresizer. безплатна и уникална програмка, както всички продукти на FastStone. :)

  • Боряна Велева:

    Може ли уточнение? За Plugin за Wordpress ли става въпрос? Или за автоматично генериране на текст върху снимка?

    Олег Терзиев:

    Става въпрос за Wordpress. Предполагам, че често се случва и на други. Събираме снимки от: собствени апарати, телефони, камери; от клиенти по различен повод но всички те по наша преценка е полезно и трябва да влязат в сайта. Проблема е че имат различни имена и различна дължина. Естествено ги групирам в някаква папка по определен признак. Преименуването им на "ръка" обаче е доста бавно и трудно. Има доста програми за преименуване - търсим най-безопасната. Генерирането на текст върху снимката ще е бонус.

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

    Primeintime:

    От години използвам за бърза или пакетна обработка на изображения следната програма: FastStone Image Viewer Част от безплатните програми от разработчика: FastStone За мен това е чудесен безплатен и лек инструмент за целта.

    Иван Цукев:

    Разкажи за какви ситуации използваш тази програма?

    Primeintime:

    Бих направил и видео отговор, свалих програмката за запис, направих тестов запис, но няма аудио. Има ли по специални настройки, за да се хваща и аудиото. Всъщност откъде взима настройките програмката за запис на видео, за входящо аудио? Благодаря.