Графіка ў вэб. Аптымізацыя графікі.

Асновы працы з графічнымі файламі

каляровыя мадэлі

Ўспрыманне колеру чалавекам заснавана на рэакцыі глядзельнай сістэмы на ўздзеянне святла з рознай даўжынёй хвалі. Белы свет з'яўляецца складаным святлом, якія складаюцца з прамянёў рознай каляровасці: чырвонага, аранжавага, жоўтага, зялёнага, блакітнага, сіняга, фіялетавага - такое разлажэнне называецца спектрам. Калі белы святло падае на белы прадмет, то ўсе складнікі белага святла адлюстроўваюцца ад яго, і мы бачым белы колер прадмета. Калі белы святло падае на зялёны прадмет, то ўсе складнікі святла паглынаюцца паверхняй прадмета, і толькі зялёная складнік адлюстроўваецца, у выніку чаго мы бачым зялёную афарбоўку прадмета. Аналагічна адбываецца і з іншымі колерамі: чырвоным, сінім, зялёным і да т.п. Калі святло падае на паверхню чорнага колеру, то паглынаюцца ўсе складнікі спектру, і мы бачым чорны прадмет. Такім чынам, колер навакольных нас прадметаў атрымліваецца шляхам адымання з белага асобных спектральных складнікаў. Такі спосаб атрымання колеру носіць назву "субтрактивный (вычитательный) сінтэз".

Аднак, калі паглядзець на экран манітора праз павелічальнае шкло, можна ўбачыць, што колер любой кропкі экрана (пікселя) фармуецца з трох святлівых кропак розных колераў: Чырвонага (R), Зялёнага (G), і Сіняга (B). Паколькі ў дадзеным выпадку мы маем справу не з адлюстраваным святлом, а з які свеціцца экранам, адбываецца не адніманне складнікаў з асноўнага колеру, а складанне кветак светлавых прамянёў. Такая мадэль змешвання кветак называецца адытыўная. Чорны колер у такім выпадку атрымліваецца, калі ні адна з трох каляровых складнікаў не задзейнічаная. Белы колер атрымліваецца пры змешванні чыстых выпраменьванняў трох асноўных колераў (чырвонага, зялёнага і сіняга) максімальнай яркасці.

Для фарміравання малюнкаў на маніторах, экранах тэлевізараў, праектарах выкарыстоўваецца адытыўная колеравая схема RGB (R ed, G reen, B lue). Любы колер на экране атрымліваецца шляхам змешвання складнікаў чырвонага, зялёнага і сіняга колераў рознай інтэнсіўнасці.

Працуючы з графічнымі рэдактарамі, мы сутыкаемся і з іншымі каляровымі мадэлямі.

Каляровая мадэль CMYK прызначана для працы з адлюстраваным колерам, г.зн. з'яўляецца субтрактивной. Каляровымі складнікамі гэтай мадэлі з'яўляюцца колеру: блакітны (Cyan), пурпурны (Magenta), жоўты (Yellow) і чорны (BlacK). Блакітны, пурпурны і жоўты колеру атрымліваюцца ў выніку аднімання асноўных колераў мадэлі RGB з белага колеру. Чорны колер задаецца асобна, паколькі атрымаць чорны колер шляхам змешвання фарбаў немагчыма тэхналагічна. Катрыджа сучасных друкавалых прылад ўтрымліваюць фарбы гэтых чатырох колераў. У кампутарнай графіцы мадэль CMYK ўжываецца для падрыхтоўкі друкаваных дакументаў.

Каляровая мадэль HSB
Сістэмы кветак RGB і CMYK звязаныя з абмежаваннямі, які накладае апаратным забеспячэннем (манітор кампутара ў выпадку RGB і друкарскія фарбы ў выпадку CMYK).
Каляровая мадэль HSB найбольш зручная для чалавека, бо яна добра ўзгадняецца з мадэллю ўспрымання колеру чалавекам.
Кампанентамі мадэлі HSB з'яўляюцца:

• тон (H ue)
• насычанасць (S aturation)
• яркасць колеру (B rightness)

лічбавыя выявы

Кампутарная графіка вобласць дзейнасці, звязаная са стварэннем і апрацоўкай лічбавых малюнкаў Лічбавае выява (цы) мадэль рэальнага выявы, якая захоўваецца ў памяці ПК у выглядзе камбінацыі лічбаў. Мадэль спрошчанае ўяўленне аб'екта або працэсу

Чым больш дэталёва апісаны аб'ект, тым лепш мадэль. З іншага скрану, чым дакладней, тым больш займае памяці і даўжэй апрацоўваецца.

Ці можна падзяліць на дзве катэгорыі:

1. растравыя
2. вектарныя

Вектарная мадэль спіс параметраў, матэматычна апісваюць аб'екты.

Плюсамі вектарнай мадэлі з'яўляюцца

• кампактнасць
• лёгкасць мадыфікацыі
• маштабаванасць

Да адмоўных асаблівасцяў ставяцца наступныя:

• чым складаней малюнак, тым даўжэй яно выводзіцца на экран (перерассчитыается)
• немагчыма апісаць рэальныя аб'екты.

Піксель найменшы лагічны элемент двухмернага лічбавага выявы ў растравай графіцы. Растравая мадэль малюнак апісваецца, як мноства кропак (пікселяў), для кожнай з якіх зададзены пэўны колер.

Перавагі растравай мадэлі:

• магчымасць стварэння практычна любога малюнка, апісанні рэальных аб'ектаў
• высокая хуткасць апрацоўкі малюнкаў, калі не выкарыстоўваецца маштабаванне

Да недахопаў растравай мадэлі можна аднесці

• страта якасці малюнка пры маштабаванне
• вялікі памер файлаў

Недахопы растравай мадэлі наўпрост звязаныя з асаблівасцю захоўвання інфармацыі ў растравым фармаце - неабходна захоўваць інфармацыю аб колеры кожнай кропкі малюнка. Існуюць спосабы памяншэння памеру файлаў растравых малюнкаў - так званыя алгарытмы сціску.

Графічныя фарматы вэб.

На сённяшні дзень існуе мноства фарматаў, прызначаных для захоўвання лічбавых малюнкаў (цы), як растравых, так і вектарных. Сярод вектарных фарматаў найбольш вядомыя такія, як Scalable Vector Graphics (SVG і SVGZ), Flash (SWF) і Corel Draw (CDR). Найбольш распаўсюджаныя растравыя фарматы - Bitmap Picture (BMP), Joint Photographic Experts Group (JPEG), Graphic Interchange Format (GIF), Portable Network Graphic s (PNG), Tagged Image File Format (tiff), Photoshop Document (PSD).

На старонках сайтаў дапушчальна выкарыстанне трох растравых фарматаў - GIF, JPEG і PNG. Усе тры гэтых фармату з'яўляюцца сціслыя, але выкарыстоўваюць розныя алгарытмы сціску, таму кожны з пералічаных фарматаў мае свае асаблівасці.

Фармат JPEG ў найбольшай ступені прыдатны для сціску фатаграфій і карцін, якія змяшчаюць плыўныя пераходы яркасці і колеру. Сціск файлаў гэтага фармату заснавана на асерадненні колеру суседніх пікселяў. Таму пры высокіх ступенях сціску можна заўважыць размыццё межаў малюнка. Алгарытм сціску, які ўжываецца ў фармаце JPEG ставіцца да катэгорыі алгарытмаў сціску з стратай якасці (гэта азначае, што выява, сціснутае такім чынам, не можа быць адноўлена ў дакладнасці).

Графічныя файлы ў фармаце JPEG маюць пашырэнне .jpg (часам сустракаецца .jpeg)

Асаблівасцю фармату GIF з'яўляецца выкарыстанне індэксаваная палітра кветак. Усе колеры малюнка нумаруюцца і захоўваюцца ў адмысловай табліцы. Такім чынам, замест таго, каб захоўваць інфармацыю пра код колеру кожнай кропкі малюнка, у файле фармату GIF захоўваецца табліца кветак і нумары колеру кожнай кропкі. Пры гэтым колькасць кветак у табліцы не можа перавышаць 256.Очевидно, што дадзены фармат падыходзіць для захоўвання "малоцветных" малюнкаў, такіх, як лагатыпы, шрыфты, чарцяжы, чорна-белыя малюнкі, і ня падыходзіць, напрыклад, для захавання фатаграфій восеньскага лесу - колькасць прыродных адценняў шматкроць перавышае магчымае колькасць кветак палітры. Алгарытм сціску, які выкарыстоўваецца фарматам, адносіцца да катэгорыі алгарытмаў сціску без страт.

У адрозненне ад фармату JPEG, фармат GIF падтрымлівае магчымасць стварэння просты анімацыі.

Яшчэ адна асаблівасць фармату - магчымасць прызначыць адзін з кветак малюнка празрыстым. Пры размяшчэнні на вэб-старонцы скрозь пікселі празрыстага колеру будзе бачны фон старонкі.

Графічныя файлы ў фармаце GIF маюць пашырэнне .GIF

Фармат PNG быў створаны, як вольная альтэрнатыва фармату GIF, які да 2004 года быў недаступны для вольнага выкарыстання. PNG спалучае ў сабе магчымасці JPEG (захоўванне практычна неабмежаванага колькасці кветак) і GIF (падтрымка празрыстасці).

Файлы ў фармаце PNG маюць пашырэнне .png

Аптымізацыя графікі для вэб.

Аптымізацыя з'яўляецца абавязковым этапам падрыхтоўкі малюнкаў да публікацыі ў сеткі. Пад аптымізацыяй малюнка прынята разумець памяншэнне памеру ( "вагі") графічнага файла, які залежыць перш за ўсё ад памераў выявы, з захаваннем дастатковай якасці.

Памер растравага малюнка колькасць кропак, якія змяшчаюцца ў малюнку, па гарызанталі і вертыкалі Дазвол экрана манітора памеры атрымліваецца на экране выявы ў пікселах

Памер фатаграфіі, атрыманай з дапамогай сучаснага лічбавага фотаапарата можа складаць прыкладна 3500x2500 пікселяў. Дазвол сучасных манітораў - ад 1024 × 768 да 1600 × 900. Відавочна, што размяшчаць на старонках сайта малюнак зыходнага памеру немэтазгодна - яно проста не змесціцца на экран.

Змяніць памер малюнка можна з дапамогай графічнага рэдактара ці графічнага канвертара

Прыклады камерцыйных і бясплатных праграм для апрацоўкі малюнкаў:

• камерцыйныя:
  • Adobe Photoshop - графічны рэдактар
  • ACDSee - графічны прагляднік / канвэртар
• бясплатныя:
  • GIMP - графічны рэдактар
  • XnView - графічны прагляднік / канвэртар

Асновы працы ў XnView

XnView кросплатформавая праграма для прагляду малюнкаў, якая падтрымлівае прагляд больш 400 і захаванне (канвертаванне) да 50 розных графічных і мультымедыйных фарматаў файлаў. Праграма распаўсюджваецца бясплатна для некамерцыйнага і адукацыйнага выкарыстання

Афіцыйны сайт праграмы: http://www.xnview.com/

Асноўныя магчымасці пры праглядзе малюнкаў:

• Рэжым папярэдняга прагляду (эскізаў) файлаў.
• Прагляд файлаў у акне і ў поўнаэкранным рэжыме.
• Памяншэнне / павелічэнне бачнага памеру малюнка.
• Прагляд шматстаронкавых і анімаваных малюнкаў.
• Атрыманне малюнкі са сканэра.
• Адлюстраванне звестак аб малюнку, у тым ліку інфармацыі EXIF ​​і IPTC.
• Падлік колькасці выкарыстаных у малюначку кветак.
• Адлюстраванне файлаў у рэжыме слайд-шоў у акне і поўнаэкранным рэжыме.
• Ўстаноўка праглядваемыя выявы ў якасці шпалер працоўнага стала.
• Магчымасць задаць некаторыя тэчкі ў якасці абраных для хуткага доступу да іх.
• Прагляд відэафайлаў пры наяўнасці адпаведных кодэкаў у сістэме.

Асноўныя магчымасці пры рэдагаванні малюнкаў:

• Вылучэнне часткі выявы, выразанне, капіраванне выдзеленай частцы ў буфер абмену, устаўка з буфера абмену.
• Паварот выявы.
• Пераўтварэнне кветак малюнка, замена каляровай палітры.
• Змена памеру малюнка.
• Устаўка тэкставай надпісы.
• Прымяненне да выявы розных эфектаў.
• Карэкцыя «эфекту чырвоных вачэй».

Іншыя магчымасці праграмы

• Стварэнне вэб-старонкі з малюнкаў.
• Пераўтварэнне фармату файлаў выяваў.
• Стварэнне скрыншотаў.
• Падтрымка ўбудоў, у тым ліку для Adobe Photoshop.
• Інтэграцыя ў Total Commander.
• Стварэнне спісаў файлаў.
• Запіс малюнкаў на CD (неабходна наяўнасць у сістэме Nero Burning ROM).

Асноўныя элементы інтэрфейсу

Меню ўключае ўсе асноўныя магчымасці працы з праграмай Панэль укладак выкарыстоўваецца для пераходу паміж вокнамі праграмы Панэлі інструментаў деблируют асноўныя пункты меню, прадастаўляюць хуткі доступ да функцыяналу праграмы дрэвападобнай панэль размяшчаецца па змаўчанні ў левай частцы акна праграмы, забяспечвае магчымасць пераходу ў патрэбны каталог, пошуку файлаў і тэчак на кампутары і ў лакальнай сеткі Панэль прадпрагляду ўтрымлівае некалькі ўкладак, на ўкладцы Перадпаказ ажыццяўляецца папярэдні прагляд абранага малюнка, на ўкладцы Уласцівасці выводзіцца інфармацыя аб графічным файле і пра які змяшчаецца ў ім малюнку:

• Імя файла
• апісанне
• памер файла
• Даты созданияб змены і адкрыцця
• фармат малюнка
• Шырыня і вышыня малюнка
• каляровая мадэль
• спосаб сціску
• і інш.

Радок стану змяшчае інфармацыю аб

• колькасці аб'ектаў у бягучым каталогу,
• колькасці вылучаных аб'ектаў,
• аб'ёме займаемага аб'ектамі дыскавай прасторы,
• вылучаным аб'екце

У працоўнай вобласці рэдактара (па змаўчанні, у правай частцы акна) выводзіцца змесціва бягучага каталога. Для прагляду аб'екта выкарыстоўваецца двайны пстрычка мышы. Кожны малюнак пры праглядзе адкрываецца ў асобнай ўкладцы (гл. Малюнак 2).

Малюнак 2.

1. Панэль укладак. 2. Ўкладка "Обозреватель".

3. Імя і пашырэнне файла малюнка. 4. Памер файла. 5. Памер малюнка

Праглядаць малюнкі можна, перамыкаючыся паміж укладкамі.

Вярнуцца да прагляду дрэва каталогаў можна, пераключыўшыся на ўкладку "Обозреватель".

Асноўныя магчымасці рэдагавання малюнкаў XnView

Найбольш распаўсюджаная задача, звязаная з публікацыяй малюнкаў у сеткі - неабходнасць паменшыць памер малюнка.

Важна памятаць:

1. Памяншэнне памераў выявы вядзе да страты некаторай часткі інфармацыі, адпаведна, вярнуць паменшаная выява да ранейшага памеру будзе немагчыма. Таму пры змене памераў рэкамендуецца заўсёды захоўваць зыходныя малюнка.
2. Калі зыходны малюнак маленькае, спробы павялічыць яго, хутчэй за ўсё, ні да чаго не прывядуць

Змена памеру малюнка

1. Адкрыйце малюнак у асобнай ўкладцы (двайны пстрычка па цэтліку выяву)
2. Выберыце пункт Меню Выява - Змена памеру
3. Пераканайцеся, што ўсталяваная галачка Захоўваць прапорцыі
4. Абярыце адзінкі вымярэння памераў - працэнт або Піксэл
5. Задайце патрэбны памер выявы па шырыні або вышыні.
6. націсніце OK
7. Захавайце малюнак з новай назвай.

Часта ўзнікае неабходнасць апрацоўкі не аднаго, а некалькіх малюнкаў. У гэтым выпадку зручна выкарыстоўваць магчымасць пакетнай апрацоўкі файлаў

Адначасовае змена памеру некалькіх малюнкаў

1. Выберыце пункт Меню Інструменты - Пакетная апрацоўка (або кнопка Пераўтварэнне на Панэлі інструментаў)
2. ўкладка Асноўныя
   1. Наладзьце Уваходныя дадзеныя. Для гэтага націсніце кнопку Дадаць, выберыце патрэбныя файлы (утрымліваючы клавішы Shift ці Ctrl, можна выбраць некалькі файлаў адначасова). Калі неабходна змяніць усе выявы ў якой-небудзь тэчцы, націсніце кнопку Дадаць тэчку
   2. Наладзьце Выхадныя дадзеныя. У полі Папка пакажыце, куды трэба захаваць вынік. Лепш захоўваць вынікі ў асобную тэчку, каб пазбегнуць выпадковага заціраньня зыходных файлаў.
3. ўкладка Пераўтварэнні
   1. У левай частцы ўкладкі абярыце Пераўтварэнне памеру.
   2. Націсніце кнопку Дадаць
   3. Пераканайцеся, што ўсталяваная галачка Захоўваць прапорцыі
   4. Задайце патрэбны памер малюнкаў па шырыні або вышыні.
4. Націсніце кнопку Выканаць
5. Перайдзіце ў тэчку, указаную Вамі ў раздзеле Выхадныя дадзеныя, праверце вынік працы.

дадатковая інфармацыя