Привіт друзі!
У цьому відео я покажу вам, як використання сервісів зі штучним інтелектом може зробити створення макетів вашого дизайну сайту супер простим та цікавим. Поїхали!
Якщо ви потрапили на цей канал вперше і цікавитесь всім, що пов'язано з Adobe Illustrator і Figma, підпишіться на канал і натисніть на дзвіночок, щоб не пропустити нові відео! За допомогою інструментів штучного інтелекту ви можете легко створювати чудові дизайни. Для цього необхідно лише прописати свої побажання відповідно до ваших потреб та уподобань і дозволити штучному інтелекту зробити все інше. Використання штучного інтелекту для створення макетів не тільки економить ваш час і зусилля, але також дозволяє створювати різні концепції дизайну і вносити зміни на льоту.
Отже, давайте перейдемо до практики та створимо перший екран дизайну лендінгу для вигаданого турагенства за допомогою сервісів штучного інтелекту. Знайти ці сервіси та ще багато інших корисних ресурсів для дизайнера можна на моєму сайті Gloryant, посилання буде в описі відео. На сьогодні тут знаходиться більше 100 ресурсів, які поділені на категорії та мають короткий опис. Майже всі ресурси безплатні, але звісно є і платні.
Почнемо з логотипу. Ми будемо робити перший екран hero section для вигаданої компанії Arctic Travel. Це туристична компанія, що спеціалізується на організації активного відпочинку. Компанія пропонує різноманітні варіанти місць для катання на лижах та сноубордах, включаючи популярні гірськолижні курорти по всьому світу. Для створення логотипу я скористаюся сервісом brandmark.io. Основна його фішка - це розробка логотипу та візуалізації бренду. А це якраз те, що нам зараз потрібно. Сервіс одразу показує, як створений логотип буде виглядати на візитках, графіці для соціальних мереж, іконках додатків, фірмових бланках, презентаціях, аватарах та іншому.
Натискаємо Create My Logo, вписуємо назву нашої компанії і переходимо далі. У нас з'явились ключові слова, ми можемо також додати свої або видалити непотрібні. Після цього сервіс пропонує нам вибрати тип палітри кольорів. Я виберу і зараз відбувається генерація прикладів логотипів. В налаштуваннях ви можете змінити стиль логотипу та відображення логотипів на сторінці. Я виберу режим Grid і дивимось, що придумав для нас штучний інтелект. Якщо вам сподобався якийсь з варіантів, ви можете додати його до збережених. Наприклад, мені сподобався ось цей варіант. Зберігаю і дивлюсь далі. Звісно, штучний інтелект може і не зробить ідеальний логотип, але він швидко запропонує вам багато варіантів, які можуть надихнути вас для створення насправді класного фінального результату.
Отже, я підібрала кілька непоганих варіантів і зараз виберу один з них. Мені подобається шрифт цього логотипу і палітра кольорів ось цього логотипу. Давайте відкриємо цей варіант і подивимось, як він виглядатиме на різних продуктах. Як бачимо, тут у нас є і палітра кольорів відразу. Давайте зробимо її скрін та вставимо на робочу область у Figma. Відкриваємо Figma, вставляємо робочу область, Desktop, назвемо її Arctic Travel та вставимо палітру. Далі знову повертаємось на наш сайт та давайте внесемо деякі зміни у дизайн логотипа.
Ось такий логотип в мене вийшов. І мені він підходить. Даний сервіс платний, тому якщо ви хочете отримати логотип в гарній якості та легально ним користуватися, вам потрібно заплатити. Але так як я використовую цей сайт і логотип для вигаданого проєкту і в демонстраційних цілях, то просто зроблю його скріншот і вставлю зображення на нашу робочу область. Я зроблю ще одну версію логотипу на темному фоні і також вставлю скрін цієї версії на свій робочий документ. До речі, купити логотип досить легко, потрібно тільки натиснути тут на кнопку Purchase.
Припустимо, що наш замовник хоче показати, що він спеціалізується на організації активного зимового відпочинку для любителів лиж та сноуборду. Тому на першому екрані я хотіла б розмістити картинку, яка пов'язана саме з цією темою. А допоможе мені в цьому ще один сервіс - midjourney. Це інструмент, що дозволяє за допомогою штучного інтелекту створити зображення на основі короткого опису. Чи точно збігається зображення з описом - може й не дуже, чи гарно виходить? - Однозначно. Давайте пробувати.
В будь-якій з newcomer room вводимо imagine і вибираємо із випадаючого списку prompt. Для фотографії гірськолижного курорту або гірського пейзажу я б хотіла знайти зображення приголомшливої локації, яка б сподобалась потенційним клієнтам. Наприклад, знімок засніженого гірського хребта. Тому вписую "Snowy Mountain Range". Також, я б хотіла туди додати сноубордиста в дії. Я вважаю, що це додасть зображенню динамічності та енергійності. Вписую "Snowboarder in action". І останнє моє побажання - це щоб фон зліва переходив у чорний колір, тому що потім я хочу його з'єднати з фоном сайту. "Background fades to black on the left". І чекаємо кілька секунд, поки штучний інтелект нам намалює картинку.
Ось такі варіанти мені запропонував штучний інтелект. Зі всіх варіантів мені сподобався ось цей. Під зображенням ви бачите кілька кнопок, цифри на них відповідають чотирьом варіантам зображень. Якщо ви натиснете одну з кнопок U ряду, це зображення буде збільшене до більшого масштабу і стане більш чіткою версією. А якщо натиснути одну з V-кнопок, то штучний інтелект створить абсолютно нові, але подібні варіанти до того зображення, що ви вибрали. Я створюю ще кілька варіантів, подібних до варіанту три.
І ось, що у мене вийшло. Я вибираю перший варіант, копіюю його і вставляю на робочу область. Поряд з зображенням я розміщу headline, який би спонукав відвідувачів сайту запланувати свою зимову подорож, плюс коротенький опис і кнопку. Щоб самій не вигадувати headline та опис, як ви вже здогадались, я попрошу ще один сервіс зробити це за мене. Chat-GPT - це штучний інтелект генеративного типу, який здатний створювати нову інформацію. Він здатний розуміти людську мову, вибудовувати зі співрозмовником діалог, відповідати на складні запитання, сперечатися і відхиляти недоречні запитання.
Отже, пишу "create headline for planning winter trip (5 options)". Я отримала такі 5 варіантів. Додам уточнення - "with word 'plan'", і ще одне - "Five Words". Більше всього мені подобається 5-й варіант. Напишу боту, нехай створить опис до цього хедлайну. І супер! Копіюю все це на робочу область.
Тепер потрібно все гарненько розмістити на сторінці, підрівняти, підібрати шрифти та кольори.
Якщо ви хотіли б, щоб я детальніше розповіла про якийсь з сервісів, якими ми сьогодні користувалися, обов’язково напишіть про це в коментарях. Якщо таких коментарів буде багато, я з задоволенням зроблю ще одне відео, де ми поговоримо про вибраний вами сервіс та, можливо, ще декілька інших.
А на цьому все! Сподіваюсь, що вам сподобалось! Буду вдячна за ваші коментарі, лайки і підписки на канал. З вами була Адолька, до зустрічі!