Лабораторна робота № 4

РОБОТА З ЗОБРАЖЕННЯМ

1. Ознайомитися з теоретичними матеріалами щодо комп’ютерної графіки, графічних веб-форматів та їх особливостями.
Розуміти відмінності між растровою та векторною графікою.

2. Здійснити певні дії в наведених редакторах:

  • Відкрити існуюче зображення, внести зміни (додати текст чи інше зображення, зменшити розмір, повернути елемент тощо).

    jpg

  • Створити нове полотно певного розміру, зберегти файл. Розробити тематичне зображення: логотип, банер, аватар, мем, листівку, фотоколаж.

    jpg

  • Створити SVG зображення простої фігури з колірними елементами для подальшего розгляду його XML-коду.

    1.
    svg
    2.
    svg
    3.
    svg

3. За допомогою HTML-редактора поставити створені графічні елементи у відповідні місця сторінки.
Додати стилі до елементів [img], що стосуються розмірів, розташування, тіней, рамок та іншого оздоблення.


Image 2
Зображення

4. Користуючись сервісом Adobe Color Themes підібрати для власного редактора вдалу колірну гаму.
Обирати можна відштовхуючись як від певного кольору так і від фотографії.

figures

обранa темa

Adobe My Color Theme

з обраною темою

Adobe Color Themes

5. Створити нескладний дизайн на платформі Figma, відмітити зручності чи складності у використанні.
Реалізувати шаблон в HTML-коді та використати згенеровані платформою стилі.

це кaпєць

Вдруге стикаюсь з ціею ФiГмою... Створювати більш-меньш зручно, ала дуже не зручна організація щоб отримати безкоштовно "вихлоп" з сервісу...
можливо я помиляюсь, але за час користування - я матюкався...

Звідси можу зробити висновок - Figma викликае емоції))

6. Користуючись різними підходами створити чи обрати фавіконку, та втілити її на сторінку.

На ресурсі Icons8 створив чи обрав фавіконку, та втілив її на сторінку. ukraine

7. На ресурсі Icons8 обрати певне svg-зображення.
Уважно розібрати його xml-код, змінити певні значення зображення (розмір, кольори тощо) і вставити на сторінку.

обрав svg-зображення

icons8-youtube.svg

змінив svg-зображення

icons8-tubeyou.svg

8. Втілити на сторінку зображення (анімації) різних форматів (jpg, png, svg) і способів (css, javascript, svg).

JS:vjik.png
CSS:
SVG:

9. Створену сторінку та супутні файли (стилі, зображення) розмістити на хостингу.
Перевірити результат виконання через різні браузери.
Результат виконання демонструвати в Інтернеті.

the site

other test animated site