You are on page 1of 66

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

НАЦІОНАЛЬНИЙ ТЕХНІЧНИЙ УНІВЕРСИТЕТ


«ДНІПРОВСЬКА ПОЛІТЕХНІКА»

МЕХАНІКО-МАШИНОБУДІВНИЙ ФАКУЛЬТЕТ
Кафедра конструювання, технічної естетики і дизайну

Методичні рекомендації
для самостійної роботи студентів
при виконанні лабораторних робіт
з дисципліни
«Хмарні технології у промисловому дизайні»
для студентів спеціальності 132 Матеріалознавство

Дніпро
2022
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Методичні вказівки для самостійної роботи студентів при виконанні


лабораторних робіт з дисципліни «Хмарні технології у промисловому дизайні»
для студентів спеціальності 132 Матеріалознавство / І.В. Вернер,
Т.О. Письменкова – Д.: НТУ «Дніпровська політехніка», 2022. – 66 с.

Автори:
І.В. Вернер, ст. вик.
Т.О. Письменкова, доц.

Затверджено методичною радою НТУ «ДП» (протокол № _3_ від


___23.04.2022__) за поданням кафедри КТЕД (протокол № 11 від 05.05.2021p.).

Методичні рекомендації для самостійної роботи студентів при виконанні


лабораторних робіт з дисципліни «Хмарні технології у промисловому дизайні»
для студентів спеціальності 132 Матеріалознавство сприятимуть набуттю у
студентів навичок створення плоских і тривимірних графічних об’єктів та
веденню складних розрахунків фізичних тіл із застосуванням сучасних хмарних
технологій.

Відповідальний за випуск завідувач кафедри основ конструювання


механізмів і машин к.т.н., доц. К.А. Зіборов.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 2


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

ЗМІСТ

Вступ……………………………………………………………………. 4
Сервіси концерну Adobe
Лабораторна робота № 1 ……………………………………………… 6
Лабораторна робота № 2 ……………………………………………… 7
Лабораторна робота № 3 ……………………………………………… 9
Лабораторна робота № 4 ……………………………………………… 11
Лабораторна робота № 5 ……………………………………………… 15
Лабораторна робота № 6 ……………………………………………… 17
Лабораторна робота № 7 ……………………………………………… 19
Спеціалізовані професійні сервіси
Лабораторна робота № 8 ……………………………………………… 25
Лабораторна робота № 9 ……………………………………………… 30
Лабораторна робота № 10……………………………………………... 37
Лабораторна робота № 11……………………………………………... 46
Сервіси цифрового портфоліо
Лабораторна робота № 12……………………………………………... 52
Лабораторна робота № 13……………………………………………... 57
Профілі спеціаліста у соціальних мережах
Лабораторна робота № 14……………………………………………... 61
Література………………………………………………………………. 66

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 3


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

ВСТУП

Підготовка інженерних кадрів у галузі графічних дисциплін є одним із


актуальних завдань теперішнього часу, так як в умовах виробництва
спостерігається нестача хороших конструкторів і технологів. Класичний підхід
до підготовки фахівців дозволяє отримати студентам знання і вміння з
використання сучасних математичних методів для проведення складних
розрахунків. Також традиційно студенти освоюють методики і програмні
продукти для візуалізації даних і наочного представлення результатів своїх
розробок широкому загалу.
Ґрунтуючись на сучасних тенденціях, можна зробити висновки про те, що
на даний момент загострилася тенденція мінімізації капітальних вкладень у
виробництво. Для роботи сучасного фахівця необхідна відповідальна часу
комп'ютерна техніка, а також ліцензійне програмне забезпечення інженерного,
розрахункового та дизайнерського профілю. Витрати на програмне
забезпечення і техніку тільки збільшуються в процесі їх вдосконалення. Час
старіння також скорочується, що змушує купувати більш нове обладнання і
програмне забезпечення.
Певну частину витрат на потужну комп'ютерну техніку можна
мінімізувати, використовуючи мережеві і хмарні сервіси. Наприклад, інженер-
конструктор може використовувати для розробки нового виробу Autodesk
Fusion 360. Даний хмарний програмний продукт відносно не вимогливий до
обладнання. Крім того, ряд найбільш трудомістких завдань він передає
суперкомп'ютеру компанії. За рахунок цього при використанні даного продукту
істотно скорочується час на проведення складних розрахунків. Також завдяки
можливості роботи в команді над єдиним проектом здійснюється оптимізація
процесу розробки.
Важливою відмінною рисою всієї лінійки програмних продуктів Autodesk є
те, що в процесі візуалізації конструкцій через хмарний сервіз створюється
портфоліо цифрових робіт. Завдяки даному сервісу студенти і фахівці в процесі
роботи наповнюють портфоліо своїх робіт. Це дозволяє черпати натхнення
один у одного, а також отримувати відгуки та коментарі фахівців про зроблені
проекти.
Говорячи про сервіси Autodesk можна підкреслити тенденцію до
постійного розвитку хмарних сервісів стосовно всіх аспектів творчої та
конструкторської діяльності. Наприклад, сервіс генерації тривимірних
персонажів дозволяє в хмарі створити і налаштувати фізичні параметри моделі
для подальшого доопрацювання в професійних пакетах тривимірної графіки.
Завдяки даному сервісу можна згенерувати модель, наприклад, для детальної
розробки одягу або наповнення вулиці трафіком пішоходів.
Також компанія Autodesk надає свої ресурси для зберігання даних проектів
в хмарі, що відкриває широкі можливості для їх спільного використання при
командному проектуванні і дизайні.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 4


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Також компанія Autodesk пропонує скористатися однією з передових
хмарних технологій яка дозволяє отримати тривимірну модель локації без
використання дорогого тривимірного сканера. Продукт Recap дозволяє на базі
фотографій отриманих з цифрового фотоапарата або мобільного пристрою
отримати тривимірну модель для подальшого використання в тривимірних
графічних пакетах. Також компанія надає широку лінійку рішень для
конструкторської, архітектурної та інших видів проектів про які докладніше
можна дізнатися на ресурсах компанії.
Важливою відмінністю сучасного фахівця є його навик за поданням
інформації в наочному вигляді. Наукова діяльність, і як окремий випадок
конструкторська діяльність включає в себе проведення складних розрахунків,
проектних рішень і масу документації відповідно до стандартів конкретної
області. На даний момент затребувані фахівці здатні пояснити під час семінарів
і презентацій проектів широким масам свої ідеї. Таким чином вони заручаються
підтримкою інвесторів або організацій, що ставлять перед ними рішення і
отримують фінансування на ведення робіт.
Лідером дизайнерських рішень в галузі графіки, анімації, моушен дизайну
є концерн Adobe. Компанія пропонує до використання для поширення
інформації безкоштовні хмарні сервіси Adobe Express. Дані сервіси дозволяють
в хмарі створювати двомірні графічні роботи, сайти-презентації. Також у
сервісі наявна система хмарного відеомонтажу. Сервіс включає в себе набір
високоякісних фотографій і відео вставок для використання в роботах для
прискорення роботи дизайнера.
У освітніх стандартах спеціальності 132 Матеріалознавство до фахівців з
вищою освітою на ряду з фаховими компетентностями висувається ряд
додаткових компетентностей які необхідні у будь-якій сфері діяльності, як
професійній так і побутовій.
Створення функціональних і ергономічних предметів, естетично приємний
зовнішній вигляд виробу, підвищення енерго- та ресурсозбереження під час
виробництва та використання предмета, проектування безпечних для людини і
навколишнього середовища речей, створення інтуїтивно простого у
використанні обладнання – всі ці критерії нового продукту вимагають від
сучасного інженера не тільки професійних навичок, а й широку уяву і тонке
естетичне бачення.
Дисципліною «Хмарні технології у промисловому дизайні»
забезпечуються результати навчання наведені в освітній програмі підготовки
бакалаврів за спеціальністю 132 Матеріалознавство – здатність доносити
інформацію, ідеї, проблеми, рішення та власний досвід; застосовувати до
рішення прикладних задач дизайнерські методи обробки та донесення
інформації.
Представлені методичні рекомендації створені з метою допомогти
студентам у формуванні умінь розв’язувати прикладні дизайнерські і інженерні
задачі із застосуванням сучасних хмарних технологій.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 5


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Лабораторна робота 1
Формування постеру у сервісі Adobe Express.

Мета роботи: набути навичок розробки постерів та колажів у сервісі


Adobe Express.

Безкоштовний хмарний сервіс Adobe Express (express.adobe.com) можливо


використовувати з любого пристрою що має сучасний інтернет оглядач та
доступ до глобальної мережі. Для користування сервісами необхідно
зареєструвати обліковий запис.
Сервіс дає змогу виробляти 3 типи проектів: графіка (зображення
обмежене певними розмірами із підтримкою анімації), хмарна презентація у
вигляді WEB сторінки із дизайном та переходами і відеопроект (містить
систему відеомонтажу).
В даної роботі необхідно розробити постер розміром 1000х1000 пікселів,
що містить текстові елементи із:
1) назвою дисципліни;
2) часом і датою проведення занять;
3) відомості про студента, що виконав роботу.
В якості тла можливо використовувати певні зображення із бібліотеці
виробника. Але на постері повинно бути одно зображення що стосується
нашого навчального закладу.
Приклад виконання завдання можливо побачити на рис. 3.
Вигляд вікна начального завантаження можливо побачити на рис.1.

Рис.1. Начальна сторінка сервісу (express.adobe.com)

Перелік проектів під час створення із часом змінюється згідно існуючих


© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 6
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
трендів та потреб. Передивитись можливості і типи проектів можно під час
створення нового проекту (рис.2).

Рис.2. Створення нового проекту

Рис.3. Приклад створення постеру


© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 7
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Лабораторна робота 2
Формування хмарного звіту з курсу у сервісі Adobe Express.

Мета роботи: набути навичок розробки хмарних презентаційних


матеріалів у сервісі Adobe Express.

Для надання можливості доступу до матеріалів можливо поширювати не


тільки розроблені у сервісі зображення, але і презентаційний матеріали. Звіт з
даного курсу потрібно створити у даному сервісі і наповнювати його роботами
у міру їх виконання.
Для створення звіту ми будемо використовувати тип проекту Web Page.
Після натискання кнопки створення веб сторінки буде запущено процес
генерації середовища. По закінченні відкриється середовище розробки (рис. 4,
а). За умовчанням на першому блоці буде додано текстове поле для заголовку і
дрібного тексту.
Заповніть блоки відповідним змістом (рис.4, б). При натисканні на блок
з’явиться вспливаюче меню з налаштуваннями тла блоку. Оберіть і налаштуйте
бажаний вигляд (рис.5).

а) б)
Рис. 4. Налаштування вебсторінки для презентації:
а) праця із текстовим блоком заголовка
б) налаштування типу тла

Для додавання інформації щодо виконання інших лабораторних ми


рекомендуємо використовувати макетування типу Split Layout (розділене). З
однієї сторони можливо додавати скріни або зображення, а з іншої опис самої
роботи. Також можливо додавати таки елементи як – посилання із кнопкою,
відео із відеосервісів та звичайні текстові або графічні елементи. Приклад
виконання із розділеним форматуванням наведено на рис. 6.
Наприкінці потрібно поширити лінк на даний проект і надати посилання
викладачу.
© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 8
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис. 5. Приклад налаштованого першого блоку

Рис.6. Приклад використання роздільного макетування блоку

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 9


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Лабораторна робота 3
Формування відео презентації курсу у сервісі Adobe Express.

Мета роботи: набути навичок редагування та створення коротких відео


у сервісі Adobe Express.

В даної роботі необхідно створити відео. Під час створення можливо


обирати шаблони або почати із порожнього простору (рис. 7). У відео,
використовуючи кнопку мікрофона студент повинен записати звукове
звернення.
Звукове звернення повинно містити наступну інформацію:
«Я студент групи 132м-22 Прізвище ім‘я, навчаючись на курсі хмарні
технології у промисловому дизайні і опанував навички використання сервісів
для розробки і поширення графічної інформації».
Потрібно додати мелодію на задній план із бібліотеці та налаштувати
візуальний ряд з відео про універ або іншими цікавими подіями. Треба
налаштувати довжину відеоряду згідно із звуковим супроводом. Наприкінці
потрібно поширити лінк на дане відео і додати посилання до звіту з курсу.

Рис. 7. Вікно створення нового відео

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 10


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Лабораторна робота 4
Праця із кольором у сервісі Adobe Color.

Мета роботи: набути навичок створення бібліотек кольорів для різних


типів графічних праць у сервісі Adobe Color.

Під час розробки графічної спрямованості не останню роль відіграє


кольори об‘єктів, оточення та випромінення. Навчаючись на курсах
дизайнерського напряму спеціалісти розуміють правіла використання кольорів
у проектах. Отже зазвичай використовують лише 2-3 базових кольори у
проекті, для того щоб не розсіювати акцент і не робити праці дуже строкатими.
Використовуючи сервіс кольорів можливо створити бібліотеку кольорової
гармонії для проекту. Після відкриття сервісу за посиланням color.adobe.com
інтерфейс виглядає чином наданим на рис. 8.

Рис.8. Начальне вікно сервісу кольорів

Досвідчені дизайнери можуть одразу перемикати типи гармоній у лівому


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

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 11


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис.9. Обрання кольорів з гармонії тріади

Під вибором типу гармонії розташовано перемикач кольорової схеми. За


потреби можливо обирати потрібну і отримувати налаштування кольорів у
відповідному виді.
На різнокольоровій шкалі під кольоровим колом є можливість встановити
основний колір натисканням миші на відповідному кольоровому осередку. На
основному кольорі з‘явиться білий трикутник. Можливо змінюючи основний
колір впливати на насиченість інших кольорів, яка буде автоматично підібрана
системою.
Верхнє меню складається із наступних пунктів:
- Створення (Create). Дозволяє у ручному режимі створювати бібліотеки та
налаштовувати кольори.
- Дослідження (Explore). Дозволяє проаналізувати існуюче зображення і
отримати бібліотеку кольорів.
- Тренди. Дозволяє слідкувати за сучасними трендами у дизайні, дивитесь
приклади зображень і відповідних до них бібліотек складових кольорів.
Це дозволяє розвивати та поліпшувати художні навички професіоналам.
- Бібліотеки. Містить збережені для роботи набори кольорів.
Додаткові функції (автоматизація)

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 12


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Наданий сервіс можливо використовувати для аналізу зображень і
отримання бібліотеки складових кольорів (або градієнтів) зображення у
автоматичному режимі. Для цього на другому верхньому горизонтальному
меню потрібно обрати кнопку дослідження зображення Extract Theme
(Gradient).
Також використовуючи інструменти доступності (Accessibility Tools)
можливо підібрати кольори за максимальним контрастом перемикач Contrast
Checker (рис.10) або змішуваність кольорів Color Blind Checker (рис.11).

Рис. 10. Перевірка кольорів на контраст

При виконанні наданою роботи потрібно проаналізовати зображення у


режимі Extract Theme і отримати бібліотеку базових кольорів. Надати до звіту у
сервіс Adobe Express зображення і бібліотеку. Приклад виконання надано на
рис. 12.
Також потрібно зробити аналіз контрасту і підібрати 2 кольори відповідно
тла і кольору тексту для розробки опису продукту. Скрін надати до звіту,
приклад надано на рис.10.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 13


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис. 11. Перевірка кольорів на змішуваність

Рис.12. Приклад виконання аналізу фото університету


© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 14
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Лабораторна робота 5
Праця із хмарної версією Adobe Photoshop.

Мета роботи: набути навичок роботи із растровою графікою у


хмарному сервісі Adobe Photoshop.

Для праці із даним сервісом (photoshop.adobe.com) на персональному


комп‘ютері потрібно придбати підписку, або скористатись 7-добовим тріалом.
Якщо немає можливості використовувати комп’ютерну техніку, можливо
користуватись додатком для мобільних пристроїв. Існує декілька варіантів
додатку який доступний безкоштовно, а саме: Photoshop Express.
Відкриймо сервіс та створимо документ із наступними розмірами
1920х1080@72 (рис.13).

Рис. 13. Вікно створення документу

Завантажмо зображення університету і відмасштабуємо на розмір


документа (рис.14).
Далі потрібно створити порожній растровий шар. На ньому зафарбувати
прямокутник кольором підібраним у сервісі кольорів для фону за текстом.
Навести текст з назвою дисципліни та використати колір контрастний до
зафарбованого прямокутника (рис.15).

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 15


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис. 14. Масштабування доданого зображення

Рис. 15. Кроки виконання постеру

Знайдене у мережі зображення за ключовими словами: «Чорна Вдова»,


додати та обробити командою видалення тла (Remove Background).
Отримане зображення скріном додати до звіту із дисципліни.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 16


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Лабораторна робота 6
Утворення оточення для віртуального туру за растровими зображеннями.

Мета роботи: опанувати хмарний інструментарій для створення


оточення тривимірного середовища із растрових зображень.

Презентації сучасного обладнання або споруд та локацій потрібують


можливостей надати глядачам інформації о формі об‘єкту. При створенні
тривимірних презентацій використовуються складні тривимірні моделі, які
потрібують налаштувань і роботи із матеріалами і таке інше. Для створення
таких праць потрібні фахівці із моделювання, візуалізації і утворення
середовища, мандрувати котрим зможуть глядачі, для того щоб оцінити
переваги та недоліки проекту. Також потрібне професійне програмне
забезпечення та потужна техніка.
У даної роботі ми розглянемо утворення елементу віртуального туру із
растрового зображення. Елементи растрового зображення ми розробимо
власноруч у хмарному редакторі, який розглянули у попередньої лабораторній
роботі.
Для отримання плоского зображення ми зробимо сферичну розгортку
полігональної моделі, або завантажмо готове зображення із сайту
panoform.com. На головній сторінці існує блок що містить перелік наявних для
завантаження варіантів сіток (рис.16). Ми будемо використовувати базову.

Рис.16. Перелік сіток для завантаження

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 17


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Після завантаження відкрийте зображення із базовою сіткою у растровому
редакторі (фотошоп або інший) і використовуючи напрямні створіть графічні
елементи (об‘єкти).
У нашому випадку ми створимо спочатку оточення у вигляди трави і неба.
Поділимо зображення для цього навпіл (рис.17).

Рис.17. Крокі малювання елементів на сферичному оточенні

За потреби додайте інші необхідні деталі. Збережіть отримане зображення


у форматі JPG. Щоб побачити отримане тривимірне середовище ми
скористаймося ще раз сайтом panoform.com. На головній сторінці існує червона
надпис у верхньому правому куті Try It (рис. 16). Натиснувши на цю надпис ми
перейдемо до сторінки тестувань тривимірних середовищ
(https://tool.panoform.com).
На цій сторінці за допомоги кнопки завантажень підвантажте отримане
зображення. Після завантаження відкриєтеся тривимірне середовище, де буде
можливість обертатись навколо щоб роздивитись усі елементи (рис.18).
Цю сторінку можливо використовувати під час ведення правок і
редагування документу. Але для того щоб ділитись отриманими середовищами
воно не підходить.
Для поширення отриманих «віртуальних турів» можливо використовувати
один із безкоштовних або умовно безкоштовних сервісів.
По-перше сервіс, що має кириличну локалізацію truevirtualtours.com.
Приклад виконаної роботи завантажену на цю платформу можливо побачити за
посиланням: https://truevirtualtours.com/ru/panorama/100869/360view.
По-друге ми рекомендуємо використовувати умовно безкоштовні
перевірені часом сервіси. Один із найстаріших з них це lapentor.com. Цій та
подібні сервіси дозволяють утворювати віртуальні тури і ділитися ними за
допомоги посилання, або відповідного коду для встановлення на сайти. Але є
обмеження на кількість проектів у безкоштовних акаунтах.
© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 18
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Приклад виконаної роботи завантажену на цю платформу можливо
побачити за посиланням: https://app.lapentor.com/sphere/cloud-services.
По-трете існує низка сервісів по праці з віртуальними турами що мають
біль приємний інструментарій. Просто перелічимо найбільш популярні:
panoee.com
kuula.co
cloudpano.com
marzipano.net
divein.studio
panoroo.com

Рис.18. Тестування тривимірного оточення

Посилання на зроблений тур необхідно додати до звіту із дисципліни.

Лабораторна робота 7
Створення векторних графічних елементів у сервісі Adobe Figma.

Мета роботи: опанувати хмарний інструментарій роботи із векторної


графікою Adobe Figma.

Figma являє собою зручний графічний редактор, розроблений для веб-


дизайнерів. Усі створені документи зберігаються у хмарі, а це означає, що над
проектом може працювати ціла команда людей, при цьому завантажувати його
не потрібно, досить просто відкрити посилання.
Заходити до Фігми можна через браузер або завантажити на свій ПК
(підходить для роботи Windows та Mac). Якщо обрано другий варіант, можна

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 19


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
редагувати проекти в режимі офлайн і при підключенні інтернету всі зміни
синхронізуються.
У цьому редакторі можна створювати:
 векторні ілюстрації;
 іконки, меню, вікна, кнопки та інші елементи інтерфейсу;
 інтерактивні прототипи мобільних додатків та сайтів.
Щоб розпочати роботу у Figma, достатньо зайти на офіційний сайт
редактора (https://www.figma.com). При бажанні працювати онлайн, достатньо
натиснути на “Try Figma for free”, якщо необхідно встановити софт, то потрібно
обрати пункт “Get desktop app”.
Можливостей редактора.
Прототипування
У редакторі дизайнери можуть створити клікабельну версію сайту або
мобільної програми. Користувач може налаштувати будь-яку функцію.
Наприклад, спливаюче меню, кнопки, модальні вікна та ін.
Перевага в тому, що всі екрани розташовані на одній сторінці, а це означає,
що не потрібно перемикатися між вікнами. Коли прототип готовий, можна
увімкнути режим презентації, де відкривається можливість переходити між
розділами сайту та натискати на різні пункти в меню.
Компоненти
Компоненти – це повторювані UI елементи. Їх можна створювати з іконок,
полів, форм, блоків, заголовків та ін. У Фігма можна створювати два типи
елементів:
 Основний (Master components).
 Залежний (Instances).
Щоб створити компонент, достатньо просто вибрати відповідну функцію
“Створити компонент”. У такому разі у вас вийде основний компонент, а якщо
ви копіюєте його і кудись перетягнете, він стане залежним. До речі, зробити
компонент залежним можна:
 утримуючи Alt, перетягнути в потрібне місце;
 використовувати команду Dublicate;
 за допомогою класичного копіпасту.
Векторні сітки
Ця функція дозволяє дизайнерам створювати векторні форми різної
складності. Лінія необов’язково повинна виходити з однієї точки і замикатися.
Користувач може розгалужувати лінію та малювати її з будь-якої точки.
Вбудоване коментування, редагування та доступ
Figma дозволяє працювати над проектом колективно. Можна створити
команду та кожному її учаснику задавати певні налаштування. Наприклад,
хтось може лише переглядати проект, а хтось редагувати. Також автор проекту
бачить, як його учасники працюють над документом.
Також користувачі можуть обговорювати будь-який елемент у проекті та
залишати коментарі. Всі ці корисні функції для команди дозволяють працювати
швидко та злагоджено.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 20


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Контроль версій
У цьому онлайн-редакторі можна відстежувати всю історію дій
співробітника, а також відновлювати попередні версії документів. Перевага
Figma у тому, що навіть після закриття вкладки, сервіс зберігає версії. Також
зберігаються зміни, якщо учасники не вносили виправлення протягом останніх
30 хвилин.
Щоб відкрити історію версій, достатньо у меню, що випадає, вибрати
відповідну опцію. На панелі з’явиться історія змін.
Завдання.
Розробити набір іконок із 6 штук, для використання в якості елементів
дизайну сайту.
Для виконання роботи потрібно зайти на сайт https://figma.com/ та
створити обліковий запис, якщо такого ще не було. Після завантаження
початкової сторінки потрібно натиснути кнопку «» для створення нового
документу (рис. 19). На початковій сторінці існує два типи меню згори ліворуч
і праворуч. У правому можливо задати налаштування та завантажити додаток.
У лівому кнопки доступу до соціальної спільноти.

Рис.19. Початкова сторінка сервісу Фігма

Після утворення нового документу (проекту) створіть фрейм і задайте


йому наступні розміри 400х400 px (рис. 20). Фрейми за функціоналом
відповідають монтажним областям у фотошопі.
Для поліпшення праці додайте сітку відповідною щільності натиснувши
відповідні кнопки у правому вертикальному меню, а сама натисніть плюс
напроти кнопки «Layout grid» (рис. 21). У меню редагування сіткою налаштуйте
крок на 20 px та оберіть бажаний колір для неї.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 21


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Кожну іконку ми будемо розробляти на окремому фреймі. Отже необхідно
дублювати вже налаштований, або створіть та налаштувати ще 5 фреймів для
іконок.

Рис.20. Створення першого фрейму

Рис.21. Налаштування сітки

Для утворення першої іконки будемо використовувати наступні графічні


примітиви: коло і прямокутник. Кроки створення іконки наведені на рис. 22.
Сперш утворюємо коло та ставимо у середині фрейма (рис.22, а). Далі
додаємо прямокутник (рис.22, б). Для кола і прямокутника додайте із правої
палітри обведення відповідного кольору та товщині, використовуючи
властивість Stroke (натиснувши плюс праворуч). Розташовуємо прямокутник за
центром кола використовуючи інструментарій вирівнювання у правій панелі

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 22


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
налаштувань дизайну, виділивши обидва об‘єкти (рис.22, в). Також необхідно
скругліти кути прямокутника за допомоги тієї ж самої панелі (рис.22, г).
Для утворення усіх елементів необхідно продублювати декілька разів
прямокутник та розгорнути його на кут із кроком 45 градусів (рис.22, д).
Об’єднаймо усі прямокутники, для цього їх потрібно виділити та скористатись
меню логічних операцій із горизонтального меню за центром (рис.22, є).
Далі потрібно додати коло, встановити його за центром (рис.22, ї) та
використати віднімання його від отриманої фігури (рис.22, ж). Приклад
отриманої іконки наведено на (рис.22, з).

а б в

г д є

ї ж з
Рис.22. Кроки створення першої іконки

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 23


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

а б в

г д є
Рис.23. Кроки створення другої іконки

а б в

г д
Рис.24. Кроки створення третьої іконки

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 24


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

а б в

г д є

ї ж з
Рис.25. Кроки створення четвертої іконки

Використовуючи отримані навички відтворіть інші 5 іконок користуючись


наданими у рисунках кроками відтворення. На рис. 26 наведені два останні
об‘єкта для виконання. Після моделювання надайте посилання на проект до
звіту.

Рис.26. Останні іконки для виконання завдання

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 25


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Лабораторна робота 8
Створення мокапів та редагування зображень у сервісі Photopea.

Мета роботи: опанувати хмарний розширений редактор зображень


Photopea.

Photopea це фоторедактор, в якому є велика кількість інструментів для


роботи з фотографіями різного формату, у тому числі з RAW форматами, фото
у високій якості, та шарами. Крім того, сервіс надає широкі можливості для
корекції зображень без обов'язкової передплати та реєстрації. Photopea
побудований за образом Adobe Photoshop, має просунуті функції та розробку
HTML5 — саме тому він без проблем запускається в будь-яких браузерах, не
вимагаючи встановлення додаткових плагінів.
Основний функціонал вміщує наступні можливості: різні пензлі та
фільтри, зміна кольору, накладання шарів, автоматичне або ручне
налаштування яскравості, відтінку, насиченості, ефекти розмиття, різкості.
Один з мінусів — багато реклами, яка забирається лише покупкою передплати.
І ще з основних недоліків фоторедактора — складний інтерфейс для новачка та
мінімізована кількість автоінструментів. Дозволяє зберігати зображення у
форматі PSD, JPG, PNG, GIF, BMP SVG, XCF та Sketch.
Розглянемо принципи роботи у редакторі створюючи мокап афіши
навчальної діяльності університету. Відкриймо сайт https://www.photopea.com/
(рис.27). Для того щоб не розробляти власноруч дизайн скористаймося шаблона
із відповідної бібліотеки натиснувши кнопку PSD Шаблони. Оберемо категорію
Web&Mobile (рис.28). Серед наданих шаблонів потрібно обрати варіант із
мобільним пристроєм.
Натиснувши на обраний шаблон відкриймо його у сервісі для того щоб
відредагувати певні елементи (рис.29). Оберіть у палітрі шарів потрібний, що
містить зображення на екране. Подвійним клацанням на мініатюрі цього шару
(або смарт-об‘єкту) відкрийте та відредагуйте зображення.
Під час редагування потрібно додати брендові зображення освітньої
установи. Тобто логотипи університету або кафедри, або відомі зображення
споруд установи що є її «обличчям», або інші елементи що добре пізнаються
(рис. 30).
На наступних рисунках вказано кроки додавання і оформлення елементів
роботи і надано приклад остаточного зображення для додавання у звіт з даного
курсу (рис. 32).

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 26


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис.27. Начальна сторінка сервісу

Рис.28. Бібліотека шаблонів сервісу

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 27


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис.29. Відкритий шаблон мокапу

Рис.30. Відкритий шар зображення на екрані мобільного пристрою

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 28


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис.31. Приклад редагування зображення

Рис.32. Приклад виконання мокапу про вищу освіту

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 29


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Лабораторна робота 9
Створення фотореалістичних рендерів у Homestyler.

Мета роботи: опанувати хмарний сервіс для планування приміщень або


ландшафтного дизайну 3D Homestyler.

Homestyler – безкоштовний веб-сервіс для створення індивідуального


дизайну інтер'єру у 3D чи 2D. Дозволяє реалізувати оригінальні дизайнерські
рішення на основі вбудованих бібліотек реальних предметів меблів та зберігати
готові напрацювання у файл DWG для подальшого редагування у сторонніх
додатках.
Сервіс підходить для дизайнерів інтер'єрів та людей, які ніколи не
займалися цим професійно. Завдяки інтуїтивному інтерфейсу та простим
інструментам для роботи навіть без досвіду створюються оригінальні рішення.
Homestyler може стати незамінним інструментом для всіх, хто хоче заощадити
на послугах дизайнера та зробити все самостійно не на шкоду якості. На сайті
виробника існує система навчання, відео та текстові методичні матеріали.
У каталозі Homestyler тисячі предметів меблів, які можна інтегрувати у
будь-який простір, порівнювати між собою, замінювати одне одним. Завдяки
Live-візуалізації можна розглядати простір у тривимірному режимі для кращого
сприйняття готового результату. Виведення проекту в DWG здійснюється в
один клік і не потребує попередньої підготовки. Сервіс дозволяє розташовувати
на редагованій площі не тільки основні предмети меблів, але також
світильники, картини, дзеркала, килими та найдрібніші інтер’єрні елементи. За
замовчуванням всі елементи відповідають реальним прототипам, завдяки чому
не буде помилок у реалізації інтер'єру. Перегляд доступний у 2D та 3D режимах
– не тільки на ПК, а й у додатках для Android та iOS. Також можна робити
знімки проекту та зберігати у форматах .png або .jpg.
Безкоштовно можливо отримувати рендери 2к розподілу, та
використовувати стокові елементи із каталогу тривимірних елементів.
Для запуску сервісу необхідне зайти на сайт за посиланням homestyler.com
та натиснути кнопку «Почати моделювання», що розташована у правому
верхньому куті сайту. Перше вікно що буде відображене після завершення
містить корисну інформацію, його необхідно закрити натиснувши кнопку
«SKIP». Наступне вікно містить інформацію щодо створення проекту (рис.33).
Під час створення проекту можливі наступні варіанти:
- Шаблони (Templates): обрання у якості основи існуючий проект.
- Імпорт зображення: в проект буде додано зображення для полегшення
відтворення середовища.
- Імпорт САПР моделі: використання кресленика у якості основи для
створення проекту.
- Новий дизайн: створення порожнього проекту.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 30


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис. 33. Вікно створення нового проекту

Почнем створення навчального проекту натиснувши кнопку нового


дизайну. Наддамо назву проекту «Cloud services Dniprotech» та тип проекту –
публічний (рис.34).

Рис. 34. Вікно роботи із проектом

Інтерфейс додатку є класичним. Ліворуч перемикачі режимів роботи, а


саме:
- створення кімнати (Create room);
© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 31
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
- налаштування споруд (Customize);
- автоматичний стилізатор (Autostyler);
- бібліотека моделей (Model Library);
- елементи користувача (My).
Палітри розташовані праворуч містять інструменти регулювання
параметрів обраних об’єктів.
У режимі створення кімнати (Create room) додаймо кімнату із наступними
розмірами: 4000х6000 мм. Для цього скористаймося командою креслення
кімнат (Draw Rooms). Створюється паралелепіпед, за допомоги клавіши
табуляції на клавіатурі введіть відповідну ширину та довжину кімнати (рис.35).

Рис. 35. Створення каркасу кімнати за розмірами

Додамо геометрію для ніші або балкону розділивши верхню стіну. Для
цього необхідно виділити верхню стіну та із додаткового меню обрати команду
розподілу (Split Wall) (рис.36., а).
Встановіть потрібні розміри для розділених часток стіни. Праву частину
видаліть (рис.36., б-в) обравши її та натиснувши клавішу видалення. Оберіть
команду утворення стін за центром із лівої панелі, та докресліть місце для ніші
або балкону (рис.Х., г-д). Приклад отриманої форми надано на рис.36., є.
Двері до кімнати потрібно створити на лівій стіні, обравши команду
створення єдиної двері (Single Door). На ніжній стіні потрібно додати вікно,
використовуючи команду додавання французького вікна (French Window).
Пересмикнитесь до 3Д режиму натиснувши відповідний режим у палітрі
відображення праворуч, або за допомоги перемикачів знизу (рис.37).
Налаштуйте параметри вікна таким чином, щоб воно займало більшу частину
стіни.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 32


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

а) б)

в) г)

д) є)
Рис.36. Кроки утворення стін кімнати

Додайте стіну до верхнього блоку та до неї додайте ковзаючи двері (Sliding


Door).
Використовуючи бібліотеку моделей необхідно додати наступні елементи
до кімнати:
- TV;
- Conditioner;
- Bed;
- Table;
- Flower.
Додані із бібліотеці об’єкти необхідно встановити у відповідних місцях.
Приклад розташування із різних ракурсів наведено на рис.38.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 33


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис.37. Встановлення дверей

Рис.38. Налаштування вікон

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 34


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис.39. Приклад розташування об’єктів у сцені

Після процесу моделювання у середовищі хоум стайлер є можливість


використовувати візуалізацію. Для того щоб перейти до середовища візуалізації
будь ласка натисніть на верхній панелі кнопку render із зображенням
фотоапарата.
Після того як відкриється середовище будь ласка налаштуйте відповідним
чином ракурси для майбутніх рендерів. Для цього можливо використовувати
розташування ракурсів камер у приміщенні.
Під час процесу візуалізації безкоштовно можлива утворювати рендери
наступної якості 1к та 2к розподілу. Якісні рендери можливо отримувати
використовуючи спеціальні очки homestyler. Заробляти очки можливо за
щоденними діями: запускайте цей додаток щоденно та використовуючи певні

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 35


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
речі для того щоб побачити перелік очків та типів діяльності. Для отримання
цих переліків можна скористатись системою допомоги.
На зображенні (рис. 40) можна побачити середовище візуалізації. Воно
складається із наступних елементів. Панель бічна вертикальна дозволяє обрати
якість та відповідний формат зображення візуалізації та налаштування. Права
панель дозволяє бачити та налаштувати параметри камери і ракурсу та
додавати декілька видів, з яких ви бажаєте отримувати наступні візуалізації.
Знизу розташована горизонтальна панель, яка містить кнопку запуску на
фінальну візуалізацію, та кнопку попереднього перегляду для того, щоб
можливо було бачити приблизно налаштування оточення та середовища.

Рис.40. Середовище візуалізації

Достатньо натиснути на кнопку з назвою «Speed Preview» і відкриється


невелике спливаюче вікно (рис.41). Це вікно буде містити на попередні
налаштуванні по освітленню та по якості майбутнього зображення. Після того
якість буде влаштовувати отримане зображення можна посилати на остаточну
візуалізацію. Для цього потрібно натискати на кнопку синього кольору яка
містить назву рендер. Тоді вже можливо отримати фінальне зображення в
обраної якості.
Система також містить інструментарій постобробки зображень після
процесу візуалізації. За потреби можливо додати ефекти чи іншим чином
доробити отримане зображення.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 36


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис.41. Черговий рендер

Необхідно зробити принаймні три зображення, які будуть демонструвати


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

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 37


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Лабораторна робота 10
Праця у хмарному сервісі 3D моделювання ScetchUp.

Мета роботи: набути навичок створення тривимірних об’єктів у


хмарному сервісі ScetchUp.

Хмарний сервіс Google ScetchUp дозволяє створювати складні та прости


тривимірні об'єкти. Даний сервіс є безкоштовним та працює у двох режимах.
Перший режим є повністю хмарним режимом. Другий режим дозволяє
завантажити на ваш комп'ютерний пристрій та встановити додаток так, щоб
користуватись цім сервісом більш професійне.
Ми розглядаємо використання повністю хмарного сервісу. Після заходу на
сайт під обліковим записом google відкривається вікно привітання (рис. 42). На
прикладі інтерфейс на англійській мові, але більше ніж на 15 мов перекладено
інтерфейс даного додатку. Нажаль серед них немає української мови але є
мови, що підтримують кириличні символи.

Рис.42. Вікно привітання сервісу

Отже ми або маємо можливості відкрити останню роботу або створити


новий документ натискаючи на кнопку Create New або на кнопку Start modeling.
Після цього відбувається підготовка та завантажується сервіс.
Інтерфейс програми моделювання складається з наступних елементів
(рис.41). По-перше – це базова панель, що містить так зване гамбургер меню.
Це меню містить налаштування програмного середовища, можливості
перемикання на інші мови, можливості налаштування авто збереження
© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 38
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
документів, перемикання методів навігації в програмному додатку та базові
кольори на системні допоміжні елементи.
Згори також є верхня панель, що містить назву документа, перемикання до
профілю, кнопки збереження та відміни останніх дій.
Центральний простір даного середовища займає вікно моделювання. На
вікні моделювання є дві вертикальних панелі.
Панель ліворуч містить базовий інструментарій, перша кнопка якого є
пошуком відповідних команд, що спрощує працює цим додатком.
Права же спеціальна панель вже містить додаткові налаштування, панель
інформації, панель навчання, панель доступу до бібліотеки тривимірних
об'єктів. Додаток збирає статистику користувачів та за бажанням користувачів
у відкритому доступі у 3D warehouse збирає тривимірні моделі. Тобто у
тривимірному сховищі є безліч тривимірних об'єктів які з відповідними
матеріалами та високоякісної ступеню візуалізації можливо використовувати
під час наших праць. Ці об'єкти вільно для наших потреб для того щоб
прискорити процес відтворення локацій тривимірних архітектурних,
ландшафтних та таке інше. Або для потреб промислового дизайну, можна з
бібліотеки обирати промислові об'єкти та розташувати їх у тривимірному
просторі проектів.

Рис.43. Інтерфейс додатку

Також права панель містить налаштування матеріалів для візуалізації,


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

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 39


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Інструмент який має назву інспектор потрібен щоб перевіряє коректність
моделі, а деякі з функцій є платними і їх потрібно додатково підключати.
Для того щоб почати працювати по-перше потрібно налаштувати системи
виміру. Для цього необхідно натиснути на іконку з буквою «і» у колі, яка має
назву modeling info. Буде відкрите бічну панель (рис.44).
Панель має дві вкладки. Перша вкладника містить одиниці виміру
стандартні та інтервали кроку. Друга вкладка містить налаштування стилів для
тексту та відповідних розмірних ліній. За умовчанням середовище налаштована
на використання в якості систем виміру дюйми. Потрібно це змінити,
налаштовуємо на міліметри. Також налаштуємо точність на два знаку після
десяткового розмежування. Відповідним чином налаштоване середовище
можливо побачити на рис.44.

Рис.44. Налаштування одиниць виміру

Також інтерфейс складається в нижній частини з горизонтального рядку


стану. Горизонтальний рядок стану за умовчанням містить підказки для
активного на даний момент інструменту, та можливості праці з цим
інструментом, гарячі клавіши та таке інше. З правої частини є панель
вимірювання, яка має назву Measurments що дозволяє вимірювати окремі
частини під час моделювання.
Ми будемо користуватись наступними інструментами (рис.45). По-перше
це інструменти виділення об'єктів. Вони працюють двох режимах. Перший
режим коли вибираєте стрілку, дозволяє обирати об'єкти та поверхні об'єктів.
Другий режим дозволяє використовувати ласо, для того щоб виділяти об'єкти
що будуть всередині контуру, який відтворюється.
© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 40
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Наступний інструмент – ластик, дозволяє видаляти ребра або поверхні
тривимірних об'єктів. Далі йде інструмент який, дозволяє зафарбувати та
обирати зразок кольору об'єктів.
Наступні інструменти дозволяють розподіляти вже існуючі геометричні
форми. Це інструменти що мають назву лінія, або вільна форма, що дозволяє
проводити вільного характеру криву.
Також є інструментарій що дозволяє створювати криві, це інструменти які
дозволяють проводити дуги. Наприклад дугі за кінцівками, по двом точкам та
викривленням радіусу, дуги за трьома точками, та вільні дуги.
Під час створення різноманітних форм ми можемо використовувати
інструменти, такі як створення чотирикутників. Інструменти створення багато-
кутників, інструменти створення кіл, а також у нас є можливості створювати
тривимірні текстові об'єкти.

Рис.45. Основні інструменти

Під час моделювання є наступні команди: команда видавлювання, команда


створення за профілем, та команда створення з відступом. Також можливе
створення об'єктів за використання логічних операцій. Це логічні операції
додавання, об'єднання, віднімання, пересічення та команда за об'єднання з
загальним контуром.
Під час маніпуляції із об'єктами існують три інструмента – це інструмент
переміщення, інструменту обертання, інструмент масштабування.
Інструментарій містить також панель яка дозволяє працювати з розмірами, та
відповідні елементи додавати до тривимірного простору.
Наявна також цікава можливість, що дозволяє мандрувати змоделюваними
тривимірними локаціями, система яка дозволяє встановлювати позиції камери,
та система що дозволяє розглядати загально проект. Під час праці існують
останні набори інструментів в панелі. Це інструменти які дозволяють
© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 41
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
здійснювати навігацію. Навігація здійснюється інструментом оберту орбіта,
інструментом панорамування, інструментом масштабування та інструментами
вписування до видового вікна.
Для того щоб створити тривимірний об'єкт в програмі існує тільки один
метод - це метод створення спочатку плоского ескізу відповідними
інструментарієм, а після цього видавлювання або обертання.
Для того щоб почати роботу ми створимо модель столу. Для того щоб це
зробити необхідно обрати інструмент який відтворює або лінії, або
чотирикутники. Потім на нижньої поверхні відтворюють за відповідними
розмірами чотирикутник. Краще перемкнути робочий простір на вид згори,
користуючись лівою панеллю и палітрою виглядів (рис. 46).

Рис.46. Палітра керування виглядами

Під час створення, якщо використовується чотирикутник є можливість з


клавіатури надавати відповідний розміри ширини та висоти. Вони повинні
розділятися комою. Поверхня столу буде за розмірами 90 см на 250 см. Після
того як надано розміри необхідно натиснути клавішу enter (рис. 47).
За допомоги інструменту розмірів необхідно утворити габаритні та інші
розміри, щоб вони були розташовані на екрані поруч з об'єктом. Також за
допомогою інструмента рулетка потрібно надати напрямні, по котрим буде
вестися креслення майбутніх елементів столу. Тобто ширина кожної ніжки
повинна складати 2 см.
Після того як будуть встановлені відповідні напрямні вигляд ескізу
повинен бути схожим на приклад (рис.48). Для того щоби витягти певні
замкнені контури використовується інструмент видавлювання (Push/Pull).
Гаряча клавіша «P» на клавіатурі. Обираючи замкнений контур цією командою
необхідно обрати напрямок видавлювання, та зафіксувати вводом з клавіатури
довжину видавлювання у сантиметрах.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 42


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Рис.47. Утворення прямокутника за розмірами

Рис.48. Утворення напрямних для креслення геометрії

Таким чином потрібно зробити три вертикальних ніжки стола.


Використовуючи інструмент накреслення лінії або створення чотирикутників
на ніжках необхідно зробити кріплення під системний блок (рис.49-50).

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 43


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Ширина сполуки яка утворюються повинна бути теж 2 см. Таким самим чином
необхідно зробити модель стільця.

Рис.49. Приклад змодельованих ніжок столу

Рис.50. Приклад змодельованих перекладин столу

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 44


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Для того щоб можливо було пересувати утворені моделі необхідно певним
чином згрупувати їх складові елементи. Для цього існує можливість обрати
елементи та скористатись командую утворення групи або компоненту із
контекстного меню. Якщо була створена група з’явиться габаритний контейнер
який що може заважати. Якщо використовувати компонент, то на екрані вигляд
згрупованого елемента може бути більш зручним, тому що не відображається
габаритний контейнер навколо нього. Отже пересування цього об'єкту буде
більш комфортним.
Після того як було створена відповідна кількість меблів та промислового
обладнання на робочому місці необхідно розробити локацію. Тобто возвести
стіни та підлогу будівлі у якої розробляють все робоче місце. Для цього теж
можливо використовувати інструмент пензель або чотирикутник.
Далі використовуючи інструмент видавлювання можливо утворювати не
тільки тривимірні об'єкти, а також отвори і перерізи для вікон і дверей. Після
того як буде зроблено основна частина будівлі та робочого місця професіоналу,
можлива використовуючи бібліотеку матеріалів надати певних матеріалів.
Необхідно надати матеріали для підлоги, елементів інтер'єру всередині цієї
будівлі (рис.51). Користуватися бібліотекою матеріалів можливо
використовуючи праву палітру. Також за потреби можливо користуватись
тривимірний сховищем, щоб додати вже існуючі у базі моделі до проекту.
Для того щоб обрати необхідні моделі можливо користуватися системою
пошуку за бібліотекою. На прикладі було додано із бібліотеки модель
промислового автомобіля. Після того як буде відтворена необхідна сцена
потрібно надати до звіту результати виконання цієї лабораторної роботи.

Рис.51. Приклад виконання і палітри бібліотек об’єктів і текстур

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 45


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Лабораторна робота 11
Створення світлини для соціальної мережі у хмарному сервісі Canva.

Мета роботи: набути навичок створення типових дизайнерських


проектів використовуючи сервіс Canva.

Канва є універсальним графічним сервісом, який дозволяє працювати у


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

Рис.52. Основний екран хмарного сервісу канва

Наступна іконка дозволяє потрапити до переліку шаблонів з елементами


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

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 46


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Під час створення рекламних кампаній більшість просувають свої
продукти за допомогою соціальних мереж. Кожна соціальна мережа потребує
для розповсюдження свої власні розміри графічних елементів у публікаціях.
Отже пункт соціальні мережі містить по-перше стандартні розміри графічних
елементів для певних соціальних мереж, та також безліч шаблонів. Завдяки
шаблонам процес створення інформаційних світлин стає більш швидким,
універсальним та гнучким. По-друге існує можливість створювати анімовані
світлини та елементи.
Якщо перейти до розділу відео, що містить відео шаблони можливо
побачити згруповані спрямовані за горизонталлю та вертикаллю шаблони
анімацій для відповідних соцмереж.
Також існує можливість розробляти дизайні для сайтів або розробляти
елементи користувальницьких інтерфейсів. Розділ, що містить пункт сайти,
дозволяє отримати шаблони для початку праці над певними типами напрямків.
Це може бути бізнес сайти, сайти портфоліо, подій, освітні сайти.
Додаткове існує можливість обрати змішаний розділ, що містить елементи
які не увійшли у стандартні розділи. Наприклад це праці з інфографіки та її
елементами, фотоколажі, розробки фонів для різних елементів, створення
діаграм, створення книжкових обкладинок, створення мап думок, віртуальних
фонів, календарів, плакатів, аркушів завдання, звітів в планувальник, коміксів,
пропозиції та багато іншого.
Ми почнемо працю з даним програмним продуктом утворюючи світлину
для instagram. Ця світлина буде де створена завдяки пропорційному документу.
Спочатку потрібно натиснути у правому верхньому куті інтерфейсу на кнопку з
назвою «створити дизайн». Після буде відкрито перелік графічних документів
які найбільш часто використовуються (рис.53).

Рис.53. Панель типів документів

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 47


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»

Потрібно обрати презентацію в instagram 1000 на 1000 пикселей. Після


натискання на цей пункт буде завантажено та створено інтерфейс розробки з
документом що містить розмір 1000 на 1000 пікселей. Ліворуч існує гамбургер
меню, яке дозволяє максимізувати та мінімізувати головну ліву панель
інтерфейсу.
Головна панель містить наступні пункти (рис.54):
дизайн – яке дозволяє обирати вже існуючи та проекти що у роботі;
елементи – що дозволяє отримати доступ до більшої частки графічних
елементів під час створення, та налаштувати під час встановлення їх у графічні
роботи. Елементи діляться на окремий групи. Кожна з цих груп містить
бібліотеки об'єктів що можливо налаштовувати. Наприклад, існують бібліотеки
стандартних фігур, бібліотеки графічних елементів що містять малюнки тварин.
Існують бібліотеки наклейок фотографій, відео елементів, аудіо нотатки,
таблиці, набори рамок та безліч інших колекції графічних елементів, які
можливо обирати та встановлювати під час створення проектів;
передані – третій пункт що дозволяє завантажувати користувальницької
графічні елементи до сервісу з метою їх подальшого використання та доробки у
проектах. Це може бути зображення, відео або аудіо;
тексти – пункт дозволяє налаштовувати блоки взагалі в підзаголовки,
звичайні тексти та фігурні тексти. Також містить впорядковані за стилями вже
налаштовані текстові блоки, які швидко можна додати до проекту, змінити
зміст та використовувати для власних потреб;

Рис.54. Вікно роботи над проектом

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 48


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
проекти – вкладка що містить бібліотеку проектів які були створені
власноруч користувачем цього сервісу;
фон – міститься вкладка керуванням фонами. У якості фону можна
використовувати або колір або відповідну текстуру. Для того щоб перемикати
між бібліотеками кольорів та текстур існує відповідної групи цієї вкладки;
додатки – останнім пунктом меню є встановлення додаткових плагінів що
має ту ж саму назву. Серед додатків слід відмітити наявність генератор QR
кодів, наявність бібліотек смайликів, та можливості підключення додаткових
сервісів, такий як додавання відео з ютубу або google drive. Деякі з цих додатків
є безкоштовними.
Отже після того як було розроблено відповідного розміру формат світлини
необхідно обрати пункт елементи. Обрати відповідні лінії та фігури і знайти
відповідний елемент, який буде використовуватися в якості центрального
елементу логотипу світлини. У якості такого елементу наприклад обрана форма
фігури щита. Під час додавання можливо витягати графічні елементи з
бібліотеки на робочий простір документу, або подвійним клацанням за фігурою
додати до центру.
Після обрання графічного елементу на полотні будуть активовані
інструменти керування формою, масштабом та налаштування. Для того щоб
пересувати можливо використовувати мишку. Зміну позиції та центрувати
можна за допомогою інтерактивних напрямних (рис.55). Під час пересування
кожна із інтерактивних напрямних буде містити розміри відступів елементу від
країв документу. Тому впорядкування графічних елементів у робочому
просторі є простим, зручним та зрозумілим.

Рис.55. Робота над виділеним об’єктом

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 49


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Якщо об'єкт виділено можна користуватись його налаштуваннями. Зверху
з'явиться горизонтальне меню налаштувань що містить: по-перше назву фігури,
по-друге два перемикача налаштувань заливання. Також за цим йде типи та
розміри для певних елементів та можливості їх впорядкування та додавання
анімаційних ефектів.
Завжди додаткові можливості можлива побачити за допомогою натискання
на меню яке відкривається із іконки з трьома крапками. Якщо потрібно
видалити певні елементи, можливо натискати лівою кнопкою миші буде і буде
виведене спливаюче меню, що містить три іконки. Перша іконка дозволяє
дублювати графічний примітив. Друга колонка у формі смітника, яка дозволяє
видалити графічний елемент. Третя дозволяє відкрити панель властивостей що
містить можливість впорядкування, можливості копіювання, видалення та
додавання відповідних анімаційних властивостей, коментарів та налаштувань,
посилань.
Після того як було створено графічний елемент у формі щита необхідно
налаштувати розміри графічного елементу, колір заливання і обведення,
ширину зони обведення (рис.56).

Рис.56. Налаштування кольорових властивостей елементу

Далі необхідно відмасштабувати цей графічний елемент усередині щоб він


займав приблизно 25 відсотків від загального робочого простору (рис.57). Цей
графічний елемент потрібно здобувати, зменшити, та змінити кольори. Потім
встановити за центром попереднього графічного елементу. Після цього
необхідно користуватися бібліотекою елементів та обрати графічні елементи
живих істот. Серед них вибрати тварину. Це може бути кіт або собака.
Встановити цей елемент потрібно у лівої частини з відступом від краю
документа. Налаштувати масштаб таким чином, щоб об’єкт не перетинався з
іншими графічними елементами. Використовуючи бібліотеки елементів
потрібно створити прямокутники, з котрих відтворити знак логотипу

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 50


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
університету. Додати далі певні елементи до центральної частини, щоб
утворювалась певна графічна композиція.

Рис.57. Додавання елементу із бібліотекі тварин

Далі потрібно використовуючи пункт меню текст обрати з бібліотеки


текстів стандартний блочний текст, та додати відповідні назви. Це назва
дисципліни «хмарні технології», назва закладу «Дніпровська політехніка», та
назва кафедри. Під час праці з текстовими блоками потрібно обрати
накреслення та типи властивостей для шрифтів, їх висоту (рис.58).

Рис.58. Приклад виконання світлини

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 51


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
При обранні кольорів необхідно обирати таким чином, щоб можливо було
легко читати усі написи. Далі необхідно впорядкувати написи, та після цього
користуючись кнопкою поділитися у правому верхньому куті сервісу зберегти
або завантажити у форматі JPG або PNG виконаний графічний проект.
Виконаний графічним проект потрібно додати до звіту з виконання
лабораторної у сервісі адобі експрес.
Під час отримання вихідного зображення існує можливість завантажувати
наступні типи документів: jpg, png, стандартний pdf, pdf до друку, відео у
форматі mp4, та відео в форматі gif.
Для того щоб розробляти деякі з цих форматів необхідно буде
використовувати коштовну підписку canva. Також під час експорту даний
сервіс дозволяє отримувати спільний доступ до хмарних документів.
По-перше ви можете отримати посилання для доступу, по-друге обрати
код для того щоб додати отриманий графічний проект до інтернет-сайтів.
Також можливо генерувати та надсилати QR коди з посиланнями на графічні
елементи. Існує взагалі більш ніж п’ять режимів завдяки котрим можливе
ділитись цими хмарними документами, та надавати їх до відповідних соцмереж
і пристроїв. Цей перелік кожного року тільки збільшується надаючи
користувачам все більше зручних можливостей для поширення творчих
проектів.

Лабораторна робота 12
Створення цифрового портфоліо тривимірних проектів у Sketchfab.

Мета роботи: набути навичок створення та налаштування тривимірних


проектів у цифровому портфоліо хмарного сервісу Sketchfab.

У світі дизайну та 3D-моделювання створення портфоліо робіт спеціалістів


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

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 52


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
ім’я, біографію та контактну інформацію, що полегшить потенційним клієнтам
і роботодавцям зв’язок з вами.
Однією з найважливіших переваг використання Sketchfab є його
доступність. Ви можете отримати доступ до свого портфоліо з будь-якого
місця, якщо у вас є підключення до Інтернету. Це означає, що ви можете
поділитися своїм портфоліо з людьми по всьому світу, і вони зможуть
переглядати його на будь-якому пристрої, включаючи настільні ПК, ноутбуки,
планшети та смартфони. Крім того, Sketchfab підтримує всі основні формати
файлів, що означає, що ви можете завантажувати 3D-моделі, створені в будь-
якому програмному забезпеченні.
Ще однією перевагою використання Sketchfab як цифрового портфоліо є
соціальний аспект платформи. Ви можете спілкуватися з іншими дизайнерами,
художниками та архітекторами на Sketchfab і черпати натхнення в їхній роботі.
Ви також можете стежити за іншими користувачами, ставити лайки та
коментувати їхні роботи та навіть ділитися їхніми моделями в соціальних
мережах. Це може допомогти вам налагодити стосунки та розширити вашу
мережу в спільноті дизайнерів.
Нарешті, використання Sketchfab як цифрового портфоліо забезпечує
динамічний та інтерактивний спосіб продемонструвати свою роботу. Ви
можете додати до своїх моделей анімацію, освітлення та інші ефекти, щоб
зробити їх більш привабливими та захоплюючими. Ви також можете
створювати досвід віртуальної реальності, що дозволяє потенційним клієнтам і
роботодавцям відчувати вашу роботу більш реалістично та захоплююче.
Sketchfab працює в браузері та підтримується багатьма програмами для
моделювання 3D-графіки, такими як Blender, Maya, 3ds Max та інші. Крім того,
Sketchfab надає API, яке дозволяє розробникам інтегрувати сервіс в свої
додатки та інструменти.
Сервіс також пропонує функцію електронної комерції, яка дозволяє
користувачам продавати свої 3D-моделі безпосередньо на платформі. Це
корисна функція для 3D-художників, дизайнерів і творців, які хочуть
монетизувати свою роботу.
Сервіс має безкоштовну та платну версії. Безкоштовна версія дозволяє
завантажувати та ділитися 3D-моделями обмеженої кількості, тоді як платні
версії надають додаткові функції, такі як більш висока якість зображення,
можливість налаштування панелі інструментів, аналітику та інші.
Для початку роботи із сервісом необхідно виконати наступний ряд дій.
1. Створіть обліковий запис Sketchfab: щоб почати, вам потрібно буде
створити обліковий запис Sketchfab. Ви можете зробити це, перейшовши на
веб-сайт https://sketchfab.com/ і натиснувши кнопку «Приєднатися зараз» у
верхньому правому куті сторінки. Дотримуйтеся вказівок, щоб створити
обліковий запис. Надайте в налаштування профілю якомога більше інформації
про кваліфікацію та методи зв’язку (рис.59).
2. Підготуйте свою 3D-модель: перш ніж завантажувати свою 3D-модель у
Sketchfab, вам потрібно переконатися, що вона має сумісний формат файлу.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 53


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Sketchfab підтримує широкий спектр форматів файлів 3D, включаючи FBX,
OBJ, STL тощо. Ви можете знайти повний список підтримуваних форматів
файлів на веб-сайті Sketchfab (рис.60). Крім того, ви можете оптимізувати свою
модель для онлайн-перегляду, зменшивши кількість багатокутників і роздільну
здатність текстур.

Рис.59. Приклад сторінки після заповнення профілю

Рис.60. Завантаження файлу проекту до сервісу

3. Завантажте свою 3D-модель: коли ваша модель буде готова, ви можете


завантажити її на Sketchfab, натиснувши кнопку «Завантажити» у верхньому
правому куті веб-сайту Sketchfab. Дотримуйтесь підказок, щоб вибрати файл і

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 54


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
завантажити його на платформу. На цьому етапі ви також можете додати назву,
опис і теги до моделі (рис.61).

Рис.61. Додавання опису проекту

4. Налаштуйте параметри моделі: після завантаження моделі ви можете


налаштувати її параметри на платформі Sketchfab. Це включає налаштування
освітлення, положення камери та фону, а також додавання анотацій, звукових
ефектів тощо (рис.62). Ви також можете налаштувати параметри
конфіденційності своєї моделі, щоб контролювати, хто може її переглядати.
Перелік ключових параметрів, які можна налаштувати в Sketchfab (рис.63):
Освітлення: Sketchfab пропонує ряд варіантів освітлення, які допоможуть
вам продемонструвати свою модель найкращим чином. Ви можете вибрати з
безлічі попередньо встановлених налаштувань освітлення або налаштувати
параметри освітлення самостійно. Це включає регулювання яскравості, кольору
та напрямку освітлення.
Розташування камери: ви можете контролювати положення та орієнтацію
камери для своєї 3D-моделі, дозволяючи демонструвати певні ракурси чи
деталі. Sketchfab надає ряд елементів керування камерою, включаючи
масштабування, панорамування та обертання, щоб допомогти вам створити
ідеальний вигляд вашої моделі.
Фон: Ви можете вибрати з ряду параметрів фону для вашої моделі,
включаючи суцільні кольори, градієнти та зображення. Це дозволяє
налаштувати загальний вигляд і відчуття вашої моделі та створити більш
захоплюючий досвід перегляду.
Анотації: Sketchfab надає інструмент для додавання анотацій до вашої
моделі, який можна використовувати для додавання контексту або елементів
© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 55
www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
інструкцій. Ви можете створювати текст, зображення або посилання на інші
веб-сторінки та розміщувати їх у 3D-моделі.

Рис.62. Інтерфейс налаштування проекту після завантаження

а б в г д
Рис.63. Вкладки налаштування проекту:
а – сцена, б – освітлення, в – матеріали, г – фільтри постобробки, д – віртуальна
та доповнена реальність

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 56


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Звукові ефекти: Ви можете додати звукові ефекти до своєї 3D-моделі, щоб
створити для глядачів більш захоплюючий досвід. Це може включати
навколишні звуки, голос за кадром або музику.
Налаштування конфіденційності: ви можете керувати налаштуваннями
конфіденційності своєї 3D-моделі, дозволяючи вибрати, хто може її
переглядати. Ви можете зробити свою модель загальнодоступною або
обмежити її для певних користувачів чи груп.
Загалом, налаштування налаштувань завантаженої моделі на Sketchfab
дозволяє створити більш привабливий і захоплюючий досвід для глядачів.
Витративши час на налаштування освітлення, положення камери та інших
параметрів, ви зможете продемонструвати свою 3D-модель найкращим чином і
зробити її більш привабливою для ширшої аудиторії.
5. Опублікуйте свою модель: коли модель буде готова, ви можете
опублікувати її на платформі Sketchfab, натиснувши кнопку «Опублікувати».
Тепер модель буде доступна для перегляду та спільного використання на
Sketchfab, і ви можете вставити її на свій веб-сайт або поділитися нею в
соціальних мережах.

Лабораторна робота 13
Створення цифрового портфоліо дизайнерських проектів у Artstation.

Мета роботи: набути навичок створення та налаштування вигляду


дизайнерських проектів у цифровому портфоліо хмарного сервісу Artstation.

Artstation є онлайн-платформою для творців цифрового мистецтва, де ви


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

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 57


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Завдяки своїй популярності серед творців цифрового мистецтва, Artstation
може бути дуже корисним інструментом для створення власного цифрового
портфоліо та просування вашої творчості в Україні та по всьому світу.
На Artstation можна додавати різноманітні типи робіт, пов'язаних з
цифровим мистецтвом. Деякі з типів робіт, які можна додавати на платформу
Artstation, включають:
- 2D-ілюстрації: це можуть бути різні види малюнків, рендерів, концепт-
арту, карикатур, коміксів, фонів і т. д.
- 3D-моделі: на Artstation можна додавати різні види 3D-моделей, таких як
персонажі, тварини, транспорт, архітектурні елементи, ігрові активи і т. д.
- Відео та анімація: можна додавати відео, трейлери, анімацію, моушн-
графіку, спецефекти та інші види мультимедіа-продукції.
- Графічний дизайн: на платформі можна додавати дизайнерські роботи,
такі як логотипи, етикетки, упаковку, рекламні банери, інфографіку та інші
види графічного дизайну.
- Фотографія: можна додавати різні види фотографій, такі як портрети,
пейзажі, натюрморти, фотожурналістика та інші.
- Концепт-арт: можна додавати роботи, пов'язані з концептуальним
мистецтвом, такі як скетчі, ідеї, пропозиції і т. д.
- Аудіо: можна додавати роботи, пов'язані з аудіо-мистецтвом, такі як
музика, звукові ефекти, голосові записи та інші.
Сервіс Artstation пропонує освітній розділ, де користувачі можуть знайти
відеоуроки, онлайн-курси, підручники та інші матеріали для навчання в галузі
цифрового мистецтва. Освітній розділ містить безліч корисної інформації та
ресурсів, які допоможуть удосконалити свої навички у різних напрямках
творчості.
У розділі "Відеоуроки" можна знайти відео-уроки від провідних фахівців з
різних галузей цифрового мистецтва. Відеоуроки охоплюють такі теми, як 3D-
моделювання, текстурування, ретуш фотографій, розфарбовування ілюстрацій,
анімація та інші.
"Онлайн-курси" містять програми навчання з конкретних напрямків
цифрового мистецтва, які розроблені фахівцями з відповідних галузей. Курси
охоплюють широкий спектр тем, таких як креслення, дизайн персонажів, 3D-
моделювання та ін.
Всі матеріали в освітньому розділі Artstation можна переглянути та
зберегти в закладках.
Артстейшен також пропонує програму навчання "Artstation Learning", яка
дає змогу отримати доступ до більш ніж 3000 відеоуроків та курсів, створених
відомими художниками та дизайнерами з усього світу. Ця програма має певну
вартість, але є можливість випробувати її безкоштовно на 7 днів перед
придбанням.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 58


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Крім того, Artstation співпрацює з різними школами та університетами, де
надається навчання в галузі цифрового мистецтва. Наприклад, спільний проект
з Gnomon School of VFX and Animation надає студентам можливість навчатись
онлайн та отримати диплом, а також доступ до Artstation Learning.
Artstation також є платформою для рекрутингу в галузі цифрового
мистецтва, тому освітній розділ може бути корисним для тих, хто прагне
працювати в цій галузі. Навички, які можна набути завдяки матеріалам
освітнього розділу Artstation, можуть бути корисними при пошуку роботи, тому
що це популярна платформа для викладення портфоліо та пошуку роботи в
цифровій галузі мистецтва.
Artstation можна використовувати для різних цілей, додамо декілька
прикладів використання Artstation:
1. Показ портфоліо: Artstation є популярною платформою для художників,
дизайнерів та інших фахівців у галузі цифрового мистецтва, які хочуть
показати свої роботи та знайти нові можливості для розвитку своєї кар'єри. На
Artstation можна створити свою сторінку та додати свої проекти, щоб показати
свої навички та залучити нових клієнтів.
2. Пошук роботи: Artstation також можна використовувати для пошуку
роботи в галузі цифрового мистецтва. Багато компаній, які працюють в цій
галузі, використовують Artstation для пошуку нових талантів. На сайті можна
знайти різноманітні вакансії від 3D-моделювання до візуальних ефектів. Багато
відомих компаній, таких як Blizzard, Ubisoft, Sony та інші, розміщують вакансії,
що дає можливість знайти роботу у відомих компаніях у цій галузі.
3. Навчання.
4. Спілкування та знайомства: Artstation також можна використовувати для
спілкування та знайомства з іншими художниками та дизайнерами. На сайті
можна створювати спільноти, обговорювати творчі проекти та ділитись
порадами та досвідом роботи.
5. Продаж своїх робіт: на Artstation можна продавати свої роботи, які
включають ігрові асети, текстури, 3D-моделі, концепт-арт та інші цифрові
активи. Спеціалісти з галузі геймдеву можуть знайти тут купців для своїх робіт.
6. Збір коштів на Kickstarter: Artstation також може бути корисним для
художників та дизайнерів, які шукають фінансування для своїх проектів. На
Artstation можна створити кампанію на Kickstarter та використовувати
платформу для збору коштів та залучення уваги до свого проекту.
7. Створення зв'язків: Artstation може бути корисним для зв'язків у галузі
цифрового мистецтва. Спілкуючись з іншими художниками та дизайнерами,
можна знайти нових друзів, колег та можливих партнерів для майбутніх
проектів.
8. Інтернет-магазин: на Artstation можна створити свій власний інтернет-
магазин для продажу своїх цифрових активів, таких як ігрові асети, текстури та

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 59


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
3D-моделі. Також можна продавати фізичні товари, такі як принти, одяг з
власним дизайном та інші товари пов'язані з мистецтвом.
Щоб грамотно заповнити профіль на Artstation і привернути увагу
потенційних клієнтів та роботодавців, слід дотримуватися наступних порад:
1. Додайте своє ім'я та фото профілю: важливо, щоб відвідувачі могли
знайти та запам'ятати ваш профіль, тому додайте своє повне ім'я та професійне
фото.
2. Додайте опис себе та своєї роботи: короткий опис про себе та вашу
професійну спрямованість допоможе відвідувачам зрозуміти, чим ви
займаєтесь. Також важливо додати опис вашої роботи, щоб потенційні клієнти
та роботодавці могли знайти вас за ключовими словами.
3. Додайте портфоліо: додавайте свої найкращі роботи до портфоліо,
включаючи зображення, відео та 3D-моделі. Важливо дотримуватися єдиного
стилю та якості робіт, щоб створити враження професійного художника.
4. Додайте теги до своїх робіт: теги допоможуть зрозуміти, яка тематика
та стиль робіт вас цікавить. Вони також допоможуть відвідувачам знайти ваші
роботи за ключовими словами.
5. Підтримуйте активність на платформі: коментуйте та оцінюйте роботи
інших художників, додавайте свої враження та думки. Це допоможе залучити
увагу до вашого профілю та показати свої знання та професіоналізм у галузі
цифрового мистецтва.
6. Використовуйте додаткові функції: на Artstation є багато корисних
функцій, таких як можливість додавати свої курси, блоги та інші матеріали.
7. Додайте свої соціальні мережі: додавання посилань на ваші профілі у
соціальних мережах допоможе відвідувачам знайти вас в інших ресурсах та
переконатися у вашому професіоналізмі.
8. Підтримуйте свій профіль актуальним: регулярно додавайте нові
роботи та матеріали, а також оновлюйте опис про себе та свою роботу. Це
допоможе відвідувачам бути в курсі вашої діяльності та підвищить шанси на
замовлення робіт.
9. Використовуйте ключові слова: додавайте ключові слова до описів
своїх робіт, щоб збільшити їх видимість у пошукових запитах. Важливо
дотримуватися тематики та стилю в своїх ключових словах, щоб залучити
потрібну аудиторію.
10. Вивчайте статистику та аналітику: на Artstation є можливість вивчати
статистику та аналітику свого профілю, де ви можете побачити, які з ваших
робіт найбільше переглядаються та який контент найпопулярніший. Це
допоможе вам бути в курсі своїх успіхів та вдосконалювати свій профіль.
В якості звіту з наданої лабораторної потрібно зробити власний профіль
спеціаліста, та дотримуючись порад його оформити та заповнити. Під час
навчання за курсом у попередніх лаборатороних створювалися двовимірні

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 60


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
роботи, які можна додати до портфоліо. Під час вивчання курсу «проектування
взаємодії і рендерінг» утворювались тривимірні проекти, які спочатку потрібно
додати до сервісу Skttchfab, а потім до артстейшин.
На прикладах заповнених портфоліо можливо подивитесь на заповнене
портфоліо спеціаліста утворення персонажів (рис.64), та викладача (рис.65). У
профілі викладача наявні таки помилки: портфоліо зосереджено на різни стилі
робіт, не використовується фірмовий стиль, оформлення фону портфоліо
наляписте.

Рис.64. Приклад заповнення профілю Рис.65. Приклад заповнення


професійного спеціаліста профілю викладачем

Лабораторна робота 14
Створення цифрового профіля спеціаліста у мережі LinkedIN.

Мета роботи: набути навичок створення та налаштування профіля


спеціалісту у соціальній мережі професіоналів LinkedIN.

LinkedIn - це соціальна мережа, яка спеціально розроблена для


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

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 61


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
1. Пошук роботи: LinkedIn дозволяє шукати роботу за ключовими
словами, місцем розташування, досвідом, галуззю тощо. Крім того, на LinkedIn
можна створити сповіщення про нові вакансії, які відповідають вашому
профілю.
2. Розвиток бізнесу: LinkedIn може допомогти знайти нових клієнтів і
партнерів. Ви можете створити профіль вашої компанії, додати опис послуг і
продуктів, залучати підписників та надсилати їм оновлення.
3. Підвищення особистого бренду: LinkedIn дозволяє вам показати свої
навички та досвід у своєму профілі, викладати свої думки та знання у блогах,
коментувати та лайкати матеріали інших користувачів, рекомендувати та бути
рекомендованим, що допоможе підвищити вашу авторитетність та вплив.
4. Мережування: LinkedIn дозволяє знайти та зв'язатися з колегами,
знайомими та експертами у вашій галузі. Ви можете з'єднатися з ними,
надіслати запрошення, обговорювати питання, робити спільні ділові пропозиції
та ін.
5. Освіта та навчання: LinkedIn містить велику кількість професійної
інформації, де можна знайти статті, новини, підказки від експертів, курси і
вебінари. Це допомагає підтримувати ваші знання в актуальному стані,
отримувати нові знання та навички, а також спілкуватися з експертами у вашій
галузі.
6. Рекрутинг: LinkedIn дозволяє компаніям знаходити і наймати
кваліфікованих співробітників. Ви можете створити оголошення про вакансії,
залучати кандидатів, оцінювати їх профілі та досвід, знайомитися з
рекомендаціями та знайомствами кандидатів, що допомагає знайти найкращих
кандидатів на вакансії.
7. Рекламування: LinkedIn пропонує можливості для рекламування
бізнесу та послуг на платформі. Ви можете створювати оголошення,
налаштовувати таргетування за інтересами, поведінкою та географією
користувачів, залучати нових клієнтів та розширювати свою аудиторію.
8. Участь у групах та спільнотах: LinkedIn містить велику кількість груп
та спільнот, які створені для обговорення питань у певних галузях, обміну
знаннями та досвідом. Ви можете долучатися до цих груп, обговорювати
питання, ставити запитання експертам та розвивати свої знання та навички.
9. Зв'язок зі своєю цільовою аудиторією: LinkedIn дозволяє зв'язатися зі
своєю цільовою аудиторією через налаштування таргетингу та розміщенням
контенту на вашій сторінці та в групах. Ви можете надсилати персоналізовані
повідомлення, публікувати статті та оновлення, що допомагає залучати нових
клієнтів та підтримувати відносини з існуючими.
10. Аналіз результатів: LinkedIn має вбудовані інструменти аналізу, які
дозволяють відстежувати результати вашої діяльності на платформі. Ви можете
перевіряти кількість переглядів вашого профілю та дописів, кількість лайків та

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 62


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
коментарів, а також кількість запитів на зв'язок та запитів на вакансії. Ці дані
допомагають оцінити ефективність вашої діяльності та внести зміни для
поліпшення результатів.
11. Розвиток особистого бренду: LinkedIn допомагає розвивати ваш
особистий бренд у вашій галузі. Ви можете публікувати статті, дописи та
оновлення, що дозволяє показати ваші знання та досвід у вашій галузі. Крім
того, ви можете долучатися до груп та спільнот, спілкуватися з експертами та
ставити питання, що допомагає збільшити вашу репутацію та експертність.
12. Знайомства та співпраця: LinkedIn дозволяє знаходити та зв'язуватися з
людьми у вашій галузі. Ви можете додавати нових знайомих, переглядати їх
профілі та дізнаватися про їх досвід та навички. Крім того, ви можете
використовувати LinkedIn для співпраці з іншими фахівцями у вашій галузі, що
допомагає розвивати ваш бізнес та знайти нові можливості.
13. Співпраця зі спільнотою: LinkedIn дозволяє вам співпрацювати зі
спільнотою фахівців у вашій галузі. Ви можете долучатися до груп та спільнот,
спілкуватися з експертами та ставити питання, що допомагає збільшити вашу
репутацію та експертність. Крім того, ви можете ділитися своїми знаннями та
досвідом, а також взяти участь у обговореннях, що допомагає збільшити вашу
видимість та репутацію.
14. Рекрутинг: LinkedIn є популярною платформою для рекрутингу та
пошуку вакансій. Компанії можуть використовувати LinkedIn для публікації
вакансій та пошуку кандидатів, що дозволяє знайти кваліфікованих працівників
у вашій галузі. Ви можете створити профіль, який дозволить потенційним
роботодавцям знайти вас та оцінити ваш досвід та навички.
15. Навчання та розвиток: LinkedIn Learning є платформою для онлайн-
навчання та розвитку навичок. Ви можете вибрати з більше ніж 16 тисяч курсів
з найрізноманітніших галузей, таких як бізнес, технології, творчість та багато
інших. LinkedIn Learning дозволяє вам вивчати нові навички та розвивати свій
професійний потенціал.
16. Реклама та маркетинг: LinkedIn дозволяє вам рекламувати свій бізнес
та продукти на платформі. Ви можете створювати оголошення та спонсоровані
дописи, що дозволяє залучати увагу потенційних клієнтів та розширювати свій
бізнес. Крім того, LinkedIn дозволяє вам налаштувати таргетовану рекламу, яка
буде показуватися лише цільовій аудиторії.
17. Збільшення продажів: LinkedIn може допомогти вам збільшити продажі
та знайти нових клієнтів. Ви можете використовувати LinkedIn для пошуку
потенційних клієнтів та взаємодії з ними, що допомагає розширю ти ваші
можливості та підвищує ефективність продажів.
18. Збільшення лояльності клієнтів: LinkedIn дозволяє взаємодіяти з
клієнтами та показувати їм свою експертизу та професійні навички. Це може

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 63


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
допомогти збільшити лояльність клієнтів та створити довгострокові стосунки з
ними.
Принципи створення профілю.
Основний принцип заповнення профілю LinkedIn полягає в тому, щоб
створити повну та актуальну інформацію про себе та свої професійні
досягнення. Оскільки LinkedIn є професійною мережею, ваш профіль повинен
бути налаштований таким чином, щоб він приваблював потенційних
роботодавців та клієнтів. Нижче наведено декілька порад, які допоможуть вам
створити ефективний та привабливий профіль на LinkedIn:
1. Фото профілю: Додайте фото профілю, яке відповідає вашій професії.
Фото повинне бути професійним та якісним.
2. Наддавайте інформацію на декількох мовах: на мові спілкування та
англійській.
3. Заголовок профілю: Заголовок профілю повинен відображати вашу
професійну спрямованість та те, що ви можете запропонувати потенційному
роботодавцю або клієнту. Наприклад, "Експерт з маркетингу та продажу".
4. Резюме: В резюме повинні бути вказані ваші професійні досягнення та
досвід. Намагайтеся використовувати ключові слова, щоб підвищити свою
видимість в пошуку.
5. Досвід роботи: Додайте всі ваші попередні роботи та зв'язані з ними
досягнення. Намагайтеся описати свої обов'язки та досягнення в конкретних
числах та результатів.
6. Освіта: Включіть всі свої освітні досягнення, включаючи університети,
дати та спеціалізації.
7. Волонтерство та благодійність: Якщо ви маєте досвід волонтерства або
благодійної діяльності, додайте його до свого профілю. Це дозволяє показати
ваші м'які навички та соціальну відповідальність.
8. Перевірте граматику та правопис на вашому профілі. Неправильна
граматика та правопис можуть стати причиною відхилення вас з потенційних
вакансій або зупинити взаємодію з колегами.
9. Заповніть розділ «Проекти», де ви можете зазначити успішні проекти, в
яких ви брали участь. Включіть назву проекту, опис, роль, яку ви відіграли, та
результати, досягнуті під час проекту.
10. Заповніть розділ «Медіа», де ви можете додати зображення, відео та
інші матеріали, які демонструють ваші професійні досягнення та навички.
11. Переконайтеся, що ваш профіль є повністю заповненим. Це допоможе
збільшити ваши шанси на відвідування профілю та залучення потенційних
роботодавців або клієнтів.
12. Використовуйте ключові слова, щоб допомогти потенційним
роботодавцям або клієнтам знайти ваш профіль. Розгляньте ключові слова, які

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 64


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
використовуються в оголошеннях вакансій у вашій області та включіть їх у ваш
профіль.
Завдання для виконання
1. Створіть профіль студента НТУ «Дніпровська політехніка» у мережі
LinkedIN.
2. Додати фотографію до профіля та заповнити дані на двох мовах:
українська та англійська.
3. Під час вказівки на цифрове портфоліо додати посилання до профілю у
мережі Artstation із графічними та іншими типами проектів.
4. Після заповнення профілю, надання навичок та інформацію про освіту,
досвід праці необхідно згенерувати резюме для роботодавців. Для цього
необхідно натиснути кнопку «Більше» та обрати зберігання до PDF
документу (рис. 66).

Рис. 66. Приклад заповненого профілю для утворення резюме

Рекомендація. Для автоматичного отримання більшої кількості вакансій за


профілем необхідно поширювати мережу зв’язків із спеціалістами одного
спрямування.

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 65


www.nmu.org.ua http://okmm.nmu.org.ua НТУ «ДП»
Література

1. Методичні рекомендації з використання програмних продуктів


тривимірної графіки при виконанні лабораторних робіт з дисципліни «Методи
та засоби сучасних дизайнерських рішень» для студентів усіх спеціальностей /
І.В. Вернер, Т.О. Письменкова – Дніпро: НГУ, 2018. – 59 с.
2. Методичні вказівки з використання растрової графіки при виконанні
лабораторних робіт з дисципліни «Методи та засоби дизайнерських рішень»
для студентів всіх спеціальностей / С.О. Федоряченко, І.В. Вернер, Т.О.
Письменкова – Д.: НГУ, 2016. – 52 с.
3. Методичні вказівки з використання векторної графіки у виконанні
лабораторних робот з дисципліни «Методи та засоби дизайнерських рішень»
для студентів всіх спеціальностей / Упоряд.: О.М. Твердохліб, І.В. Вернер, Т.О.
Пісьменкова – Д.: НГУ, 2015. – 46 с.
4. Методичні вказівки до виконання лабораторних робіт з дисципліни
«інформаційно-комунікаційні технології для презентації наукових робіт» для
магістрів, що навчаються на базі підготовки бакалаврів напряму 050301
«Гірництво» / С.В. Балашов, І.В. Вернер, Т.О. Письменкова – Дніпропетровськ:
НГУ, 2013. – 41 с.
5. Відео уроки до методичних вказівок з тривимірного моделювання /
Канал кафедри КТЕД [Electronic resource]. URL: https://www.youtube.com/
playlist?list=PLpggUTReWA4cRXmI12WFRyJx6vM0iPLke (Date of access:
10.12.2021).
6. Відео уроки до курсу хмарних технологій у промисловому дизайні /
Канал кафедри КТЕД [Electronic resource]. URL: https://www.youtube.com/
playlist?list=PLpggUTReWA4fd7230bHtihdXOkjbgPAzn (Date of access:
10.12.2021).

© Кафедра конструювання, технічної естетики і дизайну, НТУ «ДП», 2022 66

You might also like