Методи створення та збереження зображень для веб-сторінок
За навчальною програмою 2018 року
Урок 15
10
(11)
Актуалізація опорних знань і життєвого досвіду
Розділ 3 § 15
Пропоную організувати диспут з питань:
Чи настільки важливо, яка графіка на сайті?
Може, важливіший зміст сайта, фактична інформація?
10�(11)
Методи створення та збереження зображень для веб-сторінок
Для роботи з растровою графікою є багато програм. Вони відрізняються набором засобів для опрацювання зображень:
Розділ 3 § 15
для початківців
для професіоналів
Paint
KolourPaint
Adobe Photoshop
GIMP та ін
10�(11)
Методи створення та збереження зображень для веб-сторінок
Розміри растрового зображення визначає кількість пікселів по горизонталі й вертикалі. Типові розміри екрана монітора в пікселях такі:
Розділ 3 § 15
1366 х 768
1920 х 1080
2048x1152
Від кількості пікселів залежить якість зображення, адже чим їх більше, тим більше окремих деталей за їх допомогою можна зобразити.
Цифрове фото може мати розміри:
2048 × 1536
4320 × 3240 пікселів тощо.
10�(11)
Методи створення та збереження зображень для веб-сторінок
Окрім розміру, зображення можна охарактеризувати кількістю можливих кольорів. Чим більше кольорів використано в зображенні, тим краще воно може відтворювати вигляд реальних об’єктів.
Розділ 3 § 15
Слід пам’ятати, що для кодування більшої кількості кольорів будуть потрібні довші коди, що спричиняє збільшення обсягу файла.
10�(11)
Методи створення та збереження зображень для веб-сторінок
Таким чином, під час створення або збереження растрового зображення слід вказати:
Розділ 3 § 15
розміри зображення
колір кожного пікселя
Для точнішого відтворення слід задавати також роздільність.
10�(11)
Растровий графічний редактор GIMP
Нескладні малюнки зручно створювати за допомогою простого графічного редактора, наприклад Paint. Проте є програми, наприклад GIMP, що мають більше можливостей і дозволяють опрацьовувати значно складніші зображення.
Розділ 3 § 15
10�(11)
Растровий графічний редактор GIMP
Графічний редактор GIMP розробляється інтернет-спільнотою, вільно розповсюджується і має різноманітні засоби для опрацювання растрових зображень. Програма є багатоплатформною, тобто одночасно виходять версії для різних операційних систем (Windows, Linux та ін.).
Розділ 3 § 15
10�(11)
Растровий графічний редактор GIMP
GIMP дозволяє:
Розділ 3 § 15
створювати й опрацьовувати растрові малюнки
покращувати якість фотографій на сканованих зображеннях
розробляти колажі, тобто об’єднувати кілька зображень в одне
Завдяки цьому його використовують різні фахівці в галузі комп’ютерної графіки:
фотографи
дизайнери та ін.
10�(11)
Растровий графічний редактор GIMP
Запустити графічний редактор GIMP можна за допомогою:
Розділ 3 § 15
Відповідної вказівки
з головного меню
Ярлика програми
10�(11)
Вікно програми GIMP
Розділ 3 § 15
Рядок меню
Вкладки відритих зображень
Панель інстру-ментів
Вибір кольорів
Рядок заголовка
Робоче поле
Діалогові вікна
Рядок стану
10�(11)
Растровий графічний редактор GIMP
Якщо після запуску програми з’явиться кілька окремих вікон, то їх можна об’єднати в одне командою меню Вікна ⇒ Одновіконний режим.
Розділ 3 § 15
Вигляд вікна може відрізнятися від наведеного на рисунку, оскільки програма дозволяє змінювати розташування й приховувати більшість елементів керування.
10�(11)
Створення й опрацювання зображення
Для створення нового зображення треба виконати команду Файл ⇒ Створити, зазначити в діалоговому вікні ширину й висоту майбутнього зображення в пікселях.
Розділ 3 § 15
Можна також зі списку Шаблони вибрати один із готових варіантів розмірів зображення.
10�(11)
Вибір кольорів
Для роботи із зображенням можна вибрати два кольори:
Розділ 3 § 15
Колір переднього плану
колір тла
два великі прямокутники показують вибрані кольори;
кнопка з маленькими квадратиками відновлює початкові кольори;
кнопка зі стрілками в разі її клацання міняє кольори місцями.
10�(11)
Вибір кольорів
Якщо клацнути один із великих прямокутників, то відкриється діалогове вікно для вибору відповідного кольору.
Розділ 1 § 1
У ньому зручно вибирати колір у режимі колірного колеса (умикається кнопкою).
Щоб задати колір, слід клацнути на колесі потрібний тон кольору, а потім клацнути в трикутнику і вибрати відтінок. Для завершення роботи з вікном потрібно клацнути кнопку Гаразд.
10�(11)
Огляд засобів керування
На панелі інструментів містяться кнопки різноманітних інструментів. Щоб вибрати потрібний інструмент, слід клацнути відповідну кнопку.
Розділ 3 § 15
У вікні параметрів, яке розміщено під панеллю інструментів, можна переглядати і змінювати властивості активного інструмента.
10�(11)
Огляд засобів керування
Доступ до більшості засобів роботи із зображенням здійснюється через діалогові вікна. Їх розташування можна змінювати. Якщо потрібного діалогового вікна на екрані немає, його потрібно ввімкнути, вибравши назву з меню Вікна ⇒ Діалоги з підтримкою прикріплення.
Розділ 3 § 15
10�(11)
Огляд засобів керування
Для більш зручного перегляду зображення, відшукання дрібних дефектів іноді доцільно збільшити чи зменшити масштаб.
Розділ 3 § 15
Масштаб перегляду можна змінити різними способами:
увести точне значення в поле у рядку стану;
розкрити список кнопкою біля цього поля і вибрати потрібне значення;
натиснувши клавішу Ctrl, прокрутити коліщатко миші.
Зміна масштабу впливає не на саме зображення, а лише на його вигляд на екрані.
10�(11)
Інструменти малювання
У растровому редакторі GIMP інструменти згруповано за призначенням.
Розділ 3 § 15
Розглянемо інструменти малювання.
Інструмент Пензель дозволяє малювати за допомогою «пензлів» різної форми. На рисунку показано частину панелі параметрів інструмента Пензель.
10�(11)
Інструменти малювання
Розділ 3 § 15
Зі списку Режим можна вибрати, як саме пензель впливатиме на зображення
Регулятори призначено для змінення щільності (непрозорості) пензля
Кнопкою Пензель розкривається список пензлів
У даному полі зазначається назва вибраного пензля
Для змінення співвідношення сторін пензля
Регулятори призначено для змінення розміру пензля
10�(11)
Інструменти малювання
Інструменти Пензель, Олівець, Аерограф і Гумка використовують спільний набір «пензлів»:
Розділ 3 § 15
Значок
Інструмент
Опис
Олівець
Відрізняється тим, що накреслені ним лінії не мають напівпрозорих ділянок
Аерограф
Діє аналогічно Пензлю, але щільність його сліду залежить від тривалості утримання кнопки миші
Гумка
Дозволяє стирати ділянки малюнка. Якщо для шару увімкнено прозорість, то слід Гумки стане прозорим (див. далі), інакше він буде зафарбований кольором тла
10�(11)
Кадрування зображення
Розділ 3 § 15
Графічний редактор GIMP дає змогу кадрувати зображення, тобто дуже точно обрізати його інструментом Кадрування .
Щоб вилучити зайві ділянки малюнка, слід:
1
вибрати інструмент Кадрування;
2
у робочому полі перетягнути прямокутник на ту частину зображення, яку потрібно залишити;
3
уточнити розміри та положення прямокутника, перетягуючи бічні смуги або весь прямокутник;
4
клацнути всередині прямокутника.
10�(11)
Збереження зображення
Якщо роботу над малюнком не завершено, його потрібно зберегти для подальшої роботи.
Щоб зберегти файл із зображенням для подальшої роботи, потрібно:
Розділ 3 § 15
10�(11)
Збереження зображення
Файл буде збережено у форматі XCF — спеціальному форматі графічного редактора GIMP .
Розділ 3 § 15
Якщо роботу над малюнком завершено, то його слід експортувати в потрібний растровий формат. Для цього слід вибрати команду меню Файл ⇒ Експортувати, а потім у діалоговому вікні — папку, назву файла і формат для збереження.
10�(11)
Як додати фоновий малюнок�на веб-сторінку?
Розділ 3 § 15
Щоб додати фонову картинку на веб-сторінку, задайте шлях до зображення всередині значення url стильової властивості background, яке в свою чергу додається до селектора body.
<style>
body { background: url(шлях
до файла); }
</style>
10�(11)
Як додати фоновий малюнок�на веб-сторінку?
Розділ 3 § 15
Додаючи фонову картинку, врахуйте, що зображення завантажується не відразу, тому колір фону повинен бути таким, щоб зберегти достатній контраст між кольором тексту і фону.
10�(11)
Як додати фоновий малюнок�на веб-сторінку?
Розділ 3 § 15
Код сторінки може мати такий вигляд:
Як виглядатиме сторінка в браузері:
10�(11)
Продовж речення
Розділ 3 § 15
10�(11)
Домашнє завдання
Розділ 3 § 15
Запланувати дії з подальшого вивчення методів створення зображень для веб-сторінок у щоденнику самоосвіти. Провести необхідні дослідження, знайти і проаналізувати необхідну інформацію
10�(11)
Працюємо за комп’ютером
Розділ 3 § 15
10�(11)
Дякую за увагу!
За навчальною програмою 2018 року
Урок 15
10
(11)