#3. Шрифти і зображення

Веб-дизайн та графічний дизайн мають багато спільного. Обидва вимагають хорошого розуміння типографіки, графіки і принципів дизайну.

У веб-дизайн основна увага приділяється взаємодії користувача з елементами сторінки, а не простому споживанню. Веб-дизайнер може працювати з графічним дизайнером для більш чіткого сприйняття окремих візуальних елементів, таких як шрифт і графіка. Але в подальшому веб-дизайнер з'єднує ці елементи разом, щоб створити повний інтерактивний дизайн.

Шрифт є одним із важливих елементів дизайну документа, який може підсилити чи навпаки зменшити ефективність донесення інформації до користувача. Важко переоцінити значення шрифту в оформленні тексту, будь то веб-сторінка чи журнальна стаття. Вірно підібраний шрифт полегшує сприйняття і додає сторінці свого неповторного стилю.

Шрифти для Веб

Шрифт є одним із важливих елементів дизайну документа, який може підсилити чи навпаки зменшити ефективність донесення інформації до користувача. Важко переоцінити значення шрифту в оформленні тексту, будь то веб-сторінка чи журнальна стаття. Вірно підібраний шрифт полегшує сприйняття і додає сторінці свого неповторного стилю.

Під час підготовки до створення веб-сайту, необхідно визначитися зі шрифтами, що будуть використані. Часто різними шрифтами дизайнер набирає не лише основний текст сторінки, але і різноманітні заголовки, логотипи, та інші елементи, що прикрашатимуть сторінку.

Досвідчений розробник знає, що браузер може використовувати для відображення сторінки лише ті шрифти, які встановлені на комп'ютері у користувача. З цієї точки зору шрифти можна умовно розподілити до двох категорій:

• Стандартні шрифти, які містяться в інсталяційних пакетах операційних систем, офісних програмах та Інтернет застосуваннях. Вони без проблем відображаються в переважної більшості користувачів.
• Довільні шрифти, які користувач доставляє за власними потребами та уподобаннями. Вони можуть бути відсутніми у значної групи користувачів.

Веб-безпечні шрифти

В Інтернеті історично склалося таке поняття як «безпечні» веб-шрифти. Безпечним шрифтом можна назвати шрифт, який є стандартним для всіх операційних систем. Нажаль, абсолютно безпечних шрифтів не існує. Окремі шрифти можна назвати безпечними з деякими обмовками.

Основою для визначення «безпечних» шрифтів послужили шрифти найбільш поширеної операційної системи Windows, які використовуються в інших операційних системах.

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Ці шрифти є в кожного користувача Windows, Mac OS і у переважної більшості користувачів Unix/Linux.

Для того, щоб текст сторінки міг відображатися однаково за задумом дизайнера в будь-якій операційній системі, існує можливість задавати кілька шрифтів для відображення тексту, тобто застосувати комбінації безпечних шрифтів - безпечні лінійки шрифтів.

За замовченням, для відображення тексту буде застосовано перший за ліком шрифт. У разі його відсутності на комп’ютері користувача для відображення буде використано наступний за ліком шрифт, і так далі. Зрештою, браузер обере з переліку відповідний для відображення шрифт.

Нестандартні (довільні) шрифти

А як же бути з решта шрифтами? Адже хочеться, щоб задум дизайнера побачило як можна більше число користувачів!

Для відображення довільних шрифтів останнім часом розроблено багато технологій, і розробнику варто знати про всі, щоб обрати зручний для нього підхід.

Під’єднання шрифтів @ font-face в файлі стилів

Властивість CSS @font-face надає можливість втілити на сайт нестандартні шрифти, які можна вибрати в мережі або створити самостійно.

Синтаксис CSS для оголошення користувацького шрифту дуже простий. Потрібно лише зазначити назву шрифту, джерело файлу шрифту і його можна застосувати до будь-якого елементу.

@font-face {

font-family: "MyFontName";

src: url('font.ttf');

}



body {

font-family: "MyFontName";/ * використовуємо підключений шрифт * /

}

Оскільки різні браузери підтримують різні формати користувацьких шрифтів. Щоб уникнути колізій у відображенні на сайті і домогтися кросбраузерності, краще використовувати наступний спосіб.

  
@font-face {

font-family: "PT Sans Narrow";

src: url("fonts/PTSans-Narrow.eot?") format("eot"), 

url("fonts/PTSans-Narrow.woff") format("woff"), 

url("fonts/PTSans-Narrow.ttf") format("truetype"), 

url("fonts/PTSans-Narrow.svg#PTSansNarrow") format("svg"), 

url("fonts/PTSans-Narrow.otf") format("opentype");

}


body {

font-family: 'PT Sans Narrow', sans-serif;	

}


Примітка: знак "?" після *.eot є обов'язковим для адекватного спрацювання шрифту в IE.

Колекція шрифтів Google Font

Google створив онлайн сервіс, де можна вибрати нестандартний шрифт для сайту (кількість доступних онлайн шрифтів постійно збільшується і серед них багато кириличних).

На сервісі Google Web Fonts містяться інструкції по підключенню вибраного шрифту до сайту, проведення налаштування зовнішнього вигляду онлайн шрифту і отримання повного набору CSS властивостей, які потрібно додати у файл стилів сайту.

Вибраний онлайн шрифт для сайту буде довантажуватися до браузера користувача з серверів Google, що дозволить не створювати додаткове навантаження на сервер власного хостингу, як у випадку, коли онлайн шрифти для сайту зберігаються на його хостингу.

• Google Web Fonts

• Як підключити Google Fonts

Google має величезні технічні потужності і затримок із завантаженням потрібних онлайн шрифтів для сайту не виникає. Якщо користувач вже побував на сайтах, де використовують Google Font API, то підвантажені додаткові веб-шрифти для сайту швидше за все вже будуть в кеші браузера відвідувача.

Всі онлайн шрифти в Google Font API поширюються за вільною ліцензією і даний спосіб їх під’єднання до сайту буде кросбраузерним за замовчуванням.

Іконковий шрифт Line Awesome

Шрифт LineAwesome - гідна заміна FontAwesome. Ці шрифти містять колекції масштабованих векторних іконок. Іконки можна форматувати за допомогою css-властивостей, встановлювати для них колір, розмір, тінь і багато іншого.

Іконкові шрифти

• Line Awesome

• Font Awesome

• Material Design Icons

• Android Icons

Особливості графічних форматів

Інформація, що зберігається в файлі - це сукупність цифрових даних. Спосіб запису інформації за допомогою послідовності байт називають форматом файлу. Тобто, графічний формат - це спосіб запису графічної інформації. Спосіб представлення зображення впливає на можливості його редагування, друку, на обсяг займаній пам'яті. Існують два основних способи кодування графічної інформації: растровий і векторний.

Растровий формат

Растровий формат характеризується тим, що все зображення по вертикалі і горизонталі розбивається на дрібні точки, так звані піксели (залежно від пристрою ~0.2-0.22 мм). У файлі, що містить растрову графіку, зберігається інформація про колір кожного пікселя. Розмір (size) зображення, що зберігається в файлі, задається у вигляді кількості пікселів по горизонталі (width) та вертикалі (height).

Векторний формат

При векторному форматі зображення представляється у вигляді комбінації простих геометричних фігур - точок, відрізків прямих і кривих, кіл, прямокутників тощо. Для повного опису малюнка необхідно знати вид і базові координати кожної фігури, наприклад, координати двох кінців відрізка, координати центру і діаметр кола. Цей спосіб кодування ідеально підходить для малюнків, які легко уявити у вигляді комбінації найпростіших фігур, наприклад, для іконок.

Растровий редактор Photopea.com

Photopea - онлайн-редактор зображень, призначений для роботи з растровою і векторною графікою. Спроможний до вирішення як простих питань, наприклад зміна розмірів зображень, так і складних - створення веб-сторінок, ілюстрацій і редагування фото. Ресурс оптимізований для роботи на будь-якому пристрої: комп'ютер, ноутбук, планшет або телефон. У процесі редагування можна відключитися від інтернету і продовжити в автономному режимі.

Растровий редактор PIXLR.com

Pixlr Editor - популярний графічний онлайн-фоторедактор, що має інтерфейс на 13 мовах. Pixlr Editor є безкоштовною полегшеною версією Photoshop, яка не вимагає встановлення на комп'ютер. Існує полегшена версія редактора Pixlr Express, а також простий фоторедактор Pixlr-o-matic для накладання ефектів і фільтрів в стилі Instagram.

Векторний редактор Method.ac

Method Draw - Веб додаток для роботи з векторною графікою в режимі онлайн. Сервіс має достатній набір інструментів для створення SVG зображень, також існує можливість відкривати звичайні растрові зображення і створювати на їх основі векторні малюнки. Зовні Method Draw нагадує Adobe Illustrator.

Сервіс для видалення фону з фотографій Remove.bg

Remove.bg сервіс, який завдяки штучному інтелекту допоможе скоротити час для видалення фону з фотографій. Сервіс вибирає головний об’єкт з чітко визначеними контурами і видаляє всі решта дрібні і несуттєві деталі.

Сервіс вибору колірної гами Adobe Color Themes

Adobe Color - веб-сервіс, що дозволяє створювати пробні і остаточні варіанти колірних тем для використання в проекті і надавати доступ до них. В Adobe Color CC вбудовано панель «Колір», що дозволяє переглядати і застосовувати колірні теми або помічені як обрані в додатку Adobe Color.

Генератори іконок Favicon

Favicon - це невелика картинка (іконка) у спеціальному форматі, яка для відповідного сайту відображається на вкладці браузера, в адресному рядку браузера, в "Вибраному" або в "Закладка", в сторінці видачі результатів пошукової системи замість стандартної іконки, загальною для всіх.

• Що таке фавікон і для чого він потрібен?
• Як додати фавікон на сайт

Для створення іконки можна використати кілька підходів:

Практичні уроки

• 

  Pixlr Editor

• 

  Photopea для початківців

• 

  Відеокурс по Figma

CSS зображення

Сучасні можливості CSS дозволяють створювати вражаючі проекти без використання графічних файлів. CSS-зображення це складні фігури, які можна створювати за допомогою псевдоелементів, рамок и тіней на основі html-элементів. Такі проекти є масштабованими, швидкими у завантаженні, простими для редагування.

Приклад створення css-зображення

Приклад створення 3D-навігації на чистому css

Галерея CSS зображень від Lynn Fisher

CSS анімація

CSS анімація дозволяє анімувати переходи від одних CSS стилів до інших. CSS-анімація складається з двох компонентів: стильовий опис анімації і набір ключових кадрів, що визначають початковий, кінцевий і проміжні стани анімованих стилів.

CSS-анімація має вагомі переваги перед традиційними способами:

1. Можна створити анімацію, не знаючи і не використовуючи JavaScript.
2. Анімації будуть добре працювати навіть при надмірних навантаженнях системи.
3. Дозволяє браузеру контролювати послідовність анімації, тим самим оптимізуючи продуктивність і ефективність браузера.

Галерея анімованих лоадерів на чистому CSS

Приклади створення css-анімації

JavaScript анімація. Елемент canvas

Елемент Canvas (Холст) — нова особливість в HTML5, що дозволяє малювати в браузері за допомоги технології Java. Його можна використати для створення та анімації форм та фигур, керування елементами на фотографії та відтворення видео.

Приклади створення js-анімації

SVG анімація

На сьогоднішній день дизайнери для створення анімованих іконок та логотипів частіше використовують SVG-зображення. Це продиктовано хорошою браузерною підтримкою для анимации SVG і надається більше можливостей для розробників: можна використовувати як власну функціональність SVG-анімації, так і доповнювати JavaScript конструкціями.

Приклади SVG-анімації

Галереї SVG-зображень

Відео лабораторної роботи

Порядок роботи

1. Ознайомитися з теоретичними матеріалами щодо веб-типографіки, основними характеристиками шрифтів та особливостями веб-форматів.
2. Завантажити нестандартний шрифт (наприклад, сервіси Fontesk, Fontsquirrel) та під’єднати його до сторінки. Оформити даним шрифтом певні елементи (заголовки, пункти навігації тощо).
3. Під’єднати до сторінки Google-шрифт. Застосувати його до певних елементів (заголовки чи особливі ділянки сторінки).
4. Ознайомитися з ресурсами, що надають у використання іконкові шрифти. Уважно прочитати документацію щодо уставляння іконок та особливостей надання їм стилів. Створити певну ділянку на сторінці, де розмістити художньо оформлені іконки з відповідною інформацією.
5. Ознайомитися з теоретичними матеріалами щодо комп’ютерної графіки, графічних веб-форматів та їх особливостями. Розуміти відмінності між растровою та векторною графікою
6. Здійснити певні дії в наведених редакторах:
   • Відкрити існуюче зображення, внести зміни (додати текст чи інше зображення, зменшити розмір, повернути елемент тощо).
   • Створити нове полотно певного розміру, зберегти файл. Розробити тематичне зображення: логотип, банер, аватар, мем, листівку, фотоколаж.
   • Створити SVG зображення простої фігури з колірними елементами для подальшего розгляду його XML-коду.
7. За допомогою HTML-редактора поставити створені графічні елементи у відповідні місця сторінки. Додати стилі до елементів <img>, що стосуються розмірів, розташування, тіней, рамок та іншого оздоблення.
8. Користуючись сервісом Adobe Color Themes підібрати для власного редактора вдалу колірну гаму. Обирати можна відштовхуючись як від певного кольору так і від фотографії.
9. Створити нескладний дизайн на платформі Figma, відмітити зручності чи складності у використанні. Реалізувати шаблон в HTML-коді та використати згенеровані платформою стилі.
10. Користуючись різними підходами створити чи обрати фавіконку, та втілити її на сторінку.
11. На ресурсі Icons8 обрати певне svg-зображення. Уважно розібрати його xml-код, змінити певні значення зображення (розмір, кольори тощо) і вставити на сторінку.
12. Втілити на сторінку зображення (анімації) різних форматів (jpg, png, svg) і способів (css, javascript, svg).
13. Створену сторінку та супутні файли (стилі, зображення) розмістити на хостингу. Перевірити результат виконання через різні браузери. Результат виконання демонструвати в Інтернеті.

Зміст звіту

1. Назва та мета виконання лабораторної роботи.
2. Скріншоти послідовності роботи з коротким описом кожного з етапів.
3. Вказати Інтернет-адресу, скріншот та HTML-код створеної тестової сторінки.
4. Скріни етапів виконання роботи та результати втілення шрифтів та іконок на сторінки. HTML код, що було вставлено на сайт.
5. Короткий опис редагування svg-зображення, його xml-код, та код, що було вставлено на сайт.
6. У висновку оцінити особливості використання нестандартних шрифтів, іконок, растрових, векторних і svg-зображень та різні можливості уставляння.
7. У висновку оцінити особливості роботи зі шрифтами та графікою.