В този урок ще научим как да работим правилно с инструмента на Photoshop „Запазване за уеб“ (Запазване за уеб), т.е. как да запазите подготвена и миниатюрна снимка или изображение за качване на уебсайт или имейл.
Трябва да се отбележи, че технологията не е променена от Photoshop CS4 на CC (Creative Cloud), така че този урок ще работи с всички тези версии.
Преоразмеряването на изображение във Photoshop за CS6 и по-долу е описано тук, а как да преоразмерите изображение в новия Photoshop CC е описано тук.
Ще работя с тази снимка:
Така че преоразмерихме изображението по този начин. както ни трябва. Сега е време да го оптимизирате и запазите в някой от популярните графични формати, най-често JPG.webp (JPEG.webp) или PNG. Сега щракнете върху раздела на главното меню „Файл“ и изберете „Запазване за уеб» (Запазване за уеб и устройства) от списъка или натиснете любимата ми клавишна комбинация Ctrl+Alt+Shift+S:
Това отваря големия диалогов прозорец на Photoshop Save for Web, като областта за предварителен преглед заема по-голямата част от пространството.
В горния ляв ъгъл на зоната за визуализация ще видите поредица от четири раздела. По подразбиране разделът Оптимизиран е избран, което означава, че не виждате оригиналното изображение. Вместо това, ето визуализация на това как изглежда изображението с текущите настройки за оптимизация (които ще разгледаме след малко):
Както съветват уеб дизайнерите, по-добре е да използвате друг раздел, където в прозореца за визуализация се показват едновременно две изображения, оригиналното и оптимизираното, това е разделът 2-Up:
С активния раздел „2 опции“ сега виждаме две изображения наведнъж, оригиналната версия отляво и оптимизираната версия отдясно (ако изображението ви е с пейзажна ориентация, т.е. ширината му е по-голяма от височината му, тогава снимките ще се показват една над друга):
Файлов формат
Има опции за оптимизиране на изображението от дясната страна на диалоговия прозорец.
Първото нещо, което трябва да направим, е да изберем правилния файлов формат за нашето изображение. Ако отворите този прозорец за първи път, форматът GIF е зададен по подразбиране.формат на избрания файл в горната част (директно под думата "Preset" ). GIF се използва в някои случаи за запазване на уеб графики, но JPEG.webp е по-добър за моята снимка, така че ще променя GIF на JPEG.webp:
Качество на компресия на изображението
Директно под опцията за форматиране има опции за избор на качество на компресиране на изображението, т.е. изходно качество на самата картина.
Можем да избираме от предварително зададени настройки за качество (Ниско, Средно, Високо, Много високо и Най-добро, на английски - ниско, средно, високо, много високо и максимално) в падащото меню списък отляво или можем да въведем определена стойност за качество като процент отдясно. Въпреки че е доста изкушаващо да зададем максимално качество за нашите снимки, оптимизирането за мрежата означава, че трябва да запазим размера на файла в възможно най-малки мегабайти, което означава да търсите най-доброто място между качеството на изображението и размера на файла.Настройката за качество „Високо“ е почти винаги най-добрият избор, тя ни дава приемливо качество на изображението със сравнително малък размер на файла. Избирането на „Високо“ автоматично задава стойността на качеството на 60%:
След като изберете стойност за качество, уверете се, че сте активирали опцията „Оптимизирано“, т.к. може да помогне за намаляване на размера на файла още повече. Опциите "Прогресивен" (Progressive) и "Вграден (цветен) профил" (Embed Color Profile) не е необходимо да се включват, т.к. повечето уеб браузъри така или иначе не поддържат цветни профили:
Цветово пространство
Накрая проверете опцията "Конвертиране в sRGB" , ако вече не е активна. Това ще гарантира, че снимката е запазена в цветовото пространство sRGB, което на прост език означава, че цветовете в снимката ще се показват правилно на уебсайта:
Размер на изображението
Диалоговият прозорец също ни дава възможност да променим линейния размер на изображението. Препоръчвам да преоразмерите изображението предварително, преди да активирате диалоговия прозорец Запазване за уеб, така че когато записвате за уеб, линейните размери в пиксели да са готови. Това е особено вярно за най-новата версия на Photoshop CC снов диалогов прозорец за размер на изображението. Научете как да преоразмерите изображение във Photoshop CC тук и тук в CS6 и по-долу.
Сравнение на оригинални и оптимизирани файлови размери
На този етап сме направили всичко необходимо, за да оптимизираме файла за уеб, а сега нека да разгледаме размера на файла в байтове в оригиналната и оптимизираната версия. В моя случай размерът на оригиналната снимка (вляво) беше колосалните 1,29Mb в интернет, което е твърде голямо за потребители дори със средна интернет скорост, и оптимизираната версия (вдясно), която изглежда почти като добър като оригинала, получи се общо 41,85 Kb :
Запазване на изображението
За да запазите оптимизирана версия на вашата снимка, щракнете върху бутона Запазване в долната част на диалоговия прозорец. Photoshop ще отвори нов диалогов прозорец Save Optimized As, който ви позволява да преименувате изображението, ако е необходимо, както и да изберете желаната папка на вашия твърд диск, която да запазите. Когато сте готови, щракнете върху бутона "Запазване" , за да запазите изображението и да излезете от диалоговия прозорец:
Е, това е всичко. Снимката вече е напълно оптимизирана и готова за изпращане по имейл или публикуване на уебсайта.