Викладач

Юрчак Ірина Юріївна

Доцент кафедри САПР
НУ "Львівська політехніка"
Інші контакти

#4. Робота з графікою

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

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

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

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

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

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

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

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

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

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

Photopea.com

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

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

Pixlr.com

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

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

Method.ac

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

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

Remove.bg

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

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

Adobe Color CC

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

Сервіс для дизайнерів інтерфейсів Figma

Figma — крос-платформний онлайн-сервіс для дизайнерів інтерфейсів і веб-розробників. У Figma дві ключові особливості: доступ до макету прямо з вікна браузера і можливість спільної роботи над документами.

Середовище розробки Figma
Середовище розробки Figma

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

Середовище розробки Figma

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

У Figma легко переглядати ранні версії проекту і відновлювати або дублювати будь-яку з них. Версії автоматично зберігаються, якщо протягом 30 хвилин в проекті не було жодних змін. Проводиться протокол, коли проект був відредагований і хто зробив зміни. Можна додавати нові версії, але варто осмислено називати версії і додавати опис змін.

Фрейми Figma є гнучкими, добре масштабуються і їх з легкістю можна використовувати в інших фреймах. Для фреймів є встановлені розміри пристроїв: Phones, Tablet, Desktop, Watch, Paper, Social Media.

Панель Grid Layout дозволяє швидко створити будь-яку кількість сіток, які швидко і гнучко налаштовуються, фіксуються і розтягуються.

Окрім онлайн-сервісу, Figma має десктопну версію. Для роботи з нею потрібно авторизуватися і мати постійне інтернет-підключення. Проекти зберігаються локально і за необхідності імпортуються в браузерну версію.

Figma можна користуватися безкоштовно, з певними обмеженнями:

  • Максимум два редактори.
  • Максимум три проекти.
  • Історія версій зберігається 30 днів.

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

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

FavIcon
Для створення іконки можна використати кілька підходів:
Скористатися онлайн редактором створення іконок.
http://www.favicongenerator.com/
http://www.favicon.cc/
Завантажити готові іконку, які поширюються безкоштовно
http://www.iconsearch.ru/
http://www.freefavicon.com/
http://faviconka.ru/

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

CSS зображення

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

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

Зміст звіту

  1. Назва та мета виконання лабораторної роботи.
  2. Скріншоти послідовності роботи з коротким описом кожного з етапів.
  3. Вказати Інтернет-адресу, скріншот та HTML-код створеної тестової сторінки.
  4. У висновку оцінити особливості роботи з графікою, відмінності між різними веб-форматами та особливостями застосування.

Контрольні питання

  1. Назвіть основні типи комп’ютерної графіки.
  2. Які графічні формати використовуються у веб? В чому їх відмінності та особливості?
  3. Здійснити порівняльний огляд представлених графічних онлайн-редакторів.
  4. Які можливості надають растровий та векторний графічні редактори?
  5. Які послуги надає сервіс Adobe Color Themes? За якими критеріями підбирається колірна гама для тематичного сайту?
  6. Які формати застосовують для зображень з прозорим фоном? Їх особливості?
  7. Назвіть основні характеристики зображення, яке уставляють на сайт.
  8. Для чого призначена платформа Figma, її переваги?
  9. Що називається фавіконкою? ЇЇ основні розміри та формати?
  10. Назвіть кілька варіантів отримання фавіконки. Який саме був застосований для виконання даної лабораторної роботи?