Дизайн сайта в Midjourney
Всем привет, на связи NB.
В этой статье мы обсудим использование нейронных сетей (в частности midjourney) в дизайне веб-сайтов. Хотя создание сайтов исключительно с помощью искусственного интеллекта на данный невозможно (об этом есть отдельное видео у меня на канале), он все же может послужить нам хорошим источником вдохновения и ориентиром для наших реальных проектов.
Я продемонстрирую несколько интересных конструкций запросов (промтов) для создания «картинок сайтов». (Давайте договоримся, что я буду называть то, что выдает нейронка — «картинки сайтов».) А также разберемся как можно настроить и оптимизировать их для достижения желаемого вами результата. Я лично всё отобрал, протестировал и теперь делюсь этим с вами.
Итак, есть пара удачных конструкций для картинок сайтов, которые я сам для себя подобрал, протестировал и сегодня поделюсь с вами.
1ый запрос.
Он состоит из следующей конструкции:
— professional website
+ for (описываем тематику)
+ ui, ux, ui/ux, website, landing page (постоянные переменные)
+ colors + style (можем добавить опционально, в зависимости от задачи)
Примеры запросов:
professional website for online education, ui, ux, ui/ux, website, landing page, dark colors, vector illustration
professional website for a tour to Thailand, ui, ux, ui/ux, website, landing page, watercolor illustration
professional website for crypto coin, ui, ux, ui/ux, website, landing page, dark gold and neon colors
professional website for youtube bloggers, ui, ux, ui/ux, website, landing page, 3d cartoon illustration
professional website for Real Estate, ui, ux, ui/ux, website, landing page, light colors
professional website for fitness trainer, ui, ux, ui/ux, website, landing page, violet and red colors
Примеры, как могут выглядеть «картинки сайтов» с этой конструкцией:
Всем привет, на связи NB.
В этой статье мы обсудим использование нейронных сетей (в частности midjourney) в дизайне веб-сайтов. Хотя создание сайтов исключительно с помощью искусственного интеллекта на данный невозможно (об этом есть отдельное видео у меня на канале), он все же может послужить нам хорошим источником вдохновения и ориентиром для наших реальных проектов.
Я продемонстрирую несколько интересных конструкций запросов (промтов) для создания «картинок сайтов». (Давайте договоримся, что я буду называть то, что выдает нейронка — «картинки сайтов».) А также разберемся как можно настроить и оптимизировать их для достижения желаемого вами результата. Я лично всё отобрал, протестировал и теперь делюсь этим с вами.
- Стоит сказать, что я не претендую на роль супер эксперта и гуру в этом вопросе, просто делюсь тем, на что сам потратил много часов.
Итак, есть пара удачных конструкций для картинок сайтов, которые я сам для себя подобрал, протестировал и сегодня поделюсь с вами.
1ый запрос.
Он состоит из следующей конструкции:
— professional website
+ for (описываем тематику)
+ ui, ux, ui/ux, website, landing page (постоянные переменные)
+ colors + style (можем добавить опционально, в зависимости от задачи)
Примеры запросов:
professional website for online education, ui, ux, ui/ux, website, landing page, dark colors, vector illustration
professional website for a tour to Thailand, ui, ux, ui/ux, website, landing page, watercolor illustration
professional website for crypto coin, ui, ux, ui/ux, website, landing page, dark gold and neon colors
professional website for youtube bloggers, ui, ux, ui/ux, website, landing page, 3d cartoon illustration
professional website for Real Estate, ui, ux, ui/ux, website, landing page, light colors
professional website for fitness trainer, ui, ux, ui/ux, website, landing page, violet and red colors
Примеры, как могут выглядеть «картинки сайтов» с этой конструкцией:
2ой запрос основан на весах в запросах:
— Website for (описываем тематику)::5
+ Professional Website UI Design::4
+ user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3
+ colors, style::3 (опционально)
+ deformed, outdated, cluttered layout, low-quality graphics, mockup::-2 (минусовые веса)
Примеры запросов:
Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Website for a tour of Thailand::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 watercolor illustration::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Website for crypto coin::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 dark gold and neon color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Примеры «картинок сайтов» в этой конструкции:
— Website for (описываем тематику)::5
+ Professional Website UI Design::4
+ user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3
+ colors, style::3 (опционально)
+ deformed, outdated, cluttered layout, low-quality graphics, mockup::-2 (минусовые веса)
Примеры запросов:
Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Website for a tour of Thailand::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 watercolor illustration::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Website for crypto coin::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 dark gold and neon color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Примеры «картинок сайтов» в этой конструкции:
Как управлять запросом
Давайте посмотрим, как будет выглядеть эта конструкция, если мы будем добавлять там разные цвета, стилистику и прочие детали. Будем брать за основу этот запрос:
professional website for online education, ui, ux, ui/ux, website, landing page --seed 5228701
--seed 5228701 — Зерно нам нужно для того, чтобы было удобно отслеживать результат.
Давайте посмотрим, как будет выглядеть эта конструкция, если мы будем добавлять там разные цвета, стилистику и прочие детали. Будем брать за основу этот запрос:
professional website for online education, ui, ux, ui/ux, website, landing page --seed 5228701
--seed 5228701 — Зерно нам нужно для того, чтобы было удобно отслеживать результат.
Чем именно мы можем управлять?
Цвета:
Общее описание цвета:
Цвета:
Общее описание цвета:
- Dark colors (темные цвета)
- Light colors (светлые цвета)
- Bright colors (яркие цвета)
- Black-white (черно-белое)
- Colorful (цветное)
Пример:
Dark
Ligth
Bright
Black-white
Colorful
Конкретные цвета, например:
- Pink (Розовый)
- Blue (Синий)
- Violet (Фиолетовый)
- Red (Красный)
- Green (Зелёный)
- и тп.
Примеры:
Pink
Blue
Violet
Red
Green
В том числе работают и необычные цвета или даже материалы:
- Peach (Персиковый)
- Indigo (Индиго)
- Jade (Джейд)
- Salmon (Лолосевый)
- Wooden (Деревянный)
- Metalic (Металический)
- Golden (Золотой)
- и тп.
Примеры:
Peach
Indigo
Jade
Salmon
Wooden
Metal
Пример таблички английских цветов:
Можно несколько цветов писать в запросе. Можно писать gradient (градиент).
Указать конкретный цвет через решетку — к сожалению, не получается.
Light Blue and yellow
Green gradients
Dark and orange
(4 цвета) Pink black yellow and blue colors
Pink and blue gradients
Стили иллюстраций для сайта:
- Vector illustration
- Flat illustration
- Outline illustration
- Lineart illustration
- Watercolor illustration
- Isometric illustration
- Cartoon
- 3d
- Abstract art
- Photo realistic
- и тп. и опять же стили можно смешивать!
Примеры:
Vector
Flat
Outline
Lineart
Watercolor
Isometric
3d
Abstract art
Cartoon
Photo realistic
Watercolor Isometric
Прочие подсказки, которые могут добавить детали:
- Dashboard
- Infographic
- Ecommerce
- Online-store
- Minimalism
- Interface
- Social network
- и тп. и конечно можно всё смешивать со всем)
Примеры:
Dashboard
Infographic
Ecommerce
Online-store
Minimalism
interface
Social network
Dashboard, infographic, interface
Dashboard, infographic, interface -landing page
(тут убран сайт из запроса) social network for online education, ui, ux, ui/ux
Ну и конечно мы можете добавлять прочие слова, описывающие сайт. Указывать какие-то предметы, например:
- Books
- Cat
- Flowers
- Girl with the phone
- и тп.
- Но не стоит указывать много предметов, нейросеть неспособна, к сожалению, отображать кучу разных предметов под ваш запрос.
Примеры:
books, dark colors, watercolor Isometric
Black cat, pink colors, 3d catoon
Flowers, olive colors, Outline Vector
Flowers and laptop, olive colors, Outline Vector
Girl with the phone, dark and ultramarine colors, Flat
books cat girl and flower
books, laptop, cat, girl, flower, flat illustration
Все это можно делать и под второй запрос, тот что с весами.
Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
На мой взгляд запрос с весом работает, как не странно, хуже. Не смотря на то, что c весами можно контролировать присутствие того или иного запроса, сама работа получается не такой, как я ожидаю. Но в любом случае, это может быть любопытно в качестве рефа и поиска вдохновения.
Тут конечно можно контролировать степень стиля и убирать какие-то детали.
Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
На мой взгляд запрос с весом работает, как не странно, хуже. Не смотря на то, что c весами можно контролировать присутствие того или иного запроса, сама работа получается не такой, как я ожидаю. Но в любом случае, это может быть любопытно в качестве рефа и поиска вдохновения.
Тут конечно можно контролировать степень стиля и убирать какие-то детали.
Примеры:
Без деталей
pink flat3
pink watercolor1
pink watercolor3, laptop, books
pink watercolor3
pink watercolor5
pink
pink watercolor5 laptop,book3 mockup-2
pink watercolor5 laptop,book3 mockup-4
pink watercolor5 laptop,book4 mockup-4 people-3
pink watercolor5 laptop,book4 mockup-4 people-4
pink watercolor5 laptop,book4 mockup-4
Но все это конечно просто референс.
Чтобы из этого получился сайт нужно уже в фигме, фотошопе перерисовать. Отсюда можно взять картинку, но она не качественная. (Размер маленький)
В целом можно и отдельно генерировать картинки, иллюстрации для сайта. Об этом обязательно расскажу в одном из следующих видео) в том числе, как увеличить их качество.
А на этом всё, увидимся очень скоро. Пока пока.
Чтобы из этого получился сайт нужно уже в фигме, фотошопе перерисовать. Отсюда можно взять картинку, но она не качественная. (Размер маленький)
В целом можно и отдельно генерировать картинки, иллюстрации для сайта. Об этом обязательно расскажу в одном из следующих видео) в том числе, как увеличить их качество.
А на этом всё, увидимся очень скоро. Пока пока.
Спасибо за просмотр ❤︎
Подписывайтесь на мои соцсети
Подписывайтесь на мои соцсети
