Пасля стварэння анімацыі ў Фотошопе яе неабходна захаваць у адным з даступных фарматаў, адным з якіх з'яўляецца GIF. Асаблівасцю дадзенага фармату з'яўляецца тое, што ён прызначаны для адлюстравання (прайгравання) у браўзэры.
Калі Вас цікавяць іншыя варыянты захавання анімацыі, то раім прачытаць вось гэты артыкул:
Ўрок: Як захаваць відэа ў Фотошопе
Працэс стварэння GIF анімацыі быў апісаны ў адным з папярэдніх урокаў, а сёння мы пагаворым пра тое, як захаваць файл у фармаце GIF і пра налады аптымізацыі.
Урок: Ствараем простую анімацыю в Фотошопе
захаванне GIF
Для пачатку паўторым матэрыял і азнаёмімся з акном налад захавання. Адкрываецца яно націскам на пункт «Захаваць для Web» ў меню «Файл».
Акно складаецца з двух частак: блока прадпрагляду
і блока налад.
блок прадпрагляду
Выбар колькасці варыянтаў прагляду выбіраецца ў верхняй частцы блока. У залежнасці ад патрэбаў, можна выбраць патрэбную наладу.
Найлепшае кожным акне, акрамя арыгінала, наладжваецца асобна. Гэта зроблена для таго, каб можна было выбраць аптымальны варыянт.
У левай верхняй частцы блока знаходзіцца невялікі набор інструментаў. Мы будзем карыстацца толькі «Рукой» і «Маштаб».
Пры дапамозе «Рукі» можна перамяшчаць малюнак ўнутры абранага акна. Выбар таксама вырабляецца гэтым інструментам. «Маштаб» выконвае аднайменнае дзеянне. Набліжаць і выдаляць карцінку можна і кнопкамі ў ніжняй частцы блока.
Ледзь ніжэй знаходзіцца кнопка з надпісам «Прагляд». Яна адкрывае абраны варыянт у браўзэры па змаўчанні.
У акне аглядальніка, акрамя набору параметраў, мы можам таксама атрымаць HTML код гифки.
блок налад
У гэтым блоку адбываецца налада параметраў выявы, разгледзім яго падрабязней.
- Колеравая схема. Дадзеная настройка вызначае, якая табліца індэксаваная кветак будзе прыменена да выявы пры аптымізацыі.
- Перцепционная, а папросту «схема ўспрымання». Пры яе ўжыванні Фотошоп стварае табліцу кветак, кіруючыся бягучымі адценнямі малюнка. На думку распрацоўшчыкаў, гэтая табліца максімальна набліжана да таго, як чалавечае вока бачыць колеру. Плюс - найбольш набліжанае да арыгінала малюнак, колеру максімальна захаваны.
- Селектыўны схема падобная на папярэднюю, але ў ёй пераважна выкарыстоўваюцца колеру, якія адносяцца да бяспечным для web. Тут таксама зроблены ўпор на адлюстраванне адценняў, набліжаных да зыходных.
- Адаптыўная. У дадзеным выпадку табліца ствараецца з кветак, якія часцей сустракаюцца ў малюнку.
- Абмежаваная. Складаецца з 77 кветак, частка узораў якіх заменены белым колерам у выглядзе кропкі (збожжа).
- Заказная. Пры выбары гэтай схемы з'яўляецца магчымасць стварыць уласную палітру.
- Чорна-белае. У гэтай табліцы выкарыстоўваюцца толькі два колеру (чорны і белы), таксама з выкарыстаннем зярністасці.
- У градацыях шэрага. Тут ужываюцца розныя 84 ўзроўню адценняў шэрага колеру.
- MacOS і Windows. Дадзеныя табліцы складаюцца на падставе асаблівасцяў адлюстравання малюнкаў у браўзэрах пад кіраваннем гэтых аперацыйных сістэм.
Вось некалькі прыкладаў прымянення схем.
Як бачым, першыя тры ўзору маюць цалкам прымальнае якасць. Нягледзячы на тое, што візуальна яны амаль не адрозніваюцца адзін ад аднаго, на розных малюнках гэтыя схемы будуць працаваць па-рознаму.
- Максімальную колькасць кветак у каляровай табліцы.
Колькасць адценняў у малюнку напрамую ўплывае на яго вага, а адпаведна і на хуткасць загрузкі ў браўзэры. Часцей за ўсё ўжываецца значэнне 128, паколькі такая налада амаль не ўплывае на якасць, пры гэтым памяншаючы вага гифки.
- Web-колеру. Дадзеная настройка ўсталёўвае допуск, з якім адценні пераўтворацца ў эквівалентныя з бяспечнай Web-палітры. Вага файла вызначаецца значэннем, што выстаўляюцца паўзунком: значэнне вышэй - файл менш. Падчас усталявання Web-кветак не варта таксама забываць і пра якасць.
прыклад:
- Дизеринг дазваляе згладзіць пераходы паміж кветкамі з дапамогай змешвання адценняў, якія ўтрымліваюцца ў абранай табліцы індэксавання.
Таксама налада дапаможа, наколькі магчыма, захаваць градыенты і цэласнасць аднатонных участкаў. Што датычыцца прымянення дизеринга павялічваецца вага файла.
прыклад:
- Празрыстасць. Фармат GIF падтрымлівае толькі абсалютна празрыстыя, альбо абсалютна непразрыстыя пікселі.
Гэты параметр, без дадатковай падладкі, дрэнна адлюстроўвае крывыя лініі, пакідаючы піксельныя лесвічкі.
Падладка называецца «Матавы» (у некаторых рэдакцыях «Аблямоўка»). З яе дапамогай наладжваецца змешванне пікселяў карцінкі з фонам старонкі, на якой яна будзе размешчана. Для найлепшага адлюстравання выбіраюць колер, які адпавядае колеру фону сайта.
- Празрадковай. Адна з самых карысных для Web налад. У тым выпадку, калі файл мае значную вагу, дазваляе адразу паказваць карцінку на старонцы, па меры загрузкі паляпшаючы яе якасць.
- Пераўтварэнне sRGB дапамагае захаваць максімум арыгінальных кветак малюнка пры захаванні.
Настройка «Дизеринг празрыстасці» значна пагаршае якасць малюнка, а пра параметры «Страты» мы пагаворым у практычнай часткі ўрока.
Для найлепшага разумення працэсу налады захавання гифки в Фотошопе, неабходна папрактыкавацца.
практыка
Мэта аптымізацыі малюнкаў для інтэрнэту - максімальнае зніжэнне вагі файла пры захаванні якасці.
- Пасля апрацоўкі карцінкі пераходзім у меню «Файл - Захаваць для Web».
- Выстаўляем рэжым прагляду «4 варыянту».
- Далей трэба адзін з варыянтаў зрабіць максімальна падобным на арыгінал. Хай гэта будзе малюнак справа ад зыходніка. Робіцца гэта для таго, каб ацаніць памер файла пры максімальнай якасці.
Налады параметраў наступныя:
- Колеравая схема «селектыўнасці».
- «Колеры» - 265.
- «Дизеринг» - «Выпадковае», 100%.
- Прыбіраем каўку насупраць параметра «празрадковай», паколькі канчатковы аб'ём малюнка будзе даволі маленькім.
- «Web-колеру» і «Страты» - нуль.
Параўнаем атрыманы вынік з арыгіналам. У ніжняй частцы акна з узорам мы можам бачыць бягучы памер гифки і хуткасць яе загрузкі пры паказанай хуткасці інтэрнэту.
- Пераходзім на малюнак ніжэй толькі што наладжанай. Паспрабуем яе аптымізаваць.
- Схему пакідаем без змен.
- Колькасць кветак памяншаем да 128.
- Значэнне «Дизеринга» зніжаем да 90%.
- Web-колеры не чапаем, бо ў дадзеным выпадку гэта нам не дапаможа захаваць якасць.
Памер гифки знізіўся з 36,59 КБ да 26,85 КБ.
- Паколькі на малюнку ўжо прысутнічае некаторая зярністасць і невялікія дэфекты, паспрабуем павялічыць «Страты». Дадзены параметр вызначае дапушчальны ўзровень страты дадзеных пры сціску GIF. Мяняем значэнне на 8.
Нам удалося яшчэ паменшыць аб'ём файла, пры гэтым трохі страціўшы ў якасці. Гифка зараз важыць 25,9 кілабайт.
Разам, мы змаглі знізіць памер карцінкі прыкладна на 10 КБ, што складае больш за 30%. Вельмі нядрэнны вынік.
- Далейшыя дзеянні вельмі простыя. Націскаем на кнопку «Захаваць».
Выбіраем месца для захавання, даём назву гифке, і зноў ціснем «Захаваць».
Звярніце ўвагу, што існуе магчымасць разам з GIF стварыць і HTML дакумент, у які будзе ўбудаваная наша карцінка. Для гэтага лепш абраць пустую тэчку.
У выніку атрымаем старонку і тэчку з выявай.
Савет: пры прысваенні імя файлу старайцеся не выкарыстоўваць кірылічныя знакі, паколькі не ўсе браўзэры ў стане іх прачытаць.
На гэтым урок па захаванні выявы ў фармаце GIF завершаны. На ім мы высветлілі, якім чынам можна аптымізаваць файл для размяшчэння ў інтэрнэце.