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

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

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

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

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

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

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

Запазете в елемента в уеб от менюто "Файл", за да запазите хифата във Photoshop

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

Блокът за предварителен преглед в настройките за настройки на кутията запазва gyfk във Photoshop

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

Блокът за настройки в прозореца "Цигански опции за запис" в Photoshop

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

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

Избиране на опции за преглеждане в прозореца за настройки за запазване на хифата във Photoshop

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

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

Ръчни инструменти и мащаби в прозореца за настройки за съхранение на цигани във Photoshop

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

Управление на скалата на изображението в прозореца за настройки за запазване на хифата във Photoshop

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

Бутонът за преглеждане на изображението в браузъра в прозореца за настройки за запазване на хифата във Photoshop

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

Визуализация на изображението в браузъра по подразбиране, докато запазвате хифата във Photoshop

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

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

  1. Цветова схема. Тази настройка определя коя таблица на индексираните цветове ще се приложи към изображението по време на оптимизацията.

    Избиране на схема за индексиране на цветовете при запазване на хифа в Photoshop

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

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

    Примерни изображения, използващи различни таблици за индексиране на цветовете, докато запазвате хифата във Photoshop

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

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

    Настройване на максималния брой цветове в таблицата с индекси при запазване на хифа в Photoshop

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

    Примери за задаване на максималния брой цветове в таблицата с индекси, когато запазвате хифа в Photoshop

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

    Настройване на толерантността за конвертиране на цветовете на изображенията в уеб цветове, като се запазва хифа в Photoshop

    например:

    Примери за настройка на толерантността към преобразуване на цветовете в Weeb при запазване на хифията във Photoshop

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

    Регулиране на dithering при запазване на hypha във Photoshop

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

    например:

    Примери за прилагане на настройки за разсейване при запазване на хифата във Photoshop

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

    Настройте прозрачността на фона, когато запазвате хифа в Photoshop

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

    Примери за прилагане на матовата настройка при запазване на хиферите във Photoshop

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

    Регулиране на смесването на пикселите на изображението с фона на страницата, като се запазва хифата във Photoshop

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

    Конфигуриране на преплитането при запазване на хифа в Photoshop

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

    Конфигуриране на преобразуването на цветовете в sRGB при запазване на хифата във Photoshop

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

Настройки за разсейване на прозрачност и загуба на данни при запазване на Hypha във Photoshop

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

практика

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

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

    Избиране на броя опции за преглед на резултатите при запазване на хифата във Photoshop

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

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

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

      Настройване на параметрите на еталонното изображение при запазване на хифата във Photoshop

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

    Сравнение на резултата от оптимизирането на изображението с оригинала, като същевременно се запазва хифата във Photoshop

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

      Настройване на параметрите на целевото изображение при запазване на хифата във Photoshop

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

    Намаляване на размера на изображението след оптимизиране при запазване на хифата във Photoshop

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

    Настройване на нивото на допустимата загуба на данни при компресиране на GIF за запазване на хифа в Photoshop

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

    Размер на изображението след коригиране на загубите при запазване на хифата във Photoshop

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

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

    Бутон "Запазване" в прозореца за настройки на циганите за запис в Photoshop

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

    Избиране на мястото и името за запазване на хифата във Photoshop

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

    Запазете gifki заедно с HTML документ във Photoshop

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

    Папка със запазена хифа в Photoshop

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

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