Оптимизиране и запазване на GIF изображения

След като създадете анимация във Photoshop, трябва да я запишете в един от наличните формати, като един от тях е GIF . Особеността на този формат е, че е предназначен за показване (възпроизвеждане) в браузъра.

Ако се интересувате от други опции за запазване на анимацията, препоръчваме да прочетете тази статия:

Урокът: Как да запишете видео в Photoshop

Процесът на създаване на GIF анимация беше описан в един от предишните уроци и днес ще говорим за това как да запазим файла във формат GIF и за настройките за оптимизация.

Урокът: Създайте проста анимация в Photoshop

Запаметяване на GIF

Първо, ще повторим материала и ще се запознаем с прозореца за запазване на настройките. Той се отваря, като кликнете върху елемента "Запиши за уеб" в менюто "Файл" .

Прозорецът се състои от две части: блока за предварителен преглед

и блока за настройки.

Предварителен блок

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

Изображението във всеки прозорец, с изключение на оригинала, се конфигурира отделно. Това се прави, за да може да се избере най-добрата опция.

В горната лява част на блока има малък набор от инструменти. Ще използваме само "Hand" и "Scale" .

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

Малко по-надолу има бутон с надпис "View" . Той отваря избраната опция в браузъра по подразбиране.

В прозореца на браузъра, в допълнение към комплекта параметри, можем да получим и HTML кода за хифата.

Блок за настройки

В този блок параметрите на изображението се коригират, ще го разгледаме по-подробно.

1. Цветова схема. Тази настройка определя коя таблица на индексираните цветове ще се приложи към изображението по време на оптимизацията.
   • Възприемане и просто "схема на възприятие". Когато го приложите, Photoshop създава цветна диаграма, ръководена от текущите нюанси на изображението. Според разработчиците тази таблица е възможно най-близка до това, как човешкото око вижда цветове. Плюс - изображението е най-близо до оригинала, цветовете са максимално запазени.
   • Селективната схема е подобна на предишната, но използва предимно цветове, свързани с безопасността за мрежата. Тук също се поставя акцент върху показването на цветове, по-близо до оригиналните.
   • Адаптивна . В този случай таблицата се създава от цветовете, които най-често се срещат в изображението.
   • Limited . Състои се от 77 цвята, някои от които се заменят с бяло под формата на точка (зърно).
   • Персонализиран . Когато изберете тази схема, можете да създадете своя собствена палитра.
   • Черно и бяло . В тази таблица се използват само два цвята (черно и бяло), като се използва и зрялост.
   • В градиране на сивото . Тук се използват различни нива на нюанси на сивото.
   • MacOS и Windows . Данните в таблицата се компилират въз основа на характеристиките на показване на картини в браузърите под контрола на тези операционни системи.

   Ето няколко примера на схемите за кандидатстване.

   Както можете да видите, първите три проби имат доста приемливо качество. Въпреки факта, че визуално те почти не се различават помежду си, на различни изображения тези схеми ще работят по различен начин.

2. Максималният брой цветове в таблицата с цветове.

   Броят на нюансите в изображението влияе пряко върху теглото му и, съответно, скоростта на изтегляне в браузъра. Най-често срещаната стойност е 128 , тъй като тази настройка почти няма ефект върху качеството, като същевременно намалява теглото на гипса.

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

   например:

4. Dithering ви позволява да изгладите преходите между цветовете чрез смесване на нюансите, които се съдържат в избраната таблица с индекси.

   Също така, настройването ще помогне, доколкото е възможно, да се запазят градиентите и целостта на монохроматичните пластири. Когато използвате dithering, теглото на файла се увеличава.

   например:

5. Прозрачност. Форматът GIF поддържа само абсолютно прозрачни или абсолютно непрозрачни пиксели.

   Този параметър, без допълнително регулиране, показва слабо криви линии, оставяйки пикселна стълба.

   Корекцията се нарича "Мат" (в някои издания на "Kayma" ). С него можете да регулирате смесването на пикселите на изображението с фона на страницата, на която ще бъде разположена. За най-добър дисплей изберете цвят, който съответства на цвета на фона на сайта.

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

7. Конвертирането sRGB помага да се запазят максималните оригинални цветове на изображението, когато се записват.

Настройката "Прозрачност на разсейването" значително намалява качеството на изображението и в практическата част на урока ще говорим за параметъра "Загуба" .

За най-доброто разбиране на процеса на настройване на запазването на хифа в Photoshop, трябва да практикувате.

практика

Целта на оптимизирането на изображението за интернет е да се увеличи максимално теглото на файла, като се запази качеството.

1. След като обработвате изображението, отидете в менюто "File - Save for Web" .
2. Настроихме режима на преглед на "4 опции" .

3. След това ви е необходима една от опциите, за да направите най-близкия до оригинала. Нека да е картината отдясно на източника. Това се прави, за да се оцени размерът на файла при максимално качество.

   Настройките на параметрите са, както следва:

   • Цветовата схема е "Селективна" .
   • "Цветове" - 265.
   • "Размерите" - "Случайни" , 100%.
   • Премахваме daw пред параметъра "Interlaced" , тъй като крайният обем на изображението ще бъде доста малък.
   • "Цветовете в мрежата" и "Загубите" са нула.

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

4. Отидете на снимката по-долу, която сте настроили. Нека се опитаме да го оптимизираме.
   • Оставяме диаграмата непроменена.
   • Броят на цветовете е намален на 128.
   • Стойността на "Dithering" се намалява до 90%.
   • Уеб-цветовете не се докосват, защото в този случай това не ни помага да запазим качеството.

   Размерът на Hypha спадна от 36,59 KB на 26,85 KB.

5. Тъй като картината вече съдържа известна зърненост и малки дефекти, ще се опитаме да увеличим "загубите" . Този параметър определя приемливото ниво на загуба на данни при компресиране на GIF . Променете стойността на 8.

   Успяхме да намалим размера на файла, като в същото време загубихме качеството си. Gifka сега тежи 25.9 килобайта.

   Като цяло успяхме да намалим размера на изображението с около 10 KB, което е повече от 30%. Много добър резултат.

6. По-нататъшните действия са много прости. Кликнете върху бутона "Запазване" .

   Изберете място, което да запазите, дайте името на хифите и отново кликнете върху " Запазване" .

   Имайте предвид, че е възможно да създадете HTML документ заедно с GIF , в който ще бъде вградено изображението ни. За да направите това, най-добре е да изберете празна папка.

   В резултат на това получаваме страницата и папката с изображението.

Съвет: при задаване на име на файл опитайте да не използвате кирилица, защото не всички браузъри могат да ги прочетат.

В този урок за запазване на изображението във формат GIF е завършен. На него разбрахме как да оптимизираме файла за публикуване в Интернет.

• ← Практическо приложение на обръщащи маски във Photoshop
• Намалете талията във Photoshop →